Distraction free mode next steps

[draganescu]

Starting the next WordPress release distraction free mode will be available for the site editor as well.

This is an important milestone for this feature proving its usefulness - albeit as a niche, power user improvement.

It is also a good time to figure out the next steps required to make this feature even more useful. Here are some items to figure out, each in their own explorations.

Detachable UI elements

In distraction free the UI should be easily invokable and easily dismissible.

Floating UI panels are a tried and true solution for this UI requirement.

The UI panels (list view, inserter, block inspector, document inspector) should be detachable and floating on top of the canvas.

Ideally one should be able to move them around in case they're obscuring the content to be edited.

Better modal experience

Most actions in the block editor today require that the user exits DFM to be able to perform them.

Floating UI panels are a good solution but this solution lowers the fidelity of the distraction free experience - floating UI is a distraction.

To maintain the fidelity of the experience a solution that keeps the modal aspect could work better. There is one modal experience today that can be a springboard for DFM improvements and is also modal: the command center.

The command center should be improved to allow multi step actions:

• Media library search results previe
• Publishing flow steps
• Inserting blocks and patterns

The block editor should be improved to allow dynamically registering commands that act on blocks. Basic actions are already available (see https://github.com/WordPress/gutenberg/pull/52509) but more complex actions are impossible to register currently:

• Change current block design props
• Change duo tone and other filters
• Change alignment and layout

These commands appear to require improvements to both how command center handles callbacks and also how were able to register them.

A more seamless experience overall

Distraction free mode can also work as an excellent preview tool while building design or producing content. Ideas to explore:

• Allowing interactivity API behaviors to be toggled on while DFM is active (eg showing the drop-down of menus on hover, opening image modals)
• Allowing navigation to internal content via simple user actions (see https://github.com/WordPress/gutenberg/pull/49582)

[annezazu]

With one month left ahead of 6.4 beta 1, moving this out of the 6.4 board to allow more time for this work to be clarified and broken down further.

[meaganhanes]

Would love to see this bumped!

[draganescu]

@meaganhanes awesome! Which parts of the issue above would be most impactful to you and your workflows?