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.

[draganescu]

I think there is a problem in the fact that the zoom out control is a top level item but it's used are limited to assembly and maybe reordering. It's also another view which is similar to the device previews. We also have the preview in new tab top level icon sending people away from the editor.

Somehow there won't be enough room for stuff in that header area soon.

I still think that we should not reinvent zooming and try to hone in a fluid canvas scaling control and keep editing modes - content, design - separate.

One cool thing about having a fluid scaling (fluid as in from any value to any value instead of a preset scale) is that sometime in the future multiple canvases could coexist in the same workspace.

[afercia]

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).

I disagree. Mentioning edit and select modes is not relevant any longer, those concepts have largely changed and are now 'Write' and 'Design'. Those are editing modes.

The zoom-out is an editing mode as well, it's not a 'view'. At the point that, under the hoods, it uses the same code to change the editor mode.

Also, it's fair to argue that if the Zoom Out toggle needs to clearly communicate its toggled state and make clear how to toggle it off, then that applies to Write and Design modes as well. I think all these three modes should work the same.

Conceptually and logically, the Zoom Out toggle is misplaced. It's now close to a group of controls that are related to save / preview / view / publish. That's not the correct place for an editing mode.

The 'device emulation' menu is an entirely different matter. I think it needs some good rethinking and I will create a separate issue. I don't think Zoom Out mode and device emulation are related in any way from an user perspective they are totally different. Even if under the hood Zoom Out uses the zoom functionality, it's an edit mode for patterns.

This also gets conflated with the efforts in #65702 to allow selecting content blocks once a pattern is selected

Hm, I'm not sure what is proposed in #65702 would be well understandable from an user perspective. The Zoom Out feature is already confusing for users and making it a mode where you can have sort of 'sub modes' to edit different things would make it even more confusing. I'm not sure that's going in the right direction and I'd think a drastic simplification and more explicit modes would be best.

[afercia]

Adding the Accessibility label as grouping together logically related controls is an important part of accessibility.

[stokesman]

I still think that we should not reinvent zooming and try to hone in a fluid canvas scaling control and keep editing modes - content, design - separate.

This seems right and to me points toward separating the view scaling from the moded operation it’s currently tied up with under the label "Zoom Out". This seems aligned with Andrea’s perspective too.

@afercia, have you seen #65736? I think you may appreciate how it acknowledges that Zoom Out is a mode and to me seems to have some overlap with this issue.

[afercia]

@stokesman thanks for pointing me at @getdave's proposal #65736
I totally sahre the first part, but there's a difference in the proposed direction.
To my understanding, #65736 proposes to enhance the 'zooming' (the device emulation) tools to make the edit mode work differently depending on the zoom level.
Instead, I'm proposing to enhance and expand the concept of 'modes', whihc I tend to think is more intuitive and understandable for users. I would love to see these modes be more explicit in the editor rather than making the zooming tool a way to provide alternative editing experiences. To me, the zooming tool is exclusively a 'device emulation view'. Conflating other concepts and interactions in that tool wouldn't be intuitive for users, in my opnion. See also #65918
I will comment on #65736

On a side note: I think the 'Design' mode should be renamed.
To me, as an user, 'Edit' means I can edit anything, while 'Design' suggests that I can only edit the design. Actually, with the current implementation, 'Design' is the edit mode, which is counterintuitive in my opinion.

[richtabor]

Conceptually and logically, the Zoom Out toggle is misplaced. It's now close to a group of controls that are related to save / preview / view / publish. That's not the correct place for an editing mode.

It is conceptually similar to preview: changing the view of the canvas. Whether or not interactions, or controls, differ by state is not relevant.

Instead, I'm proposing to enhance and expand the concept of 'modes', whihc I tend to think is more intuitive and understandable for users.

I don't think zoom out should be introduced as a "mode". When I talk about it/show it to others, I ask them how they'd zoom out, not tell them how to switch to a mode/find the control. The notion of zooming out as an action is much more intuitive than switching modes.

On a side note: I think the 'Design' mode should be renamed.

Do you mind opening a separate issue for this sentiment? Design encompasses everything, not just colors/layout. :)

The canvas zooms out with various conditions: global styles > style browsing, patterns tab, adding a new page (eventually), etc — it should be clear where zoom out is engaged, and how to zoom back in. The current mode/tools UI is not a good mechanism to support this, as the zooming out control would be hidden when inactive.

[afercia]

It is conceptually similar to preview: changing the view of the canvas. Whether or not interactions, or controls, differ by state is not relevant.

I understand this sentiment but I disagree. Also, thinking at Zoom Out as similar to a preview isn't aligned with the way this feature has been presented to the publick in the Gutenberg 19.3 release post on Make. Quoting (emphasis mine):

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.

Regardless of the enhancements experimented in #65702, to me Zoom Out is a mode. It;s just the name of this feature that isn't aligned with what it actually does :) The name focuses too much on the zooming, while the whole feature has been designed since the beginning as a way to make editing at a patterns level an easier task.

At this point I'd think the various positions are clear and there's no need to cycle back over and over the same arguments. The only fact there is disagreement about the nature, placement and UI of this feature proves that it's unclear and not self-explanatory. As such, it's very likely that it will be confusing for users as well if it is kept as is.

[afercia]

Quoting from a PR by @getdave
#65265

Also the term "Zoom Out" does not accurately describe the new mode. We are no longer just "zooming out on the canvas". Rather we are switching to a mode which prioritises "Composing a page using Patterns as Sections". The fact that the canvas is "zoomed" is really a byproduct.

I'd totally agree. To me, 'Zoom Out' is a mode. In #65265 it was also proposed to rename it but for now the name 'Zoom Out' stays. I'd like to propose to consider a better name in a future iteration and move it to the existing editor modes. Any thoughts more than welcome.

[afercia]

Update:
after #66784 and #67008 the 'Tool selector' is only shown in the UI when the 'Editor write mode' Gutenberg experiment is enabled or when showing a template in the Post editor.

As such, there's no longer a default UI where to merge the 'Zoom Out' into. However, to me 'Zoom Out' is still an 'editing mode' as it is meant to provide an alternative, easier, way to work with the main sections and with the patterns. Placing it cloe to the view options isn't ideal, IMHO.

Screenshot of the tools selector UI when the 'Editor write mode' Gutenberg experiment is enabled or when editing a template in the Post editor: