Open jasmussen opened 13 hours ago
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.
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 ?
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.
Or
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.
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:
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 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 😄
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)
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.
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.