Gutenberg: The Good, The Bad and The…

I have waited for a while before I decided to write this review of the Gutenberg, I wanted to test editor that has come far in the development process. Now, with version 1.1 Beta, I think that editor is becoming ready for testing.

Gutenberg is a proposed replacement editor for the WordPress core. Currently, it is in development, and available for testing in form of a plugin. And, you should not use it on the live websites, it is highly unstable, far from complete, it doesn’t work with any theme as it should and it is in conflict with just about every plugin currently available for enhancing WordPress editing.

Gutenberg Discussions

For the last several months, you have most likely stumbled on an article about the Gutenberg, and maybe even participated in fierce discussions about the goal of the Gutenberg editor, current development course and many other things, with the main focus related to backwards compatibility, data format for the content and few other things directly related to the way Gutenberg works and how it affects the complete WordPress plugins and themes ecosystem.

I can’t remember of any issue in the WordPress recent history that has polarized WordPress user base so much as the Gutenberg. And, there is a very good reason for that: Gutenberg will completely change how the WordPress work and how the future development will unfold for the years to come. Gutenberg has the power to shape the future of WordPress. And that is why, it has to be done right, or it can have severe consequences on the future of WordPress and the economy built around it.

If you want to check out some of the articles on Gutenberg and read the lengthy discussions, the best starting point is the WP Tavern website.

There are so many subjects I want to include in this article, and also, to reference some of the most important articles from other authors in an attempt to bring you all relevant information to help you start with the Gutenberg testing and maybe include you in the discussion that will lead to getting the best possible editor we can have for WordPress core.

I will start with…

The Good

Overall, I like how Gutenberg is coming along. For writing text and basic editing, it works OK. I like the idea of using blocks to format the content. It is easier to understand what is going on with the content, it makes the editing process easier when you have controls for each block that limit what the block can do.

And, I understand how this type of editor can help regular users with writing content. With more development, this type of editor can be extended to support templates for the content where you can predefine areas for users to work with and many other things. In the long run, this type of editor is a good thing to have in the core.

But, for now, there is a lot more to be done before all this is realized and before the Gutenberg is ready to be a part of the WordPress. So, we come to…

The Bad

Here are some of the issues related to the current plugin version:

• There are way too many blocks. Many of them can be merged into one because they are more or less the same: paragraph, shortcode, blockquote, verse (why we need such block is also an interesting topic).
• Why do we need a block for shortcode??? And why show such a small input field to insert it? Most shortcodes can have arguments, extra content, and making all that fit in there is going to be a big problem.
• Why do we need to have each embed as a different block? Each embed block takes too much space, and the only difference is the icon displayed. The oEmbed object is smart enough to recognize which URL is embedded, there is no need to select what is embedding.
• Paragraph block doesn’t allow you to have some words in a different colour from the rest of the text in a paragraph. This is a highly illogical approach, and paragraph must allow multiple colours.
• Gutenberg doesn’t work on small screens and mobile devices. Scrollbars are everywhere, bringing block sidebar makes it impossible to preview changes. Even with desktop screens when the browser is not maximized, scrollbars are everywhere.
• And for the large screens with touch capability, the editor is again very hard to use, because some of the controls and buttons are very small, hard to click on with any precision.
• Many of the block controls are confusing and behaving erratically: changing the font size, block and text alignment confusion, media selection dialogues showing wrong messages and button labels…
• Columns block is completely useless. If you want to have such control, it has to behave as a container, and you must be able to insert all other blocks inside the column cells. As is stands right now, it is better to remove it.
• Selection of blocks is also very confusing, and in many cases, you need to click just right to select some of the blocks. It is very easy to click the button for deleting the block.
• Image block allows you o resize the image, but aligning image inside the block is not possible. The image caption is limited in editing option with only basic styling allowed.
• Keyboard navigation is very inconsistent, and sometimes it works as you expect it, sometimes, you need to use the mouse to click on the block or select something. This is very annoying when you work with long text.
• Display of blocks that are aligned left or right is awful, truly awful. It is completely unusable, especially if you try to use embed, gallery or image blocks around other similar blocks.

There is much, much more for this list, but I am not going into more details. This list is just to show you how much work remains to bring Gutenberg from beta to stable status. I expect that these things will be fixed in the future versions, making editor much smoother. But, there are several issues that will make or break this project…

And The…

I am not going to say ugly, but it is close to that. Because, now we come into the developers, plugins and themes territory. Because Gutenberg is mostly written in JavaScript, it uses completely different approach to editing from the current editor. And therein lies one of the core problems.

