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.

26 Comments


  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.

    Report

    Reply

  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!

    Report

    Reply

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

      Report

      Reply

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

        Report


  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.

    Report

    Reply

  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.

    Report

    Reply

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

      Report

      Reply

  5. There is another “image alongside content” here that’s not addressed: inserting images inside a paragraph. For that, you have to add an inline image, not an image block.

    Report

    Reply

    1. The inline image thing is indeed confusing and should probably be renamed or reworked in some way. I admit that I tried it first too, but it’s not the droid you’re looking for in this particular instance.

      Still, I think that yes, there is a learning curve, but it’s not the Matterhorn or anything like that.

      Report

      Reply

  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.

    Report

    Reply

    1. Otto this is great. May I download and share or would you prefer that I just pass out the link?
      — Sheryl

      Report

      Reply

      1. Sheryl: do with it as you like. Link or video. Whatever works for you.

        Report


    2. I agree that this is easy and people need to stop fearing change. Thanks for the video Otto. It points out how easy this is and how this post just fuels the fear of change.

      Report

      Reply

    3. Ok, is not difficult, is just different.

      But still I don’t know how fix the image to exact measurements, like 300×300 or whatever I want to use. I don’t see any place to enter the numbers. This is something I do all the time.

      Thanks

      Report

      Reply

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

    Report

    Reply

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

    Report

    Reply

    1. Out of curousity, what alternatives have you considered?

      Report

      Reply

    2. Debra: the Classic Editor plugin is available for just such a reason, and WordPress told you about it in the 4.9.8 version. You can install it right now. It will work and give you the old editor when 5.0 comes out. Guaranteed.

      Report

      Reply

  9. 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.)

    Report

    Reply

  10. I’m currently making videos for Gutenberg as part of our video tutorial plugin, and in some scripts, I feel like I’m disappearing into the matrix. I like the vision but I think we have a way to go yet.

    Report

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.