Explore improvements to Styles panel in site editor

[jameskoster]

Currently the Styles panel offers access to a subset of functionality like swapping style variations and viewing the Style Book.

There's opportunity to explore designs that surface additional options here such as font pairings and color palettes. The Frame paradigm could also be extended, for instance a block type it (and its states) could appear isolated in the Frame as it is being worked on. Perhaps there could be an option to view a curated grid of Frames (templates) while styling globally?

Elevating the entire Styles panel into the site editor (as explored in #50924 (comment)) is an intriguing idea worth exhausting too.

[annezazu]

Noting this prior feedback and discussion as well when we begin thinking about this work: #50924

[SaxonF]

styles-panel.1.mp4

This is a slightly outdated concept but sharing here in case it spurs on other ideas. The general thought it the Styles section could be used to set presets and element styles. Missing from the video is style variation selection which should be included at the top like this.

The stylebook is the default view but you should be able to navigate through your site as you're styling globally.

In the scenarios where you want to modify something globally while editing locally we can lean more in to the "push globally" action within a local block.

[SaxonF]

site-editor-styles.1.mp4

Iterating on the above. I'd like to try this in a branch to see how it feels.

[jameskoster]

This looks great.

I really like the idea of the active variation persisting with customisations indicated by the blue dot. It could be a convenient way to reset a single variation, or even 'Save as...'.

Do you think the Styles panel remains accessible in the full screen editor, or is there just a shortcut from there to here?

[annezazu]

Thanks for sharing that demo! I very much appreciate how what you shared communicates the global part of global styles. It’s a much better mental model and I think folks might appreciate the sidebar section going away to avoid accidentally clicking on it. I know that has continually tripped folks up and hasn't helped with explaining how changing the styles there won't just impact what they are seeing in the editor currently.

[ramonjd]

Sorry, I posted on the wrong issue.

Comment moved to

• Style Revisions: Provide more details on what changed in each style revision #55647 (comment)

[annezazu]

As we think about improvements to the Styles panel and how this new experience might look, I wanted to cross connect folks asking for the ability to expose Styles to classic themes as part of the broader experience to look at these changes through: #41119

Building out more functionality for Styles tied to a stylebook would, IMO, make this easier to make happen.

[annezazu]

Due to lack of movement, punting to 6.6.

[mikemcalister]

I really love this direction, @SaxonF! This view gives the styles feature a lot more room to breathe and feels at home in a more global context with patterns, template parts, etc.

To me, currently it feels cramped in an already very busy editor sidebar. We're mixing global and local contexts, which makes it hard for users to understand what exactly they are changing. "Am I changing just the styles for this page?"

As mentioned, users will likely want to see their site while also making these changes. Usually they are changing styles because of a certain page or section they are working on, and they want to see how these new styles affect that content.

As far as the current panel goes, if we went this direction, we'd probably have to remove it. It would be confusing having two entirely different interfaces for global styles.

For a smooth transition, if they click a Styles shortcut from within a post/page in the editor, what if we persisted that page once they hit the new Styles view? That would cut down on a jarring transition and they wouldn't have to go navigate back to that page manually. Of course we'd want a way to toggle the stylebook still.

[unprintedch]

site-editor-styles.1.mp4
Iterating on the above. I'd like to try this in a branch to see how it feels.

I try exactly the same thing here. i thinks we need to go in that direction
#59675

[unprintedch]

site-editor-styles.1.mp4

Iterating on the above. I'd like to try this in a branch to see how it feels.

I like it a lot. I would not open a white panel and keep the drill menu. Sometime screen size is critical for editors.

[annezazu]

Bringing in feedback and a design idea from a separate thread to ensure it's easier to find. This was not done by me and was done by @unprintedch:

What is your proposed solution?

When you enter the editor and then style you are offered pre-defined setting.
Could we have the setting that are present later on

Like:
DEFAULT STYLE

• Site logo and favicon
• Typography (police, weight, size and colors)
• Color palette
• Spacing (basic default)
• Forms?
  Per block global settings >
  See capture below

I thinks it will also solve the site icon/favicon problem.

[richtabor]

There's opportunity to explore designs that surface additional options here such as font pairings and color palettes.

Color and typography presets have been added via #59594.