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
I just wanted to thank you. I was ready to tear out my hair trying to use this new editor and getting the text to wrap around the images. Your video really helped! Thanks again.
My best,
Pam
Great to know that the tutorial was helpful!
Thanks for taking the time to write, I appreciate it!
Thanks. But I’m looking for the wrap that continues under the image after being aligned left or right. I thought you were going to do that, but your video never showed it working. When I try, it “aligns”, but the text stays in the column width of the text next to the image. not a wrap, but an align.
Hi Scott, The method I describe here in the blog as well in the video does wrap the text on one side with the overflow continuing underneath the image. The original example showed a new paragraph continuing underneath the image, which I now realize is confusing. So, I changed the text in this blog post to better illustrate the wrapping. Thanks for your feedback, which provided me with an important perspective.
I found that my high-res images don’t “nest” into the following paragraph until I reduce the image’s size: in Gear icon [Settings] > Block > Image settings, set a size or percentage for image settings. Otherwise the image defaults to being full-width, and so changing its alignment has no effect.
If the image is taller than the paragraph of text beside it, the floating image will continue to push the next paragraph over. If you don’t want this, you should be able to clear any outstanding floating alignment with the CSS clear property; I used to use a lot of br style=”clear: both;” after nested images, but I couldn’t get it to work in Gutenberg using “Edit as HTML”.
You’ll need to add a class to your stylesheet, something like “clearboth”.
.clearboth {
clear: both;
}
Then use that class in the “Advanced > Additional CSS class(es)” section of the block: clearboth.
Thank you that was really useful and very clear
This was so helpful! Your description was clear and it worked just like you said, so I didn’t have to watch the video. Thank you so much!
Great, Lisa, glad it was helpful! Thanks for your feedback.
Thank you for this lesson! It was clear and helpful as I transition to the block editor. Something I wish you had addressed, however, was padding or whitespace. When I align my image the text is bumped up against the image. Can I add padding-right or padding-left somehow? Or did you already have whitespace around the image in the media library?
Thanks for your feedback, Celeste. The margins and padding around an image are controlled in the stylesheet. Identify the image block element using the browser’s developer tools. Then, you can override the property values in the Customizer.