Gutenberg, the New WordPress Editor

Animated screenshot. First look at the WordPress Gutenberg editor interface.

Getting to Know Gutenberg

With WordPress’s latest version release (5.0), the Gutenberg Editor has officially debuted. The Gutenberg Editor will replace the Classic Editor when writing pages and posts. According to WordPress, “the entire editing experience has been rebuilt for media rich pages and posts.”

Generally, Gutenberg relies on blocks to design layouts and typeset copy in a WYSIWYG editor. The blocks contain various content types and can stack or sit side by side in a modular fashion. This enables users to further customize their web pages. Additionally, the options for blocks span across text editing to layout to WordPress widgets and other embedded media. Presently, Gutenberg’s block contents include:

  • Heading
  • Subheading
  • Paragraph
  • List
  • Quote
  • Columns
  • File
  • Code
  • Image Gallery
  • Cover Image
  • Video
  • Audio
  • Button
  • Embeds

and more. The official WordPress Gutenberg website showcases these blocks in action.

A Personal Review Comparing Gutenberg to Classic Editor

Reviewing the blocks reveals some similarities with the Classic Editor but many more with other page builder plugins. Similarly, many of Gutenberg’s text formatting options remain the same as the Classic Editor’s. Yet Gutenberg also introduces layout, formatting, and embed tools previously found in page builders. This availability allows developers to remove additional page builders and create more light-weight themes relying instead on Gutenberg. Several Gutenberg-compatible themes are already available. However, it’s all still rather new.

Compared to the Classic Editor, Gutenberg looks cleaner, bigger, and more dramatic. Another upcoming feature of Gutenberg is increased web accessibility (though at this time Gutenberg requires considerable improvement to allow people with impairments to even use its product; google “Gutenberg Accessibility Audit.”) Gutenberg further aims to boost compatibility to make it easier to integrate with other developer tools.

Gutenberg’s Advantages

Personally, I like some of the changes.

The code block, for example, is much easier for me to use. In the Classic Editor, I needed to open the HTML view, add my own <code> tags, and manually escape characters. Consequently, a mistake here made my site vulnerable to cross-scripting hacks. The formatting is also preserved more reliably. The ability to create multi-columned layouts within WordPress’s native editor is also nice to reduce the number of plugins and scripts I need to run.

Gutenberg’s Shortcomings

However, I’m less enthusiastic about other changes.

Perhaps I’m too attached to my old workflow, but I find the requirement to style my headings in new, additional blocks tedious. Additionally, if I want to add an image to my copy, then I must cut-paste my text into two separated paragraph blocks, then add my new image block—more drudgery. Further, several familiar styling options have been moved into the right-hand sidebar behind hidden navigation. For instance, it took me a few posts to find where I can re-add my CSS classes to images. (It’s in the accordion slider for “Advanced,” by the way.) The columns block also requires an adjustment period, as it seems just shy of intuitive.

Screenshot. Clicking "Add a New Block" opens the block library with all of Gutenberg's block options.

Using the Gutenberg UI: How to Do Popular Tasks with Gutenberg

To get started with the Gutenberg Editor, simply create a new page or post in your WordPress website. With the latest update, the Gutenberg Editor is now the default. The Classic Editor is still available as a plugin, but take caution: WordPress announced it will drop support for the Classic Editor after December 31, 2021. Nonetheless, resources like Gutenberg Hub exist to provide news, updates, and tutorials.

Add Blocks

The first two blocks are created by default: the page heading and the first paragraph block. Users can populate them simply by clicking and typing. Additionally, users can add a new block to the bottom of the document by clicking the by the plus icon on the top toolbar above the editor. Similarly, users can add a new block above existing blocks by clicking the plus icon within the document editor.

Customize Blocks

Much of the Gutenberg UI navigation and user controls are hidden. However, hovering over a section usually gives some clues. For example, user controls for customization options vary depending on which block edge:

  • Entering a block from an outside edge highlights the block in a blue border, displays its block type in a blue tool top, and allows the whole block to be selected and modified.
  • Entering from the left edge reveals user controls for reordering the block, whether by bumping it up above the previous block or allowing the user to click and drag the block into its new location.
  • Enter from the top to reveal a plus icon to add a new block above the current one.
  • Enter from the bottom to select a parent container, such as the column block instead of child paragraph and image blocks.

