Style engine: add CSS var parsing capability to fontSize and fontFamily

[ramonjd]

What

Syncs changes from WordPress/gutenberg#56528 by adding CSS var parsing capability to fontSize and fontFamily.

Testing

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:php -- --filter Tests_wpStyleEngine

Trac ticket: https://core.trac.wordpress.org/ticket/59982

---

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

[tellthemachines]

LGTM and working as expected! Tested with provided markup and also changing font sizes on miscellaneous blocks. Front end looks the same on trunk and this branch.

[tellthemachines]

Committed in r57253.