Group Write, Design, and Zoom out modes

[afercia]

Description

WordPress 6.7. will introduce Zoom Out 'mode', which aims to be a convenient way for users to edit at a patterns lavel. The feature is presented as:

This new mode allows users to zoom out to edit and create at the pattern level over granular block editing. This effort aims to provide a new, high-level approach to building and interacting with your site.

However, there's nothing in the editor user interfaces that tells me, as an user, what this 'mode' is about. It only says 'Zoom Out'. It doesn't mention nor explains in any way it's about editing patterns. In fact, this mode isn't just a 'view' mode. Actually, it's meant to provide an easier editing experiences for patterns.

On the other hand, #65663 and #65721 refined previous work to evolve from select / edit mode to the new concepts of 'Write' and 'Design' modes. These modes are are presented to users as actual editing modes:

• Write → Focus on content.
• Design → Edit layout and styles.

The description is:
Tools provide different sets of interactions for blocks. Toggle between simplified content tools (Write) and advanced visual editing tools (Design).

Proposal

To me, all these three 'modes' are conceptually similar. They are 'editing modes' of the editor, aiming at providing better interactions and experience for specific editing flows.

As such, I'm not sure I understand why they are separated. I'd like to propose to group these three modes in the same spot in the UI and rename accordingly. To me, the most logical place where to group these modes is the current 'Tools' menu, which should be renamed.

As a user, I associate these three modes to the concept of 'editing modes' or 'editor modes' so I would think the 'Tools' menu should be renamed accordingly. 'Tools' doesn't feel appropriate any longer.

Regarding the placement, if here's agreement with communicating these modes as 'editing modes', I'd think the most logical placement is on the left of the top bar, where the current 'Tools' menu is. Close to 'document level tools' such as adding content, list view, undo/redo. 'These editing modes switch the editor to a different modality and should be placed at a level that is conceptually higher than the right part of the top bar, which should only contain features related to preview/view/save/publish.

Ideally, 'Zoom Out' should be renamed to better communicate it's an editing mode for patterns. However, I do understand naming is difficult and there may be different opinions. Keeping the current name 'Zoom Out' would be acceptable, though not ideal in my opinion, taking advantage from the fact the new placement in the 'tools' menu together with Write and Design would allow to add some short description of what 'Zoom Out' is about.

As a last, minor, refinement: the 'arrow' icon for Design mode doesn't look appropriate any longer. The concept to communicate is Edit layout and styles and an arrow doesn't make much sense any longer.

Cc @WordPress/gutenberg-design @mtias

Rough screenshot to illustrate. Wording to be improved.

Note on accessibility:
ARIA menus should only contain menuitems, groups and separators. The description at the end of the menu, though technically outside of the ARIA menu, will likely never be discoverable by screen reader users given the expected arrow keys interaction on the mennu. I'd consider to entirely remove the descriptipon.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[afercia]

Roughly, without description:

[t-hamano]

I also think the zoom out mode needs some description.

I recently did some quick testing of WP 6.7 Beta 1 with a few WordPress developers, and when they discovered the zoom out button, they pressed it and were confused because they had no idea what it did.

[afercia]

when they discovered the zoom out button, they pressed it and were confused because they had no idea what it did.

I was confused as well 😄 As it is now, it looks like a zoom tool and nothing else. I had to investigate to realize it was something more than a zoomed out view.

[t-hamano]

cc @getdave @draganescu @MaggieCabrera

[afercia]

Expanding a little on this. In past conversation, some contributors (including me) already proposed the introduction of the concept of 'modes' and that was even before the introduction of the Site editor. Today, the editor does implement different editing modes, thinking for example at the template editing one. They are extremely useful to distinguish context, editorial flows, and organize complexity.

However, the editor doesn't really presents to user the concept of 'modes' in a prominent way. I'd think this would be an opportunity to further expand on this concept and clearly present the editor as a tool that has various editing modes.

[richtabor]

I was confused as well 😄 As it is now, it looks like a zoom tool and nothing else. I had to investigate to realize it was something more than a zoomed out view.

I don't think this means we should bury it in the "Tools" menu, conflating it with Write and Design modes (and the conditions of which those controls would be available).

It's important that the zoom out control as it sits today is clearly toggled when zoom out is engaged, which helps you identify how to toggle it off. Otherwise, it's lost quickly (much like the edit and select modes have in the past).

In fact, this mode isn't just a 'view' mode. Actually, it's meant to provide an easier editing experiences for patterns.

The interface does not have to be so detailed in that it's written out that zooming out has additional affordances.

This also gets conflated with the efforts in #65702 to allow selecting content blocks once a pattern is selected. You're still zoomed out, but you're leveraging "Write" mode technically.

[paaljoachim]

I remember some time back that a 50% was explored to be added to the View drop down.
That seemed like an interesting idea.
It feels kinda crowded having the Zoom in/out icon next to the View Page.
I am also a bit curious about a open in new tab icon when there is a Preview in new tab inside the View area.
I think it would be helpful to iterate the icons in the top right area.

Btw looking at the Zoom in the newest Gutenberg it feels like a feature that is not fully in place, but leaves me in some confusion as to the purpose beyond the zoom out.

[t-hamano]

I don't have a strong opinion on whether the zoom out button should be embedded in the tools menu, but the current zoom out button conflicts with the tools menu. See #65901.