TwentyNineteen: fix default presets in 5.9

[oandregal]

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

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.

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.

• Use the TwentyNineteen theme.
• Create a post that contains 5 paragraphs with the following content:
  • Small (19.5)
  • Normal (22)
  • Default
  • Large (36.5)
  • Huge (49.5)
• To each paragraph apply the font size that corresponds to its content: apply small to the 1st paragraph, normal to the 2nd, nothing to the third, large to the 4th, and huge to the 5th.

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

TODO

• There's an issue in compiling the SASS variable into values when it's used by a CSS Custom Property. Solved this issue by using the raw values directly. The issue is bigger than this PR: the existing config/utils to process CSS don't compile CSS Custom Properties. I've tried to update it to do it gets complicated quickly and would require wide testing.
• Figure out why Tested up to: 5.9 is removed when running npm run build. Fixed at 54d062c

[oandregal]

Ported the font sizes here. This was a bug on its own that this PR also fixes: the theme needs to enqueue the font size classes, which TwentyNineteen didn't do, forcing Gutenberg to add inline styles to the blocks to make it work.

[oandregal]

In 2a04054#diff-43320bbf5db05687019f349593821f99e7827c259d03e05867b4cd3f2a81f74d this live was added to the CSS file but should have been added here instead (and build to CSS after).

[oandregal]

The current setup doesn't allow for using --wp--preset--font-size--small: $font__size-sm. I've tried to upgrade to a newer setup but ran into a few issues and couldn't. This is the raw value after compiling SCSS into CSS.

[ockham]

Testing with 5.9 (by building this branch, and running it according to the instructions).

Font size	Editor	Frontend
Small (19.5)	19.5	19.5
Normal (22)	22	24.75
Default	22	22
Large (36.5)	37.125	37.125
Huge (49.5)	49.5	49.5

I.e. I see slight discrepancies for Large in both the editor and the frontend, and for Normal on the frontend.

[oandregal]

Those discrepancies for normal and large are a result of how the theme is built: using px in some places and ems in other places and were present before this PR. That's an ok result.

[ockham]

Testing with 5.7, by doing the following:

On this branch:

git diff $(git merge-base trunk $(git rev-parse --abbrev-ref HEAD)) > ../default-presets-twentynineteen.patch

Then switch to the 5.7 branch, apply the patch, and rebuild as follows:

git checkout 5.7
patch -p1 < ../default-presets-twentynineteen.patch.patch
npm i
npm run build:dev

Results:

Font size	Editor	Frontend
Small (19.5)	19.5	19.5
Normal (22)	22	24.75
Default	22	22
Large (36.5)	36.5	37.125
Huge (49.5)	49.5	49.5

I.e. same small discrepancies on the frontend as for WP 5.9, but accurate values in the editor.

[ockham]

Giving tentative approval 👍 The PR seems to behave as it's supposed to as specified by the PR desc, except for minor discrepancies which seem to be okay.

The code seems to make sense to me, but I'm by no means an expert on Global Styles. It'd be great if someone who knows GS better could also give this a look 😅

[oandregal]

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