From 52c529f35ad02ac76d8d823df40ce395f1030d81 Mon Sep 17 00:00:00 2001 From: Ramon Date: Fri, 21 Apr 2023 09:34:15 +1000 Subject: [PATCH] Fluid typography: use logarithmic scale factor to calculate a min font size (#49707) * Fluid Typography: Try adding a ceiling to the calculated minimum font size * Update existing tests, add a couple of additional tests to cover the ceiling on the minimum font size * Add test to ensure ceiling is skipped when min font size is provided * Fix whitespace issue * Try reducing the default minimum viewport width * 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) * Fix lint and JS tests * EL LINTO DEL DIABLO! * Updating typography props test * Switching to log base 2 --------- Co-authored-by: Andrew Serong <14988353+andrewserong@users.noreply.github.com> --- lib/block-supports/typography.php | 24 ++++-- packages/block-editor/README.md | 3 +- .../src/components/font-sizes/fluid-utils.js | 45 +++++++--- .../components/font-sizes/test/fluid-utils.js | 21 ++--- .../global-styles/test/typography-utils.js | 85 ++++++++++++++----- .../test/use-global-styles-output.js | 2 +- .../src/hooks/test/use-typography-props.js | 4 +- phpunit/block-supports/typography-test.php | 73 +++++++++++----- 8 files changed, 170 insertions(+), 87 deletions(-) diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php index a7a26423e32d6a..644d65b7615571 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 = '768px'; - $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; @@ -538,7 +539,16 @@ 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 ); + $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'] ) { diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 703dbd337567db..c25c2f7b07cf18 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_ 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 efcf443bb15cc2..4992e83880a9f4 100644 --- a/packages/block-editor/src/components/font-sizes/fluid-utils.js +++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js @@ -6,18 +6,17 @@ // 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_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. @@ -106,6 +103,26 @@ export function getComputedFluidTypographyValue( { * the given font size multiplied by the min font size scale factor. */ if ( ! minimumFontSize ) { + const fontSizeValueInPx = + fontSizeParsed.unit === 'px' + ? fontSizeParsed.value + : fontSizeParsed.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. + */ + const minimumFontSizeFactor = Math.min( + Math.max( + 1 - 0.075 * Math.log2( 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 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 15805431a959fb..a50737a6dc0a86 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(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)' ); } ); @@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => { fontSize: '30px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 0.863), 30px)' ); } ); @@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => { maximumViewPortWidth: '1000px', } ); expect( fluidTypographyValues ).toBe( - 'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)' + 'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 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(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 9d0213cb53e554..a91a8f39e8eccc 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.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 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,19 +101,19 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)', + 'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)', }, { 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(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', }, { @@ -127,20 +127,20 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)', + 'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', }, { 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(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)', }, { @@ -154,7 +154,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)', + 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)', }, { @@ -167,7 +167,7 @@ describe( 'typography utils', () => { fluid: true, }, expected: - 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)', + 'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 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(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 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)', }, { @@ -382,6 +381,48 @@ describe( 'typography utils', () => { }, expected: '15px', }, + + { + message: + 'should apply scaled min font size for em values when custom min font size is not set', + preset: { + size: '12rem', + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)', + }, + + { + message: + 'should apply scaled min font size for px values when custom min font size is not set', + preset: { + size: '200px', + }, + typographySettings: { + fluid: true, + }, + expected: + 'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)', + }, + + { + message: + 'should not apply scaled min font size 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 - 3.2px) * 7.813), 200px)', + }, ].forEach( ( { message, preset, typographySettings, expected } ) => { it( `${ message }`, () => { expect( 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 611e4367433084..30c166c6bbe413 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 @@ -933,7 +933,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)', ] ); } ); 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 9b43a074cfcbaf..01d597a1ff15c2 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.25rem, 1.25rem + ((1vw - 0.2rem) * 0.938), 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.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 1b9b6f97c63f6e..99376bf23adfcf 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.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)', ), 'returns clamp value with em min and max units' => array( @@ -387,15 +387,15 @@ 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.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( @@ -403,15 +403,15 @@ 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(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)', ), '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(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(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( @@ -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(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 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(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 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,7 +549,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)', ), ); } @@ -618,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', @@ -628,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', @@ -691,7 +718,7 @@ public function data_generate_replace_inline_font_styles_with_fluid_values_fixtu 'block_content' => '

This is a heading

', 'font_size_value' => '4rem', 'should_use_fluid_typography' => true, - 'expected_output' => '

This is a heading

', + 'expected_output' => '

This is a heading

', ), 'return_content_if_no_inline_font_size_found' => array( 'block_content' => '

A paragraph inside a group

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

", ), ); }