Wrapping Text Around an Image in WordPress Gutenberg

With the WordPress content editor, Gutenberg, the method for wrapping text around an image has changed. In the Classic Editor, you place your cursor at the beginning of a paragraph and click the Add Media button. Align the image left or right, and your text will wrap. In the Gutenberg editor, you use an image block and a text block. I’ll show you the best way to do this.

Before we get into the specifics, a quick note about aligning versus wrapping. Aligning text and image positions the two items next to each other in 2 separate columns. Wrapping involves more interaction with the image, since the text positions itself around the image. In print design, you can create a text wrap on all sides of an image (top, bottom, left, and right). In web design, the text can wrap on the top and bottom, but only on one side.

BEST METHOD FOR WRAPPING

Step 1

I find it best to start by placing an image inside an image block. There is no default alignment. We’ll apply an alignment in Step 3.

Step 2

The next block will be the text block. I’ve used a fun Lorem Ipsum Generator (CupcakeIpsum) to collect fake text and fill the text block in my example:

Donut muffin gummies biscuit tart. Sweet apple pie gummies bear claw. Liquorice cupcake soufflé I love cheesecake sweet I love tootsie roll. Tiramisu dragée I love jelly liquorice pudding croissant. I love pastry jujubes bonbon croissant. Bonbon sweet biscuit. Powder tiramisu fruitcake marshmallow I love. Tiramisu dessert chupa chups I love tart. Pastry sesame snaps chupa chups. Toffee topping cake. Danish sugar plum liquorice. Bonbon icing dragée. Jujubes I love wafer gummi bears I love gingerbread gingerbread.

Halvah cheesecake pastry cake jujubes cake donut jelly-o croissant. Croissant I love candy powder. Ice cream croissant I love donut icing marshmallow tootsie roll danish danish. Macaroon gummies cheesecake candy canes sugar plum. Pie gummies marshmallow sugar plum. Marshmallow gummi bears cake toffee brownie icing icing. Apple pie caramels cotton candy oat cake I love gingerbread oat cake. Gummies I love cake tart bear claw sweet roll caramels I love jelly beans. Dessert danish halvah sweet marshmallow. Jelly beans candy canes tiramisu liquorice cupcake icing tootsie roll. Candy canes cookie I love dragée tart pastry chocolate cake. I love macaroon gummi bears marzipan macaroon. Pudding jujubes I love tart.

Step 3

When done with the text, select the image block and set the alignment left or right. The text will immediately reposition itself on the opposite side of the alignment chosen for the image. When the image is aligned left, the text will move into place on the right side; when the image is aligned right, text moves into place on the left side. With a center-aligned image, the text stays beneath it.

Step 4

If the text doesn’t move, it means the image is too wide and there’s not enough space for the text. Simply select the image block, grab one of the round nodules, and drag to scale smaller. The text will begin to wrap as soon as there’s enough room for it.

Video Tutorial

If you prefer, you can watch the video tutorial I made that shows you how to wrap text around an image in WordPress Gutenberg:
VIEW VIDEO!

Related Posts

4 Ways to Create Columns in WordPress
How Can I Change the Typeface in WordPress?
WordPress Pages vs. Posts
How to Create a Navigation Menu in WordPress