Changeset 57253

Timestamp:

01/09/2024 02:43:48 AM (3 years 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',
                                 ),
                         ),