4 Months with Gutenberg

It has been almost 4 months since Gutenberg was released (on 6th December 2018) or foisted upon unsuspecting users, depending on your point of view. I had posted about it on my blog earlier as well as on the WordPress Reviews section, but I did want to revisit it now that I have had some more time to spend with it.

The Good

As I had written earlier, I was very happy that it was bringing some native layout features to WordPress. I was always very frustrated with the fact that there was no native way to do landing pages in WordPress, and users had to rely either on their themes or on shortcodes or on block-builders. To that end I had provided “Custom Layout” templates with Suffusion almost a decade back (still in use on one particular page on this site), and had used Beaver Builder with TwentySixteen on one of my sites and Elementor on another page on this site.

With Gutenberg finally becoming available I removed Beaver Builder and Elementor from their respective sites and managed to bring down page load speeds across the sites. Now, loyal fans of those plugins might point to the versatility of those plugins, and while I don’t dispute that, I was really using them for something very simple that didn’t need me to add the bloat to my pages. Of course, one of those sites uses BuddyPress (another piece of obscenely bloated software), but that is a necessary evil for the moment.

Was the transition quick? In a manner of speaking, yes. I was able to get each of the pages switched over in about a couple of hours each.

Was it easy? Hell, no! Gutenberg is woefully behind the times in terms of several core areas, primarily responsive design. I am mainly using it for one thing: multiple-columns. And in spite of adding a 33 KB stylesheet to every page on every site using Gutenberg you need some additional CSS to make sure that your columns don’t get squeezed too much on smaller widths. The fact that I was able to get the switches done in a few hours was mainly down to my knowing exactly what I wanted to do.

The Bad

Apart from what I have written above, Gutenberg makes very poor use of space. Having worked with code for more than half of my life, regardless of editors I find myself moving to use raw HTML several times. Now consider this:

1. If I am designing a page that is 960px wide, Gutenberg first clamps it down to 610px, so I lose 350px of space, or more than 36% of my desired real estate.
2. Now if I add a 3-column block to my content, each column becomes just around 200px wide. Take out the padding and margins and you are left with around 150px. That less than one-third the width of most phones today – pretty much pointless in terms of writing area.
3. Knowing that using a block-based interface is going to add a ton of junk markup (inline styles and the like) to my content, I switch to using a custom HTML block, which, by requirement, needs a fixed width font. And with that, any semblance of readability flies out of the window! I don’t get more than 18-19 characters of text per line!!

Gutenberg’s paradigm is to force users to think visually, and really, the only area where it is suitable is where you have users writing a single column of content (with images thrown in). To that end I see the Gutenberg developers’ point in shouting from the rooftops that Gutenberg is not a page builder. But that begs the question, why would you clutter it up with native “features” such as columns if such features are really unusable in real-life scenarios? All of this contributes to the 33 KB stylesheet.

The Ugly

The “Text” editor is gone. Users of the Classic Editor are probably familiar with the two tabs that show up in the Classic Editor – “Visual” and “Text”. While the “Visual” tab (which uses TinyMCE) is the one that Gutenberg aims to supplant, the “Text” mode has no equivalent in Gutenberg.

Gutenberg touts a “Code editor”, which, from personal experience and from multiple accounts on the web is undiluted garbage. If you accidentally touch the markup of a custom block in the Code editor, good luck editing your post in the block editor after that! The Code editor takes away all the tools you had access to in “Text” mode in the Classic Editor, like the QuickTags (the small buttons that let you do basic markup and add links and images), so you spend a lot of time doing basic markup activities.

This is apparently by design.

In short Gutenberg is a brutal kick in the teeth for any person wishing to work directly with markup.

In Closing

I haven’t gotten to a point of installing “Disable Gutenberg” across the board – I believe that for my use cases of custom layouts Gutenberg is a lesser evil than Elementor or Beaver Builder (it is considerably lighter), so those plugins get the axe. For sites that don’t require custom layouts I am installing “Disable Gutenberg”. For all other sites I am installing the “Classic Editor” with the default editing mode set to “Classic Editor” in “Text” mode.

And if you hadn’t guessed, this post is being written in the “Text” mode of the Classic Editor.