Gutenberg: The Re-Invention of WordPress Editing

The WordPress team has decided that its editor needs an update. Most people who create content for websites would rather not deal with HTML and CSS. The Gutenberg editor, which will be standard in WordPress 5.0, will bring editing into a new age.

It’s available now as a plugin. You just download, install, and activate it. The next time you edit something, you’re using the new editor. This review covers version 2.7.0.

Why Gutenberg?

A number of Web hosting sites offer WYSIWYG editors. They let users create posts with clever typography without doing any markup. To some people, this makes the WordPress editor look old-fashioned.

Matt Mullenweg is personally behind the project. He has called Gutenberg “the direction that will provide the most benefit to the maximum number of people while being totally in line with core WordPress’s philosophies and commitment to user freedom.” It’s more of a page builder than a text editor in the traditional sense. Authors can create material by putting together pieces and can easily add effects. Its potential is open-ended, with an API that lets third-party developers add new content types.

For the present, it’s a plugin, but in WordPress 5.0, it will be part of the core. The Gutenberg announcement promises that users who prefer the old editor won’t be forced out.

What does it do?

A project with a name like Gutenberg ought to be something revolutionary, and in the long run it will be. What is available right now, though, is more important for the behind-the-scenes changes than for its available capabilities. The first thing you’re likely to notice is that there are tabs for “block” and “document” modes. Blocks are the heart of it all. When you start typing, you’re in a “paragraph” block. You can set its text color, point size, background color, and alignment from the sidebar. You can make the first letter a drop cap with a single click.

The text is WYSIWYG, or close to it. There’s still a separate preview, which does what it always did. If you want to get into the exact code, you can switch to HTML editing mode on a block-by-block basis. Some of it is cryptic HTML comments, though, and you shouldn’t touch those.

You can change a block to a different type, though not arbitrarily. Each type has certain other types which it can be converted to. Blocks include images, quotations, audio, video, and subheads. There doesn’t seem to be a way to create multiple subhead levels at present; presumably this will be fixed.

You can move a block up or down, duplicate it, delete it, or make it a “shared block.” What shared blocks are for isn’t obvious. Probably other features will need to come out before they’re useful.

Auto-saving goes to the latest draft of the post, which is a very nice feature. It doesn’t do continuous saving like Google Docs, though. You need to make sure your work is saved before closing the browser window.

The document mode is familiar, but it seems to have lost a few features. When you click on “Tags,” you no longer see the most-used tags. Hopefully this will be fixed soon.

The way forward

The description that comes with the plugin shows that Gutenberg is much more than what users will immediately see. Right now it looks different but not necessarily better. However, the idea of blocks is a rich one, and it’s intended to replace a variety of techniques which are currently necessary for advanced layouts.

Currently, some features are available only with special plugins and themes. Content creators have to insert “shortcodes,” pieces of code in brackets, to invoke the features. They’re clumsy even for simple uses. Other features are possible with custom HTML and CSS, but most users would rather not go that way. They want something simpler and more intuitive.

The plan for Gutenberg involves three stages. The first, which is what’s available now, focuses on blocks and editing. The second stage will be “page templates,” and the third “full site customization.”

Gutenberg development

There will be work and opportunities for third-party developers. Shortcodes will continue to work, but some plugins may need updating or no longer be relevant.

WordPress.org has a handbook for developers, which provides a lot of information on the underlying technology. The big change is that blocks are nodes which describe the content. They consist of HTML with comments which give instructions to the rendering engine. When WordPress displays a page or post, it serializes the nodes into HTML. This isn’t so different from shortcodes except that the user isn’t intended to touch them, so they can be as complicated as necessary.

A block, as the developer sees it, is a JavaScript object. This is a big change from the PHP-centric approach WordPress has always taken.

Developers can define new block types. The process requires both PHP and JavaScript code. Each block type lists other types it can be transformed to, and the developer can provide code to perform the transformation. A block can contain child nodes. For instance, a table block might contain rows, each of which contains columns.

Block templates are lists of block items. A developer can create a block template to lay out a post type in advance. It can optionally lock itself, so that authors have to use exactly the blocks defined. Blocks can contain nested templates.

The current situation

Gutenberg shows a huge amount of potential, but there’s no good reason yet to adopt it in a production environment. It’s worth trying out in a test site, just to get a sense of whether it’s for you or not. Some site editors will give up HTML only when it’s pried from their cold, dead angle brackets. That’s a legitimate choice, and they’ll be able to keep using it.

If you create posts with Gutenberg and then disable the plugin, they won’t display correctly, and the editor will lose some of the content. Once you start using it in earnest, there’s no going back.

The real value of Gutenberg will appear only as a rich set of blocks emerges and the features for page templates and site customization appear. With a huge developer community, this will result in ways of creating WordPress pages in ways that no one has yet imagined. The best course for right now is to be patient and keep an eye on developments.