Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A dedicated space for all things global #32682

Closed
SaxonF opened this issue Jun 15, 2021 · 7 comments
Closed

A dedicated space for all things global #32682

SaxonF opened this issue Jun 15, 2021 · 7 comments
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.

Comments

@SaxonF
Copy link
Contributor

SaxonF commented Jun 15, 2021

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

image
image

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.

@Mamaduka Mamaduka added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Jun 15, 2021
@mtias
Copy link
Member

mtias commented Jun 21, 2021

Related #29630 and #27473.

@paaljoachim
Copy link
Contributor

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

@SaxonF
Copy link
Contributor Author

SaxonF commented Aug 4, 2021

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)

@priethor priethor added [Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Needs Design Feedback Needs general design feedback. labels Aug 9, 2021
@mtias mtias mentioned this issue Sep 6, 2021
16 tasks
@daveloodts
Copy link

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
Copy link
Contributor

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

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Sep 1, 2023
@SaxonF
Copy link
Contributor Author

SaxonF commented Sep 1, 2023

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

@youknowriad
Copy link
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Patterns A collection of blocks that can be synced (previously reusable blocks) or unsynced Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Design Feedback Needs general design feedback. [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

8 participants