A quick guide to Gutenberg image blocks

With the introduction of Gutenberg, the content editing process has changed considerably. Instead of a simple add media button, we now have 4 different blocks for inserting and manipulating images at our disposal. Each one of them has a specific purpose. The goal of this article is to show you how to use these blocks in the right way to make the best out of them. So without further ado, let’s jump right into it!

A quick guide to image blocks in Gutenberg

Important note! This article requires a basic understanding of WordPress Gutenberg. If you are not familiar with Gutenberg, here is a list of previous posts that will help you get the grasp of it.

Related articles:

How to add images

In Gutenberg, all images are blocks. To add an image block, click on “Add block”, a plus icon located in the top left of the editor viewport. Select one of the image blocks and you’ll see these options for inserting images appear:

  1. Upload – upload an image from your computer
  2. Media library – insert an image from the media library
  3. Insert from URL – enter the URL of an image that’s located somewhere else on the web, only available with the basic image block (see 1).
WordPress Gutenberg Image Block - different options to insert an image.
Different options to insert an image in the WordPress Gutenberg editor.

There are 4 different types of image blocks you can use:

1. Image block

This is the most common way of adding images recommended for when you need to insert a single image within our content. You can find this block under Common Blocks > Image.

How to insert an image block in the WordPress Gutenberg editor.
How to add an Image Block in the WordPress Gutenberg editor.

Once you add an image, you will see the image settings appear in the right sidebar under the “Block” tab. If you can’t see the sidebar, turn it on by clicking the gear icon in the top right corner of the viewport. You should be familiar with these settings from the old editor. You can tweak them to change the image alt text, size, and link.

The advanced option lets you add a custom CSS class which you can use to style an element, in this case, an image block, in a specific way. Read more about CSS classes here.

When you click in the image block area, you will see two handles appear – blue dots on the left and bottom of the inserted image – to assist you with resizing. Underneath the image there is an area reserved to enter a caption.

WordPress Gutenberg Image Block - how to change the image settings in the sidebar.
Change settings for the Image Block in the WordPress Gutenberg editor.

2. Gallery block

Sometimes you will need to insert multiple images to create a gallery. In this case, gallery block is your best option. It lets you add a set of images and equip each one with a caption. You can find it under Common Blocks > Gallery.

The gallery block has two basic settings. First, you can change the number of columns which is going to affect how the images are laid out. Second, you can change the image crop settings. If you select the crop option, your images will take up the whole width of the column but will be cropped so they fit in nicely. If the crop option is deselected, the whole images will be displayed, without any cropping.

WordPress Gutenberg Gallery Block - how to change the gallery settings in the sidebar.
Change settings for the Gallery Block in the WordPress Gutenberg editor.

3. Media & Text block

This block is used specifically to position an image beside the text. It is found under Layout elements > Media & Text.

A typical use case for the Media & Text block would be when you need a small image positioned before a heading or paragraph. You can switch the position of the image to the left or right. To make this layout responsive you can also select the option to “Stack on mobile” which will make your image and text stack vertically on smaller devices.

4. Cover block

Cover block allows publishers to create appealing content headers and banners, without any coding. It is found under Common blocks > Cover.

Using and styling a cover block is very simple. First, you add a background image from the media library or local computer. A text area appears in the middle of the image. When you click on it, an area to edit the cover text appears. You can also align the text to the left, center or right, format it and add links to it.

Second, you style the overlay of the background image. The styling settings are in the sidebar. You can change background color and opacity of the overlay to create a nice visual effect. You can also create a simple parallax by selecting the “Fixed Background” option.

Style a content header or banner by using the Cover Block in the WordPress Gutenberg editor.
Style a content header or banner by using the Cover Block.

Do you find the new image blocks useful? Which one do you like best? Let us know in the comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *