WordPress Tutorial: Working with Gallery Blocks

Need to familiarise yourself with the new “Block” style Galleries in WordPress? We’ve prepared this quick guide to help our customers get comfortable with this new way to add images to the WordPress sites.

This tutorial assumes you already know the basics of editing a WordPress page. If you’re not yet familiar with the Blocks editor, you may find it easier to start with our Creating & Editing Pages tutorial. Otherwise, read on for an overview of how to work with the new Gallery block.

This tutorial deals with the Blocks editor, which is different to the Classic editor that shipped with WordPress prior to version 5. If you’re working with an older WordPress version (or using the “Classic Editor” plugin), please see our tutorial on Working with Galleries (Classic Editor).

Gallery Basics

In WordPress, a Gallery is different from simply placing multiple images on a page. It’s also not just a general term for a page that displays lots of images. It’s a specific Block, used to display a related group of images in a standardised layout.

Because a gallery is a block, you can place galleries amongst other content as you please. You can also place more than one gallery on a page, which is useful if you want to separate your images into groups. However, if you just want to add more images without creating a new grouping, you should edit an existing gallery rather than creating a new one.

In this tutorial, we’re going to look at how to create a new gallery, and how to edit an existing gallery to add or remove images. We will use our previous knowledge of the Blocks editor interface and the Media Library, particularly what we learned in the Working with Attachments tutorial.

Create a new gallery

To begin, we need to add a new empty Gallery Block. We’ll click the “Add Block” button and select “Gallery” from the “Common Blocks” group.

Adding a Gallery Block through the "Add Block" button
Adding a new Gallery Block

WordPress adds a new, empty Gallery Block to our page. At the moment it looks very much like an Image Block, which we worked with in earlier tutorials.

As with our Image Blocks, we’re going to choose our images via the Media Library. We will click the “Media Library” button to open our media library popup.

A new, empty in the WordPress Blocks editor
A new, empty in the WordPress Blocks editor

Selecting Gallery Items

Selecting items is a lot like when we made an Image Block, but with one major difference: now we are selecting a group of images. Before, we could only click on one image. This time, we will click on each image we want to include.

Each image we select displays tick mark in the top right corner. They also appear in a list at the bottom of the window.

Selecting gallery items from the Media Library
Selecting gallery items from the Media Library

Note: If you haven’t already uploaded your images, you can also do that now. This uses the same process we covered in the Working with Attachments tutorial.

If we decide we don’t want one of our selected images, we can also deselect an image during this step. When we hover the mouse cursor over the tick mark of an image, we see it turn into a minus sign instead. If we click the minus sign, we will deselect the image.

Removing an item from our gallery selection
Removing an item from our gallery selection

Once we are satisfied with our selection, we click the “Create a new gallery” button in the bottom right corner of the window.

Confirming our selection of gallery items
Confirming our selection of gallery items

The popup now shows only the contents we have selected for our gallery. They appear in the same order we selected them, regardless of their order in the Media Gallery.

Our selected gallery items, ready to set up
Our selected gallery items, ready to set up

Attachment Details and Ordering

On this screen, we can select an image to see its Attachment Details, like when we we worked with Image and File Blocks earlier. Likewise, it would be a good idea to add alt text and captions now, to any items which don’t already have them

Selecting a gallery item to edit details
Selecting a gallery item to edit details

If we want to change the order of our gallery items, we can also do that on this screen. By clicking and holding on a thumbnail, we can drag it from its current position to some other position we want.

Dragging a gallery item to reposition it
Dragging a gallery item to reposition it

Finally, when we are happy with the details and order of our gallery items, we are ready to insert it into the block. In the bottom right corner of the window, we click the “Insert gallery” button.

Creating our new gallery
Creating our new gallery

The completed gallery block now appears in the Blocks editor. This preview should be very close to how the gallery will appear on the front end, so we can now use it to fine-tune the presentation of our gallery.

Our completed gallery in the blocks editing interfac
Our completed gallery in the blocks editing interface

Gallery Display Options

Like when we worked with Image blocks, we have some further options for customising the style of our gallery. These options appear in the the “Block” panel on the right-hand sidebar while the Gallery block is selected.

Note: If you don’t see Gallery settings, you may need to select the “Block” tab at the top of the sidebar, instead of the “Document” tab. If you don’t see the right-hand sidebar at all, click the gear icon at the top right to restore it.

Columns

Firstly, we can adjust the “Columns” slider (or use the up/down buttons) to choose how many images a gallery displays per row. Our images instantly scale and adjust according to the number we choose.

Changing the number of gallery items per column
Changing the number of gallery items per row

If the Columns setting doesn’t divide evenly into our total number of images, the final row of our gallery will typically be scaled to fill the whole row anyway. (This might change, depending on your theme.)

