Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fluid typography: do not calculate fluid font size when min and max viewport widths are equal #5875

Closed
wants to merge 4 commits into from
Closed

Fluid typography: do not calculate fluid font size when min and max viewport widths are equal #5875

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37caa4b
When the same value is provided for min and max viewport widths in th…
ramonjd Jan 16, 2024
ca77044
Annotations
ramonjd Jan 16, 2024
aa20619
Return null when min and max viewport subtraction is zero to avoid di…
ramonjd Jan 16, 2024
aea611a
Comment
ramonjd Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/wp-includes/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 Returns early when min and max viewport subtraction is zero to avoid division by zero.
* @access private
*
* @param array $args {
Expand Down Expand Up @@ -468,12 +469,18 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
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'] ) / ( $maximum_viewport_width['value'] - $minimum_viewport_width['value'] ) );
$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)";
Expand Down
11 changes: 11 additions & 0 deletions tests/phpunit/tests/block-supports/typography.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
*
Expand Down Expand Up @@ -951,6 +952,16 @@ public function data_wp_get_computed_fluid_typography_value() {
),
'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)',
),
'returns `null` 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' => null,
),
'returns `null` when `maximum_viewport_width` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320px',
Expand Down
Loading