From 7b4df6bfd6df1b662eb502dad1419257e0d30f56 Mon Sep 17 00:00:00 2001 From: isabel_brison Date: Tue, 20 Jun 2023 08:00:19 +0000 Subject: [PATCH] Editor: use logarithmic scale for fluid typography. Introduces logarithmic scale factor to calculate a minimum font scale that tapers out as the font size increases. Props ramonopoly. Fixes #58523. Built from https://develop.svn.wordpress.org/trunk@55947 git-svn-id: http://core.svn.wordpress.org/trunk@55459 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/block-supports/typography.php | 30 ++++++++++++++--------- wp-includes/version.php | 2 +- 2 files changed, 20 insertions(+), 12 deletions(-) diff --git a/wp-includes/block-supports/typography.php b/wp-includes/block-supports/typography.php index 3dae8955e6..d90b6abb78 100644 --- a/wp-includes/block-supports/typography.php +++ b/wp-includes/block-supports/typography.php @@ -460,7 +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. + * @since 6.3.0 Using layout.wideSize as max viewport width, and logarithmic scale factor to calculate minimum font scale. * * @param array $preset { * Required. fontSizes preset value as seen in theme.json. @@ -507,12 +507,14 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph : array(); // Defaults. - $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; - $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); - $default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px'; + $default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) ? $layout_settings['wideSize'] : '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; + $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && + ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); + $default_minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : '14px'; // Font sizes. $fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null; @@ -567,10 +569,16 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph * the given font size multiplied by the min font size scale factor. */ if ( ! $minimum_font_size_raw ) { - $calculated_minimum_font_size = round( - $preferred_size['value'] * $default_minimum_font_size_factor, - 3 - ); + $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'] ) { diff --git a/wp-includes/version.php b/wp-includes/version.php index cb4aeb54e8..5bec0c1b32 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -16,7 +16,7 @@ * * @global string $wp_version */ -$wp_version = '6.3-alpha-55946'; +$wp_version = '6.3-alpha-55947'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.