Skip to content

Commit

Permalink
Editor: use layout.wideSize as max viewport width.
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@tellthemachines
tellthemachines committed Jun 20, 2023
1 parent da008c7 commit c790ae4
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 3 deletions.
14 changes: 12 additions & 2 deletions src/wp-includes/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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/.
Expand All @@ -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.
Expand All @@ -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'] ) )
Expand All @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions tests/phpunit/data/themedir1/block-theme-child-with-fluid-typography-config/theme.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@
"version": 2,
"settings": {
"appearanceTools": true,
"layout": {
"wideSize": "1000px"
},
"typography": {
"fluid": {
"minFontSize": "16px"
Expand Down
89 changes: 88 additions & 1 deletion tests/phpunit/tests/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,6 +568,7 @@ public function data_generate_font_size_preset_fixtures() {
* @ticket 56467
* @ticket 57065
* @ticket 57529
* @ticket 58522
*
* @covers ::wp_register_typography_support
*
Expand Down Expand Up @@ -638,7 +639,7 @@ public function data_generate_block_supports_font_size_fixtures() {
'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',
Expand Down Expand Up @@ -847,4 +848,90 @@ public function data_invalid_size_wp_get_typography_value_and_unit() {
'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,
),
);
}
}

0 comments on commit c790ae4

Please sign in to comment.