A Guide to Gutenberg Image Block
Arrival of Gutenberg has introduced us to a new era of WordPress editing. Unlike Classic WordPress editor, Gutenberg comes with a library of ready-made elements, otherwise known as blocks. These new elements will ease your way through customizing WordPress posts and make it a more user-friendly experience. In this guide, we will do an overview of Gutenberg Image Block and all that you can do with it.
In a nutshell, Gutenberg Image Block lets you add an image anywhere you want on your page or post. If you click on a plus button in your editor, a new field will open. Here you can access Image option.
In Gutenberg, there are three different ways to add pictures. You can upload an image from your computer, choose an already existing image from your Media Library, or insert it from URL.
At first glance, image block contains the same options as classic editor’s Add media button. However, upon closer inspection, it is evident that this is only partly true. There are some new useful options that come with Gutenberg that will further ease your picture editing experience.
First one is an addition of small, blue dots on your image. Thanks to these dots, you can stretch the picture and increase and decrease its size in any way you prefer. Another new option is possibility of writing caption at the bottom of the image.
You can find all the basic settings right above the Image Block. On the other hand, more advanced image settings are located in the Block tab. These include Alt Text, Image size, Link Settings and Advanced.
- Alt Text – here you can add a short description of your image. However, you can leave this field blank if your image isn’t a core element of your content.
- Image size – there are possibilities of changing your image size to default sizes, such as Thumbnail, Medium, Large and Full Size. Another alternative is to add exact image dimensions in pixels, or determine desired size in percentage related to the original size. If you make any mistakes, you can always click on the Reset button.
- Link settings – here, you have four different options: None, Attachment page, Media File and custom url. None option lets you display the image without a link, while Attachment page links to a specific page on your site that has a purpose of providing information about the image in question. As for Media File, it opens the image by itself. The last option allows you to add a custom url for your image.
- Advanced – in this field you can add an additional CSS class and write your own custom styles.
Additional image bar options include image alignment (align it to the left, right or center) and Change block type. Choosing this option gives you an ability to transform your block to another compatible block with a single mouse click. For instance, you can change your block type to gallery, media&text, cover and file.
If you want to edit your image in the same way as you did in the classic WordPress editor, you can easily do so by clicking on the pencil icon to open the image in WordPress media library.
Conclusion
This covers a general outline of Image Block in Gutenberg and its options. Even if all these new features make it difficult for you to get around, by following this guide you will realize that, in fact, it’s not that complicated. We hope you have fun with your image editing!
We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!
