Styles panel: Show global styles, and style book by default, in site view

[jasmussen]

Global styles allows you to change the visual appearane of your whole website. It is also the visual interface to the singular theme.json file for a block theme.

For the moment, global styles uses the sidebar API to make it live as a sidebar panel in the edit view of the site editor. Historically this has been useful to iterate the interface and make progress on the engine itself. Fundamentally, however, the site editor edits individual templates or pages, making it a local interface rather than a global interface. Further, the contextual global styles sidebar panel (click a block to change the global styles for that block) is easily confused with the contextual local block inspector. You might have the global styles sidebar open, click a paragraph wanting to change the font size, and click "Typography".

A solution to that can be to move the global styles out from the edit view, and into the site view. Mockup:

In this view, the Style book can be the default view for the site editor, loaded in the frame on the right. The frame in this case, is not interactive, it's a visual preview of the styles that are chosen in the interactive panel.

This mockup relies on, and integrates design iterations to the Style book as tracked in #53431. In that issue, a curated "Overview" section of the style book is created to show the most important aspects of your website visual identity; color, typography, heading level sizes, etc.

• If you click Typography, the frame preview updates to show an exploded view of all type styles of the site.
• If you click Colors, the frame preview updates to show just a map of the color swatches.
• If you drill into the block section, each individual block, perhaps even patterns that leverage this block, can be shown. This will, for example, be useful should we move in the direction of showing pseudo states as well, in this exploded view (see https://github.com/WordPress/gutenberg/issues/38277#issuecomment-2306449475)

For the moment, the visual mockup above assumes a 1:1 transplant of the existing global styles sidebar into site view. See more explorations in Figma, here and here. One of those explorations can be seen here, and can be part of a future evolution of this work:

https://github.com/user-attachments/assets/4de07f95-37da-43a0-892b-51754ef9ac8a

Related: #53483.

[richtabor]

In this view, the Style book can be the default view for the site editor

I'm not particularly confident in having style book as the default for this view. I would think that you'd want to see the effect of style changes on your site, rather than abstracted in style book.

[ramonjd]

I would think that you'd want to see the effect of style changes on your site, rather than abstracted in style book.

We could try to reintroduce the style book 👁 icon to https://github.com/WordPress/gutenberg/pull/65619 ?

[tellthemachines]

I'm all for moving global styles to a place where it's easier to access! I do think we have to be careful with screen real estate and the double sidebar. Looking at the figma links, this one looks like it might make best use of space:

Alternatively, it could also work to have the whole global styles menu in the black sidebar and open up "browse styles" by default in the second sidebar (my shitty mockup below, sorry)

Whichever way we go with this, we need to consider where the stylebook is going to live in the future.

• Is the goal to transfer global styles completely to the left hand sidebar, eventually removing it from the right where it is now?
• If so, the stylebook will also move the left sidebar, and that means we have to add the tabs and clickable interactions we aim to add as part of #53431.

Or

• Is the current global styles going to stay forever where it is, with the full stylebook hidden inside it, while the version of global styles in the left hand sidebar shows only a reduced (non-tabbed, non-clickable) style book?

I think we need to decide which way to go soon, otherwise we risk doing a ton of work on the stylebook that will later have to be changed or undone if we decide to move it somewhere else.

[youknowriad]

I think we need to acknowledge that the current mix of global styles and templates or global styles and document editing is bring unclarity to regular users.

I understand the arguments about Changing global styles and wanting to see the changes in a given template/post...

But for me, we've over optimized for this causing more confusion for regular users wanting to just change some obvious global styles (colors, backgrounds...), the common case over advanced users that know what they're doing when they open the global styles sidebar.

For regular users, they mostly get confused about What is this sidebar in the editor even about, is it about the current selected block, the current selected document or global (unless you know your way around WordPress, and FSE, for most it's very hard to understand that it's global) and no snackbar, guide or whatever is going to change that, these are complementary and not the real solution to the problem. It is also really easy to be overwhelmed when you go into the editor when you only want to make some global styles changes.

So, yeah, for me the only solution is to actually pull away the sidebar from the editor into its own global "styles" section. This doesn't come without challenges, but I think the confusion above is more important to solve than the challenges that come with moving this to a global place:

---

Challenges:

• What to show when you edit global styles: Yes, showing "style book" is not sufficient or is not ideal but IMO, for the common cases, it's better than forcing users to go to the editor. So practically speaking, I'm more than happy with shipping with stylebook as initial iteration (while keeping the current sidebar in the editor as we iterate for advanced use-cases). Also worth noting that this allows us to open the screen to classic themes, as these themes don't have templates that can load in an editor but they can still benefit from global styles and stylebook.
• As a second step, I saw same Ideas about a full browse mode where you actually load the frontend in the "preview" and not an abstracted version (editor) and you allow the user to actually navigate the frontend normally without the addition of "style injection" into the frontend. This is also not without its own challenges but it's worth exploring.
• An intermediary step could be to offer a toggle in this "global styles" focused editor to switch between "home page" and "style book".
• Advanced usage: I think what would be great as well, would be to allow themes to build their own "style book" / "design system kind of showcase" and use it in this section.

All these become possible if we start thinking about this section as an "editor focused on global styles" which free us from thinking about templates, pages... and I believe clarify things for the users and simplifies the mental model.

---

Another challenge raised above is about the sidebar design. I think that's an ok tradeoff to embrace for now, I agree it's not ideal, but the same issue exists for "list views" for pages and we didn't see too much dramatic feedback about it. It deserves a unified solution rather than one that is specific to styles.

• The unified solution could be to "ditch" this middle sidebar entirely but that requires rethinking the design of these middle sidebars.
• It may be simpler for global styles to move everything to the "black" sidebar. The challenge there is that our UI components are not yet capable of rendering in a dark background cleanly yet.

[tellthemachines]

The challenge there is that our UI components are not yet capable of rendering in a dark background cleanly yet.

How hard a problem would that be to solve though? I reckon it's worthwhile considering, especially now that this pattern of black sidebar + white sidebar seems to be spreading throughout the UI 😄

[youknowriad]

How hard a problem would that be to solve though? I reckon it's worthwhile considering, especially now that this pattern of black sidebar + white sidebar seems to be spreading throughout the UI

I can't tell for sure, I know that we did experiment with the global styles in the "black area" with @jorgefilipecosta a long time ago, it was doable with some CSS hacks. It might be better today. So we won't know unless we try it (if designers think this is a good approach)