Gutenberg Blocks – Images

These are the standard blocks which deal with images:-

  • image
  • inline image
  • gallery
  • cover image

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, image size and other settings can be chosen from the block options.

An image can be inserted at any of the standard media sizes, or modified in size in a number of ways.  Changing size by %ge is easy, changing by exact pixel dimensions appears to be offered but does not seem to work well at present.

Text alternative for an image (often known as “alt text”) can be easily entered in the block options – filling this in is good for accessibility and also for search engines.  However it is not automatically filled in (unlike the classic WP editor, which does provide default “alt text” when adding an image).

Thumbnail

Medium Size

Large Size

Images can also easily be positioned to the left, right or centre, as in the classic editor.

Inline Image

There is another image block, which allows you to insert an image directly within text, like this.   That is the purpose of the Inline Image block. To add in 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 add block icon in the top left 
  • choose or upload your image
  • it will be inserte at the cursor location
  • drag the boundaries to resize as desired 

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 thumbnails
  • link thumbnail to image, attachment page or nothing 

We can choose cropped thumbnails

Or uncropped thumbnails

The gallery is added into the page as an unordered list (in classic WP editor it is a dl list).  The gallery list has class
wp-block-gallery (with additional class is-cropped, if applicable)
and the individual list items have class blocks-gallery-item

Styling is done using flexbox settings.

Thumbnail 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 Gutenberg styling.

Cover Image

Very simply, the Cover Image block allows you to add an image with text sitting in front of it, like this (where the word “Enlightenment” is not part of the image but has been typed directly into the block):-

Enlightenment

The opacity setting on the image allows you to make the image darker so that the text is clearer to read.

As the name suggests, the Cover Image block is most likely to be used as a hero header section for a page or post. For best effect, some of its settings require explicit support within your WordPress theme.  For a more detailed explanation, read this post on Gutenberg Blocks – Cover Image.

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