From f704a9e62b15796a4cca68e85941fad816bd7fd7 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 7 Sep 2022 14:46:32 +1000
Subject: [PATCH 01/17] Changes from: -
 https://github.com/WordPress/gutenberg/pull/39529 -
 https://github.com/WordPress/gutenberg/pull/40332

---
 src/wp-includes/block-supports/typography.php | 353 ++++++++++++++----
 src/wp-includes/class-wp-theme-json.php       |   2 +-
 src/wp-includes/deprecated.php                |  37 ++
 .../tests/block-supports/typography.php       | 112 +++++-
 4 files changed, 419 insertions(+), 85 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index a19aba7c57d95..5f4e55bfe65aa 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -65,6 +65,7 @@ function wp_register_typography_support( $block_type ) {
  * the front-end.
  *
  * @since 5.6.0
+ * @since 6.1.0 Using the style engine to generate CSS and classnames.
  * @access private
  *
  * @param WP_Block_Type $block_type       Block type.
@@ -85,10 +86,6 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 		return array();
 	}
 
-	$attributes = array();
-	$classes    = array();
-	$styles     = array();
-
 	$has_font_family_support     = _wp_array_get( $typography_supports, array( '__experimentalFontFamily' ), false );
 	$has_font_size_support       = _wp_array_get( $typography_supports, array( 'fontSize' ), false );
 	$has_font_style_support      = _wp_array_get( $typography_supports, array( '__experimentalFontStyle' ), false );
@@ -98,119 +95,309 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 	$has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
 	$has_text_transform_support  = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
 
