TwentyTwentyOne: set default font sizes for WordPress 5.9

[oandregal]

Trac ticket https://core.trac.wordpress.org/ticket/54782
Related #2154 #2140

WordPress 5.9 uses CSS Custom Properties to define the presets, and themes without a theme.json need to use them to set their value. However, the default themes need to work with older versions of WordPress that don't have the CSS Custom Properties, therefore we can't remove the existing regular CSS properties.

How to test

Test this both in WordPress 5.9 and WordPress 5.7. In 5.9 the CSS Custom Properties are present for all themes and in 5.7 are not. This covers all the cases.

Font sizes

• Use the TwentyTwentyOne theme.
• Create a post that contains paragraphs with the following content:
  • Extra Small (16)
  • Small (18)
  • Normal (20)
  • Large (24)
  • Extra Large (40)
  • Huge (96)
  • Gigantic (144)
• Use the font size control of each paragraph to apply the font size that corresponds to its content: apply "extra small" to the 1st paragraph, etc.

The expected result is that the font size for each paragraph has the assigned value, both in the editor and front-end.

Colors

• Use the TwentyTwentyOne theme.
• Create a post.
• Create the following paragraphs:
  • One with the background color black.
  • One with the background color white.
  • One with the text color black.
  • One with the text color white.
• Apply to each of them the color corresponding with its text from the theme color palette.
• Publish the post.
• Via the browser devtools make sure that the colors are proper in both the editor & front.

[jorgefilipecosta]

I wonder if now that we have variables --wp--preset--font-size--small if it still makes sense to have --global--font-size-sm? Maybe we could remove all --global--font-size variables and use the presets.

[oandregal]

I wanted to scope down this to the minimal patch that works. Didn't want to rebuild how the theme is built to avoid falling into deep holes.

[jorgefilipecosta]

It seems strange to be setting preset color black to --local--color-background. It seems more natural for a background to reference a preset than a preset referencing a background. Couldn't we set the presents globally all the in the same place:

:root {
--wp--preset--color--black: #cccc, 
--wp--preset--color--white: #cccc, 
....
}

And then never set additional presets?

[oandregal]

I didn't have the time to investigate how this theme is built deeply, so I'm not sure. I wanted this PR's scope to remain small, focused on fixing the issue.

[jorgefilipecosta]

This changes seem to be working well on my tests 👍

[oandregal]

I'm going to close this in favor of #2233