Cancel

Jeff Chandler

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.

Category:
Tags: , ,
26

26 responses to “How to Add an Image to A Paragraph Block in Gutenberg”

  1. Well put. When you combine this with other use cases, it seems as if creating content, especially for the less tech inclined (and less persistent) will be a highly frustrating experience with Gutenberg.

    It is as if basic UX was an afterthought with Gutenberg development but full steam ahead I guess, which is sad.

    Create forum topic from comment

  2. This is the thing where my clients will ran away, at least the majority of them. Technically it might all have its reasons, but the UX and UI for this task is just ridicolous!

    Aligning images left and right is one of the most used and most important things of all my clients in the last 12 years (since I work with WordPress). To make these bare essentials so long, and frustrating experiences, leaves me frustrated and wondering too!

    Create forum topic from comment

    • I spent the bulk of my career in application development, so I understand the desire of programmers to “improve things.” Buy you’re right, this is no improvement.

      WordPress seems to be one of the many software applications today where the developers never ask the actual end-users of the product what would they want, and what would make their lives better. Instead they do whatever the hell they want to do and the users be damned.

      Create forum topic from comment

      • It’s a general attitude among software and new media companies. The “our users are dumb and have no idea what they want, so we force feed what we like down their throats” mantra. That means social media companies removing chronological order from users feeds or, in the case of WP, adding a new editor nobody asked for.

        Create forum topic from comment

  3. The problem seems to be that Gutenberg conceptually could be a great rethinking of creating a site look at the theme / layout design level. Unfortunately it is not so good an idea for content creation. The word processor like interface and function for everyday posts is instantly recognizable while the block, block type, and block interaction is instantly confusing and frustrating. I see no path to make that intuitive or easy to use.

    Well there is one – create a default block type that looks and functions like the current editor and make all other block types for advanced special case use.

    Create forum topic from comment

  4. I appreciate your sharing of this blog post. I’m struggling with Gutenberg at the moment. At times, I’ve wondered to myself if I’m just being resistant to change, but I still find using the Gutenberg editor cumbersome and intimidating.

    I’m a bit worried if this is the future of blog post creation with WordPress, but I’m still trying to play around with Gutenberg to gain more confidence in it just in case that turns out to be true after all.

    I agree with Clif that it seems great for building layouts for webpages, but for actual content creation, I still prefer the classic editor right now.

    Create forum topic from comment

    • Agreed. I’ve been taking the time to learn Gutenberg and have been an avid WordPress user since 2009 (and a WP instructor since 2011). Thus far, writing posts is cumbersome in Gutenberg, particularly when it comes to adding images. In fact, I found this article when I had to Google for “Gutenberg inserting images into paragraphs”.

      Here’s hoping that Gutenberg makes image insertion easier, perhaps making image blocks easier to drag into position.

      Create forum topic from comment

  6. I used to be baffled at how Gutenberg was feeling rushed along seemingly for the sake of it. I appreciated the idea and the long-term vision, but whether it’s the fault of the software or not, all but the last few attempts at accomplishing even a basic task in it until now have been anxiety-inducing.

    That said, I have a lot of confidence now. I say that because I want to clear the air and say I am not anti-Gutenberg. I’d always use a visual editor personally, but I know what I am doing. For people trying to solve basic problems like “I want two photos side by side on a row and I don’t want to ask for your help each time,” this could be great.

    But my actual question is…is this new ground? This specific example in this post, and more broadly sectioning off each paragraph as a block? I am trying to think of a piece of software that is that granular. On the support forums they got very upset when people called it a page builder; so I think about Front Page, Publisher, InDesign…for text-and-image combos, this feels unintuitive.

    That said, text does always get its own box in things like that, but images are separate, or if you try to fuse them they have the capacity to do sophisticated wraps (like circles and paths and things) instead of just floats.

    I guess that gets to your last point. Send it out as is, and if and when people mutiny, we figure out what will be more workable but still honors the spirit of the project.

    Create forum topic from comment

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

    The steps are almost exactly the same for blocks. You can use the inserter (+) in the top toolbar or the (+) between blocks then click “Image” (this would be the same as “clicking the add new media button” in your example), upload an image, then click the alignment in the toolbar just above the image.

    Create forum topic from comment

  9. I’m a member of a club, and we recently implemented WP for our club website. (I have absolutely nothing to do with the website – I am just a user, reading club news, paying dues, etc.)

    One of the reasons it was chosen is because the various officers of the club know how to use a word processor, and the old interface was pretty word-processor-like. These people are not tech folks. one or two are violently opposed to tech and still use flip phones. ANYTHING that takes away from a SIMPLE (I use this interface once a month to update the club news for my area of responsibility) will mean a revolt. And this time next year we will be reevaluating our choice of WP.

    It wasn’t broken. Why the hell are you trying to fix it?

    Create forum topic from comment

  10. I go back to my original comment on Gutenberg. Which relates to this poll: https://wordpress.org/support/plugin/gutenberg/reviews/

    If New Coke had scored this low on the taste tests, we would never have had The Cola Wars.

    When you can’t get 50% on something (that isn’t politics) you are doing something really really wrong. (Amazon reviews rarely dip below 3 even for horrible products. IMDB movie reviews… anything less than 6 out of 10 is probably not worth seeing.)

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.