-	if ( $has_font_size_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' ) ) {
-		$has_named_font_size  = array_key_exists( 'fontSize', $block_attributes );
-		$has_custom_font_size = isset( $block_attributes['style']['typography']['fontSize'] );
+	// Whether to skip individual block support features.
+	$should_skip_font_size       = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontSize' );
+	$should_skip_font_family     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' );
+	$should_skip_font_style      = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' );
+	$should_skip_font_weight     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' );
+	$should_skip_line_height     = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' );
+	$should_skip_text_decoration = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' );
+	$should_skip_text_transform  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' );
+	$should_skip_letter_spacing  = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' );
 
-		if ( $has_named_font_size ) {
-			$classes[] = sprintf( 'has-%s-font-size', _wp_to_kebab_case( $block_attributes['fontSize'] ) );
-		} elseif ( $has_custom_font_size ) {
-			$styles[] = sprintf( 'font-size: %s;', $block_attributes['style']['typography']['fontSize'] );
-		}
+	$typography_block_styles = array();
+	if ( $has_font_size_support && ! $should_skip_font_size ) {
+		$preset_font_size                    = array_key_exists( 'fontSize', $block_attributes ) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
+		$custom_font_size                    = isset( $block_attributes['style']['typography']['fontSize'] ) ? $block_attributes['style']['typography']['fontSize'] : null;
+		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
 	}
 
-	if ( $has_font_family_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontFamily' ) ) {
-		$has_named_font_family  = array_key_exists( 'fontFamily', $block_attributes );
-		$has_custom_font_family = isset( $block_attributes['style']['typography']['fontFamily'] );
-
-		if ( $has_named_font_family ) {
-			$classes[] = sprintf( 'has-%s-font-family', _wp_to_kebab_case( $block_attributes['fontFamily'] ) );
-		} elseif ( $has_custom_font_family ) {
-			// Before using classes, the value was serialized as a CSS Custom Property.
-			// We don't need this code path when it lands in core.
-			$font_family_custom = $block_attributes['style']['typography']['fontFamily'];
-			if ( strpos( $font_family_custom, 'var:preset|font-family' ) !== false ) {
-				$index_to_splice    = strrpos( $font_family_custom, '|' ) + 1;
-				$font_family_slug   = _wp_to_kebab_case( substr( $font_family_custom, $index_to_splice ) );
-				$font_family_custom = sprintf( 'var(--wp--preset--font-family--%s)', $font_family_slug );
-			}
-			$styles[] = sprintf( 'font-family: %s;', $font_family_custom );
-		}
+	if ( $has_font_family_support && ! $should_skip_font_family ) {
+		$preset_font_family                    = array_key_exists( 'fontFamily', $block_attributes ) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
+		$custom_font_family                    = isset( $block_attributes['style']['typography']['fontFamily'] ) ? wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' ) : null;
+		$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
 	}
 
-	if ( $has_font_style_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontStyle' ) ) {
-		$font_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontStyle', 'font-style' );
-		if ( $font_style ) {
-			$styles[] = $font_style;
-		}
+	if ( $has_font_style_support && ! $should_skip_font_style && isset( $block_attributes['style']['typography']['fontStyle'] ) ) {
+		$typography_block_styles['fontStyle'] =
+			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontStyle'], 'font-style' );
 	}
 
-	if ( $has_font_weight_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'fontWeight' ) ) {
-		$font_weight = wp_typography_get_css_variable_inline_style( $block_attributes, 'fontWeight', 'font-weight' );
-		if ( $font_weight ) {
-			$styles[] = $font_weight;
-		}
+	if ( $has_font_weight_support && ! $should_skip_font_weight && isset( $block_attributes['style']['typography']['fontWeight'] ) ) {
+		$typography_block_styles['fontWeight'] =
+			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontWeight'], 'font-weight' );
 	}
 
-	if ( $has_line_height_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'lineHeight' ) ) {
-		$has_line_height = isset( $block_attributes['style']['typography']['lineHeight'] );
-		if ( $has_line_height ) {
-			$styles[] = sprintf( 'line-height: %s;', $block_attributes['style']['typography']['lineHeight'] );
-		}
+	if ( $has_line_height_support && ! $should_skip_line_height ) {
+			$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ), null );
 	}
 
-	if ( $has_text_decoration_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textDecoration' ) ) {
-		$text_decoration_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textDecoration', 'text-decoration' );
-		if ( $text_decoration_style ) {
-			$styles[] = $text_decoration_style;
-		}
+	if ( $has_text_decoration_support && ! $should_skip_text_decoration && isset( $block_attributes['style']['typography']['textDecoration'] ) ) {
+		$typography_block_styles['textDecoration'] =
+			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textDecoration'], 'text-decoration' );
 	}
 
-	if ( $has_text_transform_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textTransform' ) ) {
-		$text_transform_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'textTransform', 'text-transform' );
-		if ( $text_transform_style ) {
-			$styles[] = $text_transform_style;
-		}
+	if ( $has_text_transform_support && ! $should_skip_text_transform && isset( $block_attributes['style']['typography']['textTransform'] ) ) {
+		$typography_block_styles['textTransform'] =
+			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textTransform'], 'text-transform' );
 	}
 
-	if ( $has_letter_spacing_support && ! wp_should_skip_block_supports_serialization( $block_type, 'typography', 'letterSpacing' ) ) {
-		$letter_spacing_style = wp_typography_get_css_variable_inline_style( $block_attributes, 'letterSpacing', 'letter-spacing' );
-		if ( $letter_spacing_style ) {
-			$styles[] = $letter_spacing_style;
-		}
+	if ( $has_letter_spacing_support && ! $should_skip_letter_spacing && isset( $block_attributes['style']['typography']['letterSpacing'] ) ) {
+		$typography_block_styles['letterSpacing'] =
+			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['letterSpacing'], 'letter-spacing' );
 	}
 
-	if ( ! empty( $classes ) ) {
-		$attributes['class'] = implode( ' ', $classes );
+	$attributes = array();
+	$styles     = wp_style_engine_get_styles(
+		array( 'typography' => $typography_block_styles ),
+		array( 'convert_vars_to_classnames' => true )
+	);
+
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
 	}
-	if ( ! empty( $styles ) ) {
-		$attributes['style'] = implode( ' ', $styles );
+
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
 	}
 
 	return $attributes;
 }
 
 /**
- * Generates an inline style for a typography feature e.g. text decoration,
+ * Note: this method is for backwards compatibility.
+ * It is necessary to parse older blocks whose typography styles contain presets. See: WordPress/gutenberg#27555.
+ * It mostly replaces the deprecated `wp_typography_get_css_variable_inline_style()`,
+ * but skips compiling a CSS declaration as the style engine takes over this role.
+ *
+ * Generates an inline style value for a typography feature e.g. text decoration,
  * text transform, and font style.
  *
- * @since 5.8.0
- * @access private
+ * @since 6.1.0
+ *
+ * @param string $style_value    A raw style value for a single typography feature from a block's style attribute.
+ * @param string $css_property   Slug for the CSS property the inline style sets.
  *
- * @param array  $attributes   Block's attributes.
- * @param string $feature      Key for the feature within the typography styles.
- * @param string $css_property Slug for the CSS property the inline style sets.
- * @return string CSS inline style.
+ * @return string?             A CSS inline style value.
  */
-function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
-	// Retrieve current attribute value or skip if not found.
-	$style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
-	if ( ! $style_value ) {
-		return;
-	}
-
-	// If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
-	if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
-		return sprintf( '%s:%s;', $css_property, $style_value );
+function wp_typography_get_preset_inline_style_value( $style_value, $css_property ) {
+	// If the style value is not a preset CSS variable go no further.
+	if ( empty( $style_value ) || ! str_contains( $style_value, "var:preset|{$css_property}|" ) ) {
+		return $style_value;
 	}
 
+	// For backwards compatibility.
+	// Presets were removed in WordPress/gutenberg#27555.
 	// We have a preset CSS variable as the style.
 	// Get the style value from the string and return CSS style.
 	$index_to_splice = strrpos( $style_value, '|' ) + 1;
-	$slug            = substr( $style_value, $index_to_splice );
+	$slug            = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
+
+	// Return the actual CSS inline style value e.g. `var(--wp--preset--text-decoration--underline);`.
+	return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
+}
+
+/**
+ * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ *
+ * @since 6.1.0
+ * @access private
+ *
+ * @param string $raw_value Raw size value from theme.json.
+ * @param array  $options    array(
+ *      'coerce_to'        => (string) Coerce the value to rem or px. Default `'rem'`.
+ *      'root_size_value'  => (number) Value of root font size for rem|em <-> px conversion. Default `16`.
+ *      'acceptable_units' => (array)  An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
+ *  );.
+ * @return array An array consisting of `'value'` and `'unit'` properties.
+ */
+function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
+	if ( empty( $raw_value ) ) {
+		return null;
+	}
+
+	$defaults = array(
+		'coerce_to'        => '',
+		'root_size_value'  => 16,
+		'acceptable_units' => array( 'rem', 'px', 'em' ),
+	);
+
+	$options = wp_parse_args( $options, $defaults );
+
+	$acceptable_units_group = implode( '|', $options['acceptable_units'] );
+	$pattern                = '/^(\d*\.?\d+)(' . $acceptable_units_group . '){1,1}$/';
+
+	preg_match( $pattern, $raw_value, $matches );
+
+	// We need a number value and a px or rem unit.
+	if ( ! isset( $matches[1] ) || ! isset( $matches[2] ) ) {
+		return null;
+	}
+
+	$value = $matches[1];
+	$unit  = $matches[2];
+
+	// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+	if ( 'px' === $options['coerce_to'] && ( 'em' === $unit || 'rem' === $unit ) ) {
+		$value = $value * $options['root_size_value'];
+		$unit  = $options['coerce_to'];
+	}
+
+	if ( 'px' === $unit && ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) ) {
+		$value = $value / $options['root_size_value'];
+		$unit  = $options['coerce_to'];
+	}
+
+	return array(
+		'value' => $value,
+		'unit'  => $unit,
+	);
+}
+
+/**
+ * Internal implementation of clamp() based on available min/max viewport width, and min/max font sizes.
+ *
+ * @since 6.1.0
+ * @access private
+ *
+ * @param array $args array(
+ *     'maximum_viewport_width' => (string) Maximum size up to which type will have fluidity.
+ *     'minimum_viewport_width' => (string) Minimum viewport size from which type will have fluidity.
+ *     'maximum_font_size'      => (string) Maximum font size for any clamp() calculation.
+ *     'minimum_font_size'      => (string) Minimum font size for any clamp() calculation.
+ *     'scale_factor'           => (number) A scale factor to determine how fast a font scales within boundaries.
+ * );.
+ * @return string|null A font-size value using clamp().
+ */
+function wp_get_computed_fluid_typography_value( $args = array() ) {
+	$maximum_viewport_width_raw = isset( $args['maximum_viewport_width'] ) ? $args['maximum_viewport_width'] : null;
+	$minimum_viewport_width_raw = isset( $args['minimum_viewport_width'] ) ? $args['minimum_viewport_width'] : null;
+	$maximum_font_size_raw      = isset( $args['maximum_font_size'] ) ? $args['maximum_font_size'] : null;
+	$minimum_font_size_raw      = isset( $args['minimum_font_size'] ) ? $args['minimum_font_size'] : null;
+	$scale_factor               = isset( $args['scale_factor'] ) ? $args['scale_factor'] : null;
+
+	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
+
+	// We get a 'preferred' unit to keep units consistent when calculating,
+	// otherwise the result will not be accurate.
+	$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
+
+	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	$maximum_font_size = wp_get_typography_value_and_unit(
+		$maximum_font_size_raw,
+		array(
+			'coerce_to' => $font_size_unit,
+		)
+	);
+
+	// Protect against unsupported units.
+	if ( ! $maximum_font_size || ! $minimum_font_size ) {
+		return null;
+	}
+
+	// Use rem for accessible fluid target font scaling.
+	$minimum_font_size_rem = wp_get_typography_value_and_unit(
+		$minimum_font_size_raw,
+		array(
+			'coerce_to' => 'rem',
+		)
+	);
+
+	// Viewport widths defined for fluid typography. Normalize units.
+	$maximum_viewport_width = wp_get_typography_value_and_unit(
+		$maximum_viewport_width_raw,
+		array(
+			'coerce_to' => $font_size_unit,
+		)
+	);
+	$minimum_viewport_width = wp_get_typography_value_and_unit(
+		$minimum_viewport_width_raw,
+		array(
+			'coerce_to' => $font_size_unit,
+		)
+	);
+
+	// Build CSS rule.
+	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
+	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
+	$linear_factor          = round( $linear_factor, 3 ) * $scale_factor;
+	$fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor)";
+
+	return "clamp($minimum_font_size_raw, $fluid_target_font_size, $maximum_font_size_raw)";
+}
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @since 6.1.0
+ *
+ * @param array   $preset                      fontSizes preset value as seen in theme.json.
+ * @param boolean $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @return string Font-size value.
+ */
+function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+	// Check if fluid font sizes are activated.
+	$typography_settings         = wp_get_global_settings( array( 'typography' ) );
+	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
+
+	if ( ! $should_use_fluid_typography ) {
+		return $preset['size'];
+	}
+
+	// Defaults.
+	$default_maximum_viewport_width   = '1600px';
+	$default_minimum_viewport_width   = '768px';
+	$default_minimum_font_size_factor = 0.75;
+	$default_maximum_font_size_factor = 1.5;
+	$default_scale_factor             = 1;
+
+	// Font sizes.
+	$fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null;
+
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === $fluid_font_size_settings ) {
+		return $preset['size'];
+	}
+
+	// Try to grab explicit min and max fluid font sizes.
+	$minimum_font_size_raw = isset( $fluid_font_size_settings['min'] ) ? $fluid_font_size_settings['min'] : null;
+	$maximum_font_size_raw = isset( $fluid_font_size_settings['max'] ) ? $fluid_font_size_settings['max'] : null;
+
+	// Font sizes.
+	$preferred_size = wp_get_typography_value_and_unit( $preset['size'] );
+
+	// Protect against unsupported units.
+	if ( empty( $preferred_size['unit'] ) ) {
+		return $preset['size'];
+	}
+
+	// If no fluid min or max font sizes are available, create some using min/max font size factors.
+	if ( ! $minimum_font_size_raw ) {
+		$minimum_font_size_raw = ( $preferred_size['value'] * $default_minimum_font_size_factor ) . $preferred_size['unit'];
+	}
+
+	if ( ! $maximum_font_size_raw ) {
+		$maximum_font_size_raw = ( $preferred_size['value'] * $default_maximum_font_size_factor ) . $preferred_size['unit'];
+	}
+
+	$fluid_font_size_value = wp_get_computed_fluid_typography_value(
+		array(
+			'minimum_viewport_width' => $default_minimum_viewport_width,
+			'maximum_viewport_width' => $default_maximum_viewport_width,
+			'minimum_font_size'      => $minimum_font_size_raw,
+			'maximum_font_size'      => $maximum_font_size_raw,
+			'scale_factor'           => $default_scale_factor,
+		)
+	);
+
+	if ( ! empty( $fluid_font_size_value ) ) {
+		return $fluid_font_size_value;
+	}
 
-	// Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
-	return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
+	return $preset['size'];
 }
 
 // Register the block support.
diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php
index 4e7c704cce16b..d6bd0c2875d78 100644
--- a/src/wp-includes/class-wp-theme-json.php
+++ b/src/wp-includes/class-wp-theme-json.php
@@ -150,7 +150,7 @@ class WP_Theme_JSON {
 			'path'              => array( 'typography', 'fontSizes' ),
 			'prevent_override'  => false,
 			'use_default_names' => true,
-			'value_key'         => 'size',
+			'value_func'        => 'wp_get_typography_font_size_value',
 			'css_vars'          => '--wp--preset--font-size--$slug',
 			'classes'           => array( '.has-$slug-font-size' => 'font-size' ),
 			'properties'        => array( 'font-size' ),
diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index 0a3d0f30924dc..54abc2088f0ab 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4456,3 +4456,40 @@ function _wp_multiple_block_styles( $metadata ) {
 	_deprecated_function( __FUNCTION__, '6.1.0' );
 	return $metadata;
 }
+
+/**
+ * Generates an inline style for a typography feature e.g. text decoration,
+ * text transform, and font style.
+ *
+ * @since 5.8.0
+ * @since 6.1.0 No longer used for parsing typography values. Use the style engine.
+ * @access private
+ *
+ * @deprecated since 6.1.0 The style engine parses and generates CSS vars.
+ *
+ * @param array  $attributes   Block's attributes.
+ * @param string $feature      Key for the feature within the typography styles.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string CSS inline style.
+ */
+function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
+	_deprecated_function( __FUNCTION__, '6.1.0' );
+	// Retrieve current attribute value or skip if not found.
+	$style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
+	if ( ! $style_value ) {
+		return;
+	}
+
+	// If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
+	if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
+		return sprintf( '%s:%s;', $css_property, $style_value );
+	}
+
+	// We have a preset CSS variable as the style.
+	// Get the style value from the string and return CSS style.
+	$index_to_splice = strrpos( $style_value, '|' ) + 1;
+	$slug            = substr( $style_value, $index_to_splice );
+
+	// Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
+	return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
+}
diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index 859f11c557075..ad6a05bd6a85c 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -131,7 +131,7 @@ function test_typography_with_skipped_serialization_block_supports() {
 	 * @ticket 55505
 	 */
 	function test_letter_spacing_with_individual_skipped_serialization_block_supports() {
-		$this->test_block_name = 'test/letter-spacing-with-individua-skipped-serialization-block-supports';
+		$this->test_block_name = 'test/letter-spacing-with-individual-skipped-serialization-block-supports';
 		register_block_type(
 			$this->test_block_name,
 			array(
@@ -221,4 +221,114 @@ function test_font_family_with_class() {
 		$this->assertSame( $expected, $actual );
 	}
 
+	/**
+	 * Tests generating font size values, including fluid formulae, from fontSizes preset.
+	 *
+	 * @ticket 56467
+	 *
+	 * @dataProvider data_generate_font_size_preset_fixtures
+	 */
+	function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
+		$actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
+
+		$this->assertSame( $expected_output, $actual );
+	}
+
+	/**
+	 * Data provider.
+	 *
+	 * @return array
+	 */
+	public function data_generate_font_size_preset_fixtures() {
+		return array(
+			'default_return_value'                        => array(
+				'font_size_preset'            => array(
+					'size' => '28px',
+				),
+				'should_use_fluid_typography' => false,
+				'expected_output'             => '28px',
+			),
+
+			'default_return_value_when_fluid_is_false'    => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => false,
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => '28px',
+			),
+
+			'return_fluid_value'                          => array(
+				'font_size_preset'            => array(
+					'size' => '1.75rem',
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.48rem) * 2.524), 2.625rem)',
+			),
+
+			'return_default_fluid_values_with_empty_fluid_array' => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => array(),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+			),
+
+			'return_default_fluid_values_with_null_value' => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => null,
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 2.524), 42px)',
+			),
+
+			'return_size_with_invalid_fluid_units'        => array(
+				'font_size_preset'            => array(
+					'size'  => '10em',
+					'fluid' => array(
+						'min' => '20vw',
+						'max' => '50%',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => '10em',
+			),
+
+			'return_fluid_clamp_value'                    => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => array(
+						'min' => '20px',
+						'max' => '50rem',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+			),
+
+			'return_clamp_value_with_default_fluid_max_value' => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => array(
+						'min' => '2.6rem',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+			),
+
+			'default_return_clamp_value_with_default_fluid_min_value' => array(
+				'font_size_preset'            => array(
+					'size'  => '28px',
+					'fluid' => array(
+						'max' => '80px',
+					),
+				),
+				'should_use_fluid_typography' => true,
+				'expected_output'             => 'clamp(21px, 1.3125rem + ((1vw - 7.68px) * 7.091), 80px)',
+			),
+		);
+	}
 }

