Write Mode / Zoom Out: Dark toolbar inconsistency

[talldan]

Description

In Write Mode, the toolbar is now in a sort of dark mode.

If you have Write Mode and Zoom Out active at the same time, the dark toolbar stays active, even though Write Mode doesn't really do anything when Zoom Out is active (Zoom Out has precedence).

This is definitely part of a larger area where there needs to be more though about the overlap between Write Mode / Zoom Out (maybe the editor tools also shouldn't be shown in Zoom Out), though this issue feels like it can also be solved separately. A couple of options:

• Adopt the dark toolbar in Zoom Out
• (or) Ensure that the toolbar stays light when Write Mode and Zoom Out are active at the same time

cc @WordPress/gutenberg-design

Step-by-step reproduction instructions

1. Enable the write mode experiment (Admin sidebar > Gutenberg > Experiments)
2. Open the site editor and edit a template
3. Click the Zoom out button on the topbar
4. Switch between Write and Design mode and observe the toolbar change

Screenshots, screen recording, code snippet

Kapture.2024-11-29.at.12.03.22.mp4

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[jasmussen]

Because the two tools are so different in their behavior, the goal of the dark toolbar is to help differentiate between the two all the more, as a very visual aid. In that vein, this is working as expected: if you stay in write mode, across editing layouts and patterns, zooming out and changing colors, the color is meant to correspond to the tool you have selected.

I recognize there's more work to do to on the write tool itself, accentuating that and making it useful across.

[patil-vipul]

@jasmussen Thank you for the detailed explanation regarding the intended behavior of the floating toolbar's color in Write and Design Modes. I understand the purpose of the color differentiation — as a visual aid to distinguish between the two modes — and I agree that this functionality works well in normal scenarios.

I also reviewed the code managing mode-specific behaviors, including the toolbar styling in the edit-site module and the state management in the @wordpress/interface package. The current behavior seems consistent with the comment's intent, but the overlap between Zoom Out and Write Mode does create potential confusion. For instance:

• Should the toolbar revert to its Design Mode color in Zoom Out?
• Or should certain editor tools, like the floating toolbar, be hidden entirely in Zoom Out?
  These adjustments could help improve clarity and usability when transitioning between these tools.

[jasmussen]

Should the toolbar revert to its Design Mode color in Zoom Out?

No, I'm aware of discussions around zoom that can iterate things, but for the moment, zoom out is not a separate mode. You can zoom out in write, or you can zoom out in design.

Or should certain editor tools, like the floating toolbar, be hidden entirely in Zoom Out?

There's been a past iteration that made the toolbar vertical, when zoomed out. But for the moment, it's the floating one.

[richtabor]

Does write mode make sense in a zoomed out state?

[talldan]

Does write mode make sense in a zoomed out state?

It doesn't do anything, so I think right now it doesn't make sense.

Perhaps it will do something in the future, but I've not seen any proposals and I personally don't like leaving loose ends like this. It's too easy to forget about them 😄

For now I wonder if:

• It's best to hide the tool selector when zoomed out
• The toolbar should be light to indicate the user isn't able to write when zoomed out

Or perhaps if the dark toolbar is more about indicating a different block selection mechanic:

• Hide the tool selector when zoomed out
• Make the toolbar always dark in zoomed out

[Rishit30G]

Based on the discussion, I have made an attempt to fix this issue with this PR
Thanks

[jeryj]

Another option is to always have a black toolbar if the block is returning contentOnly. So, rather than have it be related to Write/Design mode, have it be related to the content editing state of the Block. Here's a commit that does this.

[karmatosed]

Based on the response from @jasmussen this works as expected design wise, which means to me I would want to remove the feedback label and keep to the original vision. Happy to be wrong here but I do want to ensure that we have that. What might perhaps need the iterations as has been discussed is the consistency.