vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: use layout.wideSize as max viewport width.

Browse Source 
Use the value of `layout.wideSize` as the maximum viewport width for fluid font size calculations.

Props ramonopoly.

Fixes #58522.



git-svn-id: https://develop.svn.wordpress.org/trunk@55946 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Isabel Brison
2023-06-20 05:26:47 +00:00
parent da008c74a7
commit c790ae481b
3 changed files with 103 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/block-supports/typography.php
+12 -2
View File
@@ -368,6 +368,7 @@ function wp_get_typography_value_and_unit( $raw_value, $options = array() ) {
* width and min/max font sizes.
*
* @since 6.1.0
* @since 6.3.0 Checks for unsupported min/max viewport values that cause invalid clamp values.
* @access private
*
* @param array $args {
@@ -433,6 +434,11 @@ function wp_get_computed_fluid_typography_value( $args = array() ) {
)
);
// Protects against unsupported units in min and max viewport widths.
if ( ! $minimum_viewport_width || ! $maximum_viewport_width ) {
return null;
}
/*
* Build CSS rule.
* Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
@@ -454,6 +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.
*
* @param array $preset {
* Required. fontSizes preset value as seen in theme.json.
@@ -480,7 +487,10 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
}
// Checks if fluid font sizes are activated.
$typography_settings = wp_get_global_settings( array( 'typography' ) );
$global_settings = wp_get_global_settings();
$typography_settings = isset( $global_settings['typography'] ) ? $global_settings['typography'] : array();
$layout_settings = isset( $global_settings['layout'] ) ? $global_settings['layout'] : array();
if (
isset( $typography_settings['fluid'] ) &&
( true === $typography_settings['fluid'] || is_array( $typography_settings['fluid'] ) )
@@ -497,7 +507,7 @@ function wp_get_typography_font_size_value( $preset, $should_use_fluid_typograph
: array();
// Defaults.
$default_maximum_viewport_width = '1600px';
$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;
tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
+3
View File
@@ -2,6 +2,9 @@
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"wideSize": "1000px"
},
"typography": {
"fluid": {
"minFontSize": "16px"
tests/phpunit/tests/block-supports/typography.php
+88 -1
View File
@@ -568,6 +568,7 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
* @ticket 56467
* @ticket 57065
* @ticket 57529
* @ticket 58522
*
* @covers ::wp_register_typography_support
*
@@ -638,7 +639,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 - 7.68px) * 0.12), 17px);',
'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 7.68px) * 0.431), 17px);',
),
'returns value when font size <= custom min font size bound' => array(
'font_size_value' => '15px',
@@ -847,4 +848,90 @@ class Tests_Block_Supports_Typography extends WP_UnitTestCase {
'size: array' => array( array( '10' ) ),
);
}
/**
* Tests computed font size values.
*
* @ticket 58522
*
* @covers ::wp_get_computed_fluid_typography_value
*
* @dataProvider data_wp_get_computed_fluid_typography_value
*
* @param array $args {
* Optional. An associative array of values to calculate a fluid formula for font size. Default is empty array.
*
* @type string $maximum_viewport_width Maximum size up to which type will have fluidity.
* @type string $minimum_viewport_width Minimum viewport size from which type will have fluidity.
* @type string $maximum_font_size Maximum font size for any clamp() calculation.
* @type string $minimum_font_size Minimum font size for any clamp() calculation.
* @type int $scale_factor A scale factor to determine how fast a font scales within boundaries.
* }
* @param string $expected_output Expected value of style property from gutenberg_apply_typography_support().
*/
public function test_wp_get_computed_fluid_typography_value( $args, $expected_output ) {
$actual = wp_get_computed_fluid_typography_value( $args );
$this->assertSame( $expected_output, $actual );
}
/**
* Data provider.
*
* @return array
*/
public function data_wp_get_computed_fluid_typography_value() {
return array(
'returns clamped value with valid args' => array(
'args' => array(
'minimum_viewport_width' => '320px',
'maximum_viewport_width' => '1000px',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => 'clamp(50px, 3.125rem + ((1vw - 3.2px) * 7.353), 100px)',
),
'returns `null` when `maximum_viewport_width` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320px',
'maximum_viewport_width' => 'calc(100% - 60px)',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `minimum_viewport_width` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => 'calc(100% - 60px)',
'maximum_viewport_width' => '1000px',
'minimum_font_size' => '50px',
'maximum_font_size' => '100px',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `minimum_font_size` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320em',
'maximum_viewport_width' => '1000em',
'minimum_font_size' => '10vw',
'maximum_font_size' => '100em',
'scale_factor' => 1,
),
'expected_output' => null,
),
'returns `null` when `maximum_font_size` is an unsupported unit' => array(
'args' => array(
'minimum_viewport_width' => '320em',
'maximum_viewport_width' => '1000em',
'minimum_font_size' => '50px',
'maximum_font_size' => '100%',
'scale_factor' => 1,
),
'expected_output' => null,
),
);
}
}