Gutenberg Editor Review: Please Don’t Include This in WordPress Core
Much of my time on here generally focuses around reviewing and comparing a handful of WordPress themes or plugins against one another. In today’s post, however, I want to take a closer look at one new WordPress plugin: the Gutenberg editor plugin.
Some of you may be wondering what makes this plugin so special that it gets its very own post. Well, there are a number of reasons for that. Although it was just released in June of 2017, WordPress promises that it will simplify the process of creating rich block content (what that means exactly will be explained below). Here is an example page the developers have created:
One of the more compelling reasons to check out this plugin right now, however, is that it isn’t going to be a plugin for very long. The team behind it has been hard at work trying to get the editor ready to merge in the next WordPress update. Currently, they’re aiming to complete it and have it ready for launch for 4.9, for which a release date it yet to be set.
While the development team works on fixing the noted bugs and issues discovered within the new editor, I wanted to take some time to download the plugin they’ve been kind enough to share with us in beta and give it a test drive. If you’re as curious as I am about what it’s going to be like to create content in the new Gutenberg editor, hop into the passenger seat as I take this bad boy for a ride.
A Review of the Gutenberg Editor
It really feels as though the Gutenberg team has something really special here, something that will greatly improve the text creation and editing process within WordPress. Considering the number of plugins we use to expand the WYSIWYG and to simplify the process of switching between composing and previewing, this plugin seems well-intentioned.
So far, here is what I’ve been able to uncover:
It Hasn’t Been Well-Reviewed
Granted, the Gutenberg plugin is still in beta – they even warn you about that in the description in the WordPress Theme Directory – but the ratings on it so far aren’t great.
While there are currently only 15 reviews for the plugin, it looks like users have had a very strong reaction to it on both ends of the spectrum. Having now tested the plugin for myself, I’m actually surprised that anyone would have anything positive to say about it. I’ll explain more on that below.
Here is a taste of some of the negative reviews, all of which I happen to agree with:
“Clients like WP because of its simple UI. Force this on people and you may as well use Drupal.”
“Sorry, but this looks and feels bad, and is a productivity drain. Hiding UI elements until you click on things is terribly confusing for some new people (the opposite of your goal.) You’ve just doubled the number of clicks I need to accomplish the exact same thing.”
Yeah, it’s not good, folks.
It’s an Attempt at Distraction-Free Writing
This is what Gutenberg looks like in the visual editor:
This is what it looks like in the text editor:
If you click on the Post Settings button in the top-right corner of the page or on the “X” in the corner of the Post Settings widget, you can close that module for a truly distraction-free writing experience:
In addition, most of the text block and formatting options are now tucked away into the Insert tab at the top of the page. The rest only appear when you hover over each created block.
If I had to give one positive word about the Gutenberg editor, it would be about this. For people who enjoy working with a distraction-free interface, this is a nice touch… though, at the same time, it’s not totally distraction-free as the rest of the WordPress platform is visible all around. So, perhaps it’s more accurate to call this a minimal writing interface?
It’s Basically a Visual Builder
The Gutenberg editor is basically going to convert the visual and text editors we currently work with in WordPress and turn them into visual builder tools. There are a number of problems with this.
Literally every new paragraph, header, image, video embed, pull quote, bulleted list, and so on needs to reside in its own block:
All I wanted to do here was change three lines into an indented, bulleted list, but the Gutenberg editor forces the style upon the entire block:
The only way that I can see getting around this is if you somehow discover that the “Classic Text” formatting option under Insert allows you to circumnavigate the block building style of Gutenberg.
But how in the heck are you supposed to know this unless you spend time clicking through each of the insert options? Not exactly intuitive. No one has time for that. This new editor should take what we’re comfortable with and simplify it even further.
Part of the concern I have here is the inconvenience factor. Unless you’re building a homepage with small blocks of text that require different font types, styles, and sizes, there is absolutely no point in forcing users to create a new block every time they want to write a new paragraph or add a header to a section of paragraphs in WordPress. Absolutely. No. Point.
Another concern is the control of spacing. With this new blocked method of adding copy to a page, how will spacing between related items (say, a paragraph in one block and a bulleted list that belongs with it in another) work? Currently, I cannot answer that question for you as the preview functionality in Gutenberg doesn’t work.
Say Goodbye to Copy-and-Paste
As someone who likes to write her content outside of WordPress and then paste it in when I know it’s 100% ready to go, this is probably one of the more devastating parts about Gutenberg. When trying to paste text from Word into the new editor, all formatting is lost. So, unless I’m willing to write all my content with HTML coding built in and then paste it into the Text tab, I’m going to have to start following a completely new copywriting process.
Image Editing Is Limited
Now, I get that the developers’ goal is to simplify content creation in WordPress. Trust me, I get that and I respect that. But I think they’re going about it the wrong way. Case in point: When you try to upload or select an image in the Images block, you’ll see that there are no longer options for sizing, alignment, or hyperlinking. Once you have selected a photo and entered the metadata, it is inserted into the page, but automatically centers and scales to the full-width:
If you want to size it differently, all you can do is select one of the text wrapping options and then it’ll shrink to about half the size and move over for text to wrap around it:
While you can probably customize the size within the code in the Text editor, that defeats the whole point in using these blocks in the first place.
And while we’re on the subject of images, let’s talk about the gallery tool. You’re likely using a gallery plugin to accomplish this right now. If you’re not, I’d strongly advise that you do so going forward as the new gallery functionality doesn’t work very well. It took a couple tries to select multiple images for the gallery and I don’t think the end result displays properly:
Again, I can’t actually verify the on-page results as previewing on the front-end is disabled, so perhaps this is more an issue with the Gutenberg display than with the end result.
Video Embedding Isn’t That Great Either
Let’s talk about the insert options at the top of the Gutenberg editor. While I can see why they’d want to put the most popular blocks and formatting options up there, I don’t really see why they had to break out 35 different website embedding options.
Embedding used to be so simple. Just grab the embed code for the video, slideshow, infographic, or whatever, and then paste it into the text editor. See:
Now I don’t think you can even do that anymore.
See how there’s a YouTube iframe embedded in the top of my blog post? Well, the second after I took this screenshot, the new code completely disappeared. I thought maybe it shifted somewhere else on the page or that somehow I had undone my change, so I tried again. Five. More. Times. The iframe disappeared every single time until I finally gave up, switched back to the visual editor, and used the embed tool. In all honesty, I don’t think it looks very good:
Sigh. “Why do you [guys] have to go and make things so complicated?”
There’s a Lot That Just Doesn’t Make Any Sense
Okay, I know this section is going to seem like a mishmash of a lot of different things and that’s because it is. I’ve poked around in all the different settings and customization options and, quite frankly, I just don’t get the purpose for most of it. It’s like they wanted to simplify something that didn’t need simplification and, in doing so, just way, way overcomplicated it.
Here are some of the remaining questions I had as I worked my way through here:
How often will we need to use the drop cap function in our blocks of text?
The reason I ask this is because when you click on a block of text in the Visual tab, the only Post Settings “setting” you can change on the right-hand sidebar is to create a drop cap. If I were a new user to WordPress, I’d be truly confused and wondering where the rest of my options were… and if I were in the minority of people not making full use of drop caps in my writing.
What is the point of the gear in the top-right corner of every block?
The second you click on any blocked element in Gutenberg, the available settings open in the left-hand pop-up, so I’m not sure of the purpose of the gear icon. When the settings are open and you click on the gear, the pop-up doesn’t close. And when the settings are closed, the only thing it opens is the alignment choices. In order to see the other settings options, you have to actually click on the block to reveal them. So why have the gear there?
What’s up with the button?
As of right now, you can add call-to-action buttons to your posts and pages with the visual editor. It’s not a great tool, but it’s there if you want it. That being said, the ones in the visual editor now actually look like buttons. What we get with Gutenberg is, well…
It looks like something you’d see in one of those Buzzfeed articles about awkward, drunken texts you get from your mom.
Why did they bother with the Latest Posts widget?
There’s another new addition to the visual editor Insert options called “Latest Posts.” It’s basically an attempt at replacing related posts plugins. Under no circumstances should anyone use this and I’ll give you five reasons:
- There are no images or design elements to help draw attention to this callout.
- It’s just a bulleted list of links to the last five blogs on your site.
- The bullets don’t align with the rest of the text on the page.
- You have no control over which blog posts appear, in which order they appear, or how they appear.
- Oh, and most of the punctuation reverts back to the HTML code.
It looks terrible. Please don’t use this.
While the developers working on the Gutenberg editor plugin have obviously put a lot of work into creating the plugin and I commend them on their efforts so far, the truth is, this plugin is nowhere near ready to be included in WordPress and needs a lot more work, in particular, UX work.
The WordPress.org Gutenberg page states: “The goal of the block editor is to make adding rich content to WordPress simple and enjoyable.”
Unfortunately, the plugin as it currently functions is a long, long way from achieving this goal.
As one of the reviewers on WordPress.org says:
“Please don’t add this to next core. Leave it as a plugin and let us the choice to use or not.”
I’m in total agreement with this statement. Even if they do work out all the issues and make it a completely streamlined and simplified visual builder tool we appreciate more than what they’ve given us now to experiment with, I don’t think it should be forced.