From 2f608d2517f3135c8895ecce8c95c7350ae1f011 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 8 Sep 2022 15:50:55 +1000
Subject: [PATCH 02/17] Standardizing PHP doc comments for tests and new
 methods. Replaced parent::set_up(); with parent::tear_down();.

---
 src/wp-includes/block-supports/typography.php | 39 +++++++++-----
 .../tests/block-supports/typography.php       | 52 +++++++++++++++----
 2 files changed, 67 insertions(+), 24 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index 5f4e55bfe65aa..dd25a0767c877 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -204,11 +204,13 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
  * @access private
  *
  * @param string $raw_value Raw size value from theme.json.
- * @param array  $options    array(
- *      'coerce_to'        => (string) Coerce the value to rem or px. Default `'rem'`.
- *      'root_size_value'  => (number) Value of root font size for rem|em <-> px conversion. Default `16`.
- *      'acceptable_units' => (array)  An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
- *  );.
+ * @param array  $options   {
+ *     Optional. An associative array of options. Default is empty array.
+ *
+ *     @type string        $coerce_to        Coerce the value to rem or px. Default `'rem'`.
+ *     @type int           $root_size_value  Value of root font size for rem|em <-> px conversion. Default `16`.
+ *     @type array<string> $acceptable_units An array of font size units. Default `[ 'rem', 'px', 'em' ]`;
+ * }
  * @return array An array consisting of `'value'` and `'unit'` properties.
  */
 function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
@@ -260,13 +262,15 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
  * @since 6.1.0
  * @access private
  *
