Merge Zoom Out and "Edit" (Select) Modes

[getdave]

In the Gutenberg Plugin we currently have 3 editor modes:

• Design (default):
  • The default mode. Users have full control over all aspects of editing within the page or post.
  • Blocks can be freely added, modified, or deleted.
  • The key for this mode is edit ( __unstableSetEditorMode(edit) ).
• Edit
  • Previously known as "Select" mode.
  • This now activates a simplified, content-focused editing experience across all blocks.
  • There is an active discussion about preserving the previous “navigational” ability of the old “Select” mode.
• Zoom-out:
  • A mode that zooms out the interface to show a high-level view of the page or template.
  • In this mode, only top-level sections are editable, while individual blocks become disabled. This is ideal for working on large-scale layout adjustments without focusing on individual block details.

The last two modes have a number of similarities in terms of focusing on simplifying the editing experience and focusing on content.

The main different is that Zoom Out currently only allows selection of "sections" and doesn't not allow editing of the content of those sections. However, based on testing it seems that in Zoom Out mode users would likely want to make small edits to content whilst "zoomed out".

Note: there is not suggestion that users would wish to write long form content in this mode. But when editing say, a homepage, it's likely that a user might wish to select a particular section and make a change to the heading of that section without having to exit the "zoomed" experience.

Proposal

We should consider merging Zoom Out and Edit modes to provide the best overall experience. This would have the benefit of providing a standardised and improved UX whilst also removing duplication of "modes" in the Editor.

To do this we should explore:

• Remove the zoom-out mode in favour of only retaining the navigation (e.g. "Edit") mode.
• Adjust the behaviour of "Edit" mode when the canvas is zoomed to provide a slightly more tailored experience.
  • allow content blocks to be edited whilst zoomed out.
  • require a click to "activate" a section before the contents can be edited.
  • single click anywhere on a section should still only select the section (no immediate selection of child blocks).
  • retain vertical toolbar.

[richtabor]

Related https://github.com/WordPress/gutenberg/pull/65702.

[getdave]

@colorful-tones Thanks for the admin on this Issue. Just so you know that the work in this PR cannot land in 6.7 because only Zoom Out mode has been targeted for this release.

[afercia]

Coming here from https://github.com/WordPress/gutenberg/issues/65856

I'd totally share @getdave's idea that Write, Design, and Zoom Out are, conceptually (and technically), three different modes of the editor. However, instead of conflating the concept of alternative editing modes into the current zooming tool, I'd think it would be best to provide users with a more explicit concept that is easier to understand and use.

In https://github.com/WordPress/gutenberg/issues/65856 I'm proposing to expand the concept of 'Modes' as in: the editor provides alternative editing modes that are explicit, clearly presented and prominent in the UI and easily usable. These are alternative editing experiences and should be grouped into the same concept.

Instead, I'd think the zooming tool should be presented exclusively as 'device emulation' tools and not provide other concepts and interactions. See also https://github.com/WordPress/gutenberg/issues/65918

[richtabor]

Instead, I'd think the zooming tool should be presented exclusively as 'device emulation' tools and not provide other concepts and interactions. See also https://github.com/WordPress/gutenberg/issues/65918

Zooming out without the UX affordances to edit at the pattern level misses the whole point of zoom out. This PR https://github.com/WordPress/gutenberg/pull/65702 is a big step forward in supporting zoom out.

[richtabor]

In this mode, only top-level sections are editable, while individual blocks become disabled. This is ideal for working on large-scale layout adjustments without focusing on individual block details.

Noting that with https://github.com/WordPress/gutenberg/pull/65702, this changes a bit, as you can select nested blocks.