--- a/wp/wp-includes/block-supports/typography.php Thu Sep 29 08:06:27 2022 +0200
+++ b/wp/wp-includes/block-supports/typography.php Fri Sep 05 18:40:08 2025 +0200
@@ -10,28 +10,32 @@
* Registers the style and typography block attributes for block types that support it.
*
* @since 5.6.0
+ * @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block Type.
*/
function wp_register_typography_support( $block_type ) {
- if ( ! property_exists( $block_type, 'supports' ) ) {
+ if ( ! ( $block_type instanceof WP_Block_Type ) ) {
return;
}
- $typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+ $typography_supports = isset( $block_type->supports['typography'] ) ? $block_type->supports['typography'] : false;
if ( ! $typography_supports ) {
return;
}
- $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 );
- $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
- $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
- $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
- $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
- $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+ $has_font_family_support = isset( $typography_supports['__experimentalFontFamily'] ) ? $typography_supports['__experimentalFontFamily'] : false;
+ $has_font_size_support = isset( $typography_supports['fontSize'] ) ? $typography_supports['fontSize'] : false;
+ $has_font_style_support = isset( $typography_supports['__experimentalFontStyle'] ) ? $typography_supports['__experimentalFontStyle'] : false;
+ $has_font_weight_support = isset( $typography_supports['__experimentalFontWeight'] ) ? $typography_supports['__experimentalFontWeight'] : false;
+ $has_letter_spacing_support = isset( $typography_supports['__experimentalLetterSpacing'] ) ? $typography_supports['__experimentalLetterSpacing'] : false;
+ $has_line_height_support = isset( $typography_supports['lineHeight'] ) ? $typography_supports['lineHeight'] : false;
+ $has_text_align_support = isset( $typography_supports['textAlign'] ) ? $typography_supports['textAlign'] : false;
+ $has_text_columns_support = isset( $typography_supports['textColumns'] ) ? $typography_supports['textColumns'] : false;
+ $has_text_decoration_support = isset( $typography_supports['__experimentalTextDecoration'] ) ? $typography_supports['__experimentalTextDecoration'] : false;
+ $has_text_transform_support = isset( $typography_supports['__experimentalTextTransform'] ) ? $typography_supports['__experimentalTextTransform'] : false;
+ $has_writing_mode_support = isset( $typography_supports['__experimentalWritingMode'] ) ? $typography_supports['__experimentalWritingMode'] : false;
$has_typography_support = $has_font_family_support
|| $has_font_size_support
@@ -39,8 +43,11 @@
|| $has_font_weight_support
|| $has_letter_spacing_support
|| $has_line_height_support
+ || $has_text_align_support
+ || $has_text_columns_support
|| $has_text_decoration_support
- || $has_text_transform_support;
+ || $has_text_transform_support
+ || $has_writing_mode_support;
if ( ! $block_type->attributes ) {
$block_type->attributes = array();
@@ -57,6 +64,12 @@
'type' => 'string',
);
}
+
+ if ( $has_font_family_support && ! array_key_exists( 'fontFamily', $block_type->attributes ) ) {
+ $block_type->attributes['fontFamily'] = array(
+ 'type' => 'string',
+ );
+ }
}
/**
@@ -65,6 +78,8 @@
* the front-end.
*
* @since 5.6.0
+ * @since 6.1.0 Used the style engine to generate CSS and classnames.
+ * @since 6.3.0 Added support for text-columns.
* @access private
*
* @param WP_Block_Type $block_type Block type.
@@ -72,11 +87,13 @@
* @return array Typography CSS classes and inline styles.
*/
function wp_apply_typography_support( $block_type, $block_attributes ) {
- if ( ! property_exists( $block_type, 'supports' ) ) {
+ if ( ! ( $block_type instanceof WP_Block_Type ) ) {
return array();
}
- $typography_supports = _wp_array_get( $block_type->supports, array( 'typography' ), false );
+ $typography_supports = isset( $block_type->supports['typography'] )
+ ? $block_type->supports['typography']
+ : false;
if ( ! $typography_supports ) {
return array();
}
@@ -85,132 +102,583 @@
return array();
}
- $attributes = array();
- $classes = array();
- $styles = array();
+ $has_font_family_support = isset( $typography_supports['__experimentalFontFamily'] ) ? $typography_supports['__experimentalFontFamily'] : false;
+ $has_font_size_support = isset( $typography_supports['fontSize'] ) ? $typography_supports['fontSize'] : false;
+ $has_font_style_support = isset( $typography_supports['__experimentalFontStyle'] ) ? $typography_supports['__experimentalFontStyle'] : false;
+ $has_font_weight_support = isset( $typography_supports['__experimentalFontWeight'] ) ? $typography_supports['__experimentalFontWeight'] : false;
+ $has_letter_spacing_support = isset( $typography_supports['__experimentalLetterSpacing'] ) ? $typography_supports['__experimentalLetterSpacing'] : false;
+ $has_line_height_support = isset( $typography_supports['lineHeight'] ) ? $typography_supports['lineHeight'] : false;
+ $has_text_align_support = isset( $typography_supports['textAlign'] ) ? $typography_supports['textAlign'] : false;
+ $has_text_columns_support = isset( $typography_supports['textColumns'] ) ? $typography_supports['textColumns'] : false;
+ $has_text_decoration_support = isset( $typography_supports['__experimentalTextDecoration'] ) ? $typography_supports['__experimentalTextDecoration'] : false;
+ $has_text_transform_support = isset( $typography_supports['__experimentalTextTransform'] ) ? $typography_supports['__experimentalTextTransform'] : false;
+ $has_writing_mode_support = isset( $typography_supports['__experimentalWritingMode'] ) ? $typography_supports['__experimentalWritingMode'] : false;
- $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 );
- $has_font_weight_support = _wp_array_get( $typography_supports, array( '__experimentalFontWeight' ), false );
- $has_letter_spacing_support = _wp_array_get( $typography_supports, array( '__experimentalLetterSpacing' ), false );
- $has_line_height_support = _wp_array_get( $typography_supports, array( 'lineHeight' ), false );
- $has_text_decoration_support = _wp_array_get( $typography_supports, array( '__experimentalTextDecoration' ), false );
- $has_text_transform_support = _wp_array_get( $typography_supports, array( '__experimentalTextTransform' ), false );
+ // 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_align = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textAlign' );
+ $should_skip_text_columns = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'textColumns' );
+ $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' );
+ $should_skip_writing_mode = wp_should_skip_block_supports_serialization( $block_type, 'typography', 'writingMode' );
- 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'] );
-
- 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 : wp_get_typography_font_size_value(
+ array(
+ '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_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_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_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_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_line_height_support && ! $should_skip_line_height ) {
+ $typography_block_styles['lineHeight'] = isset( $block_attributes['style']['typography']['lineHeight'] )
+ ? $block_attributes['style']['typography']['lineHeight']
+ : null;
+ }
+
+ if ( $has_text_align_support && ! $should_skip_text_align ) {
+ $typography_block_styles['textAlign'] = isset( $block_attributes['style']['typography']['textAlign'] )
+ ? $block_attributes['style']['typography']['textAlign']
+ : null;
+ }
+
+ if ( $has_text_columns_support && ! $should_skip_text_columns && isset( $block_attributes['style']['typography']['textColumns'] ) ) {
+ $typography_block_styles['textColumns'] = isset( $block_attributes['style']['typography']['textColumns'] )
+ ? $block_attributes['style']['typography']['textColumns']
+ : null;
}
- 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_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_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_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_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_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_writing_mode_support &&
+ ! $should_skip_writing_mode &&
+ isset( $block_attributes['style']['typography']['writingMode'] )
+ ) {
+ $typography_block_styles['writingMode'] = isset( $block_attributes['style']['typography']['writingMode'] )
+ ? $block_attributes['style']['typography']['writingMode']
+ : null;
}
- 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;
- }
+ $attributes = array();
+ $classnames = array();
+ $styles = wp_style_engine_get_styles(
+ array( 'typography' => $typography_block_styles ),
+ array( 'convert_vars_to_classnames' => true )
+ );
+
+ if ( ! empty( $styles['classnames'] ) ) {
+ $classnames[] = $styles['classnames'];
}
- 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_text_align_support && ! $should_skip_text_align && isset( $block_attributes['style']['typography']['textAlign'] ) ) {
+ $classnames[] = 'has-text-align-' . $block_attributes['style']['typography']['textAlign'];
}
- if ( ! empty( $classes ) ) {
- $attributes['class'] = implode( ' ', $classes );
+ if ( ! empty( $classnames ) ) {
+ $attributes['class'] = implode( ' ', $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,
+ * Generates an inline style value for a typography feature e.g. text decoration,
* text transform, and font style.
*
- * @since 5.8.0
+ * Note: This function is for backwards compatibility.
+ * * It is necessary to parse older blocks whose typography styles contain presets.
+ * * 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.
+ * @link https://github.com/wordpress/gutenberg/pull/27555
+ *
+ * @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.
+ */
+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.
+ * A preset CSS variable is the style.
+ * Gets 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 ) );
+
+ // 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 );
+}
+
+/**
+ * Renders typography styles/content to the block wrapper.
+ *
+ * @since 6.1.0
+ *
+ * @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. array( '42', 'rem' ).
+ *
+ * @since 6.1.0
+ *
+ * @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'`.
+ * @type int $root_size_value Value of root font size for rem|em <-> px conversion. Default `16`.
+ * @type string[] $acceptable_units An array of font size units. Default `array( 'rem', 'px', 'em' )`;
+ * }
+ * @return array|null An array consisting of `'value'` and `'unit'` properties on success.
+ * `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,
+ '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 );
+
+ // Bails out if not 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, possibly 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'];
+ }
+
+ /*
+ * No calculation is required if swapping between em and rem yet,
+ * since we assume a root size value. Later we might like to differentiate between
+ * :root font size (rem) and parent element font size (em) relativity.
+ */
+ if ( ( 'em' === $options['coerce_to'] || 'rem' === $options['coerce_to'] ) && ( 'em' === $unit || 'rem' === $unit ) ) {
+ $unit = $options['coerce_to'];
+ }
+
+ return array(
+ 'value' => round( $value, 3 ),
+ 'unit' => $unit,
+ );
+}
+
+/**
+ * Internal implementation of CSS clamp() based on available min/max viewport
+ * width and min/max font sizes.
+ *
+ * @since 6.1.0
+ * @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
+ * @since 6.5.0 Returns early when min and max viewport subtraction is zero to avoid division by zero.
* @access private
*
- * @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.
+ * @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() on success, otherwise null.
*/
-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;
+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;
+
+ // Normalizes the minimum font size 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';
+
+ // Normalizes the maximum font size 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,
+ )
+ );
+
+ // Checks for mandatory min and max sizes, and protects against unsupported units.
+ if ( ! $maximum_font_size || ! $minimum_font_size ) {
+ return null;
+ }
+
+ // Uses 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,
+ )
+ );
+
+ // Protects against unsupported units in min and max viewport widths.
+ if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
+ return null;
+ }
+
+ // Calculates the linear factor denominator. If it's 0, we cannot calculate a fluid value.
+ $linear_factor_denominator = $maximum_viewport_width['value'] - $minimum_viewport_width['value'];
+ if ( empty( $linear_factor_denominator ) ) {
+ return null;
+ }
+
+ /*
+ * 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'] ) / ( $linear_factor_denominator ) );
+ $linear_factor_scaled = round( $linear_factor * $scale_factor, 3 );
+ $linear_factor_scaled = empty( $linear_factor_scaled ) ? 1 : $linear_factor_scaled;
+ $fluid_target_font_size = implode( '', $minimum_font_size_rem ) . " + ((1vw - $view_port_width_offset) * $linear_factor_scaled)";
+
+ 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
+ * @since 6.1.1 Adjusted rules for min and max font sizes.
+ * @since 6.2.0 Added 'settings.typography.fluid.minFontSize' support.
+ * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale.
+ * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema.
+ * @since 6.6.0 Deprecated bool argument $should_use_fluid_typography.
+ *
+ * @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|int|float $size CSS font-size value, including units if applicable.
+ * }
+ * @param bool|array $settings Optional Theme JSON settings array that overrides any global theme settings.
+ * Default is false.
+ * @return string|null Font-size value or null if a size is not passed in $preset.
+ */
+
+
+function wp_get_typography_font_size_value( $preset, $settings = array() ) {
+ 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'];
}
- // 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 );
+ /*
+ * As a boolean (deprecated since 6.6), $settings acts as an override to switch fluid typography "on" (`true`) or "off" (`false`).
+ */
+ if ( is_bool( $settings ) ) {
+ _deprecated_argument( __FUNCTION__, '6.6.0', __( '`boolean` type for second argument `$settings` is deprecated. Use `array()` instead.' ) );
+ $settings = array(
+ 'typography' => array(
+ 'fluid' => $settings,
+ ),
+ );
+ }
+
+ // Fallback to global settings as default.
+ $global_settings = wp_get_global_settings();
+ $settings = wp_parse_args(
+ $settings,
+ $global_settings
+ );
+
+ $typography_settings = isset( $settings['typography'] ) ? $settings['typography'] : array();
+ $should_use_fluid_typography = ! empty( $typography_settings['fluid'] );
+
+ if ( ! $should_use_fluid_typography ) {
+ return $preset['size'];
+ }
+
+ // $typography_settings['fluid'] can be a bool or an array. Normalize to array.
+ $fluid_settings = is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array();
+ $layout_settings = isset( $settings['layout'] ) ? $settings['layout'] : array();
+
+ // Defaults.
+ $default_maximum_viewport_width = '1600px';
+ $default_minimum_viewport_width = '320px';
+ $default_minimum_font_size_factor_max = 0.75;
+ $default_minimum_font_size_factor_min = 0.25;
+ $default_scale_factor = 1;
+ $default_minimum_font_size_limit = '14px';
+
+ // Defaults overrides.
+ $minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width;
+ $maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width;
+ if ( isset( $fluid_settings['maxViewportWidth'] ) ) {
+ $maximum_viewport_width = $fluid_settings['maxViewportWidth'];
+ }
+ $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) );
+ $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit;
+
+ // 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'] );
+
+ // Protects against unsupported units.
+ if ( empty( $preferred_size['unit'] ) ) {
+ return $preset['size'];
}
- // 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 );
+ /*
+ * Normalizes the minimum font size limit according to the incoming unit,
+ * in order to perform comparative checks.
+ */
+ $minimum_font_size_limit = wp_get_typography_value_and_unit(
+ $minimum_font_size_limit,
+ array(
+ 'coerce_to' => $preferred_size['unit'],
+ )
+ );
+
+ // Don't enforce minimum font size if a font size has explicitly set a min and max value.
+ if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
+ /*
+ * If a minimum size was not passed to this function
+ * and the user-defined font size is lower than $minimum_font_size_limit,
+ * do not calculate a fluid value.
+ */
+ if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
+ return $preset['size'];
+ }
+ }
+
+ // If no fluid max font size is available use the incoming value.
+ if ( ! $maximum_font_size_raw ) {
+ $maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
+ }
- // 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 );
+ /*
+ * If no minimumFontSize is provided, create one using
+ * the given font size multiplied by the min font size scale factor.
+ */
+ if ( ! $minimum_font_size_raw ) {
+ $preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16;
+
+ /*
+ * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,
+ * that is, how quickly the size factor reaches 0 given increasing font size values.
+ * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.
+ * The scale factor is constrained between min and max values.
+ */
+ $minimum_font_size_factor = min( max( 1 - 0.075 * log( $preferred_font_size_in_px, 2 ), $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max );
+ $calculated_minimum_font_size = round( $preferred_size['value'] * $minimum_font_size_factor, 3 );
+
+ // Only use calculated min font size if it's > $minimum_font_size_limit value.
+ if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
+ $minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
+ } else {
+ $minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
+ }
+ }
+
+ $fluid_font_size_value = wp_get_computed_fluid_typography_value(
+ array(
+ 'minimum_viewport_width' => $minimum_viewport_width,
+ 'maximum_viewport_width' => $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 $preset['size'];
}
// Register the block support.