Twenty Twenty Blocks: Try adding new Global Styles Rules

[kjellr]

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]

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?

[kjellr]

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

[kjellr]

This should be take care of in fe1e88e.

[kjellr]

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

[kjellr]

Ok, should be ok as of a442c52.

[kjellr]

@jffng This should be ready for another review. 👍

[jffng]

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

[kjellr]

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]

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

Editor

Front-end

[kjellr]

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

1. 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.
2. I had to rewrite some of the styles, because they seemed to be wrong.
3. 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]

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

[kjellr]

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]

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

[kjellr]

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.