Gutenberg 1.6 Improves Writing Experience, Moves Block Toolbar to the Top of the Editor

The Gutenberg plugin’s Halloween release (version 1.6) includes major updates to the writing experience and many performance improvements. The block toolbar has been relocated to the top of the editor, a suggestion that was mocked up and described in detail in a post on the Yoast SEO blog proposing an alternative approach for Gutenberg.

Prior to version 1.6, users could inadvertantly end up in a situation like the screenshot below – with tools and toggles popping into view from all sides of a block.

Gutenberg prior to version 1.6

Previously, any small mouse move would pull the block toolbar back into view, which made for a somewhat jarring writing experience. Gutenberg 1.6 makes the block toolbar completely independent of the content by fixing it to the top of the editor. This move reduces the amount of visual distraction in the writing zone, while keeping the toolbar accessible in a way that is familiar to users coming from the Classic Editor.

The toolbar will automatically adjust to display tools specific to the block type that is in focus, so that users don’t have to sift through other tools that are not applicable to that specific type of content. It does not show if no blocks are selected.

In the ticket proposing the change, Gutenberg designer Joen Asmussen describes it as part of a larger effort to try to reduce the visual weight of the block.

“The cognitive load of the chrome we show around and in context of the block unit has been an ongoing topic for a while,” Asmussen said. “Concerns have been noted that it feels heavy, there are many toolbars, options, and it gets in the way of writing.”

Placing the block toolbar to the top of the editor is a strong move toward making blocks feel lighter, and version 1.6 includes several other UI tweaks along the same theme. It introduces an alternate style for block boundaries and multi-selection that removes the previous hover and selected styles for blocks, which were somewhat heavy-handed and distracting. Instead, hovering over blocks will simply bring the floating settings dots into view on the side of the block. Contributors also redesigned the selection styles to be more subtle, making the separator, more, and button UI items feel more lightweight.

Other visual changes include:

  • Engage “edit” mode when using arrow keys (hides UI)
  • Complete rework of arrow keys navigation between blocks—faster, clearer, and respects caret position while traversing text blocks
  • Added keyboard shortcuts to navigate regions
  • Implement multi-selection mode using just arrow with shift keys and support horizontal arrows
  • Change visual style of multi-selected blocks so it has the same color as highlighted text does

Gutenberg 1.6 introduces the ability to convert a classic block (post) into several Gutenblocks. The resulting divided block is fairly instantaneous.

Version 1.5 of the plugin added initial support for meta boxes in an Extended Settings panel beneath the post content. Version 1.6 changes the UI to make meta boxes part of the main column, instead of a collapsible box. Plugin developers had complained that the UI gave the impression of having been pinned to the bottom as “a bit of an afterthought.”

“I think the current design does meta boxes a real disservice,” one tester, Patrick B., commented on our post. “The current layout and the section heading, “Extended Settings,” makes it look and feel like a bit of an afterthought. Undoubtably, many meta boxes will be able to be moved to their own blocks, but there will still be situations where what is contained under Extended Settings is essential to putting together a page but isn’t appropriate as a block. In that case, Extended Settings just doesn’t feel right and seems easily forgettable. That could create an awkward publishing experience, especially when those fields are required to publish.”

Meta boxes now appear below the content without the Extended Settings label and individual accordion items are toggled closed by default. The bottom section appears regardless of whether or not the sidebar Settings panel is toggled open, so it is always there. This is a change from the previous release where toggling the sidebar Settings panel open was required to see the Extended Settings panel.

Gutenberg 1.6 is a fairly large release with several dozen fixes and performance improvements. For a full list of all the changes, check out the release post from Matias Ventura and the plugin’s changelog.

7 Comments


  1. Great improvements! My No. 1 desired change was kill the floating toolbar. Now the new editor is finally starting to come into its own. There should be an option to keep the toolbar on at all times, though. Some of us don’t like disappearing UI/chrome.

    Report

    Reply

  2. Fixing it on the top of the content is a good move. Before it was annoying when things pop up in the view.

    Report

    Reply

    1. It really was annoying. The move to the top of the content was a great move and I feel like I’m the happiest person cause of screen issues with my laptop. This makes it more convenient for me now

      Report

      Reply

  3. Always nice to be quoted, thanks. I’m liking the updates and really appreciate the changes, especially to how the meta boxes are handled. Bringing them inline and making them more inline with the content (and narrowing the wdith of the section).

    I think stylistically the section could use some changes to help it not get lost so easily, especially when more then one metabox is in use.

    But these changes really feel like the feedback is being listened to (even if it was a suggestion already sugested by others a dozen time over or just coincidence).

    Report

    Reply

  4. Great to see the meta area is no longer hidden, but testing on real life sites runs into countless issues including data loss, locked or messed up screens, links going nowhere, popup windows being cut off, etc etc. (Reported via feedback form).

    I get that it’s a first cut, but i strongly doubt this is going in the right direction.

    Obviously all these issues are caused by using iframes, and it will be a herculean task to fix (or even identify..) these issues one by one.

    Maybe the big plugins like ACF Pro, Pods, Polylang, OASIS Workflow that were killed by Gutenberg in our tests will bring their own solutions, but there is a lot of individual work out there that will never be touched. Because nobody will pay.

    So looking for an alternative solution without iframes that let plugins work ‘as is’ would be great.

    PS.
    Personally i would be fine with Gutenberg replacing only the editor block without replacing the whole editing screen…

    Report

    Reply

    1. Personally i would be fine with Gutenberg replacing only the editor block without replacing the whole editing screen…

      Apparently, that was the original plan. That could have saved everyone (core devs and users) so much trouble…

      Report

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *