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
\n \n
A paragraph inside a group
\n \n
A paragraph inside a group