Testing Gutenberg
Since I get paid to work on WordPress websites, I cannot ignore Gutenberg, as much as I would like to. If you aren’t familiar with WordPress, then you’re probably wondering “what the heck is Gutenberg?”. Gutenberg is the new “editing experience” that is being merged into core WordPress. It is a block editor that is replacing the current visual editor.
I started doing some research related to Gutenberg in January of this year. This testing got sidelined because of a project that I started in February that involved Laravel. This project took up my full attention through early fall. Now that the project has been completed, I have some time to return to my Gutenberg testing. I don’t have a lot of time left to test things out. WordPress 5.0 is scheduled for release on November 19th, and this is the version that is going to have Gutenberg as part of core.
I spent some time last week and again this week reading various articles about the issues surrounding Gutenberg. I’ve also looked over the issues in the GitHub repository for the plugin. I am extremely concerned, especially since we manage over 50 websites for our clients.
In my local development environment (a Homestead virtual machine set up on my work laptop), I have a WordPress installation set up that has the Gutenberg plugin installed and activated so that I can test things. I decided to write a post using the new editor. I didn’t have a topic in mind. I just started typing and let my experience determine what I wrote.
The full content of that rambling post can be found below. I do not have Gutenberg installed on this site, so some of the formatting is missing. If you’re curious, here is a screenshot of how the post looks on my test site.
The post contains my raw thoughts as I was writing it. I did not go back and edit it before I decided to post it here. It only pertains to the editing experience. I have even more concerns when it comes to extending WordPress while developing sites for clients. But that’s a post for another day.
This is a test post that I am writing in an effort to give Gutenberg a real try. At first glance, I am not all that impressed with Gutenberg. All of the drama surrounding it has turned me off. It feels like the “powers that be” have decided that they want it for whatever reasons, and they don’t give a damn what regular users want.
I can see some good things about Gutenberg.
- Provides some additional content layout options.
- Makes including some elements easier to add than it was with TinyMCE.
But there are issues too. I just ran into one myself while putting together the previous list. First, half of the text that I wrote for the 2nd bullet point disappeared when I hit enter to move to the next item. Second … how the hell do you get out of a list without using your mouse? In any word processing program I’ve ever used, including Google docs, when you hit enter twice without entering content, it breaks you out of the list. But Gutenberg doesn’t do that. It just keeps adding blank list items. And then when I went to delete them using the backspace key, nothing happened. My cursor was in a weird place too. Totally NOT cool.
What the hell? My cursor just disappeared. I hit the down arrow key to move out of the previous paragraph and nothing happened. I then hit enter to create a new paragraph. That appeared to have happened, but my cursor stayed at the end of the previous paragraph. I was able to tab into this paragraph, but that definitely isn’t intuitive.
I’m a someone technologically savvy person. I mean I build websites for a living. If I’m having issues doing these simple things within Gutenberg, how is someone who isn’t as well versed in technology supposed to figure this stuff out? A person who has figured out Microsoft Word and/or Google docs can use the classic editor without any learning curves. But put that same person in front of Gutenberg, and he/she is going to end up walking away.
Another issue that I’m encountering is really bothering me. And maybe this is just me, but I think there might be others. As I continue to add content to this post, I reach the bottom of my browser window. There is no padding below this block that I am typing in. I have to reach over to my mouse to scroll down to get a little breathing room. Why should I have to do that? I don’t remember having this issue with the classic editor. Here is a screenshot showing what I’m experiencing.
I wish there was a way out-of-the-box to put a border around that image. Without that, you can’t see what I’m talking about regarding the lack of breathing room at the bottom of my browser window. And if I want to add inline styles, I lose my “image block”. I guess I need to make sure that my theme includes a class to add a damn border when I want one. Also, what if I don’t want a <figure /> tag around my image? What if I only want an image tag? I guess I can remove the <figure /> tag if I convert the block to HTML. But what if I don’t know HTML and I just want to add a border around an image? I’m screwed! But then again, I don’t know if that was something I could do with the classic editor or not. I don’t remember.
I just replaced the image above with one showing the block highlighted. Why did the “alternative text” that I had for the previous image disappear when I replaced the image? I didn’t add it directly to the image. I added it to the block settings. The “additional css class” that I had added to the block stayed. Why did the “alternative text” disappear?
Okay … another thing that I just ran into. Why can’t I select some text within a paragraph and change it to “code” styling? I could do that with the classic editor. In fact, it appears that the only styling I can put on text within a paragraph is bold, italic, and strikethrough. Why can’t I insert special characters? Or add superscripts or subscripts? Are they not valid within a paragraph? Do I need to change my paragraph to some “special” type of block? It doesn’t appear that I can “transform” a paragraph into a block that allows advanced text formatting. Well that’s not cool WordPress.
Apparently I can add a “classic editor” block to my post. This has the normal TinyMCE interface. But what if I already have some text written and I need extra formatting and I didn’t know that I needed this “special” block to apply it? And where are the subscript and superscript options? Do I need to install TinyMCE Advanced to get them?
And why does the “post updated” message not go away on its own? It hides part of the UI. That isn’t cool. I have to reach for my mouse again and go up and click the little x
And what if I want to add an inline link? Is it easy to do? Let’s find out. It is, but why does it require me extra clicks to specify that I want the link to open in a new window? And clicking on the little pencil icon doesn’t show that. You have to click on the kabob icon in order to see that option. Why can’t you include it in the “edit” modal? Isn’t that a more logical place for it?
How about a button? How easy is it to add a button? Normally, I would just add a link and add a class to it since I have that in my theme. But there isn’t an option to add a class to a link as far as I can see … at least not an inline link.
Before I add that button, let me tell you the problems I just ran into. I had hit enter to leave my previous paragraph, and Gutenberg automatically gave me a new paragraph block. I didn’t want that. And I couldn’t convert it to to a “button block”, which I am assuming I need in order to add a button. I clicked on the little “plus” icon at the top of the empty paragraph block but nothing happened. I had to click on the damn kabob icon to remove the block. Then I had to go back into the paragraph block and hit enter in order to have an option to add another block. Why is it so hard to so something so simple? Let’s see if Gutenberg lets me add a button block after this paragraph without jumping through hoops first.
Okay … I got my button added, but it looks goofy. Probably because I added the button classes from my theme to the settings for it (in the sidebar). So now it looks like there are 2 overlapping buttons. I wonder what it looks like on the frontend.
So let me get this straight … in order to float an image next to my paragraph, I need to move the image to before the paragraph … and I can’t drag it there … and then align it?
Anyway … I’m going to save this at this point so that I can see what my button looks like on the front end.
Not good. That’s how the button looks on the front end. This is how it ended up looking …
And this is how it is SUPPOSED to look …
Why is my button wrapped in a div? The classes I put in the block settings in the sidebar went on the div and not on the <a> like I wanted them to.
I have clear styles in my theme to make a link look like a button. I shouldn’t have to change my styles to work with Gutenberg’s stupid extra markup.
I think I’m done testing out Gutenberg. I haven’t done any crazy layout things in this post. I’ve just done normal things that anyone might want to do … whether they have HTML knowledge or not.
I can tell you that I will not be using Gutenberg on my personal WordPress website. I will keep the Classic Editor installed and active for as long as it is supported. In fact, I might end up replacing my WordPress website with one that I develop using Laravel. That way I’m not forced to use a new “editing experience” that I don’t want.
But as for the websites that we develop at work for clients … my hands might be tied there. We have installed the Classic Editor on all sites we currently manage. If I have my way, we’ll include it on new sites as well unless there is a good reason why a particular site might benefit from Gutenberg. As of right now, I can’t think of any.
In my mind, Gutenberg is definitely not ready for prime time. I’ve seen many many others say the same thing. Hopefully the powers-that-be realize this and decide to either delay the release of WordPress 5.0 or wait to incorporate Gutenberg into core. Leave it as a plugin for now and those that want to use it can. Don’t force it on the rest of us that it is causing issues for.
</rant>