It is easy to wrap the text around an image in WordPress using Gutenberg.
• Add the image above the text.
• Resize the image
• Align it to one of the sides
• Make final adjustments to the image size so it will look the best it can.

You start with a text

Obviously, you need a text to wrap around the image. But it really doesn’t matter if you add the text or the image first. In the end, both have to be on the page before the wrapping starts.

Add the image above the text

After you have added the text, add the image.

You have to put the image right above the text.

Tip of the day
Did you know, there is a shortcut to adding an image block?
In an empty text block, type “/im” and you get a short list of all blocks that starts with that, like for instance “image”.

Resize the picture

Obviously, you can’t have an image with the full width of the page, there has to be room for the text.

Resize the picture to roughly the size you think it should have. You can finetune the looks later.

Just drag one of the two blue dots until the image is the size you want.

Align the image

The final step is to put the image on the side you want it.

For instance, by aligning the image to the right side, WordPress will put the text to the left of it automatically.

Though, only left or right alignment works. Centering the image is not an option.

Finetune to get the final result

And now you have a professional layout.

The only thing left to do is to adjust the size of the image, so it gets the perfect size. The text will adjust to the changes as you do them.


Hope you found this useful. If you have any questions or comments, don’t be shy, add a comment or contact me directly.

And if anybody wonders, it is my own picture I am using. The title is Bird of Prey, and you find it, and many more at www.photokingdom.se

Like it? Share it!

Leave a Reply

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