Second look at the WordPress Gutenberg Editor

The development of the new Gutenberg Editor for WordPress 5.0 is progressing continuously. Time to take another look at the ambitious project and test the Gutenberg Feature Plugin. Does the new Gutenberg Editor keep what it promises?

The first beta in the form of a feature plugin for the new Gutenberg Editor was presented in June at WordCamp Europe in Paris and published on WordPress.org.

I tested the plugin extensively immediately after it was published.

If you are not familiar with Gutenberg as a term, I recommend reading my first post for an introduction to the topic:The future of WordPress are blocks: New Gutenberg editor released as beta plugin

In my first test with version 0.2, Gutenberg looked like this:

Gutenberg Editor Version 0.2

Development from Gutenberg to the present day

Gutenberg was originally released in version 0.1.0 and has received a new update almost every week since then. The current version (November 2017) is 1.7.0 .

Here is a brief overview of the course of the project so far.

June and July - version 0.2 to 0.6

Important features of the first five releases included:

  • Default styling for blocks in the frontend
  • API for notifications in the editor
  • Navigation of blocks with up / down arrows
  • API for inserting text from external sources
  • Search function in the block inserter
  • New blocks for Custom HTML, Read More, Cover Text and Cover Image

August - Version 0.7 to 1.0

Above all, the text block has been improved and many new blocks have been added:

  • 0.7 - Improvement of the placeholders and better integration with WordPress themes
  • 0.8 - Five new blocks for categories, text columns, shortcode, audio, and video
  • 0.9 - Improved options for colors and font size in the cover text block
  • 1.0 - Merge the blocks for cover text and paragraph

September - version 1.1 to 1.2

There were only two updates in September:

  • 1.1 - Autocomplete when adding blocks and inline editing in the gallery block
  • 1.2 - Support for Postmeta and first concept for Extended Settings

October - Version 1.3 to 1.5

In October the first implementation of metaboxes finally took place:

  • 1.3 - Usability improvements, opacity slider for cover image and feedback option
  • 1.4 - HTML mode for blocks and adaptation of the REST API for reusable blocks
  • 1.5 - Support for metaboxes and inserter button between the blocks

November - version 1.6 and 1.7

The biggest change was the fixation of the block toolbar and metaboxes without iframes:

  • 1.6 - Improvement of the writing experience and fixation of the block toolbar
  • 1.7 - Metaboxes without iframes and multi-block transform feature

In addition to the larger features, innumerable details were also worked on in order to refine the usability and accessibility of the editor. My brief overview therefore does not begin to do justice to what has changed. The list is very, very long.

For this reason, it is worth retesting the Gutenberg Editor.

Gutenberg Editor in the test

If you want to try the Gutenberg Editor for yourself, you can still find the beta plugin in the WordPress.org plugin directory.

The Gutenberg plugin provides editing, customization, and site building features to WordPress. This beta plugin allows you to test bleeding-edge featu ...

By: Gutenberg Team

( 3,271 )
Last updated: 5 days ago
300,000+ active installs
Compatible up to: 5.5.3

Gutenberg is still rated very poorly. In my opinion, this is due to the very unfinished status of the plugin at the beginning, which was more of an alpha than a beta version. The editor is being very actively developed and continuously improved.

I therefore recommend giving the Gutenberg Editor a chance and testing the plugin yourself, not just reading my article 🙂

First impression - Much tidier, smoother and faster

The first impression of Gutenberg in version 1.7 is very, very good. No more comparison to my first detailed test of version 0.2.

I consider the placement of all buttons and the toolbar in the top bar of the editor to be a significant improvement. This means that the buttons for formatting the text can now always be found in the same place and are no longer directly assigned to the block in the content.

This makes Gutenberg feel much tidier and more elegant. Before, the buttons were displayed by selecting a block in the text, which I found very annoying. The many boxes often obscured the text, faded in too many options at once and thus disrupted the flow of writing immensely. Now that is solved much better.

