From 2d764b410183b3230f8b8f94cbf3ed9b7983c5ab Mon Sep 17 00:00:00 2001
From: Isabel Brison <isabel_brison@git.wordpress.org>
Date: Tue, 9 Jan 2024 02:43:48 +0000
Subject: [PATCH] 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
---
 .../style-engine/class-wp-style-engine.php        |  6 ++++++
 tests/phpunit/tests/style-engine/styleEngine.php  | 15 +++++++++++----
 2 files changed, 17 insertions(+), 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
index 121bac2d92..12a6ea8441 100644
--- 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
index b1a01563c2..e4551eccf7 100644
--- a/tests/phpunit/tests/style-engine/styleEngine.php
+++ b/tests/phpunit/tests/style-engine/styleEngine.php
@@ -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',
 				),
 			),