previously published as “Gutenberg Blocks – Images”

These are the main blocks in the Block Editor which handle images:-

• image
• inline image
• gallery
• cover image
• media and text

Image

Choosing an Image block allows images to be added from your computer or from the media library (ie already uploaded to WordPress), just as in the classic WordPress editor. After uploading/choosing the image, alt text, image size and other settings can be chosen in the block settings sidebar.

Alt Text for the image (text describing the image) is important for accessibility and also valuable for search engine optimisation.  Alt Text is not automatically added for an image block (unlike the classic WP editor). So it is important to enter this in the block settings when adding an image.

Image Captions can be added easily by clicking on the “Add Caption” icon in the block controls bar above the image block. This opens up the Caption area, where you can type your caption, with handy formatting options, such as bold, italic and links.

Uploading the image and adding Alt Text may be all you need to do.

See this detailed description of the Image Block for other image settings which provide additional control over the appearance of the image.

Inline Image

It is also possible to insert an image directly within paragraph text, like this . 

To add an inline image, follow these steps:-

• add a standard text block eg paragraph and type in your content
• position your cursor where you want the inline block to appear
• click on the More dropdown in the top right of the block toolbar
• choose or upload your image
• it will be inserted at the cursor location
• resize as desired by changing the image width

Gallery

The Gallery block type is initially very similar to the single Image block type, but allows several images to be uploaded or chosen rather than just one.

Gallery block options include:-

• number of columns (from 1 to 3, which seems rather limited. It may be possible to override this with CSS styling)
• cropped or uncropped images
• link image to full size image, attachment page or nothing 

We can choose cropped images

Or uncropped images

The gallery is added into the page as a set of image blocks (in classic WP editor it is a list). Each image block is a figure.  The gallery element (also a figure) has class wp-block-gallery (with additional class is-cropped, if applicable, and columns-x where x is 1, 2 or 3) and the individual figures have class wp-block image. 

Styling is done using flexbox settings.

Gallery image sizing

When the number of images is not a neat multiple of the number of gallery columns, thumbnails are expanded to fill the width. This is the default Block Editor styling.

Cover Image

The Cover Image block allows you to add an image with text sitting in front of it. In this example, the word “Enlightenment” is not part of the image but has been typed directly into the block:-

An overlay is automatically added to a cover image block, to provide a level of opacity (shading) on the image, so that the text is clearer to read. The opacity setting allows you to adjust the opacity to your satisfaction.

Here is this image without any overlay.

The Cover Image block can be good as a hero header section for a page or post.  For a more detailed explanation, read this post on Block Editor – Cover Image.

Additional information about cover images, and how they can be used, can be found here https://gutenberghub.com/cover-image-block-overview-how-to-use-guide/

Media and Text Block

You can choose to have the image on the left or the right, and content can be vertically centred or sit at the top (or bottom).

The entire block has a class of wp-block-media-text, with interior blocks, wp-block-media-text__media and wp-block-media-text__content.

On mobile, the Media and Text block rearranges to show the image at the top and the content beneath (regardless of whether or not the image was positioned on the left or the right).

More Information

For more detail about images and the block editor, see Block Editor – Image Block and Block Editor – Cover Images.

For our introduction to the block editor, see Beginning with the Block Editor and also Page Layout with the Block Editor.