You can also see the numerous performance updates - Gutenberg now feels very fast and fluid. This is also due to the many small improvements in usability, which have largely eliminated the somewhat awkward operation in the first versions of the plugin. Operation with keyboard only has also been improved.

Improved usability for creating blocks

Many small details now make it easier to create and add blocks.

Block inserter

The block inserter now supports a search to quickly find the right block. In addition, the last used blocks are displayed directly. It is now also possible to insert a new block between two existing blocks.

Gutenberg Block Inserter

Insert pictures

Images can now easily be dragged from a desktop folder to any position in the editor using drag & drop. Gutenberg automatically creates a block for the picture and uploads the picture to the media library. It is no longer necessary to manually add an image block before uploading.

Convert blocks

The transform button is also new, with which existing blocks can be quickly converted. A normal text block, for example, can be transformed into a block for headings, quotations or lists with one click.

Transform Blocks Dialog in Gutenberg

Insert blocks with keyboard

One point of criticism that was often expressed was the large number of mouse clicks required to create the individual blocks. Due to the constant switching between keyboard and mouse, the writing flow was interrupted unnecessarily often.

In the meantime, an article can be written relatively fluently in Gutenberg. With an Enter, a new text block is automatically created and you can simply continue writing.

If another block is required, it is sufficient to enter a slash / as the first character in the text. Then the name of the block can be entered and selected from the list.

Gutenberg Editor: insert block with keyboard

The autocomplete feature automatically shows the blocks that match the entered keyword. Blocks can be added very quickly using the keyboard.

Insert text from external sources

An API has also been worked on so that text from external sources such as Microsoft Word or Google Docs can be easily inserted.

That works pretty well. For example, it is sufficient to simply copy the content of a Google Doc into the first text block. Gutenberg creates individual blocks from these and automatically recognizes text, headings and lists.

Edit block settings and block HTML

The right sidebar now shows two tabs. Document refers to the entire article, therefore contains the typical meta boxes for categories, keywords, article image, etc.

The Block tab, however, always refers to the currently selected block. With a heading block, for example, these settings are displayed:

Gutenberg: Block settings

The block settings can be called up by clicking on the menu symbol of the respective block. Alternatively, the block can be deleted or the HTML code of the block edited with the menu icon.

Gutenberg: Block menu

Editing the HTML code of a single block is a great feature in my opinion. How often have I searched for the right place in the HTML in text mode ...

The text mode, which shows the entire post in HTML, is almost superfluous.

Two-step button for publication

The publish button for publishing an article has also been improved.

This now opens a drop-down menu in which the visibility of the post and the date of publication can be set.

Gutenberg: Publish post dropdown

The two-step process is to prevent the post from being published prematurely by mistake, which can easily happen with the current editor.

Change color options and font size

I take a very critical view of the design options for adjusting the colors and the font size. These are available as settings for each text block in the sidebar.

Personally, this is too much in the direction of page builders.

In my opinion, the design should remain the task of the theme. The editor should be a tool for creating and managing content - not for designing content.

After all, WordPress is a CMS, not a website builder.

Work in progress: support for Metaboxes

For a long time it was not clear how exactly metaboxes would be implemented in the new editor. Implementation has now started and metaboxes are available in the Gutenberg Editor. The first concept was still based on iframes, but these were removed in 1.7.

At the moment there are still a few bugs and the technical implementation has not yet been completed. I have therefore omitted extensive tests of the Metaboxes because they still need some updates.

Conclusion

The pace of Gutenberg's further development is remarkable and the new editor is slowly starting to look really promising. Usability has made a significant leap forward and it's just fun to experiment with Gutenberg.

I am not convinced of all features, such as the color and font options mentioned. There are of course still a lot of construction sites, bugs and missing features. Gutenberg seems unfinished in some places, which is completely normal for a feature plugin.

Overall, I'm confident that by the time Gutenberg is released in a few months, all of these problems will be resolved. The development so far speaks for it.

What do you think of Gutenberg?