[Twenty Twenty Blocks] Try adding early Global Styles Support

[kjellr]

This PR starts to add global styles support to the Twenty Twenty Blocks theme. This is still super-early, so it's pretty limited in its scope right now. It just does the following:

• Adds an experimental-theme.json file, with the 3 native Gutenberg variables so far.
• Swaps out those color values for CSS variables throughout the theme.

The theme shouldn't look any different on the front end (unless you're using IE at least), but you'll notice the CSS variables when you check the inspector:

Eventually, these colors should show up as editable in the full-site editing panel.

[jffng]

👏 Which version or branch of GB is this PR developed against?

[kjellr]

Which version or branch of GB is this PR developed against?

Good question! I should've included that above. This should work with Gutenberg 7.6 and/or Gutenberg's master branch.

I pushed some additional changes that make this mostly compatible with WordPress/gutenberg#20530 as well though. If you run it using that branch, you'll be able to edit these variables in the beta Site Editor. This is a little crude and experimental, but... this is an experimental repo. 😄

If you'd like to test that out, here are some rough instructions:

• Install & activate this branch of the Twenty Twenty Blocks theme.
• Build & activate Global Styles: Try style system at site edit gutenberg#20530
• Enable the FSE Experiment under Gutenberg > Experiments.
• Go to Gutenberg > Site Editor (beta) and play with the Global Styles controls in the sidebar.
• If you'd like, save the changes to wp_global_styles via the "Update design" button in the editor.
• Go to the front and see that your changes are applied. It should be roughly correct.

Here's a quick GIF of that in action:

[jffng]

I gave this a spin against Gutenberg master as of https://github.com/WordPress/gutenberg/tree/f0e36362104e9be9e655ce8cfa9e5c6b45913602.

A couple notes:

• Using the Site Editor (beta) to adjust global styles only works if you've checked out WordPress/gutenberg#20530
• The front-end does not render the changes you've saved via the Site Editor. But the front end does consume the initial values set by experimental-theme.json:

Are we comfortable merging this with those two caveats?

[kjellr]

Thanks for testing! Let's hold off for now. Once something like WordPress/gutenberg#20530 lands, I think we can merge this in. In the meantime, it makes sense to leave it as a one-off experiment.

[oandregal]

As per the current changes at WordPress/gutenberg#20530 primary should be removed.

[oandregal]

As per feedback, the variable generation mechanism is not going to make it into WordPress/gutenberg#20530 so I have to change the typography variables to something like:

	"typography": {
		"font-base": 16,
		"font-scale": 1.2,
		"font-weight-base": 400,
		"font-weight-heading": 400,
		"line-height-base": 1.5,
		"line-height-heading": 1.5
	}

[oandregal]

Note how we declare base and heading alternatives for weight & line-height.

I reckon this is in flux and so it takes a bit of following up to keep up with the changes. I'm happy to submit these as they happen in the Gutenberg PR if that's helpful.

[oandregal]

Note for font-sizes: the current UI proposal by @karmatosed WordPress/gutenberg#21030 only exposes base and scale in the UI.

Hopefully, in a subsequent iteration, we're able to use calc or something along those lines in the theme.json itself. However, for this PR we're just pushing computation to CSS-land, based on font-base and font-scale values. See example.

[oandregal]

I'm pushing at https://github.com/nosolosw/theme-experiments/tree/add/twentytwenty-globalstyles what I have to make this work with the latest version of the Gutenberg PR.

[kjellr]

This no longer works, so I'm going to close for now. I'll try to spin up a new PR that follows the new documentation.