What Are We Doing About Gutenberg?

Here at Online Optimism, we focus our website development on WordPress sites, which means, right now, we’re going through some changes.

The entire WordPress ecosystem is buzzing (or muttering, or cursing, depending who you talk to) about Gutenberg, the new block-based editor that became standard with the release of WordPress 5.0. It’s a big, somewhat unwelcome change that we have little choice but to get accustomed to.

So, why is the new Gutenberg editor controversial? Mostly because it’s a big, big change to a familiar interface people were mostly happy with. WordPress as we know it is a popular, flexible, extensible content management platform that has accommodated all kinds of users. Some people use it straight out of the box for hobby blogs, and other people customize it beyond recognition for highly-trafficked, interactive e-commerce sites. It seems WordPress has long been able to accommodate all kinds of custom templates, plugins, and page builders, so, what’s so different about this one new editor that has people bemoaning its existence (or shouting its praises)?

Gutenberg is a different kind of WordPress editor. But why does that matter?

First of all, it’s block-based. That’s partly new. If you’ve worked with WordPress in the past, you may recall that the main editing space was not block-based but page-based. It looked kind of like a Microsoft Word page. You had a few buttons to apply styles like bold or underline, and you could import pictures and create links. A lot of people like that style because it’s very writer-friendly.

The classic editor’s page-based interface.

On the other hand, if you were using a page builder extension like WP Bakery or Beaver Builder, which use a complex block-based interface, your page would look like a blank slate where you would drag pre-designed elements from a menu, building a sort of nested-boxes representation of the webpage. Designers like page builders because they give you a lot of freedom with the layout.

A page builder’s nested-boxes interface.

Both of these approaches have staunch defenders and detractors. They’re also both familiar to WordPress designers and developers. So, what does Gutenberg do that’s different?

Gutenberg, as it stands now, replaces the simplicity and familiarity of the page-based model with a block-based model that is less complex than most page builders (though not easier to use), and it is also not nearly as flexible or designer-friendly. The blocks contain not only the content you put in; they also come with built-in layouts and styles that can be considered a benefit or an obstacle, depending on what you’re trying to do.

Gutenberg’s block-based interface.

As with a page builder, the editing interface is supposed to be a close approximation of what the published page will look like. Unfortunately, it doesn’t quite succeed at that unless the layout is very simple. Also, there’s supposed to be a block for everything. But the actual number of blocks is limited (especially blocks for creating layouts), and plug-ins haven’t yet shown up to fill in the gaps. Despite these problems, Automattic (the makers of WordPress) promised that WordPress 5.0 would be officially released in 2019, with Gutenberg as the default editor, and they met that goal. Gutenberg is here. If you want the Classic Editor you’re used to, you now have to install it as a plugin. And it says something about Gutenberg that the Classic Editor is one of the most popular plugins ever.

So, what’s wrong with Gutenberg?

You may be wondering about the slightly negative tone of this article so far, considering you’re reading the Online Optimism blog. All I can say is: we’re Optimists, but we’re also realists. And, being Optimists, we gave Gutenberg a try. It’s not a disaster. We have high hopes for it, and we expect to adopt it in time, when it can equal the flexibility you can achieve with page builders or custom templates. But, right now, Gutenberg doesn’t feel ready for prime time. Here are a couple of reasons why.

The blocks are inconsistent, for one thing. Here’s an example: most blocks let you assign a CSS class to the block, but the otherwise useful “Shortcode” block doesn’t. On one of our sites, we wanted to assign a class to each section of the site in order to animate it as it scrolled into view. But you can’t assign a class to the Shortcode block the way it’s currently built in Gutenberg, so we had to use the Custom HTML block and place the shortcode in that. The point of having a modular, single-function block is lost if you can’t easily style it.

Also, the blocks often don’t contain the HTML you want for easy styling. I wanted a simple block that would have a flexbox container and a couple of containers inside whose style I could easily control with flexbox options. So I tried a couple of Gutenberg plugins, including Atomic Blocks’ well-reviewed “AB Container.” It wasn’t great. It had a lot of extraneous code (containers within containers), and it also behaved strangely in the Gutenberg ecosystem. (If you started a new block adjacent to the AB Container, it would also be an AB Container, whether you wanted that block type or not. It’s a bug.) Maybe worst of all, you couldn’t drag blocks out of the container. If you wanted to move that interior content, you’d just have to delete the container and create the interior blocks again. Again, the point of a modular editing system is that it should be modular. Dragging things around should be easy, and it’s not yet.

It just feels like you’re fighting with Gutenberg to get the blocks to do what you want. I found myself using the Custom HTML block a lot—so much that I wondered if it saved time to never use anything else. The good old “Text” tab on the page-based TinyMCE editor started to look better and better. After all, that was basically one big Custom HTML block, instead of a bunch of small ones. So, after a generous trial period with Gutenberg, we decided that using the old editor was, for now, faster and better than trying to make the new block-based editor do what we wanted.

O.K., what’s the plan?

That’s why, for our current sites in production, we decided that we’re sticking with the Classic Editor plugin while Gutenberg finishes cooking. The decision to keep the Classic Editor around also makes it easier for us to upgrade our existing sites to the latest WordPress versions.

According to a statement from Automattic, the Classic Editor is scheduled to be phased out in 2022, just three years off, which is a concern. But Gutenberg seems to be improving by leaps and bounds, with new blocks appearing almost daily. Either Gutenberg will catch up, or the Classic Editor will get to stay on longer. Either way, we feel optimistic enough about the WordPress ecosystem that we’re willing to bet on it for a while.

You may be wondering, “Can’t you just edit the blocks themselves, or make custom ones?” And the answer is yes, you can—and yes, we will. In fact, I think that will soon come to be seen as the main strength of Gutenberg: nearly unlimited extensibility that’s still accessible to non-technical users. But we also feel that the familiar, classic WordPress interface is still working well. It was never broken. Gutenberg is an ambitious, game-changing product, and when it becomes adopted enough that clients ask for it, we’ll be ready to implement it. We are ready now. But given the timelines required by our clients, we feel like staying with the tried-and-true version of the most popular and feature-rich content management platform on the web is an optimistic choice.