Gallery Block

Go back to the list of Blocks

The gallery block allows you to easily add multiple photos and automatically arrange them attractively. You can control the number of columns and the size of the images. A toggle switch allows for automatic cropping so all the images line up evenly.

In this video, you can see how you can use the gallery block and the different settings to modify how your image is displayed.

Steps to add a Gallery Block with images to your post or page:

  1. To add a gallery block, use the Add Block button, or you can type /gallery and press enter.

Detailed instructions on adding blocks can be found here.

Similar to the Image Block, there is an Add Media panel

  1. Adding Images

When you add a gallery block, you’re given two options, Upload and Media Library.

Upload allows you to upload a new image or multiple images to the gallery block and your media library. While Media Library lets you select from previously uploaded images in your Media Library. You can also drag & drop multiple images at the same time from your explorer or finder window into the gallery block.

Once you’ve uploaded your images or have chosen them from your Media Library, you can caption each image.

Gallery block with images and captions

Using the Gallery Block features

Once the gallery block is now in preview mode in your editor, you can control the caption for each image, and re-order of images directly in the block.

Update the caption. You can format them in bold or italics and add links.

Use the arrow icons to change the order of the images and use the
[x] symbol to remove an image from the Gallery.

Block Toolbar Block Toolbar

The Gallery Block Toolbar has three buttons.

  • Transform to / Change Block Type
  • Change Alignment
  • More Options.

Transform to:

You can transform a Gallery block in two different ways.

Group

You can convert it to a Group block. This would give you the ability to change the background color around the Gallery block.

Image

If you find that a gallery display of your images is not the right fit, you can change the block types to Image block with the Transform button.

Then every image from your gallery will be added as a single image block in your post.

This might be feasible if you need to have each image to hold its own link, or if the size of the gallery image isn’t perfect, and you would rather display it in full width.

Change Alignment

  • Align left – Make the block align-center
  • Align center – Make the block alignment centered
  • Align right – Make the block align-right
  • Wide width – Increase the width of the block beyond the content size
  • Full width – Extend the block to cover the full width of the screen.

“Wide width” and “Full width” alignment need to be enabled by the Theme of your site.

More Options:

Hide Block Settings

The Hide Block Settings option hides (or shows) the Block Setting panel in the editor’s sidebar.

Copy

Copy can be used to copy a selected block and then you can paste it wherever you want in the editor.

Duplicate

Duplicate can be used to duplicate selected block.

Insert Before

Insert a new block before the selected block(s).

Insert After

Insert a new block after the selected block(s).

Move To

If you select Move To, you will get a blue line inside your content, you can then use the arrows to move that line up and down to where you want the selected content to be moved into, hitting return on your keyboard at that point moves the block to that position.

Edit as HTML

The Edit as HTML option allows you to modify the HTML code of the embed block.

Add to Reusable blocks

Using the Add to Reusable blocks option lets you add the selected block to a list of reusable blocks, so you can use them on other posts or pages as well.

Group

Select the Group option if you want to create a group of blocks and treat them as a unit. You can for instance add a common background color or other blocks to the group.

Remove Block

With the Remove Block option, you can delete the selected block from your content.

Top ↑

Block Settings Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

Columns

You can choose how many columns your gallery block will have. You can select between 1 column and 8 columns.

You can only select as many columns as you have images, so if you add 4 images, you’ll be given the option for a maximum of 4 columns. This number will increase as you add more images until you reach the maximum of 8.

Your images will automatically arrange themselves to look good no matter how many columns you select. Try changing the setting and see what you like best!

Crop Images

You can select whether or not you’d like your images to be cropped in your gallery block. This option is useful if you have images of varying sizes and shapes. Cropping them will make the images in each row of the gallery the same size. Try it each way and see which setting looks better.

Link to

You have 3 options for linking the images in your gallery: Attachment Page, Media File, and None. This determines what happens when your visitors click on the images in your gallery.

Attachment Page

This will lead anyone who clicks on your image to your site’s attachment page. This is an informational page about your image, which includes the image, the caption, the image description, and a comment field.

Media File

When a visitor clicks on the image, the image file will be displayed in the original size in a new browser window.

None

This makes your images unclickable, so they don’t link to anything at all.

Image Sizes

The Image Size setting allows you to select from Thumbnail, Medium, Large and Full Size.

  • Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
  • Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
  • Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
  • Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

Note: For these images sizes to apply your Theme needs to support those choices.

Advanced

The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.

The “Advanced” tab lets you add HTML anchor and CSS class(es) to your block.

“HTML anchor” allows you to make a unique web address for a particular “Gallery” block. Then, you’ll be able to link directly to a “Gallery” block of your page.

The “Additional CSS class(es)” lets you add CSS class(es) to your block, allowing you to write custom CSS and style the block as you see fit.

Changelog

  • Updated 2020-10-05
    • Updated the video
  • Updated 2020-09-14
    • Updated 5.5 screenshots
    • Updated Block toolbar new features
    • Updated Block settings new features
  • Updated 2020-06-18
    • Added ‘Link back to blocks’ to the top of the page
  • Updated 2020-04-24
    • Added Drag & Drop multiple images to the Gallery block
    • Added video to change background color as group block
    • Added updated UI displays for WordPress 5.4
    • Added “More Options” to the Block Toolbar section and updated the existing once to fit other block descriptions.
    • Reorganized the post into 3 sections: How to add gallery and images, Block Toolbar and Block Settings.
    • Converted all reusable blocks to regular blocks.
  • Created 2019-03-07