From f704a9e62b15796a4cca68e85941fad816bd7fd7 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 7 Sep 2022 14:46:32 +1000 Subject: [PATCH] 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)', + ), + ); + } }