Gutenberg Block Editor – Avoid the Traps

Introduction

In this post I want to look at some gotchas when using Gutenberg, the new WordPress block editor.  The demonstration is very visual and I’m not going to try to capture it all in screenshots.  I recommend watching the video for that.  Here I’ll review and summarize the issues.

To illustrate the issues, I’m going to look at the built in core columns block. the Kadence Row Layout block, and the Ultimate Addons for Gutenberg Advanced Columns block.

Background

Before the block editor, the main drawback of the classic editor was that there was no built-in way to create columns.  Many people used column shortcodes, but these didn’t interest me at all.  Probably half the times I used Beaver Builder it was because I needed columns, not because I needed any fancy modules.

When Gutenberg was announced it made sense to me because I knew that we needed more advanced layout options.  I was therefore very surprised with the Gutenberg team decided that columns were “out of scope” for version 1.  I very politely made the case for including columns in core, because otherwise everyone would create their own version and there would be a lot of refactoring when core eventually got around to it.

Core Version of Columns Block

Today, there is columns block in core.  It may still be in beta, though it was in beta at the beginning of the year.  The core columns block has no way of adjusting the columns.  Apparently you should be able to adjust the column width, but this hasn’t worked since it was first released.

Kadence Columns Block

Like a lot of people, I held off on adopting Gutenberg because I wondered if it was ready for prime time.  However, when Toolset released their beta “Toolset Blocks”, they recommended the Kadence block plugin.  Following my testing of the Toolset blocks, I was working on a post where I needed columns.  Go ahead and take a look down it’s page to find them.  I decided to use the Kadence block set and specifically the Kadence Row Layout block.

The Kadence version was a big step up from the core version as it offered a large number of customization options and it was possible to adjust the column widths.  However, there were small issues that caused me to be dissatisfied.  For example, the difficulty in selecting the plus sign in a circle icon for adding new blocks.

Ultimate Addons for Gutenberg Advanced Columns Block

I became aware that the team behind the Astra theme and the Ultimate Addons for Beaver Builder and Elementor plugins also had a blocks plugin.  I’ve been happy with their products, so gave that a try on a testing site.

I liked it a bit better than the Kadence version. I think it is a bit easier to select the column content and adjust the column width using the side slider.

First Two Realizations

Now I had two plugins installed that both provided an overlapping feature.  I didn’t need both so I set about to replace the Kadence columns with the Ultimate Addons version.  I found that it was a difficult undertaking.  Due to the squirreliness of the block editor, I took much longer to refactor the content than I had experience when, for example, switching content between page builders.  Switching blocks is difficult.  It took more than twice as long to refactor the content as in laying it out and adding it in the first place.

I reflected on it and have the feeling that WordPress authors may well tend to install plugins providing special blocks, thereby adding bloat and introducing all of the issues of too many plugins bring.  We need to carefully vet and consider the blocks we add.

Disappearing Content

I had the thought to disable the Kadence and Ultimate Addons plugins to see what happens when the blocks go missing.  I refreshed my test page and at first I thought things were good.

The side-by-side layout was gone, but the image and text remained.  I imagined that it would be easy to move these into a block, or maybe they were already some type of default block.  However, when I took a look in the editor, I found that there was just a warning with a “Keep as HTML” button.

I tried saving the page without making any other change and saw this on the front-end:

The content was gone, so I went back to the editor and clicked the keep as HTML buttons.  Looking again on the front-end, the content was truly gone.  Crap.

I imagine it would be possible to recover it by going back to an earlier revision, but this was definitely not a user friendly experience and I wondered how average non-technical users would handle it.

How Did We Arrive at This State?

I imagine that when the Beaver Builder and Elementor teams started coding their page builders, the first thing they did was to create the row and column modules / widgets.  For Gutenberg, on the other hand, columns were added later, and it shows.

Conclusion

I found three traps when using the block editor.

The first is to avoid the tendency to install lots of block plugins.  Doing so can lead to bloat and security issues if they are not well maintained.

Secondly, it is difficult to refactor block content.  When Beaver Builder and Elementor, you see an indication in the UI that a post was editor using the page builder.  There is no way to know which posts you used a block on.  You have to go through them one by one if you decide to replace one.  This also will tend to increase the number of block plugins installed.

Finally, the resultant loss of content when a block plugin is disabled is as bad or worse than the old “shortcode soup” that we would see with Divi, for example.  Back in those days, we would all point out that you had better decide to use Divi forever as there was page builder lock in.  The same is true for Gutenberg … on an individual block level.  If a block is disabled then youa re left with gobbledygook:

I imagine that the loss of content is perhaps another result of the way that Gutenberg was architected.  There should be a standard fall-back process that all blocks implement to preserve the content.

So, this was my experience when using Gutenberg.  I share it in the hopes that you can avoid the mistakes and the time wastes that I experienced and use the block editor, if you do, more wisely.  I hope you found something useful in this post.  Thank you for reading.