Home | News | WP Tavern | Adding Aligned Images to Paragraphs in Gutenberg Is Not as Tough as I Thought

Adding Aligned Images to Paragraphs in Gutenberg Is Not as Tough as I Thought

Last week, I published an article that describes the process I went through in Gutenberg to try to add an aligned image to a paragraph block. I concluded that performing the task in the Classic Editor was easier than in Gutenberg.

In response to the article, William Earnhardt compared the process and showed how it can be accomplished in two steps in Gutenberg.

  1. Drag an image into editor where you want it to go.
  2. Click align right.

Dragging and dropping images into WordPress is not something I do. It’s not how I write. His method is simpler but I prefer to work within the interface. His second suggestion of accomplishing the task is the method I’ll use from now on.

  1. Click the block inserter above the paragraph you want to insert the image before.
  2. Select the image block.
  3. Drag the image onto the block.
  4. Click align right.

In the last few months of using Gutenberg, I’ve become accustomed to adding new blocks by pressing enter at the end of a paragraph block or by clicking the plus sign to the left of a block. I haven’t used the plus sign between blocks but it makes sense and indeed, it’s quicker to accomplish the task.

According to Earnhardt, there are even more ways to complete the task in Gutenberg. This brings up an important question, how many different ways and user interfaces should there be to accomplish a task? If you don’t do it a certain way, are you doing_it_wrong ?

Take for example, adding captions to images. In Gutenberg, there are at least two opportunities to add a caption. The first is the attachment details screen after uploading or selecting an image from the media library.

The second is the Image block user interface. When using the Image block interface, my cursor gets stuck in the caption area and I need to click outside of the block in order to continue. If I use the attachment details screen, it automatically puts the caption text into the image block, bypassing the hurdle. Which interface am I supposed to use and which method is considered doing_it_wrong?

Adding a Caption via the Image Block Interface

I’m Willing to Learn

I understand the long vision of Gutenberg and what it means for the future of WordPress. For the past several months, I’ve used the plugin and interface exclusively to craft content.

I’ve been learning things along the way and trying to readjust my workflows but the question I keep coming back to when doing things in Gutenberg is why?

Why is this button hidden? Why are there three differently located buttons to add blocks when it would be nice to memorize one? Why does this do that and vice versa? Where is all of the research and usability testing that explains the why behind so many of the interactions and flows? Am I just a moron or is it the interface that guides me in the wrong direction?

Many of my experiences in using Gutenberg this past year have been echoed by Mark Root-Wiley . He does a great job of saying what I’ve been feeling and thinking for a long time.

When I and thousands of others watched Matías Ventura‏ perform a live demo of Gutenberg at the 2017 State of Word, people were blown away. But this is someone who has been creating Gutenberg from the core and is proficient in all that it offers. Is this the level of Gutenberg proficiency I and others need in order to get things done? Probably not, but at times, it sure feels that way.

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.