From 37caa4b9c260174e65c1f396979fbc992f402001 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 16 Jan 2024 14:36:50 +1100 Subject: [PATCH 1/4] When the same value is provided for min and max viewport widths in the fluid typography config, set the linear scale factor to default `1`. To avoid dividing by zero values. PHP will throw an error and, besides, the fluid typography clamp rule needs valid max and min viewport constraints. --- src/wp-includes/block-supports/typography.php | 12 ++++++++---- tests/phpunit/tests/block-supports/typography.php | 10 ++++++++++ 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index bccde4f5c0221..647cd505d3a1b 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -468,12 +468,16 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { 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_denominator = $maximum_viewport_width['value'] - $minimum_viewport_width['value']; + /* - * Build CSS rule. - * Borrowed from https://websemantics.uk/tools/responsive-font-calculator/. + * If the linear factor denominator is 0, we cannot calculate a fluid value. + * Setting $linear_factor to 0 will cause $linear_factor_scaled to default to 1. */ - $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 = ! empty( $linear_factor_denominator ) ? 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $linear_factor_denominator ) ) : 0; $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)"; diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index 9c547b4e5c6b4..f1d681409d448 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -951,6 +951,16 @@ public function data_wp_get_computed_fluid_typography_value() { ), 'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)', ), + 'returns default linear factor of `1` when maximum and minimum viewport width are equal' => array( + 'args' => array( + 'minimum_viewport_width' => '800px', + 'maximum_viewport_width' => '800px', + 'minimum_font_size' => '50px', + 'maximum_font_size' => '100px', + 'scale_factor' => 1, + ), + 'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 8px) * 1), 100px)', + ), 'returns `null` when `maximum_viewport_width` is an unsupported unit' => array( 'args' => array( 'minimum_viewport_width' => '320px', From ca77044162763076aadfc9d2d65d40a41888e563 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 16 Jan 2024 15:10:26 +1100 Subject: [PATCH 2/4] Annotations --- src/wp-includes/block-supports/typography.php | 1 + tests/phpunit/tests/block-supports/typography.php | 1 + 2 files changed, 2 insertions(+) diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 647cd505d3a1b..2a9668497c91e 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -398,6 +398,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { * * @since 6.1.0 * @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values. + * @since 6.5.0 Use linear scale factor fallback of `1` to avoid division by zero. * @access private * * @param array $args { diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index f1d681409d448..d81ff9b4d36da 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -913,6 +913,7 @@ public function data_invalid_size_wp_get_typography_value_and_unit() { * Tests computed font size values. * * @ticket 58522 + * @ticket 60263 * * @covers ::wp_get_computed_fluid_typography_value * From aa2061993a72ef9eb18dd3a6c49392a53d3ca6fa Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 16 Jan 2024 16:47:10 +1100 Subject: [PATCH 3/4] Return null when min and max viewport subtraction is zero to avoid division by zero --- src/wp-includes/block-supports/typography.php | 18 +++++++++--------- .../tests/block-supports/typography.php | 4 ++-- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 2a9668497c91e..6bbc3a7a33c71 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -398,7 +398,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) { * * @since 6.1.0 * @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values. - * @since 6.5.0 Use linear scale factor fallback of `1` to avoid division by zero. + * @since 6.5.0 Returns early when min and max viewport subtraction is zero to avoid division by zero. * @access private * * @param array $args { @@ -469,16 +469,16 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { 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; + // 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; + } - /* - * If the linear factor denominator is 0, we cannot calculate a fluid value. - * Setting $linear_factor to 0 will cause $linear_factor_scaled to default to 1. - */ - $linear_factor = ! empty( $linear_factor_denominator ) ? 100 * ( ( $maximum_font_size['value'] - $minimum_font_size['value'] ) / ( $linear_factor_denominator ) ) : 0; + // 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)"; diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index d81ff9b4d36da..1eb29e14937ad 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -952,7 +952,7 @@ public function data_wp_get_computed_fluid_typography_value() { ), 'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)', ), - 'returns default linear factor of `1` when maximum and minimum viewport width are equal' => array( + 'returns `null` when maximum and minimum viewport width are equal' => array( 'args' => array( 'minimum_viewport_width' => '800px', 'maximum_viewport_width' => '800px', @@ -960,7 +960,7 @@ public function data_wp_get_computed_fluid_typography_value() { 'maximum_font_size' => '100px', 'scale_factor' => 1, ), - 'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 8px) * 1), 100px)', + 'expected_output' => null, ), 'returns `null` when `maximum_viewport_width` is an unsupported unit' => array( 'args' => array( From aea611a212a4cedc14397d9deaacce6495ce4d25 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 16 Jan 2024 16:49:49 +1100 Subject: [PATCH 4/4] Comment --- src/wp-includes/block-supports/typography.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 6bbc3a7a33c71..e7d081c937ee4 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -475,8 +475,10 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { return null; } - // 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'] ) / ( $linear_factor_denominator ) ); $linear_factor_scaled = round( $linear_factor * $scale_factor, 3 );