diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 550eb7fb73..3dae8955e6 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -368,6 +368,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { * 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. * @access private * * @param array $args { @@ -433,6 +434,11 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { ) ); + // Protects against unsupported units in min and max viewport widths. + if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) { + return null; + } + /* * Build CSS rule. * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/. @@ -454,6 +460,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { * @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. * * @param array $preset { * Required. fontSizes preset value as seen in theme.json. @@ -480,7 +487,10 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph } // Checks if fluid font sizes are activated. - $typography_settings = wp_get_global_settings( array( 'typography' ) ); + $global_settings = wp_get_global_settings(); + $typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array(); + $layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array(); + if ( isset( $typography_settings['fluid'] ) && ( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) ) @@ -497,7 +507,7 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph : array(); // Defaults. - $default_maximum_viewport_width = '1600px'; + $default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '1600px'; $default_minimum_viewport_width = '768px'; $default_minimum_font_size_factor = 0.75; $default_scale_factor = 1; diff --git a/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json b/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json index d0ec32d9ca..73864f2920 100644 --- a/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json +++ b/tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json @@ -2,6 +2,9 @@ "version": 2, "settings": { "appearanceTools": true, + "layout": { + "wideSize": "1000px" + }, "typography": { "fluid": { "minFontSize": "16px" diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index 6cbd76788d..b396eb41db 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -568,6 +568,7 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase { * @ticket 56467 * @ticket 57065 * @ticket 57529 + * @ticket 58522 * * @covers ::wp_register_typography_support * @@ -638,7 +639,7 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase { 'returns clamp value using custom fluid config' => array( 'font_size_value' => '17px', 'theme_slug' => 'block-theme-child-with-fluid-typography-config', - 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px);', + 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);', ), 'returns value when font size <= custom min font size bound' => array( 'font_size_value' => '15px', @@ -847,4 +848,90 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase { 'size: array' => array( array( '10' ) ), ); } + + /** + * Tests computed font size values. + * + * @ticket 58522 + * + * @covers ::wp_get_computed_fluid_typography_value + * + * @dataProvider data_wp_get_computed_fluid_typography_value + * + * @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. + * } + * @param string $expected_output Expected value of style property from gutenberg_apply_typography_support(). + */ + public function test_wp_get_computed_fluid_typography_value( $args, $expected_output ) { + $actual = wp_get_computed_fluid_typography_value( $args ); + $this->assertSame( $expected_output, $actual ); + } + + /** + * Data provider. + * + * @return array + */ + public function data_wp_get_computed_fluid_typography_value() { + return array( + 'returns clamped value with valid args' => array( + 'args' => array( + 'minimum_viewport_width' => '320px', + 'maximum_viewport_width' => '1000px', + 'minimum_font_size' => '50px', + 'maximum_font_size' => '100px', + 'scale_factor' => 1, + ), + 'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)', + ), + 'returns `null` when `maximum_viewport_width` is an unsupported unit' => array( + 'args' => array( + 'minimum_viewport_width' => '320px', + 'maximum_viewport_width' => 'calc(100% - 60px)', + 'minimum_font_size' => '50px', + 'maximum_font_size' => '100px', + 'scale_factor' => 1, + ), + 'expected_output' => null, + ), + 'returns `null` when `minimum_viewport_width` is an unsupported unit' => array( + 'args' => array( + 'minimum_viewport_width' => 'calc(100% - 60px)', + 'maximum_viewport_width' => '1000px', + 'minimum_font_size' => '50px', + 'maximum_font_size' => '100px', + 'scale_factor' => 1, + ), + 'expected_output' => null, + ), + 'returns `null` when `minimum_font_size` is an unsupported unit' => array( + 'args' => array( + 'minimum_viewport_width' => '320em', + 'maximum_viewport_width' => '1000em', + 'minimum_font_size' => '10vw', + 'maximum_font_size' => '100em', + 'scale_factor' => 1, + ), + 'expected_output' => null, + ), + 'returns `null` when `maximum_font_size` is an unsupported unit' => array( + 'args' => array( + 'minimum_viewport_width' => '320em', + 'maximum_viewport_width' => '1000em', + 'minimum_font_size' => '50px', + 'maximum_font_size' => '100%', + 'scale_factor' => 1, + ), + 'expected_output' => null, + ), + ); + } } +