Changeset 57253

Timestamp:

01/09/2024 02:43:48 AM (16 months ago)

Author:

isabel_brison

Message:

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.

Location:

trunk

Files:

• src/wp-includes/style-engine/class-wp-style-engine.php (modified) (2 diffs)
• tests/phpunit/tests/style-engine/styleEngine.php (modified) (2 diffs)

trunk/src/wp-includes/style-engine/class-wp-style-engine.php

@@ -216 +216 @@
                 ),
                 'path'          => array( 'typography', 'fontSize' ),
+                'css_vars'      => array(
+                    'font-size' => '--wp--preset--font-size--$slug',
+                ),
                 'classnames'    => array(
                     'has-$slug-font-size' => 'font-size',
@@ -223 +226 @@
                 'property_keys' => array(
                     'default' => 'font-family',
+                ),
+                'css_vars'      => array(
+                    'font-family' => '--wp--preset--font-family--$slug',
                 ),
                 'path'          => array( 'typography', 'fontFamily' ),

trunk/tests/phpunit/tests/style-engine/styleEngine.php

@@ -253 +253 @@
             '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',
                     ),
                 ),
@@ -261 +265 @@
                 ),
                 'expected_output' => array(
-                    'css'          => '.wp-selector{color:var(--wp--preset--color--my-little-pony);}',
-                    'declarations' => array(
-                        'color' => 'var(--wp--preset--color--my-little-pony)',
-                    ),
-                    'classnames'   => 'has-text-color has-my-little-pony-color',
+                    '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)',
+                        '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 has-cabbage-patch-font-size has-transformers-font-family',
                 ),
             ),