These are the standard blocks which deal with images:-
- cover 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).
Images can also easily be positioned to the left, right or centre, as in the classic editor.
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.
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.
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/