wrap gutenberg image

How to Wrap Text Around Images in Gutenberg

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:

text wrapping over image wordpress gutenberg

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:

  • Left-aligned
  • Right-aligned
  • Centered

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:

inline image gutenberg editor

If you try this approach for Paragraph, however, it’s not going to work that properly, even though you can set the image size:

paragraph block inline gutenerg

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.

wrap text around images in gutenberg wordpress

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:

gutenberg image text alignment

To change the size of the image, you can either drag its borders…

change image size gutenberg wordpress

…or select the predefined size from the block customization panel on the right:

chnage image size gutenberg text wrapping around image

Using the Media & Text Gutenberg block

The Media & Text Gutenberg block will help you put an image and text side by side:

media and text content block text wrapping

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:

media and text block gutenberg

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:

wrap text around image gutenberg wordpress 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?

Leave a Reply

Your email address will not be published. Required fields are marked *