Style engine: allow CSS var output for fontSize and fontFamily and update docs

[ramonjd]

What?

This PR:

1. Rearranges style engine files load order so that that style engine main files load after the utils classes have loaded
2. Adds CSS var parsing capability to fontSize and fontFamily.
3. Updates docs in relation to CSS var names

Why?

1. To prevent missing class errors in PHP during development
2. The JS package does this, theme.json has these presets, why not the Style Engine? I think it wasn't a deliberate omission.
3. Make them a bit clearer, especially in relation to 'convert_vars_to_classnames' => true,

Testing Instructions

1. Check out this branch
2. Delete the /build folder in your local dev environment
3. Rebuild the project npm run dev

There should be no build warnings and the site should work as per usual.

Ensure that there are no regressions in block supports styles. Here is some test code:

Example block code

<!-- wp:group {"style":{"border":{"radius":"20px","top":{"width":"14px"},"right":{"color":"#ec0303","width":"46px"},"bottom":{"color":"#d8613c","width":"14px"},"left":{"color":"#636363","width":"46px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-radius:20px;border-top-width:14px;border-right-color:#ec0303;border-right-width:46px;border-bottom-color:#d8613c;border-bottom-width:14px;border-left-color:#636363;border-left-width:46px"><!-- wp:heading {"style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-5"}}},"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase"},"spacing":{"padding":{"bottom":"var:preset|spacing|40"}}},"textColor":"accent-5","fontSize":"large"} -->
<h2 class="wp-block-heading has-accent-5-color has-text-color has-link-color has-large-font-size" style="padding-bottom:var(--wp--preset--spacing--40);font-style:normal;font-weight:500;text-transform:uppercase">Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:list {"style":{"color":{"background":"#e6e3e3"},"spacing":{"margin":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<ul style="background-color:#e6e3e3;margin-right:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)" class="has-background"><!-- wp:list-item -->
<li>List</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>List</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

Frontend output

<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained" style="border-radius:20px;border-top-width:14px;border-right-color:#ec0303;border-right-width:46px;border-bottom-color:#d8613c;border-bottom-width:14px;border-left-color:#636363;border-left-width:46px">
<h2 class="wp-block-heading has-accent-5-color has-text-color has-link-color has-large-font-size wp-elements-0ea8f7f38d9a71fcf3ae556b6ed1adb1" style="padding-bottom:var(--wp--preset--spacing--40);font-style:normal;font-weight:500;text-transform:uppercase">Heading</h2>



<p class="has-small-font-size">Paragraph</p>



<ul style="background-color:#e6e3e3;margin-right:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)" class="has-background">
<li>List</li>



<li>List</li>



<li>List</li>
</ul>
</div>

Run the tests!
npm run test:unit:php:base -- --group style-engine

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/load.php
❔ phpunit/style-engine/style-engine-test.php

[andrewserong]

Thanks for neatening this up! As I understand it, this change doesn't affect any existing block markup, as the Typography support currently uses convert_vars_to_classnames with a value of true, so we never see the inline styles for var-based styles.

With this PR applied, and by manually changing that line to false, then the inline styles will be correctly output for server-rendered blocks:

(The rules themselves get overridden by their classname-based counterparts, since they use !important rules, but that's also to be expected, and is more to do with what the consumer does with what gets returned by the style engine rather than an issue with the logic here).

All looks good to me! And I didn't run into any regressions with existing block markup.

Just left a few nits in the docs, apologies for the multiple ones about tabs vs spaces 😄

LGTM! ✨

[ramonjd]

With this PR applied, and by manually changing that line to false, then the inline styles will be correctly output for server-rendered blocks:

Yes, I should have added that test step in the description. Thank you for being so thorough! I'll fix the formatting and 🚢