vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2025-10-16 12:05:38 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: add configurable viewport sizes for fluid typography.

Browse Source 
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
This commit is contained in:
Isabel Brison 2023-09-07 04:28:45 +00:00
parent 9f5dd61a6e
commit 362624176c
3 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/wp-includes/block-supports/typography.php
View File

@ -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,

4
tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
View File

@ -7,7 +7,9 @@
},
"typography": {
"fluid": {
"minFontSize": "16px"
"minFontSize": "16px",
"maxViewportWidth": "1200px",
"minViewportWidth": "640px"
}
}
}

3
tests/phpunit/tests/block-supports/typography.php
View File

@ -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',