A dedicated space for all things global

[SaxonF]

What problem does this address?

It can be difficult to differentiate between what’s being edited at a local level (e.g. a post, styles affecting a single block instance etc) vs at a global level (e.g. global styles, editing template parts, reusable blocks etc). There is also a lack of feedback on what global style changes actually look like in the context of your site unless the page you're editing contains the specific block/colour/type.

Global Styles, and in general the block based approach of Gutenberg, represents a great opportunity to capture more of the modern designer/developer segment who may put more emphasis on the idea of design systems / style guides etc. How might we give the concept a stronger identity / more weight?

What is your proposed solution?

Apologies in advance if I've missed any previous explorations and/or misunderstood what's currently available.

library-concept-small.mp4

I wanted to explore the idea of creating a dedicated space for all things global. For the sake of this concept we can call it your “Library” but there are many labels to describe the idea (e.g. design system or style guide or brand kit).

Your library represents everything you have available to you to craft your site and content, including styles and blocks that apply those styles. Your library can be extended by yourself (e.g. creating new patterns) or bring in patterns/styles/templates etc from the community (pattern directory).

Library changes can be previewed against your site before publishing just like any draft post.

You can push local changes to your library so that you can design in context if needed. e.g. I need to fine tune button styles as they don’t look quite right in a particular post. Clicking the button directly on canvas and modifying its styles is the most obvious way to do this.

This may just be a repackaging of what’s already on offer via global styles sidebar and template part/template/reusable block editing. It's an attempt to bring all of that together into a more holistic experience.

[mtias]

Related #29630 and #27473.

[paaljoachim]

@ItsJonQ and @nosolosw I think you both would like to know about this issue.

[SaxonF]

Thinking about this a little more you could also keep styles (colors, typography, any other type of token) in the global styles sidebar and make it accessible while editing blocks in your library. Its basically just moving blocks out of the sidebar and treating them the same way as templates/template parts/patterns/re-usable blocks etc. The global styles sidebar really then is just a representation of your brand much like other theme specs (e.g. TailwindCSS)

[daveloodts]

Editing Global Style doesn't have to a "unique" benefit of FSE-themes, but Hybrid themes too. With Hybrid themes is mean: still using blocks all the way, but not the "structure" editor what FSE does. With the current Global Styles embedded in the site-editor.php; Hybrid Themes are left out and have only the theme.json to work in.

Some context: (copied for a slack discussion)
In the site-editor.php you can edit the "templates". With the Global Styles you can create "styles for blocks". Is it only me? But i see these as 2 separate entities. It's the first time i use this theme.json in a new custom non-FSE theme; other custom stuff i've build i had to define the same stuff/variables in various and multiple places. That's just crazy. With the use of theme.json i can define it in one place, and back- and frontend works and looks fine. I don't call my custom theme a "Classic" theme, but a "Hybrid" theme. Meaning: it's build on blocks for content, the standard navigation, some parts in the customizer and normal widgets. I use Gutenberg solely as a "content editor". And from what i hear and see, i'm not the only one that is working like this. And probably keep on working like this for years, with really all due respect for FSE. It's sad that there's a breaking point of a really useful tool like the Global Style UI that we can't use.

[jordesign]

Hey @SaxonF - just checking in to see if this issue is still relevant with where design/investigations are going at the moment?

[SaxonF]

We've made progress here within pattern management but still relevant in relation to where the styles panel might be going

[youknowriad]

With the last changes to the site editor (patterns, stylebook, global styles), I think this issue is mostly address but also not clear what's remaining. I'm closing it but we can reopen a new one with new paths if possible.