Gutenberg vs. Divi

In late January (2022), I upgraded this site to WordPress 5.9 and, on impulse, I decided I would go full-Gutenberg. The Gutenberg block-based editor is the future of WordPress, to be sure, and it seemed like maybe even in its less-than-fully-mature state it would be up to the demands of this very modest site.

I had been using the “Neve” theme, which I like because it is a very lightweight, basic theme. For my Gutenberg experiment, though, I decided I would roll all the way back to “Twenty Twenty-Two”, the current default theme for new WordPress installs.

The short version of the story: my Gutenberg experiment lasted about a week before I decided that having my site look good was more important to me. Out went Twenty Twenty-Two, in came Divi.

Why Gutenberg?

For all that WordPress has been able to do on the road to capturing something like 1/3rd of the website market, it has never had strong WYSIWYG editing capabilities, particularly when compared to other “them builders”. Many (and given the sheer number of WordPress installations, I can dare say “most”) people who edit WordPress sites do not have much background in web technologies — and why should they need to? Creating a web page really shouldn’t be harder than creating a word processing document. Format your text, insert some graphics, link to wherever you need to link to, and there you have 98% of website pages. If you need a web design certificate to do that, then your software has room for improvement.

Enter Gutenberg, WordPress’ first whole-hearted attempt at creating a true what-you-see-is-what-you-get editing environment. Central to Gutenberg (and competing page editors) is a drag-and-drop, modular interface. Want a text block? Drop in a text block. Want an image? Drop in an image. An image carousel? etc., etc. WordPress comes with a couple dozen pre-built blocks, and developers can create more through plugins.

All in all, it’s very promising. It’s not reasonable to expect that web page editors have a deep understanding of HTML tags and CSS styles, and when you use Gutenberg you can see where WordPress is going. It all looks good, if you can project far enough.

Why not Gutenberg?

As excited as I was to be a Gutenberg pioneer, it wasn’t long at all before I started running into trouble, and it was trouble of a predictable sort. Gutenberg suffers from the same challenges that have plagued WYSIWYG editors from the beginning of time.

The problem with WYSIWYG

WYSIWYG editors, when they work, are terrific. It is extremely satisfying to jump into an editor, spot the thing you want to change, change it, and see the changes exactly as how they’ll appear in the final, published work. After that sort of experience, you say to yourself, “why doesn’t everything work that way?”

Unfortunately, there is a reason why not everything works that way, and that is that while WYSIWYG editors can do a great job letting you edit the things you see on the screen, they all have the same achilles’ heel when it comes to things you don’t see on the screen. Things like margins, padding and conditional formatting (such as the way thing might react to a click or some other interaction) are extremely vexing for WYSIWYG editors. This has always been the case. Everybody remember the “show invisibles” command from Microsoft Word?

In my humble opinion, WYSIWG editors can be judged on how well they let you edit the things that you can’t see. Generally, there are controls in a side bar that let you adjust things. At worst, there’s a box where you can hand-write any CSS that you feel needs to be applied.

Actually, I take that back. At worst, there isn’t a box where you can hand-write your CSS. And that’s what I found with Gutenberg. Your CSS makes Gutenberg uneasy. In fact, it will strip out even valid HTML and CSS from blocks you add if they’re not considered orthodox. As a web developer, there is nothing more frustrating than to know that something can be done — indeed, even know how to do it– but to be stifled by the development environment. Gutenberg, in an effort to make things simple and to make everything predictable, does this.

Will I ever go Gutenberg?

When it comes to web tools, most of them are bad before they’re good. I did not fully embrace Divi for a few years after its arrival because of all of the things it couldn’t do. Yet, over time, the makers of Divi (Elegant Themes, who did not compensate me for this) kept adding to the toolset, and little by little the number of workarounds needed to accomplished my task got smaller and smaller. Indeed, these days if I want to do something new I start by asking myself “how does Divi want me to do this?” Often, there is a Divi-style approach, and even when there isn’t it’s not particularly troublesome to get inside and do what I need to do.

I can see Gutenberg heading in that direction. The use of the “block” to build pages is logical and modern, and the number of things you can do without having to start hacking shrinks with every version. At this point in time, however, I can’t even really do a basic site like this one without jumping though a lot of hoops. It is just a matter of time until that changes, so until then I’ll stick with Divi.