Gallery Block – Overview & How to Use Guide

Image galleries are a great way to share groups of pictures on your site.

Description

Like images, galleries are also an important part of content. So let&;s see what this gallery block can do and how to use it.

Video Walkthrough of Gallery Block


How to add Gallery Block?

Like any other block there a couple of ways you can add a Gallery Block in Editor.

  1. Click on the (+) icon and search for "Gallery" and click it.
  2. Simply hit "Enter" key at the end of content and you will get a new paragraph block automatically added. Then you need to type "/" you will see an autocomplete menu with the list of available blocks. Just type gallery and you will notice the gallery block. Hit enter or click on the gallery block. 

Add Images Gallery Directly without adding gallery block first.

allows you to simply drag and drop multiple images from your computer or from the web directly. And the editor will automatically convert them to gallery block. This feature is super neat and will improve your writing flow in Gutenberg WordPress Editor.

Gallery Block Toolbar Controls

Gallery Block Toolbar is divided into three parts. Let&x27;s understand what all these controls can do. This toolbar appears on top of the block while you are editing it.

Transform Option

Transform control allows you to change/transform your block to another compatible block by just a click.

Gallery block can be transformed into individual image blocks. If you click on transform to image option, all the images will be ungrouped into individual images/image blocks.

Alignment Options

These options allow you to simply align your gallery to left, center or right. Nothing complicated here you must be already familiar with these options in classic WordPress editor.

Other Options

There is one more option/control you see on the gallery block toolbar. That is to edit the gallery. You can change images or re-order theme from the edit gallery popup.


Gallery Block Inspector/Sidebar Controls

Gallery Block sidebar controls contain a very few options currently.

Columns: This is a range slider control and you can drag it to adjust the number image per row you wish to display. You can set up to eight columns gallery block. 

Crop Images: If enabled, will make the images in each row equal height simply. So you can turn this on if you see the different height of images in your gallery. 

Link to: You can set the images to link to "media file" or "attachment page". It&x27;s set to "none" by default.

Additional CSS Class: Here you can add a custom CSS class to this block. This option is available for almost all blocks in Gutenberg.

How to remove images from gallery or re-order them in Gutenberg WordPress Editor?

In Gutenberg WordPress Editor, you can remove the images from a gallery by simply clicking on an image and then click on the small (x) icon appears on the top-right corner. 

And to re-order images in the gallery you need to edit the gallery via the edit icon from the block toolbar. And from the popup, you need to first click on the "Create new gallery" blue button again, and then you may re-order images and insert them back.

Gutenberg Editor is right now in the development phase. This block may receive more updates and changes in future. This guide will be updated when any updates related to this block comes out.


Also published on Medium.