WordPress Block Editor – Gallery Block

This tutorial is part of our series on How To Use The WordPress Block Editor (Gutenberg).

• To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
• To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
• For additional information, see these tutorials:
  • How To Use The WordPress Media Library
  • How To Add An Image Gallery In WordPress

***

Gallery Block – Description

The Gallery block lets you easily add and display multiple images on your posts and pages using an image gallery.

How To Use The Gallery Block

In this section, we’ll cover:

• How to add a Gallery block to your content.
• How to edit and configure your Gallery block and block settings.
• How to remove the Gallery block from your content.

For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.

Adding A Gallery Block

To add a Gallery block:

• Either:
  • Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Gallery block (in Most Used or Media section),
  • Add the Gallery block in the Content Area.
• Drag or upload new images, or select images from the Media Library
• Use the tools in the Gallery Block Editor or Block Settings section to edit, format, or customize your Gallery.

Let’s go through the above steps.

First, create a new post or page or open an existing post or page and either:

Click on the Add Block tool and select a Gallery block…

Or, select a Gallery block using the Inserter tool in the Content Area.

Either of the above methods will insert a gallery block into your content.

The Gallery block includes the following options for adding images to your content:

• Upload – select this option to upload new images from your media storage device.
• Media Library – choose this option to select images you’ve already uploaded to your site’s Media Library.

After adding a Gallery block to your content, you can add images to create a gallery:

• Using drag and drop. (Upload tool)
• Using the web browser uploader. (Upload tool)
• From your media library.

Add Images To A Gallery Block Using Drag & Drop

To add images to your Gallery block using drag and drop:

• Make sure you have the ‘images’ or media files folder open on your media storage device (you may have to resize your browser to view your post and your media folder).
• Select an image or multiple images from your media folder and drag it to the Gallery block upload tool.
• Repeat this process until you have uploaded all images to your gallery.
• Your images will also be automatically uploaded to your media library.

Add Images To A Gallery Block Using Your Web Browser Uploader

To add images to your Gallery Block using your web browser uploader:

• Make sure you know where your media files folder is located.
• Hover over the Gallery Block and click the ‘Upload’ button to open your web browser’s image uploader window.
• Select an image (or select multiple images) from your media folder and click the ‘Open’ button to import the image(s) to your gallery.
• Repeat this process to continue adding new images.
• Your images will be automatically uploaded to your media library, imported into the Gallery Block, and added to your gallery.

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Gallery block (Step 1).

This will bring up the upload window on your browser. Select images from your media folder (Step 2) and click on ‘Open’ to import these into your gallery (Step 3).

Repeat this process to continue uploading additional images to your Gallery block from other locations (if required).

Add Images To A Gallery Block From Your Media Library

To add images to a Gallery block from your media library, do the following:

• Make sure that your images have been uploaded to your media library (if you need help with this step, see our tutorial on How To Use The WordPress Media Library.)
• Click on the ‘Media Library’ button in your Gallery block.
• Select the images you want to add to your gallery from the Media Library.
• After images have been selected:
  • Drag and drop images to reorder their position (optional),
  • Click ‘Add to Gallery’ to add more images (if required),
  • Click on ‘Insert gallery’,
• Your images will be added to the Gallery block.
• Update or publish your post or page to save your changes and update your content.

Let’s go through the above steps:

In the Gallery block, click on the ‘Media Library’ button.

Select images from the media library (or upload these from your ‘images’ folder) and click on ‘Create a new gallery’.

After selecting all the images you’d like to add to your gallery, drag and drop to reorder the images (optional), and click on ‘Insert gallery’.

The images you have selected will be added to your gallery.

Update and publish your post or page to save your settings.

After adding an image gallery, you can edit and configure its block settings.

How To Edit Your Gallery Block

You can edit the Gallery block and edit the images inside your Gallery.

To edit your Gallery block and gallery images, click inside the Gallery block to bring up the Block Editor tools, then perform one of the following tasks:

• Change gallery alignment – Change the alignment of the gallery on your post or page.
• Reorder images in the gallery – Move your images to the left or right of the other images.
• Gallery image captions – Edit and format gallery image captions (e.g. style your caption with bold, italics, strikethrough, add a hyperlink, etc.).
• Replace gallery image – Replace an image with another image.
• Remove gallery image – Delete images from your gallery.
• Edit Gallery block settings – The Gallery block contains additional settings you can edit, such as the number of columns, image size, etc.

Let’s go through each of the above.

