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.
Drag an image into editor where you want it to go.
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.
Click the block inserter above the paragraph you want to insert the image before.
Select the image block.
Drag the image onto the block.
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.
27 responses to “Adding Aligned Images to Paragraphs in Gutenberg Is Not as Tough as I Thought”
I also find myself struggling with seemingly basic things.
Like I wanted to highlight a few words in the middle of a sentence by changing the background color…easy enough in classic editor, still not sure how to do it, if possible even, in Gutenberg.
——
Worth noting as well:
Matias was live demo-ing on a local branch that had several custom features tailored for the demo that didn’t (and possibly still may not) exist in any released iteration of Gutenberg.
As far as I know, you can’t change the background color of text in a block without changing it for all of the text in the block. This is something that’s known and is probably logged in a Issue or Trac ticket somewhere. As for the live-demo, I was not aware that it contained custom tailored features. Where did you get that information?
In Classic Editor you can highlight single words and color them since ages, why do users need an extra plugin now, especially if the code is ready to be merged, written by a Core Team member?
One thing about the image block in Gutenberg that always cause me trouble is that I can’t insert images from external URL. There’s an issue on Github for a long time, but no one cares :(.
EDIT: Whoops…I didn’t mean for this to be a reply to Anh. Meant to make it a top-level comment, but clicked reply on the last comment on the screen. ¯\_(ツ)_/¯
If you don’t do it a certain way, are you doing_it_wrong?
Which interface am I supposed to use and which method is considered doing_it_wrong?
I don’t think any way that someone accomplishes a task is doing_it_wrong. There are a number of ways to do things in Gutenberg and the user can select the method that works best for them.
I know you know this, but that also wasn’t the point of my post. It was more to counter the idea that things always take longer or more steps in Gutenberg.
To me the key questions to take away from your experience here and other feedback like it:
1. Why are some users having trouble finding the more efficient workflows?
2. What can we do to better surface controls and educate users about the new interface?
Finally, one comment regarding this:
Where is all of the research and usability testing that explains the why behind so many of the interactions and flows?
This is something I’ve wondered for a while. There is a lot of feedback buried in forum threads, GitHub issues, tweets, etc, but I’ve never seen any aggregation of this feedback, or reports generated from any usability testing that’s been done.
Without better reporting of the overall feedback, UX decisions (often made in conversations on GitHub pull requests) can appear to be assumptions or feelings about the feedback a developer happened to read.
This kind of reporting/documentation takes time and a lot of work, but I think it could help with some of the public perceptions about the decisions that have been made.
If there is not enough being written on the topic of the new editing “experience” in WP 5.0, WP Tavern editor(s) find it now necessary and acceptable to dedicate not one, but two posts on the topic of adding a bloody image to a post?
Are we for real here?
O.M.G.
This is definitely the time to move away from this disaster!
I’m not a tech-savvy, I just write blog posts. And I also like trying out new things. As soon as I noticed Gutenberg had been released, I didn’t waste any time in trying it out on one of my blogs, since I knew I’d have to do that eventually if I don’t want yet another large plugin installed on my site.
So far so good, I like what I’m seeing. In my opinion, Gutenberg development is experiencing immense progress; even faster than I anticipated.
In addition, I believe things will get even better as time passes by. Hats off to the guys working tirelessly behind the scene.
How are you finding tables? I tried manipulating content in one… had to resort to the text/HTML editor. I’m not saying it’s any better in Classic, but if Gutenberg is the way forward then it ought to be. And tables are pretty fundamental items, for many.
There is lots to be ironed out because it can’t be that seasoned users of different levels just feel “it takes longer than before”, “am i a moron?”, etc. How GB is functioning today gets always in your way and makes you hard time while creating/editing content. The “logic” of its workflow often mismatches the common logic of most users. Many control options are almost randomly hidden here and there and even there…
It is simply a major UI-design failure. I do not know if there is a UI-designer in the GB team, but if yes that person should have been replaced quite long ago. If there is no such person then the management of GB team is simply incompetent.
Just take a look at the “Insert Before” and “Insert After” icons. They must have been mixed up. I mean the horizontal line represents the content i already have and has been selected and i am just about to insert a new block before the selected one. In that case the plus symbol should be above the horizontal line because that is what is logical and makes sense… so guess why in GB it is the around.
Maybe the answer is: they just do not listen.
Even the support forum of GB tells much. In the last few months they just did not give any feedback to the issues reported there. That is not something typical from a plugin that will be merged into core in some days. Maybe the GB team just can not keep up, but if thats the cause of neglecting the issues then it is simply not ready for the merge.
Use the one method that works best for you, period. I don’t understand why people forget that they’ve been doing the same with TinyMCE for YEARS…I mean, every single WP user that I know of has a mishmash of writing style/techniques (plain text, format with TinyMCE tools, Markdown etc) , shortcodes, HTML, plugins and whatnot that works for them…and most of the time that “recipe” wasn’t found easily, it took days, weeks, months, even years to get it right. Gutenberg isn’t any different.
I listened it all. Well…if all that Pendergast said will come true, then maybe we they can even change the keyboard shortcuts or which key does what and that at any time.
Imagine after they will maybe change what the backspace or enter keys do (for the tenth apptempt or so :-D ) they will just act like they do in any other software. And what if they will change any other shortcuts, will we need to figure out which version we have installed before even getting to the content just do be aware how those shortcuts will act in that particular version of GB??!!
How many users will have to lose their marbles until this nightmare will be over?
Which interface am I supposed to use and which method is considered doing_it_wrong?
I don’t understand why you think there should be only one way to do things, or why any particular method would be “wrong”.
If it works and produces the desired result, then that’s all that matters. Yes, there may be other ways to achieve the goal, and some of them may be easier or simpler or just different, but…
Cooking isn’t about following the recipe precisely. Not all the time.
Especially when trying to start from scratch, which is WordPress’ goal here, there actually is only one way doing things and everything else is wrong: “Do not mix markup with content”.
I understand your point with cooking. But first of all we are not speaking about cooking or recipes.
And what do you think about the fact that even in GB there are several ways to achieve a goal but somehow neither way seems to be the same as in the old editor. I think JJJ pointed out really good that it simply can not be just a mistake as there are more than 2 or 3 features of an editor, so chances are really low that all that is just a mistake. I just wonder what were those clever guys thinking when they made that decision considering millions use WP on a daily basis.
The old editor is bad. The new one is better. This isn’t a complicated equation here.
I hated the visual editor to the point of never actually using it. Really. I write text posts, paste them in, then add stuff like links and images to them to make them web and such.
The new editor, I can actually write in directly. That’s a first time thing for me. So yeah, I fully support it. It’s great. It’s way better than anything previously implemented. Period.
I love the current editor, always type right in it. Love the way it handles links and embedded videos. I also re-added buttons that were taken out in previous WordPresses, so I have it in that “sweet spot.”
I also run my church’s website on MODx. Whenever I have to fix the font in that thing–which is often, because the editor doesn’t behave–I find all sorts of confusing codes in the HTML. The current WP editor has clean code, which I like much better. Gutenberg appears to put in more code.
A while back, I checked out Elementor to see what all the fuss was about. Turned on the Elementor editor, thought What the heck is this, turned it off and went back to the regular WP editor.
Thing is, my site is heavy on text, short on images, so page builders don’t add anything. I’m not doing flashy, fancy stuff.
Different needs, different likes–Some people love Gutenberg, some people hate it.
When Gutenberg has 1,338 open issues, and this number gets bigger by the day, it’s a very complicated equation here. When two thirds of the community passionately hates Gutenberg, it’s an extremely complicated equation here. When it breaks themes and plugins, it’s hugely complicated equation here!
If WordPress was a publicly traded company, it would have lost 80% of it’s value just in 2018, and WP 5.0 is not out yet.
The more these insider elitists talk, the more they make the case for ClassicPress.
Yes, Gutenberg might be better than TinyMCE, but here comes the dishonesty, lies and propaganda. Why are you comparing apples to oranges? Gutenberg is not an editor (so stop calling it that!!!), it is a page builder. So compare it to Elementor, Divi, SiteOrigin and WPBakery, and humor us by saying Gutenberg is better than any of those.
I hope Gutenberg will be great, a competent and an awesome page builder, and soon. As of today though, it’s almost unusable and unstable, with the mystery block border lines, with tons of bugs, and did I mention bugs?
You say, “two thirds of the community passionately hates Gutenberg.” Don’t know how you arrived at the percentage–even as hyperbole. Perhaps the huge number who have the plug-in installed and use it without any real problems just don’t make enough noise. But then whingers tend to out-shout users who are content.
I arrived the two thirds number from the number of ratings, not even counting the obvious 1 ratings that have 5 stars, and a relatively huge number of the with 1 star ratings that got deleted by the mods. I’m also arriving at the number from the various tweets and blog posts throughout the internet.
My be the “whingers” as you put it, are not sheep, do not accept defective products, totally reject “software communism”, and expect higher standards. It’s funny how you argue on the numbers, that is harder to prove one way or another, and none of the other points…
As a theme developer, I intend to use and develop blocks for Gutenberg. But, it does not mean that AT THIS POINT, it is better than any of the available Page Builders. I dare anyone to argue against it…
I also find myself struggling with seemingly basic things.
Like I wanted to highlight a few words in the middle of a sentence by changing the background color…easy enough in classic editor, still not sure how to do it, if possible even, in Gutenberg.
——
Worth noting as well:
Matias was live demo-ing on a local branch that had several custom features tailored for the demo that didn’t (and possibly still may not) exist in any released iteration of Gutenberg.