Cropping

Secondly, we can choose whether WordPress will crop our images to fit the gallery settings we have chosen. Cropping ensures that the gallery images display in a uniform grid; each item is scaled to suit the “Columns” setting, then cropped so the entire row has the same height. If we turn it off, the images will still be scaled, but will retain their original aspect (width to height) ratio.

Turning off cropping in the gallery settings
Turning off cropping in the gallery settings

Cropping is on by default, and usually we will want to leave it that way. However, sometimes we might have a reason to disable it (for example, if our images are already a uniform size).

Media Link

We can also decide what should happen when a visitor clicks on a gallery image. If we click in the “Link To” drop-down box, we can choose whether clicking a gallery image should open the full-size image, go to the attachment page (not recommended), or do nothing.

By default, the gallery has no link assigned. However, visitors typically expect to open the full-size image when they click on a thumbnail. Let’s select “Media File” to make sure that happens. (The image will show in a lightbox popup, if you are using an IT Wollongong theme).

Setting up links in the gallery settings
Setting up links in the gallery settings

Alignment options

Finally, we can also set a width or alignment value for our gallery, like we did when we worked with Image Blocks. Note that this affects the gallery block as a single item; the individual thumbnails within the gallery are aligned/scaled automatically.

Changing the gallery width/alignment setting
Changing the gallery width/alignment setting

Edit an existing gallery

(Including adding, updating and removing items)

Now we have our gallery in place and ready to publish. But what if we need to make changes at a later date? Let’s look at different ways we might need to update an existing Gallery block.

Add/Change/Remove a caption

Sometimes we add an image to a gallery without first giving it a caption. Or, perhaps we would rather have no caption for this particular gallery. We might also decide that we don’t want to use the caption imported from the Media Library, and would rather pick a custom caption for a given image.

To change the caption for a gallery image, we begin by clicking on the image to select it. A blue border appears around the image to show that it’s active. If the image has no caption, some placeholder text will also appear in the caption area.

Selecting an image in our gallery block
Selecting an image in our gallery block

If we click in this caption area, a text cursor appears, along with some basic text controls.

Ready to type a new caption for our chosen gallery image
Ready to type a new caption for our chosen gallery image

Now, it’s simply a matter of typing the text we want for our new caption. (Or deleting the text that’s here, if we want no caption.)

Typing a new caption for a gallery item
Typing a new caption for a gallery item

Remove an item from a gallery

To remove an image from our gallery, we begin by selecting the unwanted item. When the blue border appears to show that the item is selected, we can see there is also an ✖ button in the top right corner of the thumbnail.

Then, we simply click the ✖ button to remove the item. (The image will remain available in the Media Library.)

Removing an image from our gallery block
Removing an image from our gallery block

After we remove an image, the remaining images automatically scale and reposition according to the new item count.

The thumbnails automatically adjust after removing an item
The remaining thumbnails automatically adjust after removing an item

Add new items to a Gallery

To add more images to our gallery, we will return to the Media Library. From the Gallery block toolbar, we click on “Edit gallery” button (pencil icon).

Locating the "Edit Gallery" button
Locating the “Edit Gallery” button

This returns us to the window we used earlier, to provide attachment details and re-order our items. (We can also change those values while we are here, if we need to.)

The Edit Gallery interface
Back to the Edit Gallery interface

Next, we click on the “Add to Gallery” link in the left-hand panel of the window.

Adding new items to our gallery
Adding new items to our gallery

This will bring up the main Media Library window, like when we created our gallery. However, instead of seeing all media items, now we can only see items which are not currently in the gallery.

Like before, we will select the items we want to add to our gallery, and WordPress will mark them with a tick. (Like before, we can also upload new images at this stage if we want.)

Selecting additional images from the Media Library
Selecting additional images from the Media Library

Once we have selected all the images we want to add, we click the “Add to gallery” button in the bottom right corner.

Confirming our selection of additional images
Confirming our selection of additional images

This returns us to the previous view. We can now see the images we just added to the gallery now appear at the end of our list. Like before, we can provide attachment details here, and we can remove an image from the gallery by clicking the ✖ mark on its thumbnail.

Once we are satisfied with our changes, we click the “Update gallery” button in the bottom right corner.

Confirming our updated gallery
Confirming our updated gallery

Finally, we return to the Blocks editor and check that our new additions now appear in our Gallery block.

Our updated WordPress gallery block
Our updated WordPress gallery block

Enjoy working with galleries!

We have now learned the required skills to work with WordPress Gallery Blocks. As you can see, creating beautiful WordPress galleries is relatively simple, even with only the core editing tools.

We hope you’ll enjoy going on to create heaps of your own WordPress content! And don’t forget, if you need help from the professionals, we are only a phone call away.