Images can make your website feel alive, in this modern era of the internet, a website needs images more than simple text to Conway your message correctly and represent a brand more accurately. Images have changed the way how we used to design our web pages and we are using more and more images through our website.
Proper use of images can really improve your design but for many beginners, images and image blocks can be a tricky thing to use in Gutenberg Block Editor, even the proper way of aligning them can be confusing. In this article, we are going to learn all about images and how to properly use them in Gutenberg Block Editor.
Table of Contents
WordPress Images
The previous classic editor was very limited and mostly only useful if you want to write text-based content for modern designs you can’t use the old editor but new Gutenberg has changed everything and now there are tons of more possibilities what you can do with images on your website.
Previously you can only add images into your post and at the very most you can resize them or align them to the left, right, or center and in many cases, even these alignments options don’t work in the way we want. In the latest, Gutenberg Block Editor WordPress has addressed these alignments issues let’s take a look at how we can use them.
Gutenberg Image Blocks
In the new Gutenberg Block Editor, WordPress has introduced 5 different types of images block that you can use in your post or page.
- Image Block
- Inline Image Block
- Gallery Block
- Media & Text Block
- Cover Block
So let’s take a look at how to use all these blocks one by one and let’s start with the simple image block first.
How to Use Image Block
To add an image or image block in the new Block Editor simply just click on the plus icon or type “/image” and select the image from the list. Then either choose to upload a new image, add an image from the gallery or add an image from a URL.
One neat little thing about the Gutenberg Block Editor is you can simply drag and drop an image from your laptop or PC to block editor and it will automatically add that image in your media library on the post or page you are adding that image to. Trust me, in the long run, it can save you a lot of time.
Now let’s look at what controls we have for our image block and how to use them.
We have several different controls available for an image block:
Toolbar Controls
- Alignment
- Link
- Crop
- Text over image
- Duotone
- Replace
Sidebar Controls
- Image Style
- Image Settings
- Advance
How to Set Image Alignment in Gutenberg 
The alignment control will let you set alignment for your image, you can choose between five different types of alignment for your image: left, center, right, wide, and full. The center will be the default option and I am sure you are already familiar with left, right, and center alignments. So now let’s look at what wide and full do.
As you can see in the image above wide will expand your image on the page with some margin in left and right like an image in a container.
As you can see in the image above when you set the image to full width it will cover the entire page edge to edge.
How to Link Image in Gutenberg
The next option is to link the image to any URL, just click on the URL button and add the URL. Now if someone clicks on the image he/she will be redirected to that link.
How to Crop Image in Gutenberg
Previously with the tiny editor image cropping option is not very useful because when you crop an image you need to go in the media editor and you can’t really see how the cropped image will look on the page or post. With the new Block Editor, you can crop images right on your page and see the changes in real-time how the content will look.
Just click on the crop image button to go to crop mode, there you have three new options zoom, aspect ratio, and rotate. One issue I found with the crop is you can’t really free crop an image you can only choose the aspect ratio shown in the image above.
Text Over Image
The text over image option actually converts your image block into the cover block and we have shared the details about it in the article below so let’s move to the next part.
How to use Duotone in Gutenberg
Duotone is one of the coolest new features in Gutenberg Block Editor, it lets you set a duotone image on your image basically with you can set your image shadows and highlights in whatever color you want. You can set duotone from the given options or you can use custom colors for it.
How to Replace Image in Gutenberg
The next option is to replace the image, you can click on the replace button and upload any image or choose an image from the gallery to replace your current image in the block editor.
How to Change Image Style in Gutenberg
From the right sidebar, you can change the style for your block, currently, there are only two options either Default whatever your image has or rounded. One bad thing is you can change the roundness it if you resize it, it will become a circle.
Image Settings in Gutenberg
In the image settings, you can set alt text for your image, change the size in pre-defined presets, and set a custom size.
Advance Image Block Settings
In the advance section, you can set the title for your image, add an HTML anchor, and add custom classes.
How to use Inline Image in Gutenberg
Another very useful image control Gutenberg has added is inline images, with this method you can add images between your text, for example, see the above image of how we have added our logo between the text. We can add an inline image in any text block like heading, paragraph, or quote.
To add an inline image in text click on the little down arrow in the toolbar highlighted in the image above and select inline-image it will open your media library to choose an image to choose the image you want.
You can also resize the image if it is too big just click on the inline image and a small popup box will open type the size you want and hit enter and the image will be resized.
How to use Gallery Block in Gutenberg
Gallery block will create a collage-like gallery with multiple images. Just like the image block, you can add a gallery block in the block editor by editing the plus button typing “/gallery”. The drag and drop works with gallery too if you choose multiple images and drag and drop it in the Block Editor the editor will automatically create a gallery block and add those images in the gallery and that gallery on the page.
In the top toolbar, you only get the option to set the alignment for the gallery as shown in the image above, however, when you click on any individual image of the gallery you’ll see some more options.
You can move the image with the arrows, replace the image with the pencil button and remove the image with the X button.
In the right sidebar, you get the Gallery Settings option where you can set how many columns you want in your gallery, you can choose if you want to crop the images or not, where you wanna link those images, and what image size do you want.
The advanced controls are typical advance block control HTML anchors and custom CSS classes.
How to use Media and Text Block in Gutenberg
You can add Media and Text block in your post or page using block editor just like any block. This block adds an image and text side by side with exact same height.
In the top toolbar, you get the option to change the width of this block to wide or full, then the vertical alignment of text, then buttons to choose the position of the image and text, after that option to add a link to the block, and at last option to replace the image just like image block.
In the right sidebar, you get to control to change the text and background color for the text, checkbox to select if you want the media and to be stacked on top of each other in mobile devices, checkbox to crop the image to fill the column to the text size, alt text for the image, image size option and media width option.
P.S. You can also select other media like video or gif in the media part of the block, and change the text in any type of text like heading or quote for this block.
How to use Cover Block in Gutenberg
Another image block in the block editor is the cover block, the cover block lets you add text on top of your image and will add semi-transparent color on the image for better visibility.
In the top toolbar of this block, you’ll get controls to change the alignment of the cover block left, center, right, wide, and full.
You also get an option to choose the position of the cover text as shown in the image above, you cannot select any position but a lot of predefined positions are available.
Then a toggle button to make the cove take the full width of the image and duotone which we already learned above.
In the right sidebar, we get media settings where we can toggle if we want the image to be fixed to the page so while scrolling the image won’t change its position. Then a toggle to make the background-repeat, useful when you wanna use any pattern as background. After that option to choose the image focal point, the focal point ensures that no matter what the screen size is the image focal point always gets visibility priority over other parts of images.
After the media settings in the sidebar, we get dimensions where we can set the max height for our cover image. After the overlay to where we can change the overlay color of our cover image and also the option to change the opacity of the overlay. Advanced controls are the same as before.
Conclusion
Images are the backbone of web design these and if you use them correctly you can create stunning-looking designs. After reading this article I am sure you have got the ideas of how you can take full leverage of these images provided by the Gutenberg Block Editor and you’ll create some very amazing stunning web designs.
We have covered every single image block provided by WordPress and now you can use all of them very comfortably. If you face any issues while following this article or have any doubts questions or suggestions make sure to comment down below.