WPTavern: 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.
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.
Source: WordPress