Blocks can also be customized using a contextual menu. Select the whole block (blue border), then click the three dots icon on the top edge to open the menu. Menu options include duplicating the whole block and editing the block’s HTML.

Remove Blocks

Select the whole block and open its contextual menu by clicking the three dots icon. Then, simply select “Remove Block.”

Customize Multi-Column Layouts

One of the great tools Gutenberg brings is its ability to build multi-column layouts right of the page editor. First, add a new column block. By default, the column block splits into two (2) columns with a paragraph block in each. It’s auto-selected on creation, with a blinking cursor on stand-by to populate the first paragraph block.

Then to change the number of columns, the parent column container must be active instead. Simply hover over the bottom edge until the blue border and block type label appear, then click to select the column block again. The right-hand sidebar displays a slider to adjust the number of columns. Slide accordingly!

For more complicated column layouts, Gutenberg allows nested columns. Simply add another column block where the paragraph blocks were automatically created. The columns divide into equal widths. As a result, Gutenberg creates clear grid layouts.

Screenshot. Two column blocks, each with different number of columns, are stacked to create a complex grid layout.
Two column blocks, each with different number of columns, are stacked to create a complex grid layout.

Make Wide Width and Full Width Blocks

Still Gutenberg further confuses its adopters with something else. Besides hidden user controls is the notable absence of two popular alignment options. The Gutenberg demo website allows users to set images, covers, and galleries not only as left-, center-, or right-aligned, but also “wide width” and “full width.” The demo reveals that wide width displays images wider than the copy so that they stick out a bit in the layout while also allowing ample left and right margins. Full width displays images to 100% of the viewport’s width, completely full-screen.

According to other sources, Gutenberg permits wide and full width options for images as well as pull quotes, videos, tables, columns, and categories (categories as full width only). However, upon upgrading to WordPress 5.0 and adopting Gutenberg, many users find only the three image alignment options are selectable.

Gutenberg indeed still has this feature. However, the current implementation isn’t universal across themes. To use the wide and full width block settings, additional PHP code must be added to the theme’s functions.php. Weblines shares what code and how to add it in a recent tutorial. As a result, the current solution might make wide and full width feel inaccessible to WordPress users who aren’t web developers.

With the functions.php document updated, the wide width and full width options now appear as additional buttons besides the regular left, center, and right alignment options.

Some UI/UX Frustrations with Early Gutenberg

Hidden user controls

Several block options are hidden by default and only appear when the user knows to hover over the correct edge. In time, users will learn this pattern but can interrupt or even prevent the user from completing a task.

Adding additional columns to the default two-column block requires the user to once again approach the columns block at a very particular angle and point to select the whole block and reveal its adjustable column number in the right-hand sidebar.

Manual activation of wide width and full width block alignment options (requiring coding)

The popular wide width and full width block alignment options showcased in the Gutenberg demo aren’t available by default. Presently, Gutenberg and non-Gutenberg themes don’t integrate. Nonetheless, these options can be activated with a few lines of PHP. Unfortunately, it also means this feature isn’t ready out-of-the-box; requires the user to work to get it; and requires the user to be comfortable with editing code.

Small selection of blocks

Gutenberg greatly expands capabilities of the old Classic Edito. For instance, Gutenberg includes built-in options for columns and media blocks that don’t require a page builder. However, page builders tend to offer much more tools and widgets to customize layouts, media presentation, and interactive features.

Many web designers would want to create hero images with a heading, short kicker, and a call to action button, but Gutenberg’s cover block only permits a heading. Carousels for images and accordions for copy are also popular web design features. Even the popular wide width and full width alignment options aren’t available right out of Gutenberg’s box.

Gutenberg is young and likely to release more features, but in the meantime, Gutenberg feels lacking by itself. Third-party plugins and themes built for Gutenberg can expand the “out-of-the-box” options quickly.