From 430b09f2cdb6504340861b7f419de81185aa6566 Mon Sep 17 00:00:00 2001 From: ramon Date: Tue, 11 Apr 2023 13:22:23 +1000 Subject: [PATCH] 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 bdc3d365a58af4..0e302b1678d846 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 fd0b0b375bb9be..bc602ed55329e2 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 da53fbfebbac4d..b23647b3aa15f2 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 15805431a959fb..5c38b5096a523f 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 426dd346fab6aa..d8847ab8664d64 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 37192e8ec195dc..469647cdbf5c2e 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' => '

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

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

", ), ); }