Proper image and text alignment in Gutenberg contribute to design compositional flow, which is essential for better storytelling and readability. In this post, we are looking at three different ways to align images and text in the WordPress block editor, but if you are looking for a quick answer to how to wrap text around images in Gutenberg WordPress, here it is:
Add text wrapping around images in Gutenberg by adding the Image block with the Paragraph block underneath, then select left or right image alignment:
It’ll provide automatic image positioning relative to the text.
Remember that the text and image flow will be relative to the chosen website container width (it’s flexible in Gutenberg – you can use both wide-width and full-width content alignment if your WordPress theme supports them).
You can align text in different ways in Gutenberg:
You might also ask: how to justify text in Gutenberg? So far, the default functionality doesn’t support full-text justification (it was so in the old Classic Editor, by the way) since it may influence readability in a negative way.
As for images, it’s the same set of alignment options, plus the full or wide-width content alignment.
You can align images in relation to the text in the following ways.
Adding images inline
This works best for such blocks as Paragraph, List, Group, and Quote. After adding the needed block, click on the arrow icon to insert the image inline (it’s added to the place where your cursor is). Let’s try the List block:
If you try this approach for Paragraph, however, it’s not going to work that properly, even though you can set the image size:
Moreover, it doesn’t provide extensive customization capabilities so you’ll most likely be very limited in options and would want to proceed to the next method.
Adding the Image and Paragraph blocks one by one
Gutenberg is smart enough to wrap your text around an image when you simply add the corresponding blocks one by one (1. image 2. paragraph) and then set the needed image alignment.
If you want to skip a centered image and pair images with text (image on the left or the right), just choose the needed alignment option from the block panel settings:
To change the size of the image, you can either drag its borders…
…or select the predefined size from the block customization panel on the right:
Using the Media & Text Gutenberg block
The Media & Text Gutenberg block will help you put an image and text side by side:
It’s quite a good-looking block with a great number of controls. It won’t, however, wrap the text around image in WordPress as you’d expect – these are two different columns so the text container will stay fixed:
Gutenberg-friendly themes are always a better way to go, but you should be fine to perform this task in any WordPress theme.
With the third-party Gutenberg addons like Getwid, you can also go further and create fancier shapes and backgrounds for your text and media content with the Section block:
Conclusion: How to Wrap Text Around Images in Gutenberg WordPress
You can choose any suitable way to wrap text around images in Gutenberg, and do even more with the right blocks! The most important thing is that you can easily perform this task without extra plugins.
Proper image and text alignment in Gutenberg will contribute to the overall readability of your website – feel free to play around with them to serve your readers better. So what is your preferred way to align images with text in the Gutenberg WordPress editor?