Inserting images in Paragraph mode is one of the most frustrating things I find in Gutenberg. Quite simply, unlike pre-Gutenberg, where you could have text above, aligned left or right, and below the text, it won’t let you place your image wherever you want it in the paragraph. It always aligns them at the top of the paragraph.

I tried inserting a classic paragraph, which lets you place the image wherever you want, within paragraph mode, but it just appears the same. Want to give it a go? Then let’s get started.

For illustration purposes, I’ve created H1, H2, and H3 Headings each with a single paragraph.

Move the cursor down under the first paragraph of the H1 Heading, and you should see three icons, slide the cursor along, click on the image icon and you should see this:

Click on Media Library. This will open up the Media Library, choose an image, click on Select, and you should see this:

As it’s only a test site, there’s no need to bother with alt text, image optimization or image size, you can change it to suit the paragraph once you’ve seen how it looks.

The image now needs to be moved to the top of the paragraph. Move the cursor to the left of the image and click on the top arrow (circled in red). This will move the image to the top. Click on the align right icon and you should see this:

Go through the same procedure for the H2 Heading and click the align left icon. For the H3 Heading, leave the image at the bottom and click the align center icon. Now you should see this:

That, as far as I’m aware, is the only way to insert images in Gutenberg Paragraph mode. Whether it will change for the better in future updates, who knows?

In Gutenberg – Part 3, we’ll look at how you can really make you website stand out – using HTML and CSS. Don’t panic, it’s not rocket science, you don’t have to be coding expert, you just need the basics, which, with a little bit of patience, can quite easily be learned.