Syncing changes in WordPress/gutenberg#56528

Adds CSS var parsing capability to fontSize and fontFamily
ramonjd · Nov 28, 2023 · db190b6 · db190b6
1 parent 5f2f5f6
commit db190b6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/src/wp-includes/style-engine/class-wp-style-engine.php b/src/wp-includes/style-engine/class-wp-style-engine.php
@@ -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',

diff --git a/tests/phpunit/tests/style-engine/styleEngine.php b/tests/phpunit/tests/style-engine/styleEngine.php
@@ -252,19 +252,26 @@ public function data_wp_style_engine_get_styles() {
 
 			'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',
 				),
 			),