Editor: add CSS var parsing for fontSize and fontFamily.

Adds capability to parse CSS custom properties for fontSize and fontFamily in `WP_Style_Engine`.

Props ramonopoly.
Fixes #59982.


git-svn-id: https://develop.svn.wordpress.org/trunk@57253 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
2024-01-09 02:43:48 +00:00
parent fa421cac11
commit 2d764b4101
2 changed files with 17 additions and 4 deletions

View File

@@ -215,6 +215,9 @@ final class WP_Style_Engine {
'default' => 'font-size',
),
'path' => array( 'typography', 'fontSize' ),
'css_vars' => array(
'font-size' => '--wp--preset--font-size--$slug',
),
'classnames' => array(
'has-$slug-font-size' => 'font-size',
),
@@ -223,6 +226,9 @@ final class WP_Style_Engine {
'property_keys' => array(
'default' => 'font-family',
),
'css_vars' => array(
'font-family' => '--wp--preset--font-family--$slug',
),
'path' => array( 'typography', 'fontFamily' ),
'classnames' => array(
'has-$slug-font-family' => 'font-family',

View File

@@ -252,19 +252,26 @@ class Tests_wpStyleEngine extends WP_UnitTestCase {
'elements_with_css_var_value' => array(
'block_styles' => array(
'color' => array(
'color' => array(
'text' => 'var:preset|color|my-little-pony',
),
'typography' => array(
'fontSize' => 'var:preset|font-size|cabbage-patch',
'fontFamily' => 'var:preset|font-family|transformers',
),
),
'options' => array(
'selector' => '.wp-selector',
),
'expected_output' => array(
'css' => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
'css' => '.wp-selector{color:var(--wp--preset--color--my-little-pony);font-size:var(--wp--preset--font-size--cabbage-patch);font-family:var(--wp--preset--font-family--transformers);}',
'declarations' => array(
'color' => 'var(--wp--preset--color--my-little-pony)',
'color' => 'var(--wp--preset--color--my-little-pony)',
'font-size' => 'var(--wp--preset--font-size--cabbage-patch)',
'font-family' => 'var(--wp--preset--font-family--transformers)',
),
'classnames' => 'has-text-color has-my-little-pony-color',
'classnames' => 'has-text-color has-my-little-pony-color has-cabbage-patch-font-size has-transformers-font-family',
),
),