Gutenberg Contributors Make Progress on Distraction Free Mode

During last week’s Editor chat meeting, Automattic-sponsored Gutenberg contributor Andrei Draganescu reported that he is “slowly but definitely going to introduce distraction free mode,” a project he has been working on since early explorations began in February. The PR he referenced (#41740) is an extension of those explorations that takes the mode even further towards the objective of removing visual clutter when the focus is on editing text content.

“Until now the preference, when toggled on, would only hide some of the toolbar icons and a few other non-essential UI items,” Draganescu said. “With this PR the preference will have a more drastic effect, turning the UI into a blank page.”

Whereas the previous explorations were more focused on removing UI from the canvas, the demo video above shows how Draganescu’s PR takes it even further to create a full-page writing-focused environment. This iteration does the following:

  • hides the top toolbar, makes it appear on hover over its normal occupied
    area
  • removes many top toolbar buttons
  • automatically closes any open sidebars
  • hides the insertion point indicator
  • hides the block toolbar

The menu to turn on this mode would be added to the three-dot drop-down menu under the other alternative modes.

Draganescu said there are a few outstanding bugs and the UI copy is still under consideration (distraction free, toggle interface), but he said he thinks it will be “a great complement to the incoming ‘zoomed out mode.’”

Gutenberg engineer Riad Benguella created an experimental PR for the zoom-out view idea for the site editor, where the focus is on site building and composing patterns, allowing users to move sections around without affecting inner blocks. It makes it easier to build templates without worrying about block editing. Draganescu said if this code lands, it may lend some foundation to the distraction free mode.

This feature has generally received positive feedback, with a few minor suggestions to correct issues with dismissing the screen and the autosave message. The team does not seem to be in a rush to land distraction free mode in Gutenberg but significant progress has been made over the past six months.

With distractions increasing in the the digital world, some of the most reliable and efficient interfaces are those committed to staying distraction free. The current Fullscreen mode falls short here, as different parts of the interface pop in and out of view when the mouse is moved around the screen. Draganescu’s attempt at making a new, distraction free UI, more tailored to writing, would be a welcome addition to Gutenberg.

5

5 responses to “Gutenberg Contributors Make Progress on Distraction Free Mode”

  1. It’s nice, but not that urgent. There are more important things that should be added:

    Separate, global typogrpahy dropdowns for headings and text.
    Separate controls for padding and margin for desktop and mobile.
    A button in the top toolbar which opens the patterns modal with one click.
    Columns block sorting option for mobile.

    This is the list of features which are missing and are really needed.

  2. I’m not sure this is a step in the right direction. As a former corporate type with usability-testing experience I had a tech-savvy but new-to-WordPress friend try to use an out-of-the-box WordPress installation to create a page and a blog post.

    Even the current block editor defaults thwarted them when they finished their blog post and needed to return to the main WordPress interface to create a page. I’m not sure making the block editing experience even more “distraction free” would improve that experience. One hopes it’ll be something you can easily turn on rather than turn off.

Leave a Reply to Per Herngren Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: