Guten Tag, Gutenberg!

If you are using WordPress frequently, you have probably come across Gutenberg. Gutenberg is the code name for a new text editor that is slated to be included in the core package during the next weeks. As of today, the timeline is still unclear, but I strongly recommend that you familiarize yourself with it already now. You can install Gutenberg as a plugin and play around with it.

There will be options to turn off Gutenberg and keep the old editor but, like it or not, Gutenberg will become an integral part of the WordPress experience.

Welcome, Not Welcome

Gutenberg is still under development, and it has received both praise and harsh critique for all kinds of aspects. You may disagree with the way how it was planned and implemented, but I also see the valid point that from time to time each product needs an “innovative disruption” if it wants to stay alive.

Gutenberg was also met with reservation by many plugin and theme developers who would not only have to extend their code but also learn new software technologies before getting started. It sounds a lot like weeks of unpaid work in a terrain that changes every week, just to keep up with the development. This can spell trouble particularly for small teams and freelancers.

Notably, developers are encouraged to turn all shortcodes into “blocks” – which are the fundamental building blocks of Gutenberg. For some time it was also unclear what would happen to metaboxes.

While developers returned to the classrooms and started to amend their software, Gutenberg was not even finished, let alone well-documented. Fortunately, the WordPress community is ready to help. This spirit is definitely one of the strong arguments in favor of the WordPress environment.

Finally, Meet Gutenberg

Before I go into the details, take a look at this screenshot. It shows a development snapshot of the Tag Groups plugin.

Screenshot - WordPress - Gutenberg - Dynamic Block - Tag Cloud Plugin

What you see here are three “blocks” on top of each other. The block in the middle with a border and its own menu is selected.  You may already guess that it shows just a placeholder for the actual content, namely a tag cloud. This is a “dynamic block” that will be rendered only on the frontend.

When you select a block, you are often able to configure it through menus, toolbars or – like here – on the right sidebar. This area is called the “Inspector”, and the displayed options change with the context.

Gutenberg, Granular

My first impression about Gutenberg is much better than what I expected after reading the many negative reviews. Also, the project has quite developed in the past months and was able to dispel many doubts.

All my positive points concern the way how you use Gutenberg as a post author:

  • Handling blocks is a very smooth and intuitive experience. You can even start writing without bothering about blocks at all.
  • The overall usability is much friendlier than before. For example, you can save a draft without reloading the page.
  • A great relief: Shortcodes still work.
  • Metaboxes can appear in the “Inspector” in the right sidebar or under the content box.

And finally:

  • Configuring a block is much user-friendlier than editing parameters in a shortcode. Options are self-explanatory and don’t use the technical format of identifiers. They even can automatically show and hide, or observe certain logical conditions.
    For example, the smallest font size must always be smaller than the largest font size. In a shortcode you can enforce it only before rendering. In a block you can already make it clear when the users enters the settings.

On the other hand I also encountered some difficulties:

  • Metaboxes have been banned to a hidden panel that needs to be scrolled up and then unfolded. I understand that the creators of Gutenberg want to turn all structure into blocks. Some features, however, simply work on the post or page level. Think of SEO settings, geolocations, product details or tags.
  • Searching for structured documentation (not just code samples) to develop for Gutenberg is a pain in the neck. You literally spend hours googling, trying and reverse-engineering. It would be very helpful to know all available components and properties.
  • On a technical note: jQuery – the framework promoted by WordPress so far –  doesn’t work smoothly together with ReactJS – the technology behind Gutenberg. That means that many handy parts of the user interface cannot be ported into the Gutenberg environment.

Keeping Up

To summarize the findings as they are relevant for my software, a lot of work is still ahead, and in many cases some features may not make it into their new existence. On the other hand, I see the chance that blocks will remedy the shortcomings of shortcodes: For many users they have been intimidating, pasting parameters was error-prone and the documentation was always somewhere else. Now you can adjust the options for each tag cloud directly on the edit screen. Instead of a parameter, you see a description in human language, and a link can take you directly to further explanations.

It will be possible to transform tag cloud blocks into shortcode blocks – at least for now. That makes it possible to leave all rarely used parameters and experimental features for the shortcode, while the block displays only what is useful for the majority of users.

Looking at the current progress, it might be possible that the Tag Groups plugin is ready for Gutenberg when it officially launches. When ever that might happen. The premium plugin will be next in line.

I am looking forward to the day when tags are ready for Gutenberg and I can proudly call them “Guten Tag”. Until then: Auf Wiedersehen!