Working with Images in Gutenberg

One of the cool features of the new Gutenberg editor is that it allows you to search for available block options (and there are a lot of them!). To find all image block options, click the add block icon and type images in the search bar. From there, you will see all of the image block options.

1. Image Block

The most obvious option is the image block. Once you click on the image block, you can either upload an image from your computer or from the WordPress media library.

Once you upload your image you will see it in the block. You have the option to write a caption directly in the content area, including options with formatting and adding links.

Add a caption to your image.

You can also choose left, centre, right alignment, or wide or fullscreen for the image. The wide width and full screen format is dependent on theme support.

The wide and fullwidth image option.

Once your image is uploaded in the block, you can find more Advanced Settings by clicking on the settings icon at the top right corner. Here you can add Alt text, choose image size, change image dimensions, and/ors link settings.

2. Gallery Block

To add images for the gallery block, you can use the same steps as you did to add an image, simply by adding more than one image. You can choose multiple images at once. There’s a summary at the bottom showing selected images, if you hit clear then it deselects all of them.

If you want to deselect just one image, you click on the check mark icon on the image selected. Once you have all of your photos selected, click ‘create gallery’ and then ‘insert gallery’.

Now your gallery will be in your post content. You can write captions for each image directly in the editor, the image captions in the gallery show up directly over the image at the bottom.

You can edit the styling or the caption and add a link just as you can in the image block. For the gallery block you can also have wide width and full screen mode.

Gallery Block Settings:

If you go to the settings, you’ll have some more options. If you change the columns for your gallery, depending on the number of images included, the last photo will stretch to full width. For example, if you have 3 images, and you choose 2 columns, then you will have the third image stretched out into full width.

You can also crop the images so they are the same height.

3. Cover Image

A cover image is an image with text on it. It’s mostly useful as a full screen or widescreen at the top of the page/post or as a divider for longer posts.

Once you edit your image, you can choose the widescreen or full screen and add the cover image text. It will show the dark overlay so you can write caption over image. It’s a good feature to build pages in Gutenberg.

Cover Block Settings:

You can adjust the opacity of the background image. For the fixed background option, if activated then the image is fixed to the bottom or top of the page.

4. Image Embed Blocks

There are a couple of embed blocks where you can embed your content from your social media websites. At the moment you can use Instagram and Flickr available but more will likely be added soon. As an example, we will use Instagram.

Add your Instagram URL and it will add the image Instagram style (with likes, comment, Instagram border).

copy and paste the URL of the Instagram image you want to include.

For now, it’s not possible to include the whole feed. In the future, there will most likely be a lot of plugins to include different options (e.g. an Instagram feed or multiple Instagram posts).

Feedback and Questions

The new Gutenberg editor makes it simple to add images and image options to your posts and pages. We hope you find this post helpful and we are keen to hear your helpful hints for images and Gutenberg in general. Feel free to comment :)

6 comments on “Working with Images in Gutenberg

  1. Thank you for your clear and helpful introduction to working with images in Gutenberg, Bethany. Now that WordPress 5 is live, I’ve been trying to get the images on my website how I want them and I’ve come across an issue I’m hoping you might be able to help me with.

    I want the captions to my images to be in black and aligned left. Since updating to WordPress 5 I’ve discovered they will be in grey and centred if I use the block editor. I’ve struggled for most of this afternoon trying to find a way of making these very basic changes but so far I’ve drawn a blank. I can’t believe this is not possible and I’d love some advice.

    • Hi Philip,
      I’m so sorry for our late reply. I jump in for Bethany here :) You would need to change the CSS styles for captions either of your theme or overwrite the default Gutenberg editor styles.

      The following custom CSS (you can add this via the Customizer) should help:

      .wp-block-image figcaption {
      color: #555d66;
      text-align: left;
      }
      

      Best, Ellen

  2. I have tried to insert an Instagram post in Guterberg 5.0 and I keep getting an error message saying it cannot be embedded Do you know of a work around? I read that there may be a conflict with Jetpack, but I am not sure why that would be the case. Thanks!

    • Hi Jeanni,
      I’m sorry for my late reply. Could it be that the image is from a private account? This could be the issue. Could you let me know what the error message exactly says or is it just a general error message?
      Best, Ellen

  3. Previously I included a long thin image for optimal Pinterest pinning. Now when I insert one in Gutenberg and float it right or “alignright” it looks right in the editor but in my theme it does not flow around the headings and paragraphs below. I tried adding additional CSS rules to the theme for wp-block-image and figure.alignright as previously my rule was for img.alignright but it is not behaving in the preview. I really am preferring the classic editor.

  4. This is very helpful, thank you for posting. My current frustration is being able to allow for images to be opened in a separate tab. In other words, have the image be “clickable” (my in-artful term). You can do this in the old classic editor, but I haven’t seen how you can do it in Gutenberg. I’m grateful if you might now how. Thanks!

Leave a Reply to Jeanni Cancel reply

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