Wrap text around image in WordPress [Media & Text Block 2021]

Wrap text around image in WordPress [Media & Text Block 2021]

Inserting an image next to a paragraph of text doesn’t sound like a big job, but it can be not easy if you want a modern website. Only thanks to Gutenberg editor, WordPress becoming more usable without third party page builders. It has an excellent value for your website from a long-term point of view and when creating or redesigning a website. WordPress wrap text around image is set of block and features. It makes the content lighter, modern, easy readable.

WordPress wrap text and image

There are several blocks you can use to wrap a block of text around an image. We describe all of them:

Media & Text block – WordPress align text next to image

Wrap text and image for better reading experience

There are several reasons why you should use this block. You will appreciate it the most if you’re writing blog posts. Images are integral part of the story. It does not matter if you write travel blog or magazine about IT news. So when adding photos inside your content, think about image alignment. Readers will be able to better understand what you’re writing about.

In many cases it’s necessary to insert image and text side-by-side. What is important?

  • It has to make sense. Image has to be next to the right text.
  • It has to be nicely aligned.
  • It has to fit to the whole website layout.

While in the Classic editor you could also place text next to the image, you could not talk about nice alignment. Especially if image was small and you put more text next to it. Text overwrapped the image and it didn’t look nice.

Text wrapped around an image
Example of not very nice looking text that wrapped the image

How to align text next to image?

Media & Text block is a fantastic feature. Media & Text block solves this issue and ensures perfect alignment of text to the image without disruption of composition and layout. That’s the reason you should use this block.

It improves website design on mobile devices, too. This wrapping block helps WordPress theme to cover different mobile layouts. On smartphone, every part of the website must be clearly visible and readable. How will Media & Text block look on mobile phones and table handles “Stack on mobile” function that we will look at below.

In a short time you’ll be able to use Media & Text block in our new WordPress theme called Citadela. Learn more about Citadela theme in separate article.

How to add Media & Text block in block editor?

Adding Media & Text block is as easy as adding any other block. It’s a core block that means you don’t need to download or install anything.

Using “+” icon in the top panel or anywhere in the editor and selecting Media & Text block.

Add Media and Text block by clicking on “+”
Adding Media & Text block by clicking on “+”

Last option is to type “/“ and write “media” afterwards. WordPress will automatically shows you selected blocks matching what you searched for.

Add Media and Text block using slash
Adding media & text block using slash “/”

How does Media & Text block work?

Media & Text block basically groups 2 different types of content into one. The first one is medium e.g. image or video that you can add via:

  • Upload
  • Media Library
  • Drag & Drop
Media and Text block upload options
Look how easy you can upload an image using drag & drop

Second one is space for text content. You can write there paragraphs of text, bullet lists or title. You can also add there Button block that we were talking about earlier on.

Text area of Media and Text block
In text area you can add different types of content

Media & Text block always align image and text side-by-side no matter how much text you write. How does it work? Image automatically adjusts itself based on content height in the text column.

Image alignment in Media and Text block
Example of image and text alignment

Media & Text Block settings

General block settings

1. Top toolbar

Toolbar above block offers several options. If your active theme supports that, you can set Media & Text block as wide or full width. You can also choose where you want to place image or video by clicking on:

  • Show media on left
  • Show media on right
Changing of image and text alignment
By clicking on toolbar icons you can change image & text alignment and position of them

In the top toolbar there is also an icon to edit medium where you can set Alt Text, Title, Caption or Description. Learn more about editing images in our article Working with WordPress Image block.

2. Right sidebar

Right sidebar offers additional setting for Media & Text block. It’s possible to add here Alternative text, set background color or add Additional CSS Class. You can also enable there function “Stack on mobile”.

Background color settings
Smooth background color change

What is Stack on mobile?

Thanks to this function image and text is nicely displayed on mobile devices. If you disable “Stack on mobile”, image and text will stay side-by-side and it will be hardly readable in responsive version.

If you enable this function, on mobile phone content on the left hand side will be displayed above content that is on the right hand side.

Stack on mobile function
Website preview on mobile device with enabled feature “Stack on mobile”

Text alignment

Part of Media & Text block is together with image or video also text content. It can be one of the following content types:

1. Paragraph

In top toolbar you can set text alignment, make text bold, italic or add URL link.

Formatting paragraph in Media and Text block
Formatting options for text

In sidebar on the right hand side you can choose font size, font color or paragraph color. Interesting feature is “Drop Cap” that will highlight first character of the text. It’s a nice feature in block posts to make text more interesting.

“Drop Cap” feature
Highlighting text with “Drop Cap” function

2. Heading

Heading is very similar to Paragraph. You can also configure it’s look, make bold or italic and insert URL link. Difference is that you can choose heading type – H2, H3, H4.

Heading options for Media and Text block
Heading options

Other heading sizes and alignment settings are available in sidebar on the right hand side.

3. List

If you add List block to your content, it can be bullet points, numbered list or multi level list. You can also make text bold, italic and add URL link.

List options in Media and Text block
List options of your text area

4. Button block

This block that adds button to content can be adjusted to website design. Button color and style or background color can be configured in sidebar on the right hand side.

Button options in Media and Text block
Options for button style

Don’t forget to read article about Button block. 

Switching between block types

In Media & Text block it is possible to convert one content block type to another. You can also change Media & Text block to Image block and text part will be deleted.

Switching between block types
Converting Media & Text block to another block

In text content it’s possible to change Paragraph block to Heading or List block.

