wrap gutenberg image

How to Wrap Text Around Images in Gutenberg

Home > Blog > WordPress tutorials > How to Wrap Text Around Images in Gutenberg

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).

So speaking of the text wrap around images in Gutenberg, you have 3 main alignment options:

  • 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.

3 Ways to Create a Wrap Text Around Images In Gutenberg

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.

1. Adding the Image & 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

2. 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.

3. 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 the 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

Getwid can also serve you as a gallery with text WordPress plugin.

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 contribute to design compositional flow, which is essential for better storytelling and readability – 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?

What is the best way to wrap text around images in a WordPress post?

First, add the Image block. Then add the Paragraph block underneath. And finally, select left or right image alignment (right click on the image – choose alignment).

How to make an image with a text in a post-full-width?

It all depends on your WordPress theme settings. If your theme allows for full-width layouts, you can change it via the Post template settings or via the block settings.

How good is the Media and Text Gutenberg block?

It’s a good-looking block with a great number of controls for rather fancy layouts. But it doesn’t wrap the text around images in WordPress in a regular way – the block contains two different columns so the text container stays fixed.

Was this article helpful?

Yes (1) No

You have already left your review.

6 Replies to “How to Wrap Text Around Images in Gutenberg”

  1. I have been successful in wrapping text around photos using some of the methods you mentioned. It looks fine in the “preview“ section. However, when I publish it and WordPress emails it to my followers, they see it as stacked with the picture on top and the text underneath. If I send someone the link and they look at the website, it is wrapped perfectly just like it was in the preview. So, how do I get it to wrap when WordPress sends it to my followers?

    1. Hi Lee, Thanks for your comment. Do you mean you use some tool that sends automatically an email with a Post you have recently published and the post preview differs in the email that your followers receive? Could you clarify how it works exactly?

  2. OMG, it is so simple and yours is the first website I have found that describes it. Even the wordpress site doesn’t, or at least I couldn’t find it.

    Thank you!

Leave a Reply

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