Getting on With Gutenberg

It seems like you can’t use anything these days without spending a good amount of time trying to keep up with changes to the product you’re using. My partner frequently complains about apps on her phone being updated, only to find that entire sections of the UI have changed with seemingly no warning. It is a frustration, to be sure, and following mailing lists, forums, and Slack (grr) groups to keep up with everything is an exhausting experience, but it is also something that is becoming more and more necessary as we enter the age of the rolling release. One such change I’ve become aware of having set up my first WordPress site in a few years is the switch to Gutenberg in the upcoming WordPress 5. Never one to be left behind on such advances, I installed the plugin and started playing around with the “future of WordPress”.

Initial Thoughts

It is immediately obvious to anybody who has used WordPress for a long time that Gutenberg is a radical departure from the venerable tinymce which has been our WordPress companion for so long. The simplicity and straightforward-ness of the simple text box has been replaced entirely with a “clean” white sheet, which invites the user to enter a title in a “block”. More on this later

It feels obvious to me that Gutenberg is greatly inspired by medium’s approach to the WYSIWYG editor. From the fixation on modular design, to the white sheen of the background, even down to the design of the “add block” button. Again, none of these things are negatives, just observations. Well, except the which background. That is something that really needs to be killed off by UI  designers (nota bene this writer suffers from vision problems and white backgrounds are the bane of his existence).

Blocks and Modular Design

Unlike the more traditional markup-style WYSIWYG editing we are used to experiencing with tinymce, Gutenberg splits everything on the page up into “blocks” – modular sections which are defined by their content. Rather than jumping right in and writing a paragraph with a header, you first specify that this first block will contain a header, while the follow-up block will contain paragraph text. I can follow the logic here, and it isn’t a particularly frustrating process. This allows the writer to very neatly manipulate the different elements of the page.

But is anything really being gained by splitting everything up like this? Using tinymce, for example, writing a blog post was not dissimilar to jumping into an office program such as LibreOffice Writer and plugging away. Gutenberg adds steps which easily allow the writer to convert blocks from one type to another, certainly, but it wasn’t like it was difficult to do that before.

The range of the blocks is perfectly acceptable. One feature I can actually see being quite useful is the ability to add blocks which are purely HTML and have them sit seperately from the rest of the text without needing to switch back and forth between visual and HTML editing.

Block and Document Settings

In keeping with the modular design, the settings on the right-hand side of the editor are split into two segments: one for the document as a whole and one for the currently highlighted block. The document settings allow the author to do the usual tagging, scheduling, and obligatory post options, while the block settings allow for some additional customisation options such as drop caps, text size, colourization, etc.

Is there a tangible benefit to this? Well, not really for anybody experienced with working in the HTML editor. I can, however, see it allowing non-HTML users to access some features with a lot more ease. From a UX perspective, it’s comfortable and intuitive in a way that perhaps tinymce was not. It neatly and cleanly allows the user to compartmentalise the design of their post without getting confused by a wall of text and buttons. I, for one, had no problem with tinymce’s approach, but neither do I have a problem with Gutenberg’s approach.

A Few Teething Problems

As this is still essentially a beta product, one can expect there to be some initial problems with it. For example, on my blog I have been unable to render a preview to check that everything is working as expected. Adding images to a paragraph after typing it up is a bit more difficult than it perhaps should be (you need to create a new image block and then nest it within the paragraph to achieve the effect seen in the first paragraph, for example.

There does seem to be a fair amount of hostility towards this new product. Many users are following the old “if it ain’t broke, don’t fix it” adage, while others are pleading with Automattic to keep it as a plugin rather than integrating it with WordPress Core in version 5.0. But here’s the thing: Gutenberg actually does address an issue with WordPress. While there is nothing functionally wrong with tinymce, don’t forget that WordPress is facing stiff competition from the likes of Medium. Why is Medium so popular? Well, besides its tight social integration it has a very clean, pleasant-to-use and intuitive editor. WordPress would soon find itself languishing if it continued to stick to tinymce.

So what’s going to happen going forwards? Realistically not very much. Tinymce will still be available in WP 5.0, and Gutenberg will probably be enthusiastically enjoyed by newcomers to the platform. Once again, I think there is a certain extent to which complaints are being drummed up for the sake of workflow familiarity. People get so used to working in a certain way that any change or disruption to this can cause panic. But really, that’s the way the world is going. Part of your workflow needs to be adapting to change.