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.

Screen-Shot-2022-09-06-at-8.33.24-PM-500x330 Gutenberg Contributors Make Progress on Distraction Free Mode design tips  Screen-Shot-2022-09-06-at-8.33.24-PM-500x330 Gutenberg Contributors Make Progress on Distraction Free Mode design tips

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.

Source