Skip to content

Commit

Permalink
Editor: use logarithmic scale for fluid typography.
Browse files Browse the repository at this point in the history 
Introduces logarithmic scale factor to calculate a minimum font scale that tapers out as the font size increases.

Props ramonopoly.
Fixes #58523.


git-svn-id: https://develop.svn.wordpress.org/trunk@55947 602fd350-edb4-49c9-b593-d223f7449a82
  • Loading branch information
@tellthemachines
tellthemachines committed Jun 20, 2023
1 parent c790ae4 commit 787de79
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 34 deletions.
30 changes: 19 additions & 11 deletions src/wp-includes/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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'] ) {
Expand Down
100 changes: 77 additions & 23 deletions tests/phpunit/tests/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,7 @@ public function test_should_generate_classname_for_font_family() {
*
* @ticket 56467
* @ticket 57065
* @ticket 58523
*
* @covers ::wp_get_typography_font_size_value
*
Expand Down Expand Up @@ -385,39 +386,39 @@ public function data_generate_font_size_preset_fixtures() {
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
'expected_output' => 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
),

'returns clamp value with em min and max units' => array(
'font_size' => array(
'size' => '1.75em',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
),

'returns clamp value for floats' => array(
'font_size' => array(
'size' => '100.175px',
'size' => '70.175px',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),

'coerces integer to `px` and returns clamp value' => array(
'font_size_preset' => array(
'size' => 33,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
),

'coerces float to `px` and returns clamp value' => array(
'font_size_preset' => array(
'size' => 100.23,
'size' => 70.175,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
),

'returns clamp value when `fluid` is empty array' => array(
Expand All @@ -426,7 +427,7 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => array(),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),

'returns clamp value when `fluid` is `null`' => array(
Expand All @@ -435,7 +436,31 @@ public function data_generate_font_size_preset_fixtures() {
'fluid' => null,
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
),

'returns clamp value where min and max fluid values defined' => array(
'font_size' => array(
'size' => '80px',
'fluid' => array(
'min' => '70px',
'max' => '125px',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(70px, 4.375rem + ((1vw - 3.2px) * 4.297), 125px)',
),

'returns clamp value where max is equal to size' => array(
'font_size' => array(
'size' => '7.8125rem',
'fluid' => array(
'min' => '4.375rem',
'max' => '7.8125rem',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(4.375rem, 4.375rem + ((1vw - 0.2rem) * 4.298), 7.8125rem)',
),

'returns clamp value if min font size is greater than max' => array(
Expand All @@ -447,7 +472,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
),

'returns value with invalid min/max fluid units' => array(
Expand Down Expand Up @@ -487,18 +512,18 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
),

'returns clamp value where no fluid max size is set' => array(
'font_size_preset' => array(
'size' => '28px',
'size' => '50px',
'fluid' => array(
'min' => '2.6rem',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
),

'returns clamp value where no fluid min size is set' => array(
Expand All @@ -509,7 +534,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
),

'should not apply lower bound test when fluid values are set' => array(
Expand All @@ -521,7 +546,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
),

'should not apply lower bound test when only fluid min is set' => array(
Expand All @@ -532,7 +557,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
),

'should not apply lower bound test when only fluid max is set' => array(
Expand All @@ -543,7 +568,7 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
),

'returns clamp value when min and max font sizes are equal' => array(
Expand All @@ -555,7 +580,34 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
),

'should apply scaled min font size for em values when custom min font size is not set' => array(
'font_size' => array(
'size' => '12rem',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
),

'should apply scaled min font size for px values when custom min font size is not set' => array(
'font_size' => array(
'size' => '200px',
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
),

'should not apply scaled min font size for minimum font size when custom min font size is set' => array(
'font_size' => array(
'size' => '200px',
'fluid' => array(
'min' => '100px',
),
),
'should_use_fluid_typography' => true,
'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
),
);
}
Expand All @@ -569,6 +621,7 @@ public function data_generate_font_size_preset_fixtures() {
* @ticket 57065
* @ticket 57529
* @ticket 58522
* @ticket 58523
*
* @covers ::wp_register_typography_support
*
Expand Down Expand Up @@ -629,7 +682,7 @@ public function data_generate_block_supports_font_size_fixtures() {
'returns clamp value using default config' => array(
'font_size_value' => '15px',
'theme_slug' => 'block-theme-child-with-fluid-typography',
'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px);',
'expected_output' => 'font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px);',
),
'returns value when font size <= default min font size bound' => array(
'font_size_value' => '13px',
Expand All @@ -639,7 +692,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.431), 17px);',
'expected_output' => 'font-size:clamp(16px, 1rem + ((1vw - 3.2px) * 0.147), 17px);',
),
'returns value when font size <= custom min font size bound' => array(
'font_size_value' => '15px',
Expand All @@ -656,6 +709,7 @@ public function data_generate_block_supports_font_size_fixtures() {
*
* @ticket 56467
* @ticket 57065
* @ticket 58523
*
* @dataProvider data_generate_replace_inline_font_styles_with_fluid_values_fixtures
*
Expand Down Expand Up @@ -703,7 +757,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:4rem;font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
'font_size_value' => '4rem',
'should_use_fluid_typography' => true,
'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(3rem, 3rem + ((1vw - 0.48rem) * 1.923), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
'expected_output' => '<h2 class="has-vivid-red-background-color has-background has-link-color" style="margin-top:var(--wp--preset--spacing--60);font-size:clamp(2.2rem, 2.2rem + ((1vw - 0.2rem) * 2.25), 4rem);font-style:normal;font-weight:600;letter-spacing:29px;text-decoration:underline;text-transform:capitalize">This is a heading</h2>',
),
'return_content_if_no_inline_font_size_found' => array(
'block_content' => '<p class="has-medium-font-size" style="font-style:normal;font-weight:600;letter-spacing:29px;">A paragraph inside a group</p>',
Expand All @@ -721,13 +775,13 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu
'block_content' => '<p class="has-medium-font-size" style=" font-size: 20px ; ">A paragraph inside a group</p>',
'font_size_value' => '20px',
'should_use_fluid_typography' => true,
'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(15px, 0.938rem + ((1vw - 7.68px) * 0.601), 20px); ">A paragraph inside a group</p>',
'expected_output' => '<p class="has-medium-font-size" style=" font-size:clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.469), 20px); ">A paragraph inside a group</p>',
),
'return_content_with_first_match_replace_only' => array(
'block_content' => "<div class=\"wp-block-group\" style=\"font-size:1.5em\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
'font_size_value' => '1.5em',
'should_use_fluid_typography' => true,
'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(1.125em, 1.125rem + ((1vw - 0.48em) * 0.721), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
'expected_output' => "<div class=\"wp-block-group\" style=\"font-size:clamp(0.984em, 0.984rem + ((1vw - 0.2em) * 0.645), 1.5em);\"> \n \n<p style=\"font-size:1.5em\">A paragraph inside a group</p></div>",
),
);
}
Expand Down

0 comments on commit 787de79

Please sign in to comment.