Fix: Core Backport: Responsive styles: When enabled and a font-size is setting, the corresponding CSS variable remains undefined

src/wp-includes/block-supports/states.php

@@ -35,8 +35,21 @@ function wp_normalize_state_preset_vars( $value ) {
 		return $value;
 	}
 
-	$unwrapped_name = str_replace( '|', '--', substr( $value, strlen( 'var:' ) ) );
-	return "var(--wp--$unwrapped_name)";
+	$parts = explode( '|', substr( $value, strlen( 'var:' ) ) );
+
+	/*
+	 * The slug is kebab-cased when the preset's custom property is generated,
+	 * so a reference has to be converted the same way or it points at a
+	 * property that does not exist (`--wp--preset--font-size--3xl` for a preset
+	 * generated as `--wp--preset--font-size--3-xl`). Mirrors
+	 * `WP_Theme_JSON_Gutenberg::convert_custom_properties()` and the JS style
+	 * engine's `getCSSValueFromRawStyle()`.
+	 */
+	if ( 3 === count( $parts ) && 'preset' === $parts[0] ) {
+		$parts[2] = _wp_to_kebab_case( $parts[2] );
+	}
+
+	return 'var(--wp--' . implode( '--', $parts ) . ')';
 }
 
 /**

tests/phpunit/tests/block-supports/states.php

@@ -377,17 +377,25 @@ public function test_build_state_selector_splits_selector_lists_without_splittin
 	public function test_converts_state_preset_vars_to_css_vars() {
 		$actual = wp_normalize_state_preset_vars(
 			array(
-				'border' => array(
+				'border'     => array(
 					'color' => 'var:preset|color|accent-1',
 				),
+				'typography' => array(
+					'fontSize'   => 'var:preset|font-size|3xl',
+					'fontFamily' => 'var:preset|font-family|heavenlyBlue',
+				),
 			)
 		);
 
 		$this->assertSame(
 			array(
-				'border' => array(
+				'border'     => array(
 					'color' => 'var(--wp--preset--color--accent-1)',
 				),
+				'typography' => array(
+					'fontSize'   => 'var(--wp--preset--font-size--3-xl)',
+					'fontFamily' => 'var(--wp--preset--font-family--heavenly-blue)',
+				),
 			),
 			$actual
 		);