Twenty Twenty Blocks: Try adding new Global Styles Rules #44

kjellr · 2020-06-23T13:56:32Z

Takes a quick pass at adding Global Styles rules to Twenty Twenty Blocks, as per the new documentation. Essentially an updated version of #26.

jffng · 2020-06-25T14:20:37Z

twentytwenty-blocks/twentytwenty-styles/editor-style-block.css

@@ -249,29 +254,30 @@ Inter variable font. Usage:
 .editor-styles-wrapper .wp-block h6 {
 	font-feature-settings: "lnum";
 	font-variant-numeric: lining-nums;
-	font-weight: 700;
+	font-weight: var(--wp--typography--font-weight-heading);


Have the --wp--typography-- variables gone away? I don't see them being applied anymore when I activate this theme. Do they need to be converted to presets in the theme config?

Ah, whoops. That's a leftover from the last attempt at this. It needs to be converted to use the new system.

This should be take care of in fe1e88e.

Actually wait — I need to get it fixed in the editor styles too. 👍

Ok, should be ok as of a442c52.

twentytwenty-blocks/functions.php

kjellr · 2020-07-14T13:54:10Z

@jffng This should be ready for another review. 👍

twentytwenty-blocks/twentytwenty-styles/style.css

jffng · 2020-07-14T15:35:18Z

twentytwenty-blocks/twentytwenty-styles/editor-style-block.css

-	font-size: 36px;
-	font-weight: 800;
+.editor-styles-wrapper h1.wp-block {
+	font-size: 84px;


Just wondering why we're using px values here when rem values are used in the frontend.

In the frontend, Twenty Twenty modifies the value of 1 rem to be 10px instead of the usual 16px. Since that doesn't happen in the editor (and can't really, without messing with a lot of other font sizes), we're stuck with pixels for the moment.

These should really be variables, but I didn't switch to using variables for these sizes because the heading font sizes don't match up with the small, normal, large, + huge sizes. I figured we'd keep things simple for now, and can open up a separate PR improve this.

jffng

I left one comment about applying colors to buttons. Other than that, this works in my testing.

jffng · 2020-07-21T13:57:54Z

twentytwenty-blocks/twentytwenty-styles/editor-style-block.css

-	background-color: #000;
-	color: #f5efe0;
+	background-color: var(--wp--preset--color--text);
+	color: var(--wp--preset--color--primary);


There is some strangeness when you apply a background color and text color to buttons with the "Fill" style:

Editor

Front-end

I had to do a few weird things to get this working:

Rename the "Text" color to "Foreground". Otherwise, the class to indicate that this color was being used was has-text-color. This also happens to be the generic classname that's added to blocks when they have any text color assigned. That caused some conflicting styles.

I had to rewrite some of the styles, because they seemed to be wrong.

I had to add some extra specificity to get the custom color rules working for buttons.

It's possible I chopped out a little more code than was necessary here, but it generally seemed to work for me.

jffng · 2020-07-21T14:19:06Z

twentytwenty-blocks/twentytwenty-styles/style.css

@@ -2736,21 +2736,21 @@ h2.entry-title {
 /* CUSTOM COLORS */

 :root .has-accent-color {


Is the :root selector still needed? I noticed that in #45 it wasn't used and still worked.

Yeah, these don't get used at all currently — they're overridden by rules assigned to .editor-styles-wrapper instead.

jffng

This works and I think does a good job demonstrating where we're at with the current Global Styles mechanism. Left one comment that's not super relevant but had me head-scratching nonetheless.

jffng · 2020-07-21T18:09:25Z

twentytwenty-blocks/twentytwenty-styles/editor-style-block.css

@@ -167,48 +167,34 @@ Inter variable font. Usage:

 /* CUSTOM COLORS */

-:root .has-accent-color {
+.editor-styles-wrapper .has-primary-color,


Why do we need to target .editor-styles-wrapper? I though that enqueueing via add_editor_style was supposed to handle this for us?

Ah, that's a good question. The non-blocks version of twenty twenty enqueues the editor styles using the old hook, not via add_editor_style. Since we don't do that in the block-based theme here, we should probably strip all these out of the editor stylesheet. They're not necessary anymore.

I'll leave that for a followup PR though.

kjellr and others added 8 commits February 27, 2020 14:41

Add experimental-theme.json

05d54fa

Update color values to match experimental-theme.json

ab2163e

Add additional styles

257ffbd

Load block styles into FSE

9e957e5

Replace values with new CSS variables.

9f0b942

Remove computed variables

c02ee20

Override h1 editor font size

e375cc6

Update experimental-theme.json.

a261eec

kjellr requested a review from jffng June 23, 2020 13:56

kjellr self-assigned this Jun 23, 2020

kjellr added the enhancement New feature or request label Jun 23, 2020

kjellr and others added 2 commits June 23, 2020 09:57

Merge branch 'master' into add/twenty-twenty-global-styles

523f12d

Make sure styles are loaded into the full-site editor.

a15c1b3

jffng reviewed Jun 25, 2020

View reviewed changes

kjellr added 5 commits July 14, 2020 09:06

Switch to using the Query Loop block in index.html

ab5cdc4

Fix typography variables.

fe1e88e

Remove unnecessary styles.

5cd00a6

Fix alignment of entry content.

69b03a1

Tidy up editor styles.

a442c52

jffng reviewed Jul 14, 2020

View reviewed changes

Remove unused variables.

cfeb4dc

jffng reviewed Jul 21, 2020

View reviewed changes

kjellr added 2 commits July 21, 2020 13:17

Rename text color to foreground color.

79ae323

Rewrite custom color styles so they work for buttons.

5fce20a

jffng approved these changes Jul 21, 2020

View reviewed changes

kjellr merged commit e709b2e into master Jul 21, 2020

kjellr deleted the add/twenty-twenty-global-styles branch July 21, 2020 18:47

kjellr mentioned this pull request Jul 21, 2020

Twenty Twenty Blocks: Remove entry-styles-wrapper classes from editor-style-block.css #49

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

kjellr commented Jun 23, 2020

jffng Jun 25, 2020

kjellr Jun 25, 2020

kjellr Jul 14, 2020

kjellr Jul 14, 2020

kjellr Jul 14, 2020

kjellr commented Jul 14, 2020

jffng Jul 14, 2020

kjellr Jul 14, 2020 •

edited

Loading

jffng left a comment

jffng Jul 21, 2020

kjellr Jul 21, 2020

jffng Jul 21, 2020

kjellr Jul 21, 2020

jffng left a comment

jffng Jul 21, 2020

kjellr Jul 21, 2020

		@@ -2736,21 +2736,21 @@ h2.entry-title {
		/* CUSTOM COLORS */

		:root .has-accent-color {

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Twenty Twenty Blocks: Try adding new Global Styles Rules #44

Conversation

kjellr commented Jun 23, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr commented Jul 14, 2020

Choose a reason for hiding this comment

kjellr Jul 14, 2020 • edited Loading

Choose a reason for hiding this comment

jffng left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jffng left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kjellr Jul 14, 2020 •

edited

Loading