Image Block — Overview & How to Use Guide
Worth a thousand words.
Image Block sDescription
Image Block is another most important block in the Gutenberg WordPress Editor. Images are an important part of any content. So let’s see what this block can do and how to use it.
Video Walkthrough of Image Block
How to add Image Block?
Like any other block there a couple of ways you can add an Image Block in Gutenberg Editor.
- Click on the (+) icon and search for “Image” and click it.
- Simply hit “Enter” key at the end of content and you will get a new paragraph block automatically added. Then you need to type “/” you will see an autocomplete menu with the list of available blocks. Just type image and you will notice the image block. Hit enter or click on the image block.
Add Image Directly without adding image block first.
Gutenberg WordPress Editor allows you to simply drag and drop an image from your computer or from the web directly. And the editor will automatically convert it to an image block. This feature is super neat and will improve your writing flow in Gutenberg WordPress Editor.
Image Block Toolbar Controls
Image Block Toolbar is divided into three parts. Let’s understand what all these controls can do. This toolbar appears on top of the block while you are editing it.
Transform Option
Transform control allows you to change/transform your block to another compatible block by just a click.
Image block can be transformed into gallery block. But as a gallery may not be a single image, you will need to select multiple images (image blocks) and then you can convert them to a gallery.
Alignment Options
These options allow you to simply align your image to left, center or right. Nothing complicated here you must be already familiar with these options in classic WordPress editor.
Other Options
There are two more options/controls you see on the image block toolbar. One is to edit/change the image and another one is to link the image.
Image Block Inspector/Sidebar Controls
Image Block sidebar controls contain a very few options currently.
Textual Alternative: This is simply a text box option where you can provide an “Alt” text for your image.
Size: This is a drop-down option where you can choose the desired image size. You will see all available image sizes in the drop down. Depending on the theme and plugins you are using you may see different sizes on different installations.
Text Color: Similar to Background color panel, you will see the color palette here as well. Select a Color here for your text.
Additional CSS Class: Here you can add a custom CSS class to this block. This option is available for almost all blocks in Gutenberg.
How to resize
image in Gutenberg WordPress Editor?
Gutenberg default image block has a nice control to resize images. You do not see image size option in block toolbar or sidebar toolbar. You need to click and drag one of the four blue dots on the image while you are editing it.
Originally published at Gutenberg Hub.