- * @param array $args array(
- *     'maximum_viewport_width' => (string) Maximum size up to which type will have fluidity.
- *     'minimum_viewport_width' => (string) Minimum viewport size from which type will have fluidity.
- *     'maximum_font_size'      => (string) Maximum font size for any clamp() calculation.
- *     'minimum_font_size'      => (string) Minimum font size for any clamp() calculation.
- *     'scale_factor'           => (number) A scale factor to determine how fast a font scales within boundaries.
- * );.
+ * @param array $args {
+ *     Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array.
+ *
+ *     @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
+ *     @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
+ *     @type string $maximum_font_size      Maximum font size for any clamp() calculation.
+ *     @type string $minimum_font_size      Minimum font size for any clamp() calculation.
+ *     @type int    $scale_factor           A scale factor to determine how fast a font scales within boundaries.
+ * }
  * @return string|null A font-size value using clamp().
  */
 function wp_get_computed_fluid_typography_value( $args = array() ) {
@@ -334,8 +338,15 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
  *
  * @since 6.1.0
  *
- * @param array   $preset                      fontSizes preset value as seen in theme.json.
- * @param boolean $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+ * @param array $preset                     {
+ *     Required. fontSizes preset value as seen in theme.json.
+ *
+ *     @type string $name Name of the font size preset.
+ *     @type string $slug Kebab-case unique identifier for the font size preset.
+ *     @type string $size CSS font-size value, including units where applicable.
+ * }
+ * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. Default is `false`.
+ *
  * @return string Font-size value.
  */
 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index ad6a05bd6a85c..551aeb824b4ea 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -1,8 +1,6 @@
 <?php
 /**
  * @group block-supports
- *
- * @covers ::wp_apply_typography_support
  */
 class Tests_Block_Supports_Typography extends WP_UnitTestCase {
 	/**
@@ -18,13 +16,16 @@ function set_up() {
 	function tear_down() {
 		unregister_block_type( $this->test_block_name );
 		$this->test_block_name = null;
-		parent::set_up();
+		parent::tear_down();
 	}
 
 	/**
+	 * Tests whether slugs with numbers are kebab cased.
+	 *
 	 * @ticket 54337
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
+	function test_should_kebab_case_font_size_slug_with_numbers() {
 		$this->test_block_name = 'test/font-size-slug-with-numbers';
 		register_block_type(
 			$this->test_block_name,
@@ -52,10 +53,14 @@ function test_font_size_slug_with_numbers_is_kebab_cased_properly() {
 
 		$this->assertSame( $expected, $actual );
 	}
+
 	/**
+	 * Tests legacy inline styles for font family.
+	 *
 	 * @ticket 54337
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_font_family_with_legacy_inline_styles_using_a_value() {
+	function test_should_generate_font_family_with_legacy_inline_styles_using_a_value() {
 		$this->test_block_name = 'test/font-family-with-inline-styles-using-value';
 		register_block_type(
 			$this->test_block_name,
@@ -84,9 +89,12 @@ function test_font_family_with_legacy_inline_styles_using_a_value() {
 	}
 
 	/**
+	 * Tests skipping serialization.
+	 *
 	 * @ticket 55505
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_typography_with_skipped_serialization_block_supports() {
+	function test_should_skip_serialization_for_typography_block_supports() {
 		$this->test_block_name = 'test/typography-with-skipped-serialization-block-supports';
 		register_block_type(
 			$this->test_block_name,
@@ -128,9 +136,12 @@ function test_typography_with_skipped_serialization_block_supports() {
 	}
 
 	/**
+	 * Tests skipping serialization of individual block supports properties.
+	 *
 	 * @ticket 55505
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_letter_spacing_with_individual_skipped_serialization_block_supports() {
+	function test_should_skip_serialization_for_letter_spacing_block_supports() {
 		$this->test_block_name = 'test/letter-spacing-with-individual-skipped-serialization-block-supports';
 		register_block_type(
 			$this->test_block_name,
@@ -160,10 +171,14 @@ function test_letter_spacing_with_individual_skipped_serialization_block_support
 
 		$this->assertSame( $expected, $actual );
 	}
+
 	/**
+	 * Tests legacy css var inline styles for font family.
+	 *
 	 * @ticket 54337
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_font_family_with_legacy_inline_styles_using_a_css_var() {
+	function test_should_generate_css_var_for_font_family_with_legacy_inline_styles() {
 		$this->test_block_name = 'test/font-family-with-inline-styles-using-css-var';
 		register_block_type(
 			$this->test_block_name,
@@ -190,10 +205,14 @@ function test_font_family_with_legacy_inline_styles_using_a_css_var() {
 
 		$this->assertSame( $expected, $actual );
 	}
+
 	/**
+	 * Tests that a classname is generated for font family.
+	 *
 	 * @ticket 54337
+	 * @covers ::wp_apply_typography_support
 	 */
-	function test_font_family_with_class() {
+	function test_should_generate_classname_for_font_family() {
 		$this->test_block_name = 'test/font-family-with-class';
 		register_block_type(
 			$this->test_block_name,
@@ -225,8 +244,21 @@ function test_font_family_with_class() {
 	 * Tests generating font size values, including fluid formulae, from fontSizes preset.
 	 *
 	 * @ticket 56467
+	 * @covers ::wp_get_typography_font_size_value
+	 * @covers ::wp_get_typography_value_and_unit
+	 * @covers ::wp_get_computed_fluid_typography_value
 	 *
 	 * @dataProvider data_generate_font_size_preset_fixtures
+	 *
+	 * @param array  $font_size_preset                     {
+	 *      Required. fontSizes preset value as seen in theme.json.
+	 *
+	 *     @type string $name Name of the font size preset.
+	 *     @type string $slug Kebab-case unique identifier for the font size preset.
+	 *     @type string $size CSS font-size value, including units where applicable.
+	 * }
+	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
+	 * @param string $expected_output Expected output of gutenberg_get_typography_font_size_value().
 	 */
 	function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
 		$actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
@@ -235,7 +267,7 @@ function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_
 	}
 
 	/**
-	 * Data provider.
+	 * Data provider for test_wp_get_typography_font_size_value.
 	 *
 	 * @return array
 	 */

From 3e140d2038ae3fea136fda94311d2a2bc3e3db85 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 9 Sep 2022 21:28:51 +1000
Subject: [PATCH 03/17] Formatting

---
 src/wp-includes/block-supports/typography.php    | 12 ++++++------
 .../phpunit/tests/block-supports/typography.php  | 16 ++++++++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index dd25a0767c877..7530336d1cd6b 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -283,8 +283,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
 	// Grab the minimum font size and normalize it in order to use the value for calculations.
 	$minimum_font_size = wp_get_typography_value_and_unit( $minimum_font_size_raw );
 
-	// We get a 'preferred' unit to keep units consistent when calculating,
-	// otherwise the result will not be accurate.
+	// We get a 'preferred' unit to keep units consistent when calculating, otherwise the result will not be accurate.
 	$font_size_unit = isset( $minimum_font_size['unit'] ) ? $minimum_font_size['unit'] : 'rem';
 
 	// Grab the maximum font size and normalize it in order to use the value for calculations.
@@ -321,9 +320,10 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
 			'coerce_to' => $font_size_unit,
 		)
 	);
-
-	// Build CSS rule.
-	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	/*
+	 * Build CSS rule.
+	 * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	 */
 	$view_port_width_offset = round( $minimum_viewport_width['value'] / 100, 3 ) . $font_size_unit;
 	$linear_factor          = 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
 	$linear_factor          = round( $linear_factor, 3 ) * $scale_factor;
@@ -350,7 +350,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
  * @return string Font-size value.
  */
 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
-	// Check if fluid font sizes are activated.
+	// Checks if fluid font sizes are activated.
 	$typography_settings         = wp_get_global_settings( array( 'typography' ) );
 	$should_use_fluid_typography = isset( $typography_settings['fluid'] ) && true === $typography_settings['fluid'] ? true : $should_use_fluid_typography;
 
diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index 551aeb824b4ea..9e95680ede1f8 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -13,6 +13,9 @@ function set_up() {
 		$this->test_block_name = null;
 	}
 
+	/**
+	 * Unregisters block type after each test.
+	 */
 	function tear_down() {
 		unregister_block_type( $this->test_block_name );
 		$this->test_block_name = null;
@@ -23,6 +26,7 @@ function tear_down() {
 	 * Tests whether slugs with numbers are kebab cased.
 	 *
 	 * @ticket 54337
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_kebab_case_font_size_slug_with_numbers() {
@@ -58,6 +62,7 @@ function test_should_kebab_case_font_size_slug_with_numbers() {
 	 * Tests legacy inline styles for font family.
 	 *
 	 * @ticket 54337
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_generate_font_family_with_legacy_inline_styles_using_a_value() {
@@ -92,6 +97,7 @@ function test_should_generate_font_family_with_legacy_inline_styles_using_a_valu
 	 * Tests skipping serialization.
 	 *
 	 * @ticket 55505
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_skip_serialization_for_typography_block_supports() {
@@ -139,6 +145,7 @@ function test_should_skip_serialization_for_typography_block_supports() {
 	 * Tests skipping serialization of individual block supports properties.
 	 *
 	 * @ticket 55505
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_skip_serialization_for_letter_spacing_block_supports() {
@@ -176,6 +183,7 @@ function test_should_skip_serialization_for_letter_spacing_block_supports() {
 	 * Tests legacy css var inline styles for font family.
 	 *
 	 * @ticket 54337
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_generate_css_var_for_font_family_with_legacy_inline_styles() {
@@ -210,6 +218,7 @@ function test_should_generate_css_var_for_font_family_with_legacy_inline_styles(
 	 * Tests that a classname is generated for font family.
 	 *
 	 * @ticket 54337
+	 *
 	 * @covers ::wp_apply_typography_support
 	 */
 	function test_should_generate_classname_for_font_family() {
@@ -244,13 +253,12 @@ function test_should_generate_classname_for_font_family() {
 	 * Tests generating font size values, including fluid formulae, from fontSizes preset.
 	 *
 	 * @ticket 56467
+	 *
 	 * @covers ::wp_get_typography_font_size_value
-	 * @covers ::wp_get_typography_value_and_unit
-	 * @covers ::wp_get_computed_fluid_typography_value
 	 *
 	 * @dataProvider data_generate_font_size_preset_fixtures
 	 *
-	 * @param array  $font_size_preset                     {
+	 * @param array  $font_size_preset            {
 	 *      Required. fontSizes preset value as seen in theme.json.
 	 *
 	 *     @type string $name Name of the font size preset.
@@ -258,7 +266,7 @@ function test_should_generate_classname_for_font_family() {
 	 *     @type string $size CSS font-size value, including units where applicable.
 	 * }
 	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
-	 * @param string $expected_output Expected output of gutenberg_get_typography_font_size_value().
+	 * @param string $expected_output             Expected output of gutenberg_get_typography_font_size_value().
 	 */
 	function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
 		$actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );

From 7fa16023ab6b23cafcc75c6e2c207392c5094615 Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 12:45:26 -0700
Subject: [PATCH 04/17] Remove space between attribute and value

New style engine does not emit spaces between attributes and values.

See https://github.com/WordPress/wordpress-develop/pull/3199.
---
 tests/phpunit/tests/block-supports/typography.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index 9e95680ede1f8..a43734edad271 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -88,7 +88,7 @@ function test_should_generate_font_family_with_legacy_inline_styles_using_a_valu
 		$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'serif' ) ) );
 
 		$actual   = wp_apply_typography_support( $block_type, $block_atts );
-		$expected = array( 'style' => 'font-family: serif;' );
+		$expected = array( 'style' => 'font-family:serif;' );
 
 		$this->assertSame( $expected, $actual );
 	}
@@ -209,7 +209,7 @@ function test_should_generate_css_var_for_font_family_with_legacy_inline_styles(
 		$block_atts = array( 'style' => array( 'typography' => array( 'fontFamily' => 'var:preset|font-family|h1' ) ) );
 
 		$actual   = wp_apply_typography_support( $block_type, $block_atts );
-		$expected = array( 'style' => 'font-family: var(--wp--preset--font-family--h-1);' );
+		$expected = array( 'style' => 'font-family:var(--wp--preset--font-family--h-1);' );
 
 		$this->assertSame( $expected, $actual );
 	}

From 37ad3e26baa758b93e0349b1cfe858419d348fda Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 14:58:17 -0700
Subject: [PATCH 05/17] Format DocBlock per WP standard

https://developer.wordpress.org/coding-standards/inline-documentation-standards/php/#1-functions-class-methods
---
 src/wp-includes/block-supports/typography.php | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index 7530336d1cd6b..ec7c34de64d4b 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -175,10 +175,9 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
  *
  * @since 6.1.0
  *
- * @param string $style_value    A raw style value for a single typography feature from a block's style attribute.
- * @param string $css_property   Slug for the CSS property the inline style sets.
- *
- * @return string?             A CSS inline style value.
+ * @param string $style_value A raw style value for a single typography feature from a block's style attribute.
+ * @param string $css_property Slug for the CSS property the inline style sets.
+ * @return string A CSS inline style value.
  */
 function wp_typography_get_preset_inline_style_value( $style_value, $css_property ) {
 	// If the style value is not a preset CSS variable go no further.

From eb8c944a2c4546a6878add2928a4fd61879249f7 Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 14:58:59 -0700
Subject: [PATCH 06/17] Format multiline comment per WP standard

https://developer.wordpress.org/coding-standards/inline-documentation-standards/php/#5-2-multi-line-comments
---
 src/wp-includes/block-supports/typography.php | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index ec7c34de64d4b..827de65e2910c 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -185,10 +185,12 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
 		return $style_value;
 	}
 
-	// For backwards compatibility.
-	// Presets were removed in WordPress/gutenberg#27555.
-	// We have a preset CSS variable as the style.
-	// Get the style value from the string and return CSS style.
+	/*
+	 * For backwards compatibility.
+	 * Presets were removed in WordPress/gutenberg#27555.
+	 * We have a preset CSS variable as the style.
+	 * Get the style value from the string and return CSS style.
+	 */
 	$index_to_splice = strrpos( $style_value, '|' ) + 1;
 	$slug            = _wp_to_kebab_case( substr( $style_value, $index_to_splice ) );
 

From d08f8e640121111501e9a3cdad312da130d3635a Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:12:53 -0700
Subject: [PATCH 07/17] Formatting tweak for DocBlock

---
 src/wp-includes/block-supports/typography.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index 827de65e2910c..7ff921f8c6d56 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -175,7 +175,7 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
  *
  * @since 6.1.0
  *
- * @param string $style_value A raw style value for a single typography feature from a block's style attribute.
+ * @param string $style_value  A raw style value for a single typography feature from a block's style attribute.
  * @param string $css_property Slug for the CSS property the inline style sets.
  * @return string A CSS inline style value.
  */

From e889b8d307b0dd3fe67cae7c58750d4e3ced886c Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:20:23 -0700
Subject: [PATCH 08/17] Formatting adjustment

---
 src/wp-includes/block-supports/typography.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index 7ff921f8c6d56..d738fa9095fe7 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -347,7 +347,6 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
  *     @type string $size CSS font-size value, including units where applicable.
  * }
  * @param bool  $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing. Default is `false`.
- *
  * @return string Font-size value.
  */
 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {

From 84a9ccd3487b88f4bf35e37a37b3e321e96051ed Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:51:28 -0700
Subject: [PATCH 09/17] Format inline comment

---
 src/wp-includes/deprecated.php | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index 54abc2088f0ab..3995ba3c72818 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4485,8 +4485,10 @@ function wp_typography_get_css_variable_inline_style( $attributes, $feature, $cs
 		return sprintf( '%s:%s;', $css_property, $style_value );
 	}
 
-	// We have a preset CSS variable as the style.
-	// Get the style value from the string and return CSS style.
+	/*
+	 * We have a preset CSS variable as the style.
+	 * Get the style value from the string and return CSS style.
+	 */
 	$index_to_splice = strrpos( $style_value, '|' ) + 1;
 	$slug            = substr( $style_value, $index_to_splice );
 

From 65c20d3a4ca73de9d9ace96bdcacd35aee4361cb Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:52:13 -0700
Subject: [PATCH 10/17] Remove `@since` for deprecated function

---
 src/wp-includes/deprecated.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index 3995ba3c72818..ceaf38f5f7ebd 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4462,7 +4462,6 @@ function _wp_multiple_block_styles( $metadata ) {
  * text transform, and font style.
  *
  * @since 5.8.0
- * @since 6.1.0 No longer used for parsing typography values. Use the style engine.
  * @access private
  *
  * @deprecated since 6.1.0 The style engine parses and generates CSS vars.

From aa582abfee7a4aa0a14b2c0170a1621be35c7539 Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:54:30 -0700
Subject: [PATCH 11/17] Reformat `@deprecated` tag per standards

---
 src/wp-includes/deprecated.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index ceaf38f5f7ebd..a9797131d2587 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4463,8 +4463,8 @@ function _wp_multiple_block_styles( $metadata ) {
  *
  * @since 5.8.0
  * @access private
- *
- * @deprecated since 6.1.0 The style engine parses and generates CSS vars.
+ * @deprecated 6.1.0 No longer used for parsing typography values.
+ *             Use wp_style_engine_get_styles().
  *
  * @param array  $attributes   Block's attributes.
  * @param string $feature      Key for the feature within the typography styles.

From c16d09e2857a948b7a551475855f1fb369d63c9c Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Mon, 12 Sep 2022 15:54:51 -0700
Subject: [PATCH 12/17] Add `@see` for new function

---
 src/wp-includes/deprecated.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index a9797131d2587..bd77902229f3f 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4465,6 +4465,7 @@ function _wp_multiple_block_styles( $metadata ) {
  * @access private
  * @deprecated 6.1.0 No longer used for parsing typography values.
  *             Use wp_style_engine_get_styles().
+ * @see wp_style_engine_get_styles()
  *
  * @param array  $attributes   Block's attributes.
  * @param string $feature      Key for the feature within the typography styles.

From 5ff82f65400f26f062cb91da2bf1829d2dba06e9 Mon Sep 17 00:00:00 2001
From: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>
Date: Thu, 15 Sep 2022 13:01:30 -0700
Subject: [PATCH 13/17] Remove spaces for typography styles

Spaces are stripped between properties and values since #3199.
---
 tests/phpunit/tests/blocks/supportedStyles.php | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/tests/phpunit/tests/blocks/supportedStyles.php b/tests/phpunit/tests/blocks/supportedStyles.php
index bdbf91aa2eb13..222c3cd010dcd 100644
--- a/tests/phpunit/tests/blocks/supportedStyles.php
+++ b/tests/phpunit/tests/blocks/supportedStyles.php
@@ -379,7 +379,7 @@ public function test_custom_font_size() {
 		);
 
 		$expected_classes = 'foo-bar-class wp-block-example';
-		$expected_styles  = 'test: style; font-size: 10px;';
+		$expected_styles  = 'test: style; font-size:10px;';
 
 		$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
 	}
@@ -436,7 +436,7 @@ public function test_line_height() {
 		);
 
 		$expected_classes = 'foo-bar-class wp-block-example';
-		$expected_styles  = 'test: style; line-height: 10;';
+		$expected_styles  = 'test: style; line-height:10;';
 
 		$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
 	}
@@ -563,7 +563,7 @@ public function test_all_supported() {
 		);
 
 		$expected_classes = 'foo-bar-class wp-block-example has-text-color has-background alignwide';
-		$expected_styles  = 'test: style; color: #000; background-color: #fff; font-size: 10px; line-height: 20;';
+		$expected_styles  = 'test: style; color: #000; background-color: #fff; font-size:10px; line-height:20;';
 
 		$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
 	}
@@ -606,7 +606,7 @@ public function test_one_supported() {
 		);
 
 		$expected_classes = 'foo-bar-class wp-block-example';
-		$expected_styles  = 'test: style; font-size: 10px;';
+		$expected_styles  = 'test: style; font-size:10px;';
 
 		$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
 	}

From 5ad23803bb8b9a4410ef538c6f21eb6c7bb240ed Mon Sep 17 00:00:00 2001
From: Tonya Mork <tonya.mork@automattic.com>
Date: Tue, 20 Sep 2022 07:59:58 -0500
Subject: [PATCH 14/17] Update deprecation for consistency.

---
 src/wp-includes/deprecated.php | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/wp-includes/deprecated.php b/src/wp-includes/deprecated.php
index bd77902229f3f..6f4be5bf38e58 100644
--- a/src/wp-includes/deprecated.php
+++ b/src/wp-includes/deprecated.php
@@ -4463,8 +4463,8 @@ function _wp_multiple_block_styles( $metadata ) {
  *
  * @since 5.8.0
  * @access private
- * @deprecated 6.1.0 No longer used for parsing typography values.
- *             Use wp_style_engine_get_styles().
+ * @deprecated 6.1.0 Use wp_style_engine_get_styles() introduced in 6.1.0.
+ *
  * @see wp_style_engine_get_styles()
  *
  * @param array  $attributes   Block's attributes.
@@ -4473,7 +4473,8 @@ function _wp_multiple_block_styles( $metadata ) {
  * @return string CSS inline style.
  */
 function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
-	_deprecated_function( __FUNCTION__, '6.1.0' );
+	_deprecated_function( __FUNCTION__, '6.1.0', 'wp_style_engine_get_styles()' );
+
 	// Retrieve current attribute value or skip if not found.
 	$style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
 	if ( ! $style_value ) {

From 4e9989713c27fcf5d9f3fb29beb23fb9878885ce Mon Sep 17 00:00:00 2001
From: Tonya Mork <tonya.mork@automattic.com>
Date: Tue, 20 Sep 2022 08:43:53 -0500
Subject: [PATCH 15/17] Update wp_apply_typography_support() for coding
 standards

consistency and readability
---
 src/wp-includes/block-supports/typography.php | 80 ++++++++++++++-----
 1 file changed, 59 insertions(+), 21 deletions(-)

diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php
index d738fa9095fe7..532e998d66310 100644
--- a/src/wp-includes/block-supports/typography.php
+++ b/src/wp-includes/block-supports/typography.php
@@ -65,7 +65,7 @@ function wp_register_typography_support( $block_type ) {
  * the front-end.
  *
  * @since 5.6.0
- * @since 6.1.0 Using the style engine to generate CSS and classnames.
+ * @since 6.1.0 Used the style engine to generate CSS and classnames.
  * @access private
  *
  * @param WP_Block_Type $block_type       Block type.
@@ -107,44 +107,82 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 
 	$typography_block_styles = array();
 	if ( $has_font_size_support && ! $should_skip_font_size ) {
-		$preset_font_size                    = array_key_exists( 'fontSize', $block_attributes ) ? "var:preset|font-size|{$block_attributes['fontSize']}" : null;
-		$custom_font_size                    = isset( $block_attributes['style']['typography']['fontSize'] ) ? $block_attributes['style']['typography']['fontSize'] : null;
+		$preset_font_size                    = array_key_exists( 'fontSize', $block_attributes )
+			? "var:preset|font-size|{$block_attributes['fontSize']}"
+			: null;
+		$custom_font_size                    = isset( $block_attributes['style']['typography']['fontSize'] )
+			? $block_attributes['style']['typography']['fontSize']
+			: null;
 		$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : $custom_font_size;
 	}
 
 	if ( $has_font_family_support && ! $should_skip_font_family ) {
-		$preset_font_family                    = array_key_exists( 'fontFamily', $block_attributes ) ? "var:preset|font-family|{$block_attributes['fontFamily']}" : null;
-		$custom_font_family                    = isset( $block_attributes['style']['typography']['fontFamily'] ) ? wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' ) : null;
+		$preset_font_family                    = array_key_exists( 'fontFamily', $block_attributes )
+			? "var:preset|font-family|{$block_attributes['fontFamily']}"
+			: null;
+		$custom_font_family                    = isset( $block_attributes['style']['typography']['fontFamily'] )
+			? wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontFamily'], 'font-family' )
+			: null;
 		$typography_block_styles['fontFamily'] = $preset_font_family ? $preset_font_family : $custom_font_family;
 	}
 
-	if ( $has_font_style_support && ! $should_skip_font_style && isset( $block_attributes['style']['typography']['fontStyle'] ) ) {
-		$typography_block_styles['fontStyle'] =
-			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontStyle'], 'font-style' );
+	if (
+		$has_font_style_support &&
+		! $should_skip_font_style &&
+		isset( $block_attributes['style']['typography']['fontStyle'] )
+	) {
+		$typography_block_styles['fontStyle'] = wp_typography_get_preset_inline_style_value(
+			$block_attributes['style']['typography']['fontStyle'],
+			'font-style'
+		);
 	}
 
-	if ( $has_font_weight_support && ! $should_skip_font_weight && isset( $block_attributes['style']['typography']['fontWeight'] ) ) {
-		$typography_block_styles['fontWeight'] =
-			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['fontWeight'], 'font-weight' );
+	if (
+		$has_font_weight_support &&
+		! $should_skip_font_weight &&
+		isset( $block_attributes['style']['typography']['fontWeight'] )
+	) {
+		$typography_block_styles['fontWeight'] = wp_typography_get_preset_inline_style_value(
+			$block_attributes['style']['typography']['fontWeight'],
+			'font-weight'
+		);
 	}
 
 	if ( $has_line_height_support && ! $should_skip_line_height ) {
-			$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ), null );
+			$typography_block_styles['lineHeight'] = _wp_array_get( $block_attributes, array( 'style', 'typography', 'lineHeight' ) );
 	}
 
-	if ( $has_text_decoration_support && ! $should_skip_text_decoration && isset( $block_attributes['style']['typography']['textDecoration'] ) ) {
-		$typography_block_styles['textDecoration'] =
-			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textDecoration'], 'text-decoration' );
+	if (
+		$has_text_decoration_support &&
+		! $should_skip_text_decoration &&
+		isset( $block_attributes['style']['typography']['textDecoration'] )
+	) {
+		$typography_block_styles['textDecoration'] = wp_typography_get_preset_inline_style_value(
+			$block_attributes['style']['typography']['textDecoration'],
+			'text-decoration'
+		);
 	}
 
-	if ( $has_text_transform_support && ! $should_skip_text_transform && isset( $block_attributes['style']['typography']['textTransform'] ) ) {
-		$typography_block_styles['textTransform'] =
-			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['textTransform'], 'text-transform' );
+	if (
+		$has_text_transform_support &&
+		! $should_skip_text_transform &&
+		isset( $block_attributes['style']['typography']['textTransform'] )
+	) {
+		$typography_block_styles['textTransform'] = wp_typography_get_preset_inline_style_value(
+			$block_attributes['style']['typography']['textTransform'],
+			'text-transform'
+		);
 	}
 
-	if ( $has_letter_spacing_support && ! $should_skip_letter_spacing && isset( $block_attributes['style']['typography']['letterSpacing'] ) ) {
-		$typography_block_styles['letterSpacing'] =
-			wp_typography_get_preset_inline_style_value( $block_attributes['style']['typography']['letterSpacing'], 'letter-spacing' );
+	if (
+		$has_letter_spacing_support &&
+		! $should_skip_letter_spacing &&
+		isset( $block_attributes['style']['typography']['letterSpacing'] )
+	) {
+		$typography_block_styles['letterSpacing'] = wp_typography_get_preset_inline_style_value(
+			$block_attributes['style']['typography']['letterSpacing'],
+			'letter-spacing'
+		);
 	}
 
 	$attributes = array();

From c888ae54577176eb66f7573167dfe3e871dbfad0 Mon Sep 17 00:00:00 2001
From: Tonya Mork <tonya.mork@automattic.com>
Date: Tue, 20 Sep 2022 08:49:40 -0500
Subject: [PATCH 16/17] Test DocBlock updates for standards

---
 tests/phpunit/tests/block-supports/typography.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php
index a43734edad271..a7e6a225678fa 100644
--- a/tests/phpunit/tests/block-supports/typography.php
+++ b/tests/phpunit/tests/block-supports/typography.php
@@ -266,7 +266,7 @@ function test_should_generate_classname_for_font_family() {
 	 *     @type string $size CSS font-size value, including units where applicable.
 	 * }
 	 * @param bool   $should_use_fluid_typography An override to switch fluid typography "on". Can be used for unit testing.
-	 * @param string $expected_output             Expected output of gutenberg_get_typography_font_size_value().
+	 * @param string $expected_output             Expected output.
 	 */
 	function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography, $expected_output ) {
 		$actual = wp_get_typography_font_size_value( $font_size_preset, $should_use_fluid_typography );
@@ -275,7 +275,7 @@ function test_wp_get_typography_font_size_value( $font_size_preset, $should_use_
 	}
 
 	/**
-	 * Data provider for test_wp_get_typography_font_size_value.
+	 * Data provider.
 	 *
 	 * @return array
 	 */

From 09ea58ad1a9e48f9c972d972d9655edbdb0a5d48 Mon Sep 17 00:00:00 2001
From: Tonya Mork <tonya.mork@automattic.com>
Date: Tue, 20 Sep 2022 09:01:23 -0500
Subject: [PATCH 17/17] Fix failing test - remove empty spaces

---
 tests/phpunit/tests/blocks/supportedStyles.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/phpunit/tests/blocks/supportedStyles.php b/tests/phpunit/tests/blocks/supportedStyles.php
index 6a33677640429..e4e6c37e9e7fa 100644
--- a/tests/phpunit/tests/blocks/supportedStyles.php
+++ b/tests/phpunit/tests/blocks/supportedStyles.php
@@ -563,7 +563,7 @@ public function test_all_supported() {
 		);
 
 		$expected_classes = 'foo-bar-class wp-block-example has-text-color has-background alignwide';
-		$expected_styles  = 'test: style; color: #000; background-color: #fff; font-size:10px; line-height:20;';
+		$expected_styles  = 'test: style; color:#000; background-color:#fff; font-size:10px; line-height:20;';
 
 		$this->assert_content_and_styles_and_classes_match( $block, $expected_classes, $expected_styles );
 	}