| WordPress

How to Add Image Blocks in the WordPress Gutenberg Editor

In a previous blog post, we explained that the new Gutenberg editor has moved many key text features into blocks. The same is true with images in Gutenberg.

In the old WordPress editor, you could click "Add media" and use many image and media features from that pop-up screen. That has all changed with Gutenberg.

In this tutorial, I'll walk you through the options for handling images in Gutenberg.


Getting started with images in Gutenberg

There are at least five different ways you can add images to your content with the default Gutenberg blocks. There are four image blocks, called Image, Gallery, Cover and File. There's also a combined block called Media & Text.

4 types gutenberg image blocks


Option #1. The Image block in Gutenberg

To add a basic image to your WordPress content, click on the + icon and choose the "Image" block.

upload image in the gutenberg editor

Now you can either upload an image, select one from your Media Library, or insert from an URL. This is very similar to the image upload process in the old WordPress editor.

options for uploading images in the gutenberg editor

The toolbar in the top-right corner of the image block allows you to align the image. The blue dots on the edge of the image let you resize the image.

toolbar for images in the gutenberg editor

If you chose not to indent the image, you can decide how wide the image should be: "Wide" or "Full Width". Wide will make it a little wider than your text blocks, while full width will set it to extend across your screen. These settings may be influenced by your theme.

An extra handy feature lets you easily add an image directly from your computer without selecting a block. Simply place your mouse cursor where you want the image to go and open a folder with your images, then drag the image you have chosen onto the page or post.

Drag to upload images in the gutenberg editor

The image settings on the right let you adjust the image size to a specific pixel width or height or percentage. Here you can also write a ALT text, create a link, or add your own CSS class.

Updating options for images in the gutenberg editor


Option #2. The Media & Text block Gutenberg

We've just seen the most straightforward image block in Gutenberg. This block can be converted into several different formats: Media & Text, Gallery, Cover, and File. You can see these options by clicking the "left and right" arrows" in the block toolbar.

Changing block type for images in the gutenberg editor

Media and text lets you layout your image next to some text. Here is an example using the fill width setting.

Full width images in the gutenberg editor

On the right-hand settings bar, you chose to stack this image and its related text on mobile devices, add a background color or an extra CSS class. Using a background color can help you create a highlight area in your page, making a visual break. Here is a preview:

Text ahd media images in the gutenberg editor


Option #3. Using the Gallery block in Gutenberg

The gallery option prompts you to upload other images and presents a simple gallery. The settings on the right-hand side allows you to decide how many columns to use, and whether to crop the images automatically. This is a very quick and powerful way to add a gallery.

Gallery images in the gutenberg editor


Option #4. Using the Cover Block in Gutenberg

The Cover block offers a great way to visually enhance your page. This blocks allows you add a title or description on top of an image.

Cover images in the gutenberg editor

The block toolbar, above it, lets you determine the size and positioning of the image and its accompanying text, but the right-hand column provides some creative controls.

You can select an overlay color and decide on its opacity. And you can also choose to make the background image fixed, creating an interesting scrolling effect. It is well worth experimenting with these settings as they can provide some wonderful effects with great ease. The advanced tab allows you to set a CSS class.

Text over images in the gutenberg editor


Option #5. Using the File block in Gutenberg

The file option for image blocks may be useful if you want to allow people to easily download your image files. If you use the File block, your image will be automatically turned into a download link. Your visitors won't be able see the image, but they will be able to download the image file.

File images in the gutenberg editor


The video introduction to Gutenberg

WordPress 5 is here with a brand new editor called Gutenberg that changes the way posts and pages are created and edited. This video is your complete guide to Gutenberg! Thanks to our friends at Glowhost for making this video possible: Save 60% on your first invoice when you host your WordPress site with GlowHost. Click here and use the coupon "WPGUTENBURG".


About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.