Try global styles at blocks

[oandregal]

This PR does two things:

• Adds the CSS variables to most of the blocks (work in progress).
• Explores a different approach to isolated global styles: instead of using a wp-gs class, it enqueues the styles in a separate stylesheet (if the theme has support for global styles and the experiment is enabled).

In creating an experimental theme for testing, I've found this has a number of advantages over the wp-gs:

• We don't raise the selector specificity.
• When authors want to override a particular mapping, they don't need to be aware of whether they need to add the wp-gs or not.
• Global styles are only enqueued when necessary, so there are fewer opportunities for errors, code that leaks into production, or confusion in the stylesheets.

[youknowriad]

Do you think it could be better to split the PRs block by block (or maybe group by similar blocks), just to review and merge quickly?

[mtias]

Do you think it could be better to split the PRs block by block (or maybe group by similar blocks), just to review and merge quickly?

Also would be good to focus initially on one or two blocks until we know things are sailing smoothly.

[oandregal]

This covers the case where --wp--color--white is not present, so it fallbacks to $white. However, we also need to cover cases where the browser doesn't have support for CSS Custom Properties and write something like:

.wp-block-button {
	color: $white;
	color: var(--wp--color--white, $white);
}

which can be done automatically with some plugins.

[oandregal]

We also don't want to do this until we're certain this is the way to go.

[oandregal]

Same as in https://github.com/WordPress/gutenberg/pull/20273/files#r380769774

[oandregal]

Same as in https://github.com/WordPress/gutenberg/pull/20273/files#r380769774

[oandregal]

Same as in https://github.com/WordPress/gutenberg/pull/20273/files#r380769774

[oandregal]

Same as in https://github.com/WordPress/gutenberg/pull/20273/files#r380769774

[ItsJonQ]

@nosolosw Ah yes! An alternative global.css stylesheet :D. I think this improves the rendered CSS workflow by the features you highlighted.

From a core block perspective, it's easier to identify the global styles as they live in a separate folder.

As of this moment, I'm unsure how this may play out for 3rd party blocks. Perhaps they too can provide a global.css file?

(Just thinking out loud)

[oandregal]

Do you think it could be better to split the PRs block by block (or maybe group by similar blocks), just to review and merge quickly?

This was more of an exploratory PR to see how things looked. We may want to do a single PR with a few blocks first and then expand by doing separate PRs per block.

As of this moment, I'm unsure how this may play out for 3rd party blocks. Perhaps they too can provide a global.css file?

I wish we could remove the need for a scoping mechanism altogether, but it doesn't seem like we can so far. The way I see it, we have two alternatives:

• scoping the "global styles" with the wp-gs class, and ask 3rd parties to do the same (with the problems listed above + the fact that it's a soft requirement that it's easily missed).
• enqueue the "global styles" in a different stylesheet and ask 3rd parties to do the same (they have to detect support the same way we do).

Both options have cons/pros. I think I slightly prefer the second one for clarity (authors don't need to know whether a style should be scoped with wp-gs, etc).

[oandregal]

enqueue the "global styles" in a different stylesheet and ask 3rd parties to do the same (they have to detect support the same way we do).

Also worth noting that this is only for specific bits, not everything. If a property was already included in the CSS, fallbacks can be used. The issue is for those properties that weren't previously included and we want to add to expose the CSS vars for the style system. This may be a minority of things and there may be situations where it's ok to just have them in the block stylesheet. It needs to be evaluated case-by-case.

[oandregal]

We're taking a different direction so I'm closing this.