Gutenberg 14.4 was released today with the long-awaited support for Distraction-Free Editing, much to the delight of content editors everywhere. It hides all non-essential user interface and frees up the canvas to focus on creating text-based content.
The mode can be activated in the options menu in the top toolbar. Distraction-free mode hides the toolbar at the top, all sidebars open, along with the insertion point indicator and block toolbar.
The project to improve the editing experience for text content began with initial explorations in February, which turned into a PR feature that contributors have been refining over the past few months. This distraction-free mode is a huge improvement over the days when users struggled to write with various UI elements popping up and not displaying.
Early in Project Gutenberg, contributors worked on several ways to improve the writing experience after reviewers stated that they found the concept of blocks distracting and disruptive , and that it might not be fully compatible with the simple task of writing . The block editor introduced settings such as Full Screen mode, a top toolbar, and Spotlight mode, in part to mitigate the suboptimal writing experience.
Plugins like MRW Simplified Editor and Iceberg have attempted to bridge the gap, but it's not the same as having a basic built-in option for distraction-free writing. WordPress does so many things well, but I'd like to see it provide the best writing experience on the web, without third-party plugins.
Gutenberg contributors have returned to this challenge again with an initial exploration of what a drastically reduced interface might look like as a new approach to improving focus. The PR outlines the rationale for the exploration:
- The post editor user interface is so cumbersome that it is difficult to focus. Things appear and disappear: mainly the floating block toolbar and the insertion point flash depending on where the mouse is on the screen.
- Using the top toolbar consumes screen space.
- Using a stripped-down interface doesn't reduce that much.
- Writing and content creation in general can be more enjoyable on a blank canvas with little chrome to blur the line of thought.
- Having the full power of the user interface at the push of a button (ESC) is quite simple.
Automattic-sponsored Gutenberg engineer Andrei Draganescu created a video to demonstrate what a “reduced interface” setup could look like. Specifically, this mode keeps the top editor bar hidden and prevents the block toolbar and insertion point from being displayed. It also hides the drag handle in the block toolbar and some icons in the top bar of the editor.
After some feedback, contributors agreed that it would be helpful to make the top toolbar available on hover. They also explored the possibility of detaching the panels from the top bar so that they float on the canvas.
In this mode, users familiar with keyboard shortcuts can still invoke them to bring hidden panels back to the front.
I wouldn't call it a write mode per se because for some people the best writing environment would be the default, or the toolbar at the top; for others it could be a spotlight, etc. The "stripped-down interface" (which I hope to rename "distraction-free") is more about removing the user interface from the canvas and more about working with keyboard and shortcuts.
said Matias Ventura, Gutenberg's chief architect.
Another major update in 14.4 is the redesigned pattern inserter . It has been updated to display categories before patterns are rendered, giving users a smoother visual preview as they explore the pattern library. Patterns can now be dragged and dropped from the preview pane into the canvas.
Other notable improvements that users may notice include the following:
- Image Lock: New toolbar button for add a caption
- Block lock: added content block to navigation block
- Many improvements to fluid typography, including automatic conversion of custom font sizes into fluid values when “settings.typography.fluid” is set to true
- Inserter: adds a more pronounced hover effect
Performance benchmarks show improved load times for both posts and site editors. Check out the release post for a full list of all the changes and bug fixes included in 14.4. This release won't be included in the upcoming WordPress 6.1 release next week, but users eager to adopt these new features can get them now in the Gutenberg plugin.