How to Add an Image to A Paragraph Block in Gutenberg

WordPress 5.0 is on the horizon and with it comes a number of opportunities to explain how to get things done in the new editor.

Testing Scenario

A user has written three paragraphs and decides to add an image to the second paragraph. This user wants the image to be aligned to the right.

Accomplishing the Task in the Classic Editor

The classic editor is essentially one big block. Adding media to a paragraph is as quick as placing the mouse cursor at the beginning of a paragraph, clicking the add new media button, selecting or uploading an image, and choosing its alignment.

Accomplishing the Task in Gutenberg

In Gutenberg, each paragraph is a block and each block has its own toolbar. This is important because after writing three paragraphs, you can’t click on an add media button. Instead, you need to create an image block.

Once you’ve selected an image, you need to move the image block above the paragraph block where you want to insert it. At first, you might try to drag and drop the image into the paragraph but that doesn’t work. You need to use the up and down arrows or drag the block into position.

Once the image block is in the correct location, click the align right icon. The image will be inserted into the right side of the paragraph block.

A Right Aligned Image Inside of A Paragraph Block

If you want to move the image to a different paragraph block, you’ll need to click the Align center button which turns the image back into its own block and repeat the process described above.

Adding Images to Paragraphs in the Classic Editor Is Easier

The task I described above is one I think millions of users will have trouble completing when WordPress 5.0 is released. In the Classic editor, the writing flow doesn’t feel disjointed when you want to add images or embed content into posts.

In Gutenberg, everything is a block which in many cases, causes the flow to be disrupted as you need to figure out what block you need, how to manipulate it, where to move it, find where the options are, etc.

The process of adding images to paragraphs will likely improve after WordPress 5.0 is released but until then, the Classic editor wins this use case.