Converting Paragraph block
Converting Paragraph block to another one

Bonus: How to justify text in WordPress

Using justified text has its positives and negatives. Justified text can be usually found in books or newspapers but it’s not used on websites anymore. Why?

Several years ago was Justify function integrated right inside WordPress Classic editor. Justified text used to cause visibility problems in various browsers or mobile devices. It’s also related to difficult readability of justified text. This function was therefore deprecated and removed.

This particular functionality does not neither exist in the new block (Gutenberg) editor.

So how do you justify text if you really want?

Solution is to add simple CSS code in few steps:

  1. There is a setting for Additional CSS Class of Paragraph block in sidebar on the right hand side
  2. Write there class name „justify
  3. Publish page or article
  4. If you Preview it, click on Customize in the main top bar
  5. On the left hand side there is a new sidebar with settings
  6. Click on Additional CSS
  7. Insert following CCS code:
p.justify {
    text-align: justify;
}
Justify text with custom CSS
The way of justify text in block using custom code

Done. From now on is text in your Media & Text Block justified.

What is your opinion on Media & Text block? Have you already use it? How do you like working with it? Let us know in the comments below.

16 thoughts on “Wrap text around image in WordPress [Media & Text Block 2021]

  1. Generally I like the block system but unless I am missing something this is a step backwards. I am currently looking to simply float an image left or right and get text to wrap as really should be so easy to do but it seems WordPress just doesn’t want that to happen. Why not? Using the media and image block only works if the text is the right length. A page like this for instance doesn’t want to be redone with an odd spacing between the paragraphs if the text isn’t exactly the right length for the size of image.

    http://www.thorntonincraven.co.uk/our-village/welcome-to-the-village/

    1. Hello there,

      thanks a lot for your feedback. It sounds as a very good idea, therefore i would like ask you to give us a minute of your time to answer 4 simple questions: https://aitthemes.typeform.com/to/vc7arn that can help our team make better products with unique features faster.

      Thanks a lot for your time and understanding.

      Kindest regards!
      Zlatko
      AIT team

  2. This idea sucks as the only way to insert pictures into a blog – I can’t get the text to wrap nicely and it’s not the same size no matter what I do. Good idea for CERTAIN situations, but not for everything. Sometimes you just want a picture with the paragraphs wrapping around it, rather than saying something about the picture.

  3. How to add wrapper and use content in full width yar seriously how to cover full with then take container in it.. builder is very confusing how add container wrap very bad editor yar

  4. Hello there,

    thanks for your compliments. Feel free to check out our blog page https://www.ait-themes.club/blog/ where you’ll find many useful tips how to write an attractive and useful posts.

    Kindest regards!
    Zlatko
    AIT team

  5. Hello Abdur,

    Thank you so much for your feedback, it is much appreciated by our team!

    Best regards.
    Zlatko
    AIT team

  6. I am having the same difficulty as several other people on this thread. in the past, I was able to easily wrap text around an image like in our “about us” page where we have pics and bios. maybe I was using the old editor. I don’t remember. but, i am now trying to update our site with new pics and bios and couldn’t find a way to easily wrap text like on our previous bio/pic combinations. I tried to switch to classic editor, but the site warned me I had “new block editor” sections and I had to stay with the newer editing mode. can you tell me how to get our new biographies and pictures to look like our earlier posts? thank you.

    1. Hey there,

      If you desire to disable Gutenberg and continue with the classic WordPress editor, please consider a plugin by the WordPress core team which allows you to do it with “Classic Editor Plugin”.

      Best regards!
      Zlatko
      AIT team

  7. For those who want just a simple text wrapping around the image you can do this by inserting the Classic Text Block (based in the first part of the Blocks when you click on Browse. You get to use the classic editor in a single block and yes, that allows you to insert an image and then choose the wrapping option. Problem solved 🙂

  8. Same trouble here. This new version is horrible– no way to properly wrap text or even make the photo smaller, unless you just want to crop.

  9. I’m able to wrap my text around a picture in WordPress block editor. It looks just the way I want it to look in “Preview.” However, when I publish my blog and WordPress emails it to my followers, they receive it with the picture on top and the text under the picture. This happens on desktop computers, too, not just on small cell phones. I want it wrapped, not stacked.

    1. Hello there,

      Thanks for writing in. The block won’t wrap the text around image in WordPress as you’d expect. Please have a look at the following instructions as you might find them helpful: https://motopress.com/blog/how-to-wrap-text-around-images-in-gutenberg/

      Best regards!
      Zlatko
      AIT team

      1. I do all that, and my blog wraps perfectly in Preview. When I publish it, it looks great on my blog page. But when WordPress emails it to my followers, and they open that email, they don’t see it wrapped. The photos are on top of the text. It is very unprofessional looking. I never had that problem with the old Classic Editor. Now that I’m using the Block Editor, it won’t let me go back to the Classic Editor even though there is a Classic option to click on.

        1. Hello there,

          Thanks for writing in.
          We’d like kindly ask you to check our knowledge base and/or documentation with video tutorials:
          https://www.ait-themes.club/ait-themes-documentation/
          Or feel free to post technical questions directly in our dedicated support ticket system. Please login into your account at https://system.ait-themes.club/support/add-question.
          Customer Support is provided during working days from 8am to 5pm Central European Time.

          In addition, there a plugin that let you use previous editor. You should install and activate “Classic editor”.

          Sincerely!
          Zlatko
          AIT team

Leave a Reply

Your email address will not be published. Required fields are marked *