Wrap Text Around an Image in the WordPress Block Editor

Wrapping text around an image in the WordPress Block Editor is a small trick with a big payoff. It makes your posts look polished, friendly, and less like a plain wall of words. Best of all, you do not need to be a coding wizard with a glowing keyboard.

What Does “Wrap Text Around an Image” Mean?

Imagine you have a picture of a cupcake. A very proud cupcake. You want your words to sit beside it, not hide below it like shy little mice.

That is text wrapping. The image floats on one side. The text fills the space next to it. It is a classic magazine-style layout. It is useful for blog posts, tutorials, recipes, product reviews, author bios, and any page that needs a little visual sparkle.

In the WordPress Block Editor, also called Gutenberg, this is usually done with image alignment. You align the image to the left or right. Then nearby text wraps around it.

The Fast Way: Use the Image Block

This is the easiest method. It works for most posts and pages.

1. Open your post or page in the WordPress Block Editor.
2. Click the plus button to add a new block.
3. Choose the Image block.
4. Upload an image, choose one from the Media Library, or insert one from a URL.
5. Click the image block.
6. Use the toolbar above the image.
7. Choose Align left or Align right.
8. Add or move a paragraph block near the image.

Now the magic happens. Your text should slide up beside the image. It will flow around it based on the image size and available space.

Tip: If the image is huge, there may be no room for text. The words will drop below it. That is not broken. That is just geometry being bossy.

Pick the Right Image Size

Image size matters. A giant image will hog the whole row. A tiny image may look like a postage stamp that got lost on its way to an envelope.

For wrapped text, try these simple rules:

• Use a medium image size for most blog posts.
• A width between 250 and 400 pixels often works well.
• Use left alignment when the image introduces an idea.
• Use right alignment when the image supports nearby text.
• Avoid very tall images unless the text section is long.

You can resize the image by clicking it and dragging the small handles. You can also use the block settings panel on the right side of the editor. Look for image size options there.

Left or Right? Which Side Is Best?

There is no law here. No design police will kick down your door. But there are some helpful habits.

Align left feels natural when the image is important right away. Readers see it first, then read the text. This is great for profile photos, featured objects, or step-by-step examples.

Align right is great when the text should lead. The reader starts with your words, then notices the image as a nice bonus. This works well for supporting screenshots, icons, or decorative images.

When in doubt, try both. Preview the post. Trust your eyes. Your eyes are usually smarter than a paragraph of design theory.

How to Add Space Around the Image

Sometimes the text gets too close to the image. It can feel cramped. Like two people sharing one tiny airplane armrest.

Many WordPress themes automatically add spacing around aligned images. If yours does not, you still have options.

• Resize the image so it has more breathing room.
• Add a Spacer block before or after the area.
• Use a different image alignment.
• Check if your theme has spacing controls in the block settings.

If you are comfortable with CSS, you can add custom spacing. For example, many aligned images use classes like alignleft or alignright. A little margin can help.

.alignleft { margin-right: 20px; margin-bottom: 15px; }

.alignright { margin-left: 20px; margin-bottom: 15px; }

Only use custom CSS if you know where to put it. Usually, you can add it under Appearance, then Customize, then Additional CSS. Some block themes may place this in the site editor instead.

What If the Text Does Not Wrap?

Do not panic. WordPress is not being dramatic on purpose. Usually, one of these things is happening.

• The image is set to center or full width.
• The image is too wide.
• The text is in a block that does not wrap around images.
• Your theme changes how aligned images behave.
• You are viewing the post on a narrow screen.

Start simple. Click the image. Set it to Align left or Align right. Make it smaller. Move the paragraph closer to the image. Then preview the page.

If that still fails, try placing the image before the paragraph instead of after it. In many cases, the image should come first. Then the text can wrap beside it.

What About Mobile Screens?

Mobile screens are skinny. They do not have much room for fancy side-by-side layouts. So WordPress themes often stack the image above the text on phones.

This is a good thing. Wrapped text on a tiny phone can look messy. It can create strange short lines. Nobody wants to read a blog post that looks like a staircase.

Always preview your post on desktop, tablet, and mobile if you can. In the editor, use the preview tools. Or publish privately and check it on your phone.

Simple rule: If it looks good on desktop and clean on mobile, you win.

Using the Media and Text Block

There is another handy option. It is called the Media and Text block. This block puts an image on one side and text on the other.

It is not true text wrapping. The text does not flow around the image like water. Instead, it sits in a neat column. But it looks clean and modern.

Use the Media and Text block when you want a strong layout. It is great for:

• Feature sections
• Author introductions
• Product highlights
• Service descriptions
• Callout boxes

You can choose whether the image appears on the left or right. You can also stack the content on mobile. That makes it a friendly option for responsive design.

Best Practices for Pretty Results

A wrapped image should help the reader. It should not trip them with a banana peel. Keep things simple and tidy.

• Use relevant images. A random llama may be funny, but it should still make sense.
• Add alt text. This helps accessibility and search engines.
• Do not overdo it. Too many floating images can create chaos.
• Keep paragraphs short. Short text wraps better and reads better.
• Preview before publishing. The editor view and live page can differ.

Also, choose images with a clear subject. Busy images can be distracting when they are small. Simple images work best beside text.

A Quick Example

Let us say you are writing a post about making homemade pizza. You add a photo of fresh dough. You align it to the right. Then you write a paragraph about kneading, resting, and not eating all the cheese before the pizza exists.

The image adds flavor. The text stays readable. The page feels alive. That is the power of wrapping text around an image.

Final Thoughts

Wrapping text around an image in the WordPress Block Editor is easy once you know the trick. Add an Image block. Align it left or right. Resize it until the text has room to dance.

If the layout looks odd, stay calm. Try a smaller image. Check the alignment. Preview the page. WordPress layouts are a bit like pancakes. The first try may be lumpy, but the next one is usually much better.

Use wrapped images when they make your content clearer, warmer, or more fun. Your readers will enjoy the smoother flow. Your posts will look more professional. And your images will finally stop sitting alone like awkward guests at a party.