Select the gallery block and click on the Change Alignment tool to change the alignment of your gallery.

To reorder the position of images in your gallery, select the Gallery block, click on an image, and click on the left and right arrows to move the image to its desired location.

To caption images in your gallery, click on the Gallery block, click on an image, then add, edit, or format the image caption.

To replace an image in your gallery with another image, click on the Gallery block, select an image, and click on the Replace Image tool.

You can replace an existing image by uploading a new image, selecting an uploaded image from your Media Library, or inserting the URL of an image stored in another location.

How To Remove Images From The Gallery Block

To remove an image from your gallery:

• Select the Gallery block,
• Click on the image you want to remove from your gallery,
• Click on the ‘Remove Image’ button (X)
• The image will be removed from your gallery.
• Repeat this process to remove additional images from your gallery.

Edit Gallery Block Settings

In addition to the above, you can also adjust various settings in your Gallery block, including:

• Columns – Use the slider or the value field to set the number of columns for your gallery (7 columns maximum).
• Crop Images (on/off) – 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. Enabling this option crops thumbnail images to ensure they are neatly aligned in your gallery.
• Link to – You can link images in your gallery to the media file, an attachment page, or leave images unlinked.
• Image Size – Select a default size for your gallery images (thumbnail, medium, large, full size.)

Remember to update and publish your post or page to save your settings.

How To Remove A Gallery Block

To delete or remove a Gallery block from your content:

• Click inside the Gallery block to select it.
• Select the ‘More Options’ tool in the Block Editor.
• Click on ‘Remove block’.
• This will remove the Gallery block from your content.

Additionally…

• You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (if you need help with this step, see our tutorial on How To Use Blocks).
• You can also convert a Gallery block into a Reusable block.

Gallery Block Tools, Options & Settings

The Gallery block includes tools, options, and settings for:

• Gallery Block Editor
• Gallery Block Settings

Gallery Block Editor

The Gallery Block Editor includes tools that let you perform the following operations:

• Change Block Type (See ‘Gallery Block – Additional Info’ section below.)
• Drag & Drop Tool
• Move Up and Down Tool
• Align Gallery
  • Align left
  • Align center
  • Align right
  • Wide width – A wide-aligned block sticks out on either side of normal content.
  • Full width – This stretches the block area to cover the entire width of the browser window (normal content remains within margins on either side).
• More Options – See How To Use Blocks to learn how to use this section.
• Image Tools
  • Move Image
    • Left – Move image backward
    • Right – Move image forward
  • Replace Image
  • Remove Image
• Image Caption Tools
  • Add and edit text
  • Formatting tools:
    • Bold
    • Italic
    • Hyperlink
    • More Rich Text Controls – See How To Use Blocks to learn how to use this section.
• Edit Gallery
  • Opens the gallery inside your Media Library where you can perform additional image gallery editing functions, such as:
    • Add/edit/remove images from your gallery
    • Add/edit the alternative text (alt-text) of images
    • Add/edit image titles
    • Add/edit image captions
    • Crop, scale or rotate the image (if you need help, see our tutorial on How To Edit Images In WordPress).

Gallery Block Settings

Gallery block settings include:

• Block description area
• Gallery Settings
  • Columns
    • Columns slider (slide to increase or decrease the number of columns)
    • Columns counter (click or type to increase or decrease the number of columns
  • Crop Images
    • On – Thumbnails are cropped to align
    • Off – Thumbnails are displayed in their original aspect ratio
  • Link To
    • None – This makes images unclickable, so they don’t link to anything (i.e. clicking on images does nothing.)
    • Media File – Clicking on gallery images sends visitors to the location on your server where the image has been uploaded to.
    • Attachment Page – This is an informational page about your image that includes the image, the caption, the image description, and a comment field.
  • Image Size
    • Thumbnail
    • Medium
    • Large
    • Full Size
• Advanced Settings
  • HTML Anchor – Create a unique web address to send users directly to the block using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
  • Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).

Gallery Block – Additional Info

You can convert a Gallery block into the following block types:

• Columns block
• Group block
• Image block
• Reusable block

Notes:

Changing a Gallery block into an Image block places each image from your gallery into a separate Image block.

Additionally:

Installing plugins or themes on your site may also add new functionality, options, or settings to a Gallery block.

Congratulations! Now you know how to use the WordPress content editor’s Gallery block.

To learn how to use other blocks, go here: WordPress Block Editor – How To Use Blocks

***

Updated: July 5th, 2024