• React: Gutenberg is written with React JavaScript framework created by Facebook. React is licensed under BSD+Patents license. And because of that, React is not a truly open source project, and because of that, it goes against everything WordPress stood for all these years. So far, there is no official stand from the Gutenberg development team, but the only truly viable path would be to replace React with something else (Vue, Angular or maybe some other library closer to the React).
• Data structure: One of the worst decisions made when Gutenberg development started is to invent a new way for storing content using very ugly and highly limited format based on using HTML comments and parsing content using regular expressions. This approach is one of the biggest issues I have with Gutenberg because regular expressions are terrible for the task they have to perform here: there is no way to have nested content (there goes the flexible columns block where you can add any content inside the cell) and parse it reliably, it is prone to errors and with addition of new types of blocks, it will definitely break at one point. If this remains the way Gutenberg works, it will be the biggest spent opportunity to store content in a hierarchical structure that will be easier to expand, will allow nesting and be easier to render. JSON comes to mind and there are many existing implementations available to reuse without reinventing the wheel.
• Backwards compatibility: is gone. All the filters and actions WordPress runs when the content is saved when any change is made are no longer used. Since Gutenberg is written in JavaScript, and it has a completely different saving method, so all plugins relying on the old saving methods are effectively screwed. This is not a huge thing to fix, and it will be necessary or it will kill all the plugins hooking into post content saving.
• Meta boxes: are gone as it stands right now. Gutenberg has a narrow sidebar for adding something resembling meta boxes we all are used to and love. Imagine 3 or 4 more boxes there, it would be completely unusable. And even worse, most metaboxes I have seen are huge, they will never fit into narrow sidebar area. Imagine monster of a metabox in WooCommerce, that can be expanded by more plugins to even bigger element, and it might take few pages when you take into account tabs it has. No matter how much time WooCommerce developers spend, that will NEVER fit into Gutenberg (as it is right now) and have the same functionality. Meta boxes must be supported as they are right now, or Gutenberg will be only a failed experiment.
• Blog orientated: right now, Gutenberg is viable for blog use only. Lack of support for meta boxes renders it completely useless for eCommerce websites, communities and pretty much everything else (except simple blogs).
• Lack of documentation: is symptomatic of all JavaScript libraries in WordPress. TinyMCE editor and media library are perfect examples of great components that no one knows how they work. There is no documentation, no examples of how it can be used, no examples on how to extend them. And, currently, Gutenberg is on the same course. To be fair, there are some attempts to have some sort of documentation for Gutenberg, but what I have seen is completely useless. We need detailed explanations for developers that never used React (or whatever other library is used eventually), we need documentation everywhere (just like for the PHP code) and we need fully functional examples for EVERYTHING: adding new blocks from scratch, using all sorts of controls inside the blocks, styling the block in the editor, rendering in the front end, saving process… Without that, it would be years before Gutenberg becomes a viable solution for development.
• Expensive transition: from current code to Gutenberg. If all the developers have to rewrite all the plugins and themes relying on the current editor to use Gutenberg, while at the same time remain compatible with older versions of WordPress, it will crush the WordPress ecosystem. I can’t even imagine how much work would be needed to do that. I have several plugins that integrate meta boxes, that depend on the saving process, and realistically, I would need 3 to 6 months to do all that work, while putting everything else on hold. Imagine now how many plugins rely on meta boxes, on a very complex meta boxes. I don’t see a realistic way to do all that work in time for when the Gutenberg is ready for the core.

What I propose

Well, I have written enough criticizing Gutenberg as it stands right now. But, what can be done to make Gutenberg good or even great? I have few suggestions.

• React has to go. Facebook and their anti open source license (masquerading under BSD license) are not in the spirit of WordPress. There are many other alternatives to choose from, and some of them are even compatible with React code, but they are under real open source license.
  The decision is made, and React will be removed from the Gutenberg. This is a great news, and you can read more about it here. Very soon, we will know what will replace React.
• Gutenberg has to be backwards compatible. All the filters and actions current editor has, must be working with Gutenberg editor too. And, the same goes for meta boxes. There has to be a way for all the current code adding meta boxes to work without changing a single line of code. If that is not done, Gutenberg will crash and burn.
• Rethink and remake the data format used to store content. The current HTML comments based system is bad, severely limiting and if not changed right now, a few years from now, it will have to be revisited to allow for more flexibility. Why wait, do it right now!
• On the day it is decided that Gutenberg should be merged into WordPress, we need to have full documentation ready, examples for building new blocks, rendering control and anything else developers might need to extend it and integrate with it.
• Make Gutenberg optional for one or two major versions. Include options in the WordPress settings to choose between old TinyMCE based editor and new Gutenberg editor. Proposed plugin to disable Gutenberg is a stupid idea, just include the checkbox in main WordPress settings, and by default leave Gutenberg disabled.
• Include new options in the post types registration to choose which editor interface to use.

Recommended Reading

Here is the list of some great articles about Gutenberg you should read:

• You called it Gutenberg for a Reason. That Doesn’t Make it Revolutionary.
• The Gutenberg that could have been
• We Called it Gutenberg for a Reason
• Diving Into the New Gutenberg WordPress Editor (Pros and Cons)
• Stop the Presses: Gutenberg is What WordPress Needs, but It Doesn’t Go Nearly Far Enough

Final words (for now)…

Well, I am looking forward to next updates and the decision about the library that will replace React. I would like to see the Vue.js as a replacement, and a lot of developers are vocal about including Vue, but we will see what happens soon. I will revisit Gutenberg releases in the future, and keep you up to date with the progress.