Posted on

Gutenberg 3.8 Released, Adds Full Screen Mode

Gutenberg 3.8 is available for download. This release features a full screen mode that hides both the admin bar and the menu. Unlike previous versions of Distraction-Free-Writing mode where things would fade in and out of view, these two items stay hidden until full-screen mode is disabled.

User Interface elements have been added to manage reusable blocks in bulk. Theme authors are now able to register editor styles for blocks by targeting the blocks themselves. This avoids combating CSS specificity and doesn’t require knowledge of the internal DOM structure for the editor. 

The block settings icon has been moved from the right side of blocks to the toolbar. This change sets the foundation for refactoring the toolbar and it reduces clutter by keeping the icons together.

Block Settings Moved to The Right Side of The Toolbar

Gutenberg 3.8 also contains a significant increase in performance thanks to a new hand-coded default block parser.

Having a formal specification of the Gutenberg block grammar has allowed us both to maintain a stable core during the almost 40 releases of the plugin and lately to allow competing parser implementation to evolve and be compared in terms of performance and correctness.

In concrete terms, we are shipping a new default implementation that is hundreds of times faster than the spec and has been stress tested with really long posts (including Moby Dick). These tests are also available for anyone to run against. Memory consumption has also gone down dramatically for server side operations. I’d like to specially thank Dennis Snell and Ivan Enderlin for their great work improving this area.

Matias Ventura

To see a complete list of changes along with links to their corresponding pull requests, check out the release post.

Posted on

A Proposal for Improving the Change Block Type User Interface in Gutenberg

In Gutenberg 3.6.2, the development team moved the Convert Block option to the left most icon in the toolbar. As long as the toolbar is visible, so is the option to change block types. However, there are a few user experience issues with this approach.

Convert Block Option

The first is obvious. The paragraph block icon looks like an alignment option. The second issue is that the icon represents the current block being edited, sort of like a block label. Unless a user hovers their cursor over the icon, it’s difficult to realize that it’s for changing block types.

Kevin Hoffman, a WordPress developer and core contributor, has proposed a new user interface suggestion that aims to solve the issues mentioned above.

Suggested Changes by Kevin Hoffman

Hoffman suggests changing the icon to a drop-down menu, similar to the one in the Classic Editor. The menu would make the ability to change block types more discoverable. It removes confusion associated with icons and is a workflow that’s already established.

Gutenberg developer Joen Asmussen thanked Hoffman for the feedback and listed a number of things to consider with his approach. These include the editor’s need to be responsive, scale to editors with thin columns, accessibility, and accommodating long block names.

Gutenberg technical lead Matías Ventura also commented on the proposal.

Just wanted to say thanks for all the constructive voices here and willingness to find better solutions. If there’s anything that is fairly clear is that the current ‘block switching’ interaction is not as obvious as it could be.

I think using the paragraph icon instead of the one that is easily confused as alignment, @jasmussen‘s update in #9310, plus the addition of the drop-down arrow are a good baseline to check on the next release and see if we need something more involved. @kevinwhoffman it’d be great to expand on your proposal and see how it might look across more blocks and nested contexts.

Matías Ventura

Depending on your workflow, changing block types will be a common action. For example, I often press enter at the end of a paragraph block which creates a new paragraph block automatically. Being able to easily identify and use the change block type option will improve my writing experience.

Those with feedback on Hoffman’s proposal are encouraged to respond to the issue on GitHub. It’s also worth noting that the team is experimenting with using an icon that’s designated specifically for changing block types.

Posted on

Gutenberg 3.7 Released, Introduces Spotlight Mode

Gutenberg 3.7 is available for download and contains a number of changes. The Fixed Toolbar has been renamed Unified Toolbar. This is an optional mode that fixes all of the toolbar icons to the top of the editor, similar to the Classic editor.

The team discovered that experienced users who don’t mind the disconnect between blocks and the toolbar preferred this layout.

Unified Toolbar in Gutenberg
Unified Toolbar

There’s now an animation and icon specifically tailored for the Block Converter action. Hovering the cursor over a block’s icon will display two arrows that represent the ability to change block types.

Change Bock Types Icon in Gutenberg
Change Bock Types Icon

For those who want to focus on one block of content at a time, there’s a new mode called Spotlight. When enabled, the blocks that are not being edited partially fade away and the block outlines disappear. This is an experimental attempt at introducing a Distraction Free Writing mode.

The icons have been updated for Paragraph, Heading, and Subheading blocks to add clarity. Previous to 3.7, the Paragraph block icon looked like an alignment option causing confusion.

Updated Icons for Paragraph, Heading, and Subheading blocks
Updated Icons for Paragraph, Heading, and Subheading blocks

You can find a complete list of changes and links to corresponding issues on GitHub by visiting the Gutenberg 3.7 release post.