Gutenberg Blocks – Images

These are the standard blocks which deal with images:-

  • 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 know 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.

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

The Cover Image block has a very specific purpose.  It allows you to to add a hero header section to a page or post, with an optional title sitting over the background image.

I’ll examine that in a separate post.  More information about cover image can be found here http://gutenberghub.com/cover-image-block-overview-how-to-use-guide/

Gutenberg Blocks – Text and Formatting

Let’s take a look at each of the standard blocks provided with Gutenberg.  First, the more typical blocks which deal with text and formatting:- paragraph heading list quote pullquote preformatted verse button Paragraph The default block is a standard paragraph block, for normal text.  Styling of content is, in general, controlled by the theme, but there […]

Writing with Gutenberg

This is a first step into using the new Gutenberg editor.  I am typing this content directly into the WordPress page and I will do any formatting here and see how straightforward or confusing it turns out to be. Headings It turns out that headings, paragraphs, etc are all separate blocks. While typing, when I […]

X Theme is not for me – an independent review

Am I alone in hating the X theme?  There’s a lot of hype about it, it seems to be “the designer’s dream theme” of 2016. The sales pages are great and it looks like you can create wonders with it in just a couple of hours. And maybe you can…. if you have the energy to […]