3 Easy Ways to Place Images Next to Text in the Block Editor

As the old saying goes, a picture is worth a thousand words. However, sometimes your graphics may benefit from a little extra explanation in the form of supporting text.

Fortunately, there are several ways to position images next to text in the Block Editor. With these techniques at your fingertips, you’ll find aligning text and images in Gutenberg far easier when compared to the Classic Editor. 

In this post, we’ll explore why image alignment needed an overhaul in Gutenberg. We’ll then explore three ways to place images next to text in the Block Editor. Let’s get started! 

An Introduction to Image Alignment in WordPress

To get the most out of your images, you’ll want to position them carefully on the page. This may include using them as banners, arranging them in columns, incorporating them into your WordPress sidebars and your widgets – or perhaps even placing them alongside a piece of text:

This is particularly useful for illustrating the point you’re making in the accompanying text. It can also be a great way to break up chunks of text, or add some interest and variety to your page by using alternating blocks of content: 

In the Classic Editor, you could position images alongside text by placing your cursor at the beginning of the paragraph and selecting the Add Media button:

You would then have the option to align the image left or right, or wrap your text around the graphic. However, alignment and wrapping in the Classic Editor didn’t always work as expected. Occasionally, you were left with an image that wasn’t sized or aligned correctly. 

The good news is that the Block Editor greatly improves on the Classic Editor’s image alignment functionality. In fact, there’s even a block designed to ensure that your text and images are perfectly positioned, every time. 

3 Easy Ways to Place Images Next to Text in the Block Editor

Whether they’re breaking up text, illustrating a point, or simply adding interest, images play a crucial role in web design. With that in mind, let’s make sure you have full control over how these graphics interact with the rest of your WordPress site. Here are three easy ways to place images next to text in the Block Editor. 

1. Use Text Alignment Settings

The Gutenberg editor comes with a complete set of alignment settings that you can use to position your images alongside text. To start, you’ll need to create an Image block and upload your media.

Simply click on the black + icon, and then start typing “Image”. You can select the block when it appears:

Then, either upload an image from your computer or choose a graphic from your WordPress Media Library. You can then insert a new Paragraph block and add all of the text that will eventually appear next to your image: 

There are a few different alignment settings you can use. To access these options, click on the Image block. Then, select the Alignment icon from the toolbar:

If you choose Align left, the text will appear to the right of the image. Alternatively, if you opt for Align right, the text will be displayed to the left of the Image block: 

Let’s take a look at this in action.

It’s possible that you may select Align left or Align right, but the text doesn’t wrap around the image. If this occurs, the graphic is likely taking up the full page width. To resize the image, click to select the block and then drag the handles that appear:

As the block shrinks, the text should wrap around your image automatically. If you change your mind at any point and want the image to occupy 100 percent of the available horizontal space, simply select Align center. 

2. Employ the Gallery Block

The Image block isn’t the only way to add pictures to your WordPress website. If you want to display multiple photos, it may make sense to use the Gallery block: 

The Gallery contains individual Image blocks for each graphic, and organizes them into columns. This enables you to feature multiple images in a structured and attractive way.

Sometimes, you may need to display some text alongside your WordPress gallery. For example, you might want to add a title, provide a supporting explanation, or even insert a Call To Action (CTA):

The good news is that you can use exactly the same alignment settings we discussed earlier. This means you can simply add a Paragraph block above or below the Gallery, and then insert the text that you want to position alongside your images:

Once all of the pieces are in place, click on the Gallery block and select the Alignment icon. There, you can choose Align left, which will position your text to the right of the Gallery. Alternatively, you can select Align right, and display the text to the left of the Gallery block.

3. Add the Media & Text Block

To help you create the perfect layout, Gutenberg introduced a Media & Text block. This block features a two column layout. By default, the image appears to the left, and the text area is positioned to the right:

Alternatively, you can switch these columns around by clicking on the Media & Text block. Then, select the Show media on right button:

You can also choose between a wide-width display and a full-width display, if those options are supported by your WordPress theme. Once you’re happy with your layout, you can type your text directly into the Text column. You can then upload your image in the Media area:

Once you have these elements in place, you may want to experiment with different alignments. Simply click on Change Vertical Alignment, and then choose from the available options:

These settings will alter where the text appears in relation to the image. For example, if you opt for Align middle, the text will align with the center of the accompanying image:

Every block has different settings in the editor sidebar, and Media & Text is no exception. Make sure you’ve selected this block in the main editor canvas, and then click on the Block tab: 

The first unique setting is Stack on mobile. When this option is enabled, your media and text may appear on top of each other on smaller screens, such as smartphones and tablets. This can provide a better experience for mobile users, who might otherwise have to scroll horizontally in order to view the entire block.

Next, you can specify whether WordPress should automatically crop the image so that it fills the entire column. This can ensure that your block displays correctly across a wider range of screens. 

Conclusion 

While there are many situations where images can speak for themselves, sometimes you may want to add some supporting text. By carefully aligning your graphics and text, you can create some interesting visual effects, or simply provide much-needed context. 

Let’s quickly recap three ways to place images next to text in the Block Editor: 

1. Use text alignment settings.
2. Employ the Gallery block.
3. Add the Media & Text block.

---

---