Gallery Block

The Gallery Block lets you display multiple images in a rich gallery …

WordPress Gutenberg Blocks – Gallery

WordPress Gutenberg - Gallery Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Gallery Block Description

The Gallery Block lets you display multiple images in a rich gallery …

Add Galleries to WordPress using the Gallery Block

(Add Galleries to WordPress using the Gallery Block)

How To Use The Gallery Block

To add a Gallery Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Gallery’ block (in Most Used or Common Blocks section), or
    • 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 …

'Add Block' Tool - Add Gallery Block

(‘Add Block’ Tool – Add Gallery Block)

Or, select a Gallery Block in the Content Area

Add a Gallery Block from the Content Area

(Add a Gallery Block from the Content Area)

After adding a Gallery Block, you can add images to create a gallery:

  • Using drag and drop.
  • Using the web browser uploader.
  • 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 your ‘images’ or media files folder open (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 onto the active (shaded) gallery upload tool.
  • Repeat this process until all images have been uploaded to your gallery.
  • Your images will also be automatically uploaded to your media library.

Drag Images To Gallery Block

(Drag Images To Gallery Block)

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 your cursor 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 …

Upload Media button

(Upload Media button)

This will bring up the ‘Upload Media’ window on your browser. Select images from your media files folder and click on ‘Open’ to import these into your gallery …

Upload an image to the Gallery Block

(Upload an image to the Gallery Block)

Click on ‘Upload an image’ to add more images …

Upload additional images to your Gallery Block

(Upload additional images to your Gallery Block)

Repeat this process to continue uploading images to your Gallery Block using the browser upload window until all images have been uploaded.

Add Images To A Gallery Block From Your Media Library

To add images to a Gallery Block from your media library:

  • Make sure that your images have been uploaded to your media library (if you need help with this step, see our How To Use The WordPress Media Library tutorial.)
  • Hover your cursor over the Gallery Block and click on the ‘Media Library’ button.
  • Select images 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:

Hover your cursor over the Gallery Block and click on the ‘Media Library’ button …

Media Library upload button

(Media Library upload button)

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

Select images from your Media Library

(Select images from your Media Library)

After all images have been selected, click and drag images to reorder these (optional) and click on ‘Insert gallery’ …

Select images and click 'Insert Gallery'

(Select images and click ‘Insert Gallery’)

The selected images will be added to your gallery …

Image Gallery

(Image 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 itself and the images in the Gallery Block.

To Edit Your Gallery Block:
  • Click inside the Gallery Block to bring up the Block Editor tools:
    • Gallery alignment tools – Use these tools to change the alignment of the gallery on your post/page
    • Gallery width tools – Use these tools to change the width of the gallery on your post/page.
    • Edit Gallery tool – Use this tool to edit the gallery inside your Media Library.

Click Image Block to edit

(Click Image Block to edit)

To Edit Your Gallery Block Images:
  • Click inside the Gallery Block to:
    • Caption your images (and style your caption with bold, italics, strikethrough, or add a hyperlink).
    • Delete/remove images from your gallery.

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

How To Remove Images From The Gallery Block

To remove images from the Gallery Block:

  • Click inside the Gallery Block to select it,
  • Hover over the image(s) you want to remove from your gallery,
  • Click on the ‘Remove Image’ button
  • The image(s) will be removed from your gallery.
  • Update or Publish your post/page to save and update your settings.

Remove images from Gallery Block

(Remove images from Gallery Block)

How To Remove A Gallery Block

To delete or remove a gallery block:

  • Click inside the Gallery Block to select it.
  • Select the ‘More Options’ tool in the Block Editor.
  • Click on ‘Remove Block’.
  • The block will be removed from your post or page.

Remove a Gallery Block

(Remove a Gallery Block)

Additionally …

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

Gallery Block Tools, Options & Settings

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

  • Gallery Block Editor
  • Gallery Block Settings

Gallery Block Editor

Gallery Block Editor

(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.)
  • Align Gallery
    • Align left
    • Align center
    • Align right
  • Gallery Width
    • Wide width
    • Full width
  • 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 (see our How To Edit Images In WordPress tutorial if you need help.)
      • Select another image
  • More Options

Gallery Block Editor

(Gallery Block Editor)

Gallery Block Settings

Gallery Block Settings

(Gallery Block Settings)

Gallery Block settings include:

  • Block description area
  • Gallery Settings
    • Columns
      • Columns slider (slide to increase/decrease number of columns)
      • Columns counter (click or type to increase/decrease number of columns
    • Crop Images
      • On – Thumbnails are cropped to align
      • Off – Thumbnails are displayed in their original aspect ratio
    • Link To
      • None (clicking on images does nothing.)
      • Media File (clicking on gallery images sends visitor to the location on your server where the image has been uploaded to.)
      • Attachment Page (clicking on gallery image sends visitor to an’ attachment’ page created by WordPress to display the item).
  • Advanced Settings
    • Additional CSS Class

Gallery Block Settings

(Gallery Block Settings)

Gallery Block – Additional Info

The Gallery Block can be converted into the following block types:

Change Block Type - Gallery Block

(Change Block Type – Gallery Block)

Info

Notes:

  • Changing a Gallery Block into an Image Block turns each gallery item into a separate Image block.

Change Gallery Block into other block types

(Change a Gallery Block into other block types)

Additionally:

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

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Gallery Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Author: Martin Aranovitch

Martin Aranovitch is the owner of WPCompendium.org and the author of The WordPress User Manual. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Gallery Block.