Skip to content

Merge Zoom Out and "Edit" (Select) Modes #65736

Closed
@getdave

Description

@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
  • 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.

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions