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.
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.
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.
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.
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.
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.
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.
Media and text lets you layout your image next to some text. Here is an example using the fill width setting.
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:
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.
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.
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.
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.
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".