Styles: better connect top level dedicated Styles screen with the in editor Styles screen

[annezazu]

As the work for #65619 lands to introduce a dedicated styles screen at the top level in the Site Editor per this issue , I wanted to open an issue to discuss removing the in canvas/editor Styles option after the full functionality is ported into this top level item. I didn't see this discussed as a follow up item but I could have missed it so opening this to be safe and keep it top of mind.

From what I have seen in years of testing the Site Editor, removing the in editor option will help reduce confusion in a few ways: less icons/options in the toolbar, remove a global option that sits next to local options (block settings), confusion around the icon itself, and general misunderstanding that the changes made in the Styles section impact the entire site rather than just the template or page being viewed.

[annezazu]

FYI to @jameskoster @aaroncampbell @ramonjd @andrewserong @tellthemachines who have been diligently working on much of this.

[ramonjd]

removing the in canvas/editor Styles option after the full functionality is ported into this top level item
From what I have seen in years of testing the Site Editor, removing the in editor option will help reduce confusion in a few ways: less icons/options in the toolbar, remove a global option that sits next to local options (block settings)

Thanks for opening this issue.

I think relocating global styles (including the style book and possibly revisions) is consistent with:

• the progress made on the style panel in view mode, as well as
• the proposition to bring global styles features to classic themes.

An inextricable condition of doing so, for me, would be to offer an obvious and low-effort bridge between the site editor and the dedicated global styles view. A change this large I think would require something obvious, like a prominent "Edit site styles" button, or keeping the existing global styles icon around for a while - maybe it would open up a modal containing the dedicated view.

Furthermore, it'd be worth having a two-way channel for communication between global styles and the site editor, for example to allow for deep linking to global styles controls.

So, if I'm in the site editor and editing a block's style, it would be convenient to have a direct path to edit the global styles for that block.

This PR is kind of related to this idea.

Conversely, if I'm editing my site's global styles, I might want to slip back into the editor to tweak the current template, or fiddle with an individual block's styles.

Without such a bridge, features like this one would have no context or recourse for undo or further customization:

One possibility might be to have the current template enter zoom out mode and then the global styles panel open up from the left:

A high-level discussion on how to build a dedicated global styles component/package/whatever is going on over in #62216 (comment)

[jasmussen]

Good notes above.

Another thought coming to mind, is showing a notice like was done when the block inspector was split in settings and style tabs: "Looking for block settings? Try the style tab."

Some quick options:

We should pick, of the above, the one that's easiest to implement. Ideally there's a design system task in this as well, to figure out a consistent use of dismissible feature notices like this.

[jameskoster]

Are we certain about removing it entirely? We're potentially introducing several clicks to go from the editor to global styles.

Could the button remain, but navigate to the new Styles area? The significant shift in context might reduce some of the existing confusion.

[jasmussen]

Are we certain about removing it entirely? We're potentially introducing several clicks to go from the editor to global styles.

There are several benefits to entirely removing it, including removing the confusion between the local block inspector and the global style inspector often intermingling. Also, the space in the top right is becoming slightly crowded, and finally with the use of the style icon for the split block inspector, the duplication there is also addressed.

I would agree that there are many ways we can get there, and that there needs to be no rush to do so. In fact we might even show a "Styles are about to move" notice inside the existing global style inspector, for a while. Outside the initial shifting concern, do you have overall concerns about the move in general?

[jarekmorawski]

Not sure if it's helpful, but would it make sense to create a custom interaction that will explain to the user where the 'site view' is when they attempt to locate the old Styles button in the UI? Here's a quick animation I put together. Notice how the icon appears in the home button in the top right corner, indicating where the user will find Styles after the change.

styles.mov

[jameskoster]

removing the confusion between the local block inspector and the global style inspector often intermingling

This shift in context might resolve this, without introducing extra clicks. I understand the confusion that exists today, but I also believe that moving quickly from editing a document to managing global styles is a common flow that we risk adding a lot of friction to.

[jarekmorawski]

I understand the confusion that exists today, but I also believe that moving quickly from editing a document to managing global styles is a common flow that we risk adding a lot of friction to.

Imagine less savvy users who don't know the editor's UI very well yet. Looking for specific settings, they may click around, not knowing what each button does. It may startle them if clicking the Styles button will suddenly change the context and interrupt their workflow, especially when all other buttons in the toolbar open and close panels and do not impact the rest of the UI.

[supernovia]

My work is in interacting with users and processing feedback. I love that we're surfacing styles in a much clearer, dedicated way. I wouldn't remove the existing icon, though.

It may startle them if clicking the Styles button will suddenly change the context and interrupt their workflow, especially when all other buttons in the toolbar open and close panels and do not impact the rest of the UI.

My sense here is that while a few users might startle once, frequent users will experience an ongoing hassle with extra clicks, not to mention the frustration of having their tools moved around.

About concerns of duplication and clutter: as long as we're not maintaing two different style features, my guess is that most people who use the site editor extensively would prefer quick access where they need it. Shortcuts are popular for a reason.

Could we connect the old icon to the new styles experience? That would surface styles for new users while respecting the needs of savvy users.