From be6575dbdabb87734a31f0cd779707b5dd99c224 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 22 Mar 2023 12:34:48 +1100 Subject: [PATCH 01/10] Fluid Typography: Try adding a ceiling to the calculated minimum font size --- lib/block-supports/typography.php | 14 ++++++++++++++ .../src/components/font-sizes/fluid-utils.js | 18 +++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index a7a26423e32d6..f362782db979e 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -516,6 +516,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty ) ); + // Sets a ceiling for the minimum font size. + $minimum_font_size_ceiling = gutenberg_get_typography_value_and_unit( + '64px', + array( + 'coerce_to' => $preferred_size['unit'], + ) + ); + // Don't enforce minimum font size if a font size has explicitly set a min and max value. if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) { /* @@ -540,6 +548,12 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty if ( ! $minimum_font_size_raw ) { $calculated_minimum_font_size = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ); + // Ensure calculated minimum font size is not greater than the ceiling. + // This is to prevent the font size from being too large in smaller viewports. + if ( $calculated_minimum_font_size > $minimum_font_size_ceiling['value'] ) { + $calculated_minimum_font_size = $minimum_font_size_ceiling['value']; + } + // 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'] ) { $minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit']; diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index efcf443bb15cc..616ec5493176c 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -80,6 +80,14 @@ export function getComputedFluidTypographyValue( { } ); + // Sets a ceiling for the minimum font size. + const minimumFontSizeCeilingParsed = getTypographyValueAndUnit( + '64px', + { + coerceTo: fontSizeParsed.unit, + } + ); + // Don't enforce minimum font size if a font size has explicitly set a min and max value. if ( !! minimumFontSizeLimitParsed?.value && @@ -106,11 +114,19 @@ export function getComputedFluidTypographyValue( { * the given font size multiplied by the min font size scale factor. */ if ( ! minimumFontSize ) { - const calculatedMinimumFontSize = roundToPrecision( + let calculatedMinimumFontSize = roundToPrecision( fontSizeParsed.value * minimumFontSizeFactor, 3 ); + // Ensure calculated minimum font size is not greater than the ceiling. + // This is to prevent the font size from being too large in smaller viewports. + if ( + calculatedMinimumFontSize > minimumFontSizeCeilingParsed.value + ) { + calculatedMinimumFontSize = minimumFontSizeCeilingParsed.value; + } + // Only use calculated min font size if it's > $minimum_font_size_limit value. if ( !! minimumFontSizeLimitParsed?.value && From 19579ca7b35ddccb42af7c59d2efc5b098d528cb Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 22 Mar 2023 13:57:50 +1100 Subject: [PATCH 02/10] Update existing tests, add a couple of additional tests to cover the ceiling on the minimum font size --- .../global-styles/test/typography-utils.js | 34 ++++++++++++++++--- phpunit/block-supports/typography-test.php | 24 ++++++++++--- 2 files changed, 50 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index 9d0213cb53e55..9fded3ec40986 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -107,13 +107,13 @@ describe( 'typography utils', () => { { message: 'should return clamp value for floats', preset: { - size: '100.175px', + size: '70.175px', }, typographySettings: { fluid: true, }, expected: - 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)', + 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', }, { @@ -133,14 +133,14 @@ describe( 'typography utils', () => { { message: 'should coerce float to `px` and returns clamp value', preset: { - size: 100.23, + size: 70.175, fluid: true, }, typographySettings: { fluid: true, }, expected: - 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)', + 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', }, { @@ -382,6 +382,32 @@ describe( 'typography utils', () => { }, expected: '15px', }, + + { + message: + 'should use ceiling of 4rem for minimum font size when custom min font size is not set', + preset: { + size: '12rem', + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(4rem, 4rem + ((1vw - 0.48rem) * 15.385), 12rem)', + }, + + { + message: + 'should use ceiling of 64px for minimum font size when custom min font size is not set', + preset: { + size: '200px', + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', + }, ].forEach( ( { message, preset, typographySettings, expected } ) => { it( `${ message }`, () => { expect( diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 1b9b6f97c63f6..ad7ab640932b8 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -392,10 +392,10 @@ public function data_generate_font_size_preset_fixtures() { '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(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', ), 'coerces integer to `px` and returns clamp value' => array( @@ -408,10 +408,10 @@ public function data_generate_font_size_preset_fixtures() { 'coerces float to `px` and returns clamp value' => array( 'font_size' => 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(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', ), 'returns clamp value when `fluid` is empty array' => array( @@ -551,6 +551,22 @@ public function data_generate_font_size_preset_fixtures() { 'should_use_fluid_typography' => true, 'expected_output' => 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)', ), + + 'should use ceiling of 4rem for minimum font size when custom min font size is not set' => array( + 'font_size' => array( + 'size' => '12rem', + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(4rem, 4rem + ((1vw - 0.48rem) * 15.385), 12rem)', + ), + + 'should use ceiling of 64px for minimum font size when custom min font size is not set' => array( + 'font_size' => array( + 'size' => '200px', + ), + 'should_use_fluid_typography' => true, + 'expected_output' => 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', + ), ); } From e00268d1f8c093bb680392ad93444c63af5ad093 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 22 Mar 2023 14:02:23 +1100 Subject: [PATCH 03/10] Add test to ensure ceiling is skipped when min font size is provided --- .../global-styles/test/typography-utils.js | 16 ++++++++++++++++ phpunit/block-supports/typography-test.php | 11 +++++++++++ 2 files changed, 27 insertions(+) diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index 9fded3ec40986..426dd346fab6a 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -408,6 +408,22 @@ describe( 'typography utils', () => { expected: 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', }, + + { + message: + 'should not use ceiling for minimum font size when custom min font size is set', + preset: { + size: '200px', + fluid: { + min: '100px', + }, + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)', + }, ].forEach( ( { message, preset, typographySettings, expected } ) => { it( `${ message }`, () => { expect( diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index ad7ab640932b8..7208d365529b6 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -567,6 +567,17 @@ public function data_generate_font_size_preset_fixtures() { 'should_use_fluid_typography' => true, 'expected_output' => 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', ), + + 'should not use ceiling 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 - 7.68px) * 12.019), 200px)', + ), ); } From ce78698e0f04918b1f65021faa27e3be6ae35b5f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 22 Mar 2023 14:05:00 +1100 Subject: [PATCH 04/10] Fix whitespace issue --- phpunit/block-supports/typography-test.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 7208d365529b6..37192e8ec195d 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -554,7 +554,7 @@ public function data_generate_font_size_preset_fixtures() { 'should use ceiling of 4rem for minimum font size when custom min font size is not set' => array( 'font_size' => array( - 'size' => '12rem', + 'size' => '12rem', ), 'should_use_fluid_typography' => true, 'expected_output' => 'clamp(4rem, 4rem + ((1vw - 0.48rem) * 15.385), 12rem)', @@ -562,7 +562,7 @@ public function data_generate_font_size_preset_fixtures() { 'should use ceiling of 64px for minimum font size when custom min font size is not set' => array( 'font_size' => array( - 'size' => '200px', + 'size' => '200px', ), 'should_use_fluid_typography' => true, 'expected_output' => 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', From a710eca1a8d7b617f6adf300c61af79029f00125 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 24 Mar 2023 16:53:39 +1100 Subject: [PATCH 05/10] Try reducing the default minimum viewport width --- lib/block-supports/typography.php | 2 +- packages/block-editor/src/components/font-sizes/fluid-utils.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index f362782db979e..bdc3d365a58af 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -482,7 +482,7 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty // Defaults. $default_maximum_viewport_width = '1600px'; - $default_minimum_viewport_width = '768px'; + $default_minimum_viewport_width = '320px'; $default_minimum_font_size_factor = 0.75; $default_scale_factor = 1; $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_get_typography_value_and_unit( $fluid_settings['minFontSize'] ) ); diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index 616ec5493176c..da53fbfebbac4 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -6,7 +6,7 @@ // Defaults. const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px'; -const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px'; +const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px'; const DEFAULT_SCALE_FACTOR = 1; const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75; const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; From 763b2696aa977ced9b3de33e3dfd6435b4ea927c Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Apr 2023 13:22:23 +1000 Subject: [PATCH 06/10] In this commit, we use a logarithmic scale factor to calculate a minimum font scale that tapers out as the font size increases. The calculation is only performed where there no min font size is passed to the fluid font size methods. The min font scale factor is constrained by min and max values. Tests are updated to reflect the new clamp values. Docs are updated to reflect API change in JS function (removing minimumFontSizeFactor arg) --- lib/block-supports/typography.php | 34 +++++------ packages/block-editor/README.md | 6 +- .../src/components/font-sizes/fluid-utils.js | 57 +++++++++---------- .../components/font-sizes/test/fluid-utils.js | 21 ++----- .../global-styles/test/typography-utils.js | 51 ++++++++--------- phpunit/block-supports/typography-test.php | 54 +++++++++--------- 6 files changed, 100 insertions(+), 123 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index bdc3d365a58af..0e302b1678d84 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -481,12 +481,13 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty $fluid_settings = isset( $typography_settings['fluid'] ) && is_array( $typography_settings['fluid'] ) ? $typography_settings['fluid'] : array(); // Defaults. - $default_maximum_viewport_width = '1600px'; - $default_minimum_viewport_width = '320px'; - $default_minimum_font_size_factor = 0.75; - $default_scale_factor = 1; - $has_min_font_size = isset( $fluid_settings['minFontSize'] ) && ! empty( gutenberg_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 = '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( gutenberg_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; @@ -516,14 +517,6 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty ) ); - // Sets a ceiling for the minimum font size. - $minimum_font_size_ceiling = gutenberg_get_typography_value_and_unit( - '64px', - array( - 'coerce_to' => $preferred_size['unit'], - ) - ); - // Don't enforce minimum font size if a font size has explicitly set a min and max value. if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) { /* @@ -546,13 +539,12 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty * 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 ); - - // Ensure calculated minimum font size is not greater than the ceiling. - // This is to prevent the font size from being too large in smaller viewports. - if ( $calculated_minimum_font_size > $minimum_font_size_ceiling['value'] ) { - $calculated_minimum_font_size = $minimum_font_size_ceiling['value']; - } + $preferred_font_size_in_px = $preferred_size['unit'] === 'px' ? $preferred_size['value'] : $preferred_size['value'] * 16; + // Logarithmic scale factor: Min font scale that tapers out as the font size increases. + $minimum_font_size_factor = 1 - 0.12 * log( $preferred_font_size_in_px ); + // Constrains the minimum font size factor between min and max values. + $minimum_font_size_factor = min( max( $minimum_font_size_factor, $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'] ) { diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index fd0b0b375bb9b..bc602ed55329e 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -398,7 +398,7 @@ _Returns_ Computes a fluid font-size value that uses clamp(). A minimum and maximum font size OR a single font size can be specified. -If a single font size is specified, it is scaled up and down by minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and maximum sizes. +If a single font size is specified, it is scaled up and down using a logarithmic scale. _Usage_ @@ -423,7 +423,6 @@ _Parameters_ - _args.maximumFontSize_ `?string`: Maximum font size for any clamp() calculation. Optional. - _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional. - _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional. -- _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional. - _args.minimumFontSizeLimit_ `?string`: The smallest a calculated font size may be. Optional. _Returns_ @@ -432,7 +431,8 @@ _Returns_ ### getFontSize -Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. +Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. +If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. _Parameters_ diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index da53fbfebbac4..b23647b3aa15f 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -8,16 +8,15 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px'; const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px'; const DEFAULT_SCALE_FACTOR = 1; -const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75; +const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25; +const DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75; const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; /** * Computes a fluid font-size value that uses clamp(). A minimum and maximum * font size OR a single font size can be specified. * - * If a single font size is specified, it is scaled up and down by - * minimumFontSizeFactor and maximumFontSizeFactor to arrive at the minimum and - * maximum sizes. + * If a single font size is specified, it is scaled up and down using a logarithmic scale. * * @example * ```js @@ -33,14 +32,13 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px'; * ``` * * @param {Object} args - * @param {?string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. - * @param {?string} args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified. - * @param {string|number} [args.fontSize] Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. - * @param {?string} args.maximumFontSize Maximum font size for any clamp() calculation. Optional. - * @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional. - * @param {?number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. - * @param {?number} args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional. - * @param {?string} args.minimumFontSizeLimit The smallest a calculated font size may be. Optional. + * @param {?string} args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified. + * @param {?string} args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified. + * @param {string|number} [args.fontSize] Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified. + * @param {?string} args.maximumFontSize Maximum font size for any clamp() calculation. Optional. + * @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional. + * @param {?number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional. + * @param {?string} args.minimumFontSizeLimit The smallest a calculated font size may be. Optional. * * @return {string|null} A font-size value using clamp(). */ @@ -51,7 +49,6 @@ export function getComputedFluidTypographyValue( { minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH, maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH, scaleFactor = DEFAULT_SCALE_FACTOR, - minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR, minimumFontSizeLimit, } ) { // Validate incoming settings and set defaults. @@ -80,14 +77,6 @@ export function getComputedFluidTypographyValue( { } ); - // Sets a ceiling for the minimum font size. - const minimumFontSizeCeilingParsed = getTypographyValueAndUnit( - '64px', - { - coerceTo: fontSizeParsed.unit, - } - ); - // Don't enforce minimum font size if a font size has explicitly set a min and max value. if ( !! minimumFontSizeLimitParsed?.value && @@ -114,19 +103,27 @@ export function getComputedFluidTypographyValue( { * the given font size multiplied by the min font size scale factor. */ if ( ! minimumFontSize ) { - let calculatedMinimumFontSize = roundToPrecision( + const fontSizeValueInPx = + fontSizeParsed.unit === 'px' + ? fontSizeParsed.value + : fontSizeParsed.value * 16; + + // Logarithmic scale factor: Min font scale that tapers out as the font size increases. + // And constrains the minimum font size factor between min and max values. + const minimumFontSizeFactor = Math.min( + Math.max( + 1 - 0.12 * Math.log( fontSizeValueInPx ), + DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN + ), + DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX + ); + + // Calculates the minimum font size. + const calculatedMinimumFontSize = roundToPrecision( fontSizeParsed.value * minimumFontSizeFactor, 3 ); - // Ensure calculated minimum font size is not greater than the ceiling. - // This is to prevent the font size from being too large in smaller viewports. - if ( - calculatedMinimumFontSize > minimumFontSizeCeilingParsed.value - ) { - calculatedMinimumFontSize = minimumFontSizeCeilingParsed.value; - } - // Only use calculated min font size if it's > $minimum_font_size_limit value. if ( !! minimumFontSizeLimitParsed?.value && diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js index 15805431a959f..5c38b5096a523 100644 --- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js @@ -24,7 +24,7 @@ describe( 'getComputedFluidTypographyValue()', () => { maximumFontSize: '45px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)' + 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 1.953), 45px)' ); } ); @@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => { fontSize: '30px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)' + 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)' ); } ); @@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => { fontSize: '30px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)' + 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)' ); } ); @@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => { maximumViewPortWidth: '1000px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)' + 'clamp(17.756px, 1.11rem + ((1vw - 5px) * 2.449), 30px)' ); } ); @@ -63,18 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => { scaleFactor: '2', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)' - ); - } ); - - it( 'should return a fluid font size when given a min and max font size factor', () => { - const fluidTypographyValues = getComputedFluidTypographyValue( { - fontSize: '30px', - minimumFontSizeFactor: '0.5', - maximumFontSizeFactor: '2', - } ); - expect( fluidTypographyValues ).toBe( - 'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)' + 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 1.913), 30px)' ); } ); diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index 426dd346fab6a..d8847ab8664d6 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -89,11 +89,11 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)', + 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)', }, { - message: 'should return clamp value with eem min and max units', + message: 'should return clamp value with em min and max units', preset: { size: '1.75em', }, @@ -101,7 +101,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)', + 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)', }, { @@ -113,7 +113,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', + 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', }, { @@ -127,7 +127,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)', + 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)', }, { @@ -140,7 +140,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', + 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', }, { @@ -154,7 +154,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)', + 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', }, { @@ -167,7 +167,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)', + 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', }, { @@ -183,8 +183,7 @@ describe( 'typography utils', () => { typographySettings: { fluid: true, }, - expected: - 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)', + expected: 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)', }, { @@ -240,14 +239,14 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)', + 'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)', }, { message: 'should return clamp value where no fluid max size is set', preset: { - size: '28px', + size: '50px', fluid: { min: '2.6rem', }, @@ -256,7 +255,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)', + 'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)', }, { @@ -272,7 +271,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)', + 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)', }, { @@ -289,7 +288,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)', + 'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)', }, { @@ -305,7 +304,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)', + 'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)', }, { @@ -321,7 +320,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)', + 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)', }, { @@ -337,7 +336,7 @@ describe( 'typography utils', () => { typographySettings: { fluid: true, }, - expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)', + expected: 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)', }, { @@ -352,7 +351,7 @@ describe( 'typography utils', () => { }, }, expected: - 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)', + 'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)', }, // Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`. @@ -366,7 +365,7 @@ describe( 'typography utils', () => { minFontSize: '16px', }, }, - expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)', + expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px)', }, { @@ -385,7 +384,7 @@ describe( 'typography utils', () => { { message: - 'should use ceiling of 4rem for minimum font size when custom min font size is not set', + 'should apply scaled min font size for em values when custom min font size is not set', preset: { size: '12rem', }, @@ -393,12 +392,12 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(4rem, 4rem + ((1vw - 0.48rem) * 15.385), 12rem)', + 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)', }, { message: - 'should use ceiling of 64px for minimum font size when custom min font size is not set', + 'should apply scaled min font size for px values when custom min font size is not set', preset: { size: '200px', }, @@ -406,12 +405,12 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', + 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)', }, { message: - 'should not use ceiling for minimum font size when custom min font size is set', + 'should not apply scaled min font size for minimum font size when custom min font size is set', preset: { size: '200px', fluid: { @@ -422,7 +421,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)', + 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)', }, ].forEach( ( { message, preset, typographySettings, expected } ) => { it( `${ message }`, () => { diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 37192e8ec195d..469647cdbf5c2 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -379,7 +379,7 @@ 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.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)', ), 'returns clamp value with em min and max units' => array( @@ -387,7 +387,7 @@ public function data_generate_font_size_preset_fixtures() { '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.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)', ), 'returns clamp value for floats' => array( @@ -395,7 +395,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '70.175px', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', + 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', ), 'coerces integer to `px` and returns clamp value' => array( @@ -403,7 +403,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => 33, ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)', + 'expected_output' => 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)', ), 'coerces float to `px` and returns clamp value' => array( @@ -411,7 +411,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => 70.175, ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(52.631px, 3.289rem + ((1vw - 7.68px) * 2.109), 70.175px)', + 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', ), 'returns clamp value when `fluid` is empty array' => array( @@ -420,7 +420,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(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', ), 'returns clamp value when `fluid` is `null`' => array( @@ -429,7 +429,7 @@ 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(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', ), 'returns clamp value if min font size is greater than max' => array( @@ -441,7 +441,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( @@ -481,18 +481,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' => 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( @@ -503,7 +503,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(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)', ), 'should not apply lower bound test when fluid values are set' => array( @@ -515,7 +515,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( @@ -526,7 +526,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( @@ -537,7 +537,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( @@ -549,26 +549,26 @@ 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 use ceiling of 4rem for minimum font size when custom min font size is not set' => array( + '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(4rem, 4rem + ((1vw - 0.48rem) * 15.385), 12rem)', + 'expected_output' => 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)', ), - 'should use ceiling of 64px for minimum font size when custom min font size is not set' => array( + '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(64px, 4rem + ((1vw - 7.68px) * 16.346), 200px)', + 'expected_output' => 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)', ), - 'should not use ceiling for minimum font size when custom min font size is set' => array( + '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( @@ -576,7 +576,7 @@ public function data_generate_font_size_preset_fixtures() { ), ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 7.68px) * 12.019), 200px)', + 'expected_output' => 'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)', ), ); } @@ -645,7 +645,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', @@ -655,7 +655,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 - 3.2px) * 0.078), 17px);', ), 'returns value when font size <= custom min font size bound' => array( 'font_size_value' => '15px', @@ -718,7 +718,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => '', 'font_size_value' => '4rem', 'should_use_fluid_typography' => true, - 'expected_output' => '', + 'expected_output' => '', ), 'return_content_if_no_inline_font_size_found' => array( 'block_content' => '

