With Gutenberg going from a beta for WordPress users to default, Drew Wilson offers his take on the editor.
A lot of people have their habits. A lot of people have their expectations. So, sometimes change doesn’t come easy even when it’s change for the better. I always try and keep an open mind and if there is a better way to do something, I am happy to give it a shot.
When WordPress announced the Gutenberg editor, I was like a lot of other WordPress users out there and wrinkled my nose at the announcement. Having precious little time for the last few months to learn something new, I decided against beta-testing the new editor. There is a practical upshot to all of this: the beta testers will work out the bugs, so by the time the editor becomes the default one, the design bugs should be worked out by then anyway.
Well, that time finally came. In keeping up to date with the latest software like any good admin should do, I upgraded to a newer version of WordPress. It turns out, it was a version where Gutenberg became the default. So, I huffed and said to myself, “Well, I always knew this day would come.”
With a breaking story hitting, I knew this may be a more painful process to report the news, but I plugged my nose and clicked on “Add New” to see if I could manage with the new editor.
First Impression of the Editor
I opened up the editor and realized my worst nightmares became reality. Everything was different. OK, keep calm. There is a logical flow to any UI (User Interface) and all I have to do is recognize it.
Adding the Headline
First things first, let’s add our heading. That should be simple enough. The first thing a user shouldn’t be asking about an editor is “where do I insert the headline?” Unfortunately, that’s exactly what I wound up asking. Instead of text boxes, Gutenberg has “blocks”. I hover the mouse over the text box and saw a plus sign, so immediately click on that.
Up pops a full dropdown menu. Do I want to add a picture? What about a paragraph? Do I want to add a paragraph? Do I want to add a heading? Yes. How do I have to go through a dropdown menu just to add a heading? That’s literally two added clicks to the process to add something that is dead simple. In the subsequent menu, I’m being asked what weight I want to give this heading? H1? H2? How about H3? What about H4? At that point, I’m asking, “Wait, isn’t this kind of thing covered in the development of the WordPress theme? Additionally, why should anyone who is merely writing content being asked this in the first place?”
At that point, I grew frustrated and dug around the options for a code view. I think in code when I write, so this is going to be a much more natural fit for me. Luckily for me, I find that option and I toggle to code view.
To my horror, I see the code generated in just a single nearly blank post. A code comment is added above the heading and below the heading. After that, two more additional comment tags are added for the body of the text: one above and one below. To me, that is literally four lines of HTML bloat added to the posting code and I hadn’t even started writing yet. Select All, delete.
OK, clean slate. Let’s try this again. What do you know? A new text box appears. It tells me to add a headline. Why the heck was this not showing up when I started all of this? OK, so I added in the heading to start writing. Yes, I am six paragraphs into describing my experience and I’m now finally able to add in a proper headline to a news article. OK, maybe this was somehow a glitch that popped up that’s a one off.
I then realize that the headline text is huge. It barely fits about 4 words before dropping down to the next line. It then dawns on me that, not only is the text huge, but the editing space has shrunk. It’s now two thirds the width it used to be. In it’s place, the valuable screen real estate is used by… nothing. Just blank white space for no apparent reason sitting on either side of my text screen. Oh, and no, you can’t just move the bounding box or adjust a setting to take up the whole space either. You are stuck with that.
Escaping to the Code Editor
So, since I am in code editor mode, at least this is a comfortable cozy place for me to write at least. So, I start writing and editing. Throw in some opening and closing tags here and there. OK, progress being made so far. Let’s add in a URL while I am at it. I switch tabs to grab a URL referencing my earlier work. When I switch back to the editor tab, my cursor moved to the bottom past some of my other code. It also added in a closing tag at the end of all of my code to boot. Agh! Backspace, backspace, backspace. Click. Paste. Close A tag.
OK, so I’ve already learned something. Do not switch tabs while editing an article without closing a tag. It messes up the code and throws your insertion point to the bottom of your work. I’d have to re-work some habits just to accommodate the editor (why should I be accommodating an editor? Shouldn’t the editor be accommodating me?). Unfortunately, I trip over this bug a couple more times while creating my article. Heck, it went so far as to delete a URL I inserted in the first place. I even had to go back and re-retrieve a URL because the code editor decided to randomly delete a URL.
Fortunately, I do eventually make it to the end of the article. Now time to add in some pictures, keywords, and catalogue it in the appropriate category. So, I start scrolling to the bottom of the page only to discover that all of my familiar options are gone. OK, what have those been moved to?
Adding in Metadata
After some scrolling through the right side bar, I successfully located the keywords first. Unfortunately, they are hidden inside a dropdown menu. So, rather than just clicking on a text box and writing, I have to open a drop down menu, then click on the textbox to start writing. That’s an additional click and even more scrolling to accomplish a similar task.
So, I start adding keyword to see that, right when I type in the comma, Gutenberg wraps each keyword in a nice little pretty picture. At first, I thought, “whatever. I’ll live with that” only to realize I had a typo in one of the keywords. Now, I have to delete the entire keyword and write it out a second time rather than just do a quick edit. Why am I being prohibited from just fixing a stupid typo in a keyword?
OK, keywords are in, where are my categories. Back to scrolling. I find it and tick off the categories. Unfortunately, I can no longer choose which is the main category, so I have to carefully select (I’m assuming) my first one before ticking anything else. Oh yeah, just pulling down the dropdown menu is an added click to the UI.
Now, to find where I can add the picture. Some more scrolling later, I find the pulldown menu to reveal the single button that will allow me to open up my image screen. That’s an additional click to the process. At least Gutenberg hasn’t hit the image library screen, so that’s an easy process.
Search Engine Optimization
The good news is that I have an additional third part plug-in, so it shouldn’t affect that. So, I go back to the bottom of the screen to look for it. Unfortunately, all that is left of the plug-in is a tab. Gutenberg otherwise deep-sixed my plug-in. I figured much more of the process was automated at first (I was wrong on that).
Publishing the Article
You can’t screw up hitting a single button to publish. Can you? It’s a single button to publish an article. That’s it. Dead simple. You can’t get any easier then that. Well, I hit publish and Gutenberg stops me. Am I sure I want to publish? Maybe I should look through the article for typo’s. Seriously? A pop-up window saying I really didn’t mean to hit publish? If I want to publish the article, hit publish again. Yes! I want to publish, now let me frigging publish already! You are my UI! I don’t need to negotiate with you!
Ripping Out Gutenberg
With twice the time it took to write a simple article and three times the headaches, the knives were out at that point. There’s got to be a switch to disable it somewhere in the settings. No there is not. According to documentation I had to look up afterwards, disabling Gutenberg requires a plug-in. A whole plug-in. Just to disable something I never wanted. Yes, the old editor is in WordPress, but it requires a plug-in to access it. Yet another reminder that this is a forced upgrade I never wanted. What is this? Windows 10?
After installing a whole new plug-in, I ticked a box to disable the editor – something that should have been included in the settings by default in the first place.
Clicking on Add New again, I see everything is back to normal. Ahhhh. Relief. Everything is back to normal.
The Verdict
Gutenberg is a terrible editor. It’s a bad editor and you (WordPress team) should feel bad for even thinking of pushing something and forcing people to like it. I get that you want your users to try something new, but I am working on my own site on my own server. At minimum, you should give people the option of what editor to use. Forcing the upgrade and actively making it difficult for users to switch back is asinine.
This is not about me liking or not liking change. I know a thing or two about UI design. As you can tell, I was counting clicks. This is a great way to measure inefficiency in design. To add a heading in the simple UI, you just looked at the top of the text box, click, and start typing. You don’t wait and hope that box magically appears on its own after a while.
The bugs in the body are self-evident of why writing the article itself is painful. The re-inserting the URL alone because a code editor randomly decided to delete it is a big example of this.
In the simple editor, to select a category, it’s already present at the top of the screen on the right hand side. Just tick boxes as needed. You can even adjust on the fly your main category if need be. No opening of a pull down menu necessary.
Tags are the same thing. In the simple editor, it’s right below the categories. Just a text box and a button that says add. Again, no pull down menu necessary.
Same thing with the images. Right below tags is the Featured Image box. A button to set the image. No pull down menu necessary. Believe it or now, the featured image is the only thing in all of this that needs scrolling in the simple UI. All you have to do is scroll down past tags to find it. Simple (depending on how big your screen is of course).
In all of my experience with Gutenberg, it was clearly made by people who don’t actually write or publish content. Heck, I’m not even sure that people who understand user interfaces were behind this. After all, what sane designer puts in so much unused white space in the first place when the UI demands so many different options be used in the first place?
Bottom line, I’m using the “old” design because it’s actually functional. I’m not a fan of change for the sake of change – especially when the change is for the worse. Gutenberg is just plain terrible and barely functional. A design should help make my life easier, not harder. Gutenberg just does not fit that bill and I will be actively avoiding it unless there is a huge about-face on that.
Drew Wilson on Twitter: @icecube85 and Google+.
