Ever uploaded a beautiful image to your blog post only to realize the text sits awkwardly beneath it? You drag the picture left or right… and nothing happens. You just want that classic magazine look — an image on one side and text flowing naturally around it. I’ve been there too, frustrated, wondering if WordPress forgot how to do something so simple.
Good news — you can easily wrap text around image in WordPress block editor, but the method is a bit different now. The Block Editor (Gutenberg) gives you more control and cleaner layouts once you understand how it works. Let’s go step-by-step through every way to do it, fix the common issues, and make your posts look sharp and professional — even if you’re a total beginner.
Why Wrapping Text in Gutenberg Feels Confusing
Back in the Classic Editor days, text wrapping was simple — insert an image, click “Align Left,” and your paragraph magically curved around it. Then came Gutenberg, with its shiny blocks and modular layout system. Suddenly, everything was in its own container — and wrapping text stopped being intuitive.
When you use the Image block, it sits as an independent element. Your text is in a separate Paragraph block, and the two don’t always “communicate” visually. That’s why text often falls below the image instead of beside it.
The reason? Block-level separation and your theme’s CSS. Some WordPress themes automatically override float behavior or full-width alignments, which makes wrapping tricky. But once you learn how to align and size things properly, the text will behave exactly the way you want.
Basic Methods to Wrap Text Around Image in WordPress Block Editor
There’s no single “wrap” button in Gutenberg. Instead, you use combinations of block alignment and layout tools. Let’s go through the three easiest methods first.
Sometimes, when you’re editing your site, you might switch between the Gutenberg Block Editor and Elementor for more control. But if you’ve ever thought, I Can’t Edit My WooCommerce Shop Page in Elementor don’t worry, you’re not alone. Many users face this issue, and it usually happens because WooCommerce templates are managed differently inside Elementor.
1. Using the Image Block (Align Left or Right)
This is the most direct way to wrap text around image in WordPress block editor.
Steps:
- Add an Image Block and upload or choose your image from the Media Library.
- Below it, add a Paragraph Block and start typing your text.
- Click on the image. In the small toolbar that appears, click Align Left or Align Right.
- Boom — your text should wrap around it.
Pro Tips:
- If your text still won’t wrap, it’s likely the image is too wide. Reduce its size from the toolbar or block settings sidebar.
- Keep your image width under 50% for the wrap to display nicely.
- Add a small margin (space) on the side of the image using the “Styles” tab to keep the text from sticking too close.
2. Using the Media & Text Block
This block was designed specifically for layouts with image + text side-by-side.
Steps:
- Click the “+” icon and search for Media & Text.
- Upload or select an image on the left side.
- Type your text on the right.
- You can flip them by clicking the “Show media on right” toggle.
This doesn’t technically wrap text around the image — it just splits them into two columns — but it achieves a similar look and stays perfectly responsive on mobile.
If you’re managing product descriptions or informational sections, this is often cleaner than float-based wrapping.
3. Using Columns Block or Block Patterns
You can also use the Columns block for precise layouts.
- Create a 40/60 or 30/70 column layout.
- Place your image in one column and your text in the other.
- Adjust spacing, padding, and alignment until it looks natural.
This method is ideal if you want more control or need to place multiple image-text combinations on the same line. It’s also great for homepage or landing page designs.
When Text Won’t Wrap (Common Problems and Fixes)
Sometimes, you do everything right, yet the text refuses to wrap. Here’s what’s going on — and how to fix it.
1. Image is Too Wide or Full Width
The number one reason text won’t wrap is that your image is set to full width. Go into block settings and change alignment to “Left” or “Right,” and manually shrink the image.
2. Theme CSS Interference
Some WordPress themes set image display rules like display: block or width: 100%, which stop text wrapping. You can override this using a small CSS tweak (explained below).
3. Parent or Container Blocks
If your image and text are inside another block (like a Group, Cover, or Columns block), wrapping might not cross those boundaries. Try taking them out of the container temporarily.
4. Mobile Responsiveness
Even if your wrap looks perfect on desktop, many themes automatically stack content on mobile. That’s not a bug — it’s by design. If you want tighter mobile control, you can use responsive CSS rules.
Advanced Fix: Add Custom CSS for True Text Wrapping
If none of the default tools are working, you can manually force text wrapping using custom CSS. It’s not as scary as it sounds.
Step 1: Click the image block → open the Advanced tab in the sidebar → add a custom class, for example:float-left
Step 2: In your WordPress Customizer or Appearance → Additional CSS, paste this:
.float-left {
float: left;
margin-right: 1em;
margin-bottom: 1em;
max-width: 40%;
}
.clearfix {
clear: both;
}
Now, the image will float on the left and text will wrap naturally around it. You can also create .float-right if you prefer the image on the other side.
Note: Always check your post on mobile after adding custom CSS. Sometimes, floats can make mobile layouts look cramped. You can use a media query to fix that:
@media (max-width: 768px) {
.float-left, .float-right {
float: none;
display: block;
margin: 0 auto 1em;
}
}
Design Tips for Clean and Readable Layouts
- Add Space: Always keep a small gap (10–20px) between image and text. You can do this through block settings or CSS margins.
- Avoid Tall Images: If your image is much taller than the text beside it, you’ll end up with a weird empty gap below.
- Consistent Widths: Keep image sizes similar across your posts for a cleaner look.
- Preview on Mobile: Sometimes the wrap works beautifully on desktop but looks squished on phones. Always test.
- Maintain a Visual Balance: Don’t put two wrapped images too close — it can confuse the reader’s flow.
Plugins That Make Wrapping Even Easier
If you want more styling control or pre-made layouts, here are a few WordPress plugins that enhance Gutenberg’s design flexibility:
- Kadence Blocks: Adds advanced columns and spacing controls.
- Stackable Blocks: Offers visually rich layouts and image text pairing features.
- Spectra (by Astra): Adds wrap-like visual control with advanced alignment and padding.
These plugins come with responsive settings, meaning your layout stays perfect across devices — no extra CSS needed.
Examples: How Proper Wrapping Looks
Imagine you’re writing a food blog. You upload a picture of your dish, align it left, and let the story flow beside it. Readers feel like they’re flipping through a real cookbook — image on one side, words wrapping gracefully.
Or maybe you’re writing a travel diary — a scenic mountain shot floating beside your paragraph creates rhythm and visual breathing space. That’s the power of proper text wrapping.
Quick Troubleshooting Checklist
| Problem | Why It Happens | Fix |
|---|---|---|
| Text stays below image | Image too wide or full width | Reduce image width and align left/right |
| Text touches image edge | No margin applied | Add margin via block styles or CSS |
| Wrap works on desktop but not mobile | Theme overrides float | Add responsive CSS |
| Wrap disappears inside group block | Container rules override | Move image and text outside group |
| Everything looks off | Cached CSS or outdated theme | Clear cache and update theme |
Common Mistakes to Avoid
- Don’t try to center an image and wrap text — wrap only works with left or right alignment.
- Avoid uploading ultra-high-resolution images for small wrap effects — it slows your site.
- Don’t force wrap around full-width banners or cover images — those are meant to be standalone.
- Skip inline images inside heading blocks — wrapping only works in paragraph flow.
Frequently Asked Questions
1. How do I wrap text around image in WordPress block editor?
Add an Image Block, align it left or right, and make sure it’s not full width. The text in the next paragraph block should automatically wrap beside it.
2. Why is text not wrapping around my image in Gutenberg?
Usually because your image is too big or your theme CSS disables float. Try resizing or adding custom CSS as shown above.
3. Can I wrap text on both sides of an image in WordPress block editor?
Not by default. Gutenberg only allows left or right alignment. For both sides, you’d need custom CSS or a more advanced plugin.
4. How to add margin between image and text so they don’t touch?
Use block spacing controls or add custom CSS like margin-right: 1em;.
5. Does the Media & Text block wrap text around image?
Technically no, it places image and text side-by-side in columns, which mimics wrapping visually.
6. How do I fix wrapping that breaks on mobile?
Add responsive CSS (as shown earlier) or use the Media & Text block which automatically stacks neatly on smaller screens.
7. Are there plugins to improve wrapping control?
Yes plugins like Kadence Blocks, Stackable, and Spectra give you drag-and-drop control over text/image layouts
Conclusion: Wrapping Text Around Images Like a Pro
If your posts have been looking plain and disjointed, this is your moment to shine. You now know how to wrap text around image in WordPress block editor, handle those weird alignment issues, and even apply a touch of custom CSS magic when needed.
The best part? Once you do it a few times, it becomes second nature. Every blog post, every product page, every tutorial can look clean, balanced, and beautifully professional no plugin overload or developer help required.
So go ahead, open a draft, drop in your image, and give it a try. Your readers (and your design sense) will thank you. And if something still doesn’t look right, tweak it because in WordPress, perfection’s just one alignment click away.
