Fluid Typography: Backport PHP changes for custom font sizes

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

@@ -119,7 +119,11 @@ function wp_apply_typography_support( $block_type, $block_attributes ) {
 		$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;
+			$typography_block_styles['fontSize'] = $preset_font_size ? $preset_font_size : wp_get_typography_font_size_value(
+				array(
+					'size' => $custom_font_size,
+				)
+			);
 	}
 
 	if ( $has_font_family_support && ! $should_skip_font_family ) {
@@ -244,15 +248,42 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
 	return sprintf( 'var(--wp--preset--%s--%s);', $css_property, $slug );
 }
 
+/**
+ * Renders typography styles/content to the block wrapper.
+ *
+ * @param string $block_content Rendered block content.
+ * @param array  $block         Block object.
+ * @return string Filtered block content.
+ */
+function wp_render_typography_support( $block_content, $block ) {
+	if ( ! isset( $block['attrs']['style']['typography']['fontSize'] ) ) {
+		return $block_content;
+	}
+
+	$custom_font_size = $block['attrs']['style']['typography']['fontSize'];
+	$fluid_font_size  = wp_get_typography_font_size_value( array( 'size' => $custom_font_size ) );
+
+	/*
+	 * Checks that $fluid_font_size does not match $custom_font_size,
+	 * which means it's been mutated by the fluid font size functions.
+	 */
+	if ( ! empty( $fluid_font_size ) && $fluid_font_size !== $custom_font_size ) {
+		// Replaces the first instance of `font-size:$custom_font_size` with `font-size:$fluid_font_size`.
+		return preg_replace( '/font-size\s*:\s*' . preg_quote( $custom_font_size, '/' ) . '\s*;?/', 'font-size:' . esc_attr( $fluid_font_size ) . ';', $block_content, 1 );
+	}
+
+	return $block_content;
+}
+
 /**
  * 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   {
+ * @param string|int|float $raw_value Raw size value from theme.json.
+ * @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'`.
@@ -263,10 +294,24 @@ function wp_typography_get_preset_inline_style_value( $style_value, $css_propert
  *                    `null` on failure.
  */
 function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
+	if ( ! is_string( $raw_value ) && ! is_int( $raw_value ) && ! is_float( $raw_value ) ) {
+		_doing_it_wrong(
+			__FUNCTION__,
+			__( 'Raw size value must be a string, integer, or float.' ),
+			'6.1.0'
+		);
+		return null;
+	}
+
 	if ( empty( $raw_value ) ) {
 		return null;
 	}
 
+	// Converts numbers to pixel values by default.
+	if ( is_numeric( $raw_value ) ) {
+		$raw_value = $raw_value . 'px';
+	}
+
 	$defaults = array(
 		'coerce_to'        => '',
 		'root_size_value'  => 16,
@@ -395,15 +440,27 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
  * @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.
+ *     @type string           $name Name of the font size preset.
+ *     @type string           $slug Kebab-case unique identifier for the font size preset.
+ *     @type string|int|float $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.
+ * @return string|null Font-size value or `null` if a size is not passed in $preset.
  */
 function wp_get_typography_font_size_value( $preset, $should_use_fluid_typography = false ) {
+	if ( ! isset( $preset['size'] ) ) {
+		return null;
+	}
+
+	/*
+	 * Catches empty values and 0/'0'.
+	 * Fluid calculations cannot be performed on 0.
+	 */
+	if ( empty( $preset['size'] ) ) {
+		return $preset['size'];
+	}
+
 	// 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;
@@ -473,3 +530,5 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
 		'apply'              => 'wp_apply_typography_support',
 	)
 );
+
+add_filter( 'render_block', 'wp_render_typography_support', 10, 2 );

src/wp-includes/class-wp-theme-json.php

@@ -1675,6 +1675,18 @@ protected static function compute_style_properties( $styles, $settings = array()
 				continue;
 			}
 
+			// Calculates fluid typography rules where available.
+			if ( 'font-size' === $css_property ) {
+				/*
+				 * wp_get_typography_font_size_value() will check
+				 * if fluid typography has been activated and also
+				 * whether the incoming value can be converted to a fluid value.
+				 * Values that already have a "clamp()" function will not pass the test,
+				 * and therefore the original $value will be returned.
+				 */
+				$value = wp_get_typography_font_size_value( array( 'size' => $value ) );
+			}
+
 			$declarations[] = array(
 				'name'  => $css_property,
 				'value' => $value,

tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/style.css

@@ -0,0 +1,8 @@
+/*
+Theme Name: Block Theme Child Theme With Fluid Typography
+Theme URI: https://wordpress.org/
+Description: For testing purposes only.
+Template: block-theme
+Version: 1.0.0
+Text Domain: block-theme-child-with-fluid-typography
+*/

tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography/theme.json

@@ -0,0 +1,9 @@
+{
+	"version": 2,
+	"settings": {
+		"appearanceTools": true,
+		"typography": {
+			"fluid": true
+		}
+	}
+}