Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
getdave opened this issue Sep 30, 2024 · 5 comments · May be fixed by #65702
Open

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

getdave opened this issue Sep 30, 2024 · 5 comments · May be fixed by #65702
Assignees

Comments

@getdave
Copy link
Contributor

getdave commented Sep 30, 2024

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.
@richtabor
Copy link
Member

Related #65702.

@getdave
Copy link
Contributor Author

getdave commented Oct 1, 2024

@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
Copy link
Contributor

afercia commented Oct 8, 2024

Coming here from #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 #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 #65918

@richtabor
Copy link
Member

richtabor commented Oct 8, 2024

Instead, I'd think the zooming tool should be presented exclusively as 'device emulation' tools and not provide other concepts and interactions. See also #65918

Zooming out without the UX affordances to edit at the pattern level misses the whole point of zoom out. This PR #65702 is a big step forward in supporting zoom out.

@richtabor
Copy link
Member

richtabor commented Oct 8, 2024

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 #65702, this changes a bit, as you can select nested blocks.

@richtabor richtabor changed the title Proposal: Merge Zoom Out and "Edit" (Select) Modes Merge Zoom Out and "Edit" (Select) Modes Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants