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

Inserting image next to paragraph of text can be difficult. But, if you use Media & Text block in WordPress editor, it can be a piece of cake.

Today we will learn:

• Wrap text and images with Media & Text block
• How to add Media & Text block in editor
• How this block works
• Media & Text block settings
• What does “Stack on mobile” mean
• Bonus: How to justify text in WordPress

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.

 

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.

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

 

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

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.

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.

 

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

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”.

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.

 

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.

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.

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.

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.

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.

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.

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

 

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;
}

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.