Wrap Text Around an Image in WordPress Block Editor

Adding images to your content is a great way to break up text and make your posts more engaging. But a large image can disrupt the flow of your article. By learning how to wrap text around an image in the WordPress block editor, you can create a more professional and visually appealing layout. This simple technique places your image to one side and allows your text to flow neatly around it.

This guide will walk you through the entire process. We will cover how to add your image, align it correctly, and adjust the layout for a polished look. You’ll also find tips for troubleshooting common issues and ensuring your design looks great on both desktop and mobile devices.

What is Text Wrapping?

Text wrapping is a layout feature that allows text to surround an image or another object. Instead of the image taking up its own line and creating a large empty space, the text flows alongside it. This creates a more integrated and compact design, similar to what you would see in a magazine or newspaper. Using this feature in WordPress helps you build more dynamic and visually interesting pages and posts.

How to Wrap Text Around an Image in WordPress Block Editor: A Step-by-Step Guide

The WordPress block editor, also known as Gutenberg, makes it simple to wrap text around your images. Follow these steps to get started.

Step 1: Add an Image Block

First, you need to add an image to your post or page.

1. Click the plus sign (+) icon in the editor to add a new block.
2. Search for the “Image” block and select it.
3. You can now upload a new image from your computer, select one from your Media Library, or insert an image from a URL.

For this guide, we’ll assume you have added your image. Your image will now appear in the editor, typically on its own line.

Step 2: Align the Image to Wrap Text

Once your image is in place, the next step is to align it. This is the key to making the text wrap around it.

1. Click on the image you just added. A toolbar will appear above the image.
2. Look for the alignment icon. It usually looks like a series of horizontal lines.
3. Click the alignment icon and choose either “Align left” or “Align right”.

• Align left: This will move the image to the left side of your content area, and the text will wrap around its right side.
• Align right: This will move the image to the right side, and the text will wrap around its left side.

As soon as you select one of these options, you will see the text in the surrounding paragraphs automatically adjust and flow around the image.

Step 3: Add Your Text

If you haven’t already, you can now add the text you want to wrap around the image. Simply place your cursor next to the aligned image and start typing, or add a new Paragraph block. The text will automatically flow around the image based on the alignment you chose in the previous step.

You can continue adding multiple paragraphs, and they will all wrap correctly until the text extends past the bottom of the image. At that point, the text will return to using the full width of the content area.

Fine-Tuning Your Layout

Simply wrapping the text is a great start, but you might want to make a few more adjustments for a cleaner look.

Adjusting Space Between Image and Text

Sometimes, the text can appear too close to the image. Adding a little space can improve readability significantly.

1. Select the image block.
2. In the block settings sidebar on the right, find the “Styles” tab.
3. Look for the “Dimensions” section. You may need to click the three-dot icon to enable the “Margin” control.
4. In the “Margin” settings, you can add space around your image.
   • If your image is aligned left, add a right margin (e.g., 20px).
   • If your image is aligned right, add a left margin (e.g., 20px).

This will push the text away from the image, creating a more balanced and professional layout.

Resizing Your Image

An image that is too large or too small can throw off your page’s balance. The block editor gives you easy controls for resizing.

1. Click on the image to select it.
2. You will see blue circular handles on the corners and sides of the image.
3. Click and drag one of these handles to resize the image. The text wrap will adjust in real time as you change the image size.

Alternatively, you can use the block settings on the right to set a specific width or height in pixels or as a percentage.

Using the Media & Text Block

For a more structured approach, WordPress also offers the “Media & Text” block. This block is specifically designed to place text next to an image.

When to Use the Media & Text Block

The Media & Text block is ideal when you want to feature a distinct block of text directly beside an image, rather than having long paragraphs flow around it. It creates a two-column layout.

How to Use It

1. Add a new block and search for “Media & Text”.
2. The block will appear with two sections: one for your media (image or video) and one for your content.
3. Add your image to the media side.
4. Add your text content to the other side. You can add headings, paragraphs, and even buttons in this area.
5. A toolbar at the top of the block allows you to swap the position of the media and text from left to right.

This block also includes an option to “Stack on mobile,” which is enabled by default. This ensures that on smaller screens, the image and text will be displayed vertically instead of side-by-side, improving readability for mobile users.

Conclusion

Learning how to wrap text around an image in the WordPress block editor is a fundamental skill for creating well-designed content. By using the alignment options within the standard Image block, you can achieve a classic, flowing layout that integrates visuals seamlessly with your writing. For more structured side-by-side content, the Media & Text block offers a powerful and responsive alternative.

Experiment with these tools to see what works best for your content. With just a few clicks, you can elevate your page design, improve readability, and create a more engaging experience for your visitors.