A paragraph inside a group

', @@ -736,13 +736,13 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => '

A paragraph inside a group

', 'font_size_value' => '20px', 'should_use_fluid_typography' => true, - 'expected_output' => '

A paragraph inside a group

', + 'expected_output' => '

A paragraph inside a group

', ), 'return_content_with_first_match_replace_only' => array( 'block_content' => "
\n \n

A paragraph inside a group

", 'font_size_value' => '1.5em', 'should_use_fluid_typography' => true, - 'expected_output' => "
\n \n

A paragraph inside a group

", + 'expected_output' => "
\n \n

A paragraph inside a group

", ), ); } From 574656f1d6ab8a73cc26f363e333431bb430ca07 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Apr 2023 13:54:04 +1000 Subject: [PATCH 07/10] Fix lint and JS tests --- packages/block-editor/README.md | 3 +-- .../components/global-styles/test/use-global-styles-output.js | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index bc602ed55329e..f4229af8912d5 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -431,8 +431,7 @@ _Returns_ ### getFontSize -Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. -If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. +Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values. If namedFontSize is undefined or not found in fontSizes an object with just the size value based on customFontSize is returned. _Parameters_ diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js index 2df709ebbfca6..ff3327d71da59 100644 --- a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js +++ b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js @@ -811,7 +811,7 @@ describe( 'global styles renderer', () => { 'padding-bottom: 33px', 'padding-left: 33px', 'font-family: sans-serif', - 'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)', + 'font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)', ] ); } ); From d263ff8b11ef93f1314c8bc6da87a11637b443bc Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Apr 2023 13:57:16 +1000 Subject: [PATCH 08/10] EL LINTO DEL DIABLO! --- lib/block-supports/typography.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 0e302b1678d84..6776824c01a99 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -539,11 +539,11 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty * the given font size multiplied by the min font size scale factor. */ if ( ! $minimum_font_size_raw ) { - $preferred_font_size_in_px = $preferred_size['unit'] === 'px' ? $preferred_size['value'] : $preferred_size['value'] * 16; + $preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16; // Logarithmic scale factor: Min font scale that tapers out as the font size increases. $minimum_font_size_factor = 1 - 0.12 * log( $preferred_font_size_in_px ); // Constrains the minimum font size factor between min and max values. - $minimum_font_size_factor = min( max( $minimum_font_size_factor, $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max ); + $minimum_font_size_factor = min( max( $minimum_font_size_factor, $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. From 345233b8fa97a18a68dd5ceb221b4a8eaac27db6 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Apr 2023 16:26:50 +1000 Subject: [PATCH 09/10] Updating typography props test --- packages/block-editor/src/hooks/test/use-typography-props.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 9b43a074cfcba..70c444cb23089 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -44,7 +44,7 @@ describe( 'getTypographyClassesAndStyles', () => { style: { letterSpacing: '22px', fontSize: - 'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)', + 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)', textTransform: 'uppercase', }, } ); @@ -70,7 +70,7 @@ describe( 'getTypographyClassesAndStyles', () => { style: { textDecoration: 'underline', fontSize: - 'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)', + 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)', textTransform: 'uppercase', }, } ); From f5630e1d7f64d335f96aac07dd5f08f3cd5de87f Mon Sep 17 00:00:00 2001 From: ramon Date: Fri, 14 Apr 2023 12:51:56 +1000 Subject: [PATCH 10/10] Switching to log base 2 --- lib/block-supports/typography.php | 12 ++++++---- .../src/components/font-sizes/fluid-utils.js | 10 +++++--- .../components/font-sizes/test/fluid-utils.js | 8 +++---- .../global-styles/test/typography-utils.js | 20 ++++++++-------- .../src/hooks/test/use-typography-props.js | 4 ++-- phpunit/block-supports/typography-test.php | 24 +++++++++---------- 6 files changed, 43 insertions(+), 35 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index 6776824c01a99..644d65b761557 100644 --- a/lib/block-supports/typography.php +++ b/lib/block-supports/typography.php @@ -540,10 +540,14 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty */ if ( ! $minimum_font_size_raw ) { $preferred_font_size_in_px = 'px' === $preferred_size['unit'] ? $preferred_size['value'] : $preferred_size['value'] * 16; - // Logarithmic scale factor: Min font scale that tapers out as the font size increases. - $minimum_font_size_factor = 1 - 0.12 * log( $preferred_font_size_in_px ); - // Constrains the minimum font size factor between min and max values. - $minimum_font_size_factor = min( max( $minimum_font_size_factor, $default_minimum_font_size_factor_min ), $default_minimum_font_size_factor_max ); + + /* + * 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. diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js index b23647b3aa15f..4992e83880a9f 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -108,11 +108,15 @@ export function getComputedFluidTypographyValue( { ? fontSizeParsed.value : fontSizeParsed.value * 16; - // Logarithmic scale factor: Min font scale that tapers out as the font size increases. - // And constrains the minimum font size factor between min and max values. + /* + * 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. + */ const minimumFontSizeFactor = Math.min( Math.max( - 1 - 0.12 * Math.log( fontSizeValueInPx ), + 1 - 0.075 * Math.log2( fontSizeValueInPx ), DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN ), DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX diff --git a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js index 5c38b5096a523..a50737a6dc0a8 100644 --- a/packages/block-editor/src/components/font-sizes/test/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/test/fluid-utils.js @@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => { fontSize: '30px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)' ); } ); @@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => { fontSize: '30px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 0.957), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)' ); } ); @@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => { maximumViewPortWidth: '1000px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(17.756px, 1.11rem + ((1vw - 5px) * 2.449), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)' ); } ); @@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => { scaleFactor: '2', } ); expect( fluidTypographyValues ).toBe( - 'clamp(17.756px, 1.11rem + ((1vw - 3.2px) * 1.913), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.725), 30px)' ); } ); diff --git a/packages/block-editor/src/components/global-styles/test/typography-utils.js b/packages/block-editor/src/components/global-styles/test/typography-utils.js index d8847ab8664d6..a91a8f39e8ecc 100644 --- a/packages/block-editor/src/components/global-styles/test/typography-utils.js +++ b/packages/block-editor/src/components/global-styles/test/typography-utils.js @@ -89,7 +89,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 1.75rem)', + 'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)', }, { @@ -101,7 +101,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)', + 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', }, { @@ -113,7 +113,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', + 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', }, { @@ -127,7 +127,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)', + 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', }, { @@ -140,7 +140,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', + 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', }, { @@ -154,7 +154,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', + 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', }, { @@ -167,7 +167,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', + 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', }, { @@ -271,7 +271,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 80px)', + 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)', }, { @@ -392,7 +392,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)', + 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)', }, { @@ -405,7 +405,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)', + 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)', }, { diff --git a/packages/block-editor/src/hooks/test/use-typography-props.js b/packages/block-editor/src/hooks/test/use-typography-props.js index 70c444cb23089..01d597a1ff15c 100644 --- a/packages/block-editor/src/hooks/test/use-typography-props.js +++ b/packages/block-editor/src/hooks/test/use-typography-props.js @@ -44,7 +44,7 @@ describe( 'getTypographyClassesAndStyles', () => { style: { letterSpacing: '22px', fontSize: - 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)', + 'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)', textTransform: 'uppercase', }, } ); @@ -70,7 +70,7 @@ describe( 'getTypographyClassesAndStyles', () => { style: { textDecoration: 'underline', fontSize: - 'clamp(1.168rem, 1.168rem + ((1vw - 0.2rem) * 1.04), 2rem)', + 'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 2rem)', textTransform: 'uppercase', }, } ); diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php index 469647cdbf5c2..99376bf23adfc 100644 --- a/phpunit/block-supports/typography-test.php +++ b/phpunit/block-supports/typography-test.php @@ -379,7 +379,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '1.75rem', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.875), 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( @@ -387,7 +387,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '1.75em', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(1.05em, 1.05rem + ((1vw - 0.2em) * 0.875), 1.75em)', + 'expected_output' => 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', ), 'returns clamp value for floats' => array( @@ -395,7 +395,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '70.175px', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', + 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', ), 'coerces integer to `px` and returns clamp value' => array( @@ -403,7 +403,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => 33, ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(19.154px, 1.197rem + ((1vw - 3.2px) * 1.082), 33px)', + 'expected_output' => 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', ), 'coerces float to `px` and returns clamp value' => array( @@ -411,7 +411,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => 70.175, ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(34.377px, 2.149rem + ((1vw - 3.2px) * 2.797), 70.175px)', + 'expected_output' => 'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', ), 'returns clamp value when `fluid` is empty array' => array( @@ -420,7 +420,7 @@ public function data_generate_font_size_preset_fixtures() { 'fluid' => array(), ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', + 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', ), 'returns clamp value when `fluid` is `null`' => array( @@ -429,7 +429,7 @@ public function data_generate_font_size_preset_fixtures() { 'fluid' => null, ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 0.875), 28px)', + 'expected_output' => 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', ), 'returns clamp value if min font size is greater than max' => array( @@ -503,7 +503,7 @@ public function data_generate_font_size_preset_fixtures() { ), ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(16.804px, 1.05rem + ((1vw - 3.2px) * 4.937), 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( @@ -557,7 +557,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '12rem', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(4.429rem, 4.429rem + ((1vw - 0.2rem) * 9.464), 12rem)', + '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( @@ -565,7 +565,7 @@ public function data_generate_font_size_preset_fixtures() { 'size' => '200px', ), 'should_use_fluid_typography' => true, - 'expected_output' => 'clamp(72.84px, 4.553rem + ((1vw - 3.2px) * 9.934), 200px)', + '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( @@ -718,7 +718,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => '', 'font_size_value' => '4rem', 'should_use_fluid_typography' => true, - 'expected_output' => '', + 'expected_output' => '', ), 'return_content_if_no_inline_font_size_found' => array( 'block_content' => '

A paragraph inside a group

', @@ -742,7 +742,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => "
\n \n

A paragraph inside a group

", 'font_size_value' => '1.5em', 'should_use_fluid_typography' => true, - 'expected_output' => "
\n \n

A paragraph inside a group

", + 'expected_output' => "
\n \n

A paragraph inside a group

", ), ); }