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

[Twenty Twenty Blocks] Try adding early Global Styles Support #26

Closed
wants to merge 7 commits into from

Conversation

kjellr
Copy link
Collaborator

@kjellr kjellr commented Feb 27, 2020

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:

Screen Shot 2020-02-27 at 2 47 06 PM

Screen Shot 2020-02-27 at 2 46 55 PM

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

@kjellr kjellr added the enhancement label Feb 27, 2020
@kjellr kjellr requested a review from jffng Feb 27, 2020
@kjellr kjellr self-assigned this Feb 27, 2020
@jffng
Copy link
Collaborator

jffng commented Feb 27, 2020

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

@kjellr
Copy link
Collaborator Author

kjellr commented Feb 28, 2020

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:

global-styles

Copy link
Collaborator

@jffng jffng left a comment

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:

Screen Shot 2020-03-20 at 12 10 05 PM

Are we comfortable merging this with those two caveats?

@kjellr
Copy link
Collaborator Author

kjellr commented Mar 20, 2020

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.

@@ -0,0 +1,13 @@
{
"color": {
"primary": "#cd2653",
Copy link
Member

@oandregal oandregal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

"background": "#f5efe0",
"text": "#000"
},
"typography": {
Copy link
Member

@oandregal oandregal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
	}

Copy link
Member

@oandregal oandregal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@oandregal oandregal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

@oandregal oandregal Mar 30, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator Author

kjellr commented Jun 23, 2020

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.

@kjellr kjellr closed this Jun 23, 2020
@kjellr kjellr deleted the add/twentytwenty-globalstyles branch Jun 23, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants