From 362624176cba41a2dda57c3e89031aa6c3e4decf Mon Sep 17 00:00:00 2001 From: Isabel Brison Date: Thu, 7 Sep 2023 04:28:45 +0000 Subject: [PATCH] Editor: add configurable viewport sizes for fluid typography. Adds options to configure min and max viewport sizes for fluid typography in theme.json settings. Props ramonopoly. Fixes #59048. git-svn-id: https://develop.svn.wordpress.org/trunk@56535 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-includes/block-supports/typography.php | 22 +++++++++++++------ .../theme.json | 4 +++- .../tests/block-supports/typography.php | 3 ++- 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/wp-includes/block-supports/typography.php b/src/wp-includes/block-supports/typography.php index 34345ca4ec..b31464c12d 100644 --- a/src/wp-includes/block-supports/typography.php +++ b/src/wp-includes/block-supports/typography.php @@ -471,6 +471,7 @@ function wp_get_computed_fluid_typography_value( $args = array() ) { * @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, and logarithmic scale factor to calculate minimum font scale. + * @since 6.4.0 Added configurable min and max viewport width values to the typography.fluid theme.json schema. * * @param array $preset { * Required. fontSizes preset value as seen in theme.json. @@ -517,14 +518,21 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph : array(); // Defaults. - $default_maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : '1600px'; + $default_maximum_viewport_width = '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'; + $default_minimum_font_size_limit = '14px'; + + // Defaults overrides. + $minimum_viewport_width = isset( $fluid_settings['minViewportWidth'] ) ? $fluid_settings['minViewportWidth'] : $default_minimum_viewport_width; + $maximum_viewport_width = isset( $layout_settings['wideSize'] ) && ! empty( wp_get_typography_value_and_unit( $layout_settings['wideSize'] ) ) ? $layout_settings['wideSize'] : $default_maximum_viewport_width; + if ( isset( $fluid_settings['maxViewportWidth'] ) ) { + $maximum_viewport_width = $fluid_settings['maxViewportWidth']; + } + $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( wp_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); + $minimum_font_size_limit = $has_min_font_size ? $fluid_settings['minFontSize'] : $default_minimum_font_size_limit; // Font sizes. $fluid_font_size_settings = isset( $preset['fluid'] ) ? $preset['fluid'] : null; @@ -551,7 +559,7 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph * in order to perform comparative checks. */ $minimum_font_size_limit = wp_get_typography_value_and_unit( - $default_minimum_font_size_limit, + $minimum_font_size_limit, array( 'coerce_to' => $preferred_size['unit'], ) @@ -600,8 +608,8 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph $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_viewport_width' => $minimum_viewport_width, + 'maximum_viewport_width' => $maximum_viewport_width, 'minimum_font_size' => $minimum_font_size_raw, 'maximum_font_size' => $maximum_font_size_raw, 'scale_factor' => $default_scale_factor, 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 73864f2920..65ed480f20 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 @@ -7,7 +7,9 @@ }, "typography": { "fluid": { - "minFontSize": "16px" + "minFontSize": "16px", + "maxViewportWidth": "1200px", + "minViewportWidth": "640px" } } } diff --git a/tests/phpunit/tests/block-supports/typography.php b/tests/phpunit/tests/block-supports/typography.php index c9ed84fd12..4738f1b8ae 100644 --- a/tests/phpunit/tests/block-supports/typography.php +++ b/tests/phpunit/tests/block-supports/typography.php @@ -622,6 +622,7 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase { * @ticket 57529 * @ticket 58522 * @ticket 58523 + * @ticket 59048 * * @covers ::wp_register_typography_support * @@ -692,7 +693,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 - 3.2px) * 0.147), 17px);', + 'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 6.4px) * 0.179), 17px);', ), 'returns value when font size <= custom min font size bound' => array( 'font_size_value' => '15px',