diff --git a/lib/block-supports/typography.php b/lib/block-supports/typography.php
index b1adaf1a679b8..01d223b84281e 100644
--- a/lib/block-supports/typography.php
+++ b/lib/block-supports/typography.php
@@ -461,7 +461,6 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
$default_maximum_viewport_width = '1600px';
$default_minimum_viewport_width = '768px';
$default_minimum_font_size_factor = 0.75;
- $default_maximum_font_size_factor = 1.5;
$default_scale_factor = 1;
$default_minimum_font_size_limit = '14px';
@@ -480,21 +479,11 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
// Font sizes.
$preferred_size = gutenberg_get_typography_value_and_unit( $preset['size'] );
- // Protect against unsupported units.
+ // Protects against unsupported units.
if ( empty( $preferred_size['unit'] ) ) {
return $preset['size'];
}
- // If no fluid max font size is available, create one using max font size factor.
- if ( ! $maximum_font_size_raw ) {
- $maximum_font_size_raw = round( $preferred_size['value'] * $default_maximum_font_size_factor, 3 ) . $preferred_size['unit'];
- }
-
- // If no fluid min font size is available, create one using min font size factor.
- if ( ! $minimum_font_size_raw ) {
- $minimum_font_size_raw = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ) . $preferred_size['unit'];
- }
-
// Parses the minimum font size limit, so we can perform checks using it.
$minimum_font_size_limit = gutenberg_get_typography_value_and_unit(
$default_minimum_font_size_limit,
@@ -503,29 +492,35 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
)
);
- if ( ! empty( $minimum_font_size_limit ) ) {
+ // 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 ) ) {
/*
* If a minimum size was not passed to this function
* and the user-defined font size is lower than $minimum_font_size_limit,
- * then uses the user-defined font size as the minimum font-size.
+ * do not calculate a fluid value.
*/
- if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
- $minimum_font_size_raw = implode( '', $preferred_size );
+ if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
+ return $preset['size'];
+ }
+ }
+
+ // If no fluid max font size is available use the incoming value.
+ if ( ! $maximum_font_size_raw ) {
+ $maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
+ }
+
+ /*
+ * If no minimumFontSize is provided, create one using
+ * 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 );
+
+ // 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'];
} else {
- $minimum_font_size_parsed = gutenberg_get_typography_value_and_unit(
- $minimum_font_size_raw,
- array(
- 'coerce_to' => $preferred_size['unit'],
- )
- );
-
- /*
- * If the passed or calculated minimum font size is lower than $minimum_font_size_limit
- * use $minimum_font_size_limit instead.
- */
- if ( ! empty( $minimum_font_size_parsed ) && $minimum_font_size_parsed['value'] < $minimum_font_size_limit['value'] ) {
- $minimum_font_size_raw = implode( '', $minimum_font_size_limit );
- }
+ $minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
}
}
diff --git a/packages/block-editor/CHANGELOG.md b/packages/block-editor/CHANGELOG.md
index 3a99a7fec0f1e..54af4cdb6e603 100644
--- a/packages/block-editor/CHANGELOG.md
+++ b/packages/block-editor/CHANGELOG.md
@@ -5,6 +5,7 @@
### Enhancement
- `BlockLockModal`: Move Icon component out of CheckboxControl label ([#45535](https://github.com/WordPress/gutenberg/pull/45535))
+- Fluid typography: adjust font size min and max rules ([#45536](https://github.com/WordPress/gutenberg/pull/45536)).
## 10.4.0 (2022-11-02)
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index 03155e0f4ddd8..5760f1584c5db 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -428,7 +428,6 @@ _Parameters_
- _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.maximumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive maximumFontSize. 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 2c6540f89d049..de8a27e3014e8 100644
--- a/packages/block-editor/src/components/font-sizes/fluid-utils.js
+++ b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -9,7 +9,6 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
const DEFAULT_SCALE_FACTOR = 1;
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
-const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
/**
@@ -41,7 +40,6 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
* @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 {?number} args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
*
* @return {string|null} A font-size value using clamp().
*/
@@ -53,15 +51,8 @@ export function getComputedFluidTypographyValue( {
maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
scaleFactor = DEFAULT_SCALE_FACTOR,
minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
- maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
} ) {
- /*
- * Caches minimumFontSize in minimumFontSizeValue
- * so we can check if minimumFontSize exists later.
- */
- let minimumFontSizeValue = minimumFontSize;
-
/*
* Calculates missing minimumFontSize and maximumFontSize from
* defaultFontSize if provided.
@@ -75,15 +66,6 @@ export function getComputedFluidTypographyValue( {
return null;
}
- // If no minimumFontSize is provided, derive using min scale factor.
- if ( ! minimumFontSizeValue ) {
- minimumFontSizeValue =
- roundToPrecision(
- fontSizeParsed.value * minimumFontSizeFactor,
- 3
- ) + fontSizeParsed.unit;
- }
-
// Parses the minimum font size limit, so we can perform checks using it.
const minimumFontSizeLimitParsed = getTypographyValueAndUnit(
minimumFontSizeLimit,
@@ -92,57 +74,51 @@ export function getComputedFluidTypographyValue( {
}
);
- if ( !! minimumFontSizeLimitParsed?.value ) {
+ // Don't enforce minimum font size if a font size has explicitly set a min and max value.
+ if (
+ !! minimumFontSizeLimitParsed?.value &&
+ ! minimumFontSize &&
+ ! maximumFontSize
+ ) {
/*
* If a minimum size was not passed to this function
- * and the user-defined font size is lower than `minimumFontSizeLimit`,
- * then uses the user-defined font size as the minimum font-size.
+ * and the user-defined font size is lower than $minimum_font_size_limit,
+ * do not calculate a fluid value.
*/
- if (
- ! minimumFontSize &&
- fontSizeParsed?.value < minimumFontSizeLimitParsed?.value
- ) {
- minimumFontSizeValue = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
- } else {
- const minimumFontSizeParsed = getTypographyValueAndUnit(
- minimumFontSizeValue,
- {
- coerceTo: fontSizeParsed.unit,
- }
- );
-
- /*
- * Otherwise, if the passed or calculated minimum font size is lower than `minimumFontSizeLimit`
- * use `minimumFontSizeLimit` instead.
- */
- if (
- !! minimumFontSizeParsed?.value &&
- minimumFontSizeParsed.value <
- minimumFontSizeLimitParsed.value
- ) {
- minimumFontSizeValue = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
- }
+ if ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {
+ return null;
}
}
- // If no maximumFontSize is provided, derive using max scale factor.
+ // If no fluid max font size is available use the incoming value.
if ( ! maximumFontSize ) {
- maximumFontSize =
- roundToPrecision(
- fontSizeParsed.value * maximumFontSizeFactor,
- 3
- ) + fontSizeParsed.unit;
+ maximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
}
- }
- // Return early if one of the provided inputs is not provided.
- if ( ! minimumFontSizeValue || ! maximumFontSize ) {
- return null;
+ /*
+ * If no minimumFontSize is provided, create one using
+ * the given font size multiplied by the min font size scale factor.
+ */
+ if ( ! minimumFontSize ) {
+ const calculatedMinimumFontSize = roundToPrecision(
+ fontSizeParsed.value * minimumFontSizeFactor,
+ 3
+ );
+
+ // Only use calculated min font size if it's > $minimum_font_size_limit value.
+ if (
+ !! minimumFontSizeLimitParsed?.value &&
+ calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value
+ ) {
+ minimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
+ } else {
+ minimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;
+ }
+ }
}
// Grab the minimum font size and normalize it in order to use the value for calculations.
- const minimumFontSizeParsed =
- getTypographyValueAndUnit( minimumFontSizeValue );
+ const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
// We get a 'preferred' unit to keep units consistent when calculating,
// otherwise the result will not be accurate.
@@ -159,12 +135,9 @@ export function getComputedFluidTypographyValue( {
}
// Uses rem for accessible fluid target font scaling.
- const minimumFontSizeRem = getTypographyValueAndUnit(
- minimumFontSizeValue,
- {
- coerceTo: 'rem',
- }
- );
+ const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+ coerceTo: 'rem',
+ } );
// Viewport widths defined for fluid typography. Normalize units
const maximumViewPortWidthParsed = getTypographyValueAndUnit(
@@ -205,7 +178,7 @@ export function getComputedFluidTypographyValue( {
);
const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
- return `clamp(${ minimumFontSizeValue }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+ return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
}
/**
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 aa268d04d7f1f..15805431a959f 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(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+ 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
);
} );
@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
fontSize: '30px',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
+ 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
);
} );
@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
maximumViewPortWidth: '1000px',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(22.5px, 1.406rem + ((1vw - 5px) * 4.5), 45px)'
+ 'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
);
} );
@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
scaleFactor: '2',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 5.409), 45px)'
+ 'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
);
} );
@@ -74,7 +74,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
maximumFontSizeFactor: '2',
} );
expect( fluidTypographyValues ).toBe(
- 'clamp(15px, 0.938rem + ((1vw - 7.68px) * 5.409), 60px)'
+ 'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
);
} );
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 52f7bf97328ee..00557881467ca 100644
--- a/packages/block-editor/src/hooks/test/use-typography-props.js
+++ b/packages/block-editor/src/hooks/test/use-typography-props.js
@@ -42,7 +42,7 @@ describe( 'getTypographyClassesAndStyles', () => {
style: {
letterSpacing: '22px',
fontSize:
- 'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+ 'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
textTransform: 'uppercase',
},
} );
diff --git a/packages/edit-site/src/components/global-styles/test/typography-utils.js b/packages/edit-site/src/components/global-styles/test/typography-utils.js
index e0c29a37ea981..647b02cb4be1f 100644
--- a/packages/edit-site/src/components/global-styles/test/typography-utils.js
+++ b/packages/edit-site/src/components/global-styles/test/typography-utils.js
@@ -7,7 +7,7 @@ describe( 'typography utils', () => {
describe( 'getTypographyFontSizeValue', () => {
[
{
- message: 'Default return non-fluid value.',
+ message: 'returns value when fluid typography is deactivated',
preset: {
size: '28px',
},
@@ -16,7 +16,7 @@ describe( 'typography utils', () => {
},
{
- message: 'Default return value where font size is 0.',
+ message: 'returns value where font size is 0',
preset: {
size: 0,
},
@@ -25,7 +25,7 @@ describe( 'typography utils', () => {
},
{
- message: "Default return value where font size is '0'.",
+ message: "returns value where font size is '0'",
preset: {
size: '0',
},
@@ -34,17 +34,16 @@ describe( 'typography utils', () => {
},
{
- message:
- 'Default return non-fluid value where `size` is undefined.',
+ message: 'returns value where `size` is `null`.',
preset: {
- size: undefined,
+ size: null,
},
- typographySettings: undefined,
- expected: undefined,
+ typographySettings: null,
+ expected: null,
},
{
- message: 'return non-fluid value when fluid is `false`.',
+ message: 'returns value when fluid is `false`',
preset: {
size: '28px',
fluid: false,
@@ -56,84 +55,94 @@ describe( 'typography utils', () => {
},
{
- message:
- 'Should coerce integer to `px` and return fluid value.',
+ message: 'returns already clamped value',
preset: {
- size: 33,
- fluid: true,
+ size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ fluid: false,
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 2.975), 49.5px)',
+ 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
},
{
- message: 'coerce float to `px` and return fluid value.',
+ message: 'returns value with unsupported unit',
preset: {
- size: 100.23,
+ size: '1000%',
+ fluid: false,
+ },
+ typographySettings: {
fluid: true,
},
+ expected: '1000%',
+ },
+
+ {
+ message: 'returns clamp value with rem min and max units',
+ preset: {
+ size: '1.75rem',
+ },
typographySettings: {
fluid: true,
},
expected:
- 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 9.035), 150.345px)',
+ 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
},
{
- message: 'return incoming value when already clamped.',
+ message: 'returns clamp value with eem min and max units',
preset: {
- size: 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
- fluid: false,
+ size: '1.75em',
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
},
{
- message: 'return incoming value with unsupported unit.',
+ message: 'returns clamp value for floats',
preset: {
- size: '1000%',
- fluid: false,
+ size: '100.175px',
},
typographySettings: {
fluid: true,
},
- expected: '1000%',
+ expected:
+ 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
},
{
- message: 'return fluid value.',
+ message: 'coerces integer to `px` and returns clamp value',
preset: {
- size: '1.75rem',
+ size: 33,
+ fluid: true,
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 2.523), 2.625rem)',
+ 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
},
{
- message: 'return fluid value for floats with units.',
+ message: 'coerces float to `px` and returns clamp value',
preset: {
- size: '100.175px',
+ size: 100.23,
+ fluid: true,
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 9.03), 150.263px)',
+ 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
},
{
- message:
- 'Should return default fluid values with empty fluid array.',
+ message: 'returns clamp value when `fluid` is empty array',
preset: {
size: '28px',
fluid: [],
@@ -142,11 +151,11 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
},
{
- message: 'return default fluid values with null value.',
+ message: 'returns clamp value when `fluid` is `null`',
preset: {
size: '28px',
fluid: null,
@@ -155,12 +164,12 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
},
{
message:
- 'return clamped value if min font size is greater than max.',
+ 'returns clamp value if min font size is greater than max',
preset: {
size: '3rem',
fluid: {
@@ -176,7 +185,7 @@ describe( 'typography utils', () => {
},
{
- message: 'return size with invalid fluid units.',
+ message: 'returns value with invalid min/max fluid units',
preset: {
size: '10em',
fluid: {
@@ -192,20 +201,30 @@ describe( 'typography utils', () => {
{
message:
- 'return clamped using font size where no min is given and size is less than default min size.',
+ 'returns value when size is < lower bounds and no fluid min/max set',
preset: {
size: '3px',
},
typographySettings: {
fluid: true,
},
- expected:
- 'clamp(3px, 0.188rem + ((1vw - 7.68px) * 0.18), 4.5px)',
+ expected: '3px',
},
{
message:
- 'return fluid clamp value with different min max units.',
+ 'returns value when size is equal to lower bounds and no fluid min/max set',
+ preset: {
+ size: '14px',
+ },
+ typographySettings: {
+ fluid: true,
+ },
+ expected: '14px',
+ },
+
+ {
+ message: 'returns clamp value with different min max units',
preset: {
size: '28px',
fluid: {
@@ -219,10 +238,9 @@ describe( 'typography utils', () => {
expected:
'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
},
- //
+
{
- message:
- ' Should return clamp value with default fluid max value.',
+ message: 'returns clamp value where no fluid max size is set',
preset: {
size: '28px',
fluid: {
@@ -233,12 +251,11 @@ describe( 'typography utils', () => {
fluid: true,
},
expected:
- 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+ 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
},
{
- message:
- 'Should return clamp value with default fluid min value.',
+ message: 'returns clamp value where no fluid min size is set',
preset: {
size: '28px',
fluid: {
@@ -253,90 +270,57 @@ describe( 'typography utils', () => {
},
{
- message: 'adjust computed min in px to min limit.',
- preset: {
- size: '14px',
- },
- typographySettings: {
- fluid: true,
- },
- expected:
- 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.841), 21px)',
- },
-
- {
- message: 'adjust computed min in rem to min limit.',
- preset: {
- size: '1.1rem',
- },
- typographySettings: {
- fluid: true,
- },
- expected:
- 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 1.49), 1.65rem)',
- },
-
- {
- message: 'adjust computed min in em to min limit.',
- preset: {
- size: '1.1em',
- },
- typographySettings: {
- fluid: true,
- },
- expected:
- 'clamp(0.875em, 0.875rem + ((1vw - 0.48em) * 1.49), 1.65em)',
- },
-
- {
- message: 'adjust fluid min value in px to min limit',
+ message:
+ 'should not apply lower bound test when fluid values are set',
preset: {
- size: '20px',
+ size: '1.5rem',
fluid: {
- min: '12px',
+ min: '0.5rem',
+ max: '5rem',
},
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 1.923), 30px)',
+ 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
},
{
- message: 'adjust fluid min value in rem to min limit.',
+ message:
+ 'should not apply lower bound test when only fluid min is set',
preset: {
- size: '1.5rem',
+ size: '20px',
fluid: {
- min: '0.5rem',
+ min: '12px',
},
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 2.644), 2.25rem)',
+ 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
},
{
- message: 'adjust fluid min value but honor max value.',
+ message:
+ 'should not apply lower bound test when only fluid max is set',
preset: {
- size: '1.5rem',
+ size: '0.875rem',
fluid: {
- min: '0.5rem',
- max: '5rem',
+ max: '20rem',
},
},
typographySettings: {
fluid: true,
},
expected:
- 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 7.933), 5rem)',
+ 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
},
{
message:
- 'return a fluid font size a min and max font sizes are equal.',
+ 'returns clamp value when min and max font sizes are equal',
preset: {
size: '4rem',
fluid: {
diff --git a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
index a6bd55ff86ec8..a26221247dc9b 100644
--- a/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
+++ b/packages/edit-site/src/components/global-styles/test/use-global-styles-output.js
@@ -711,7 +711,7 @@ describe( 'global styles renderer', () => {
},
typography: {
fontFamily: 'sans-serif',
- fontSize: '14px',
+ fontSize: '15px',
},
};
@@ -725,7 +725,7 @@ describe( 'global styles renderer', () => {
'--wp--style--root--padding-left: 33px',
'background-color: var(--wp--preset--color--light-green-cyan)',
'font-family: sans-serif',
- 'font-size: 14px',
+ 'font-size: 15px',
] );
} );
@@ -739,7 +739,7 @@ describe( 'global styles renderer', () => {
'padding-bottom: 33px',
'padding-left: 33px',
'font-family: sans-serif',
- 'font-size: 14px',
+ 'font-size: 15px',
] );
} );
@@ -757,7 +757,7 @@ describe( 'global styles renderer', () => {
'padding-bottom: 33px',
'padding-left: 33px',
'font-family: sans-serif',
- 'font-size: 14px',
+ 'font-size: 15px',
] );
} );
@@ -782,7 +782,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.841), 21px)',
+ 'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
] );
} );
@@ -807,7 +807,7 @@ describe( 'global styles renderer', () => {
'padding-bottom: 33px',
'padding-left: 33px',
'font-family: sans-serif',
- 'font-size: 14px',
+ 'font-size: 15px',
] );
} );
} );
diff --git a/phpunit/block-supports/typography-test.php b/phpunit/block-supports/typography-test.php
index 6ecac215b0f61..63fd98d1e524f 100644
--- a/phpunit/block-supports/typography-test.php
+++ b/phpunit/block-supports/typography-test.php
@@ -315,7 +315,7 @@ public function test_gutenberg_get_typography_font_size_value( $font_size, $shou
*/
public function data_generate_font_size_preset_fixtures() {
return array(
- 'default_return_value' => array(
+ 'returns value when fluid typography is deactivated' => array(
'font_size' => array(
'size' => '28px',
),
@@ -323,7 +323,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '28px',
),
- 'size: int 0' => array(
+ 'returns value where font size is 0' => array(
'font_size' => array(
'size' => 0,
),
@@ -331,7 +331,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 0,
),
- 'size: string 0' => array(
+ "returns value where font size is '0'" => array(
'font_size' => array(
'size' => '0',
),
@@ -339,7 +339,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '0',
),
- 'default_return_value_when_size_is_undefined' => array(
+ 'returns value where `size` is `null`' => array(
'font_size' => array(
'size' => null,
),
@@ -347,7 +347,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => null,
),
- 'default_return_value_when_fluid_is_false' => array(
+ 'returns value when fluid is `false`' => array(
'font_size' => array(
'size' => '28px',
'fluid' => false,
@@ -356,7 +356,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '28px',
),
- 'default_return_value_when_value_is_already_clamped' => array(
+ 'returns already clamped value' => array(
'font_size' => array(
'size' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
'fluid' => false,
@@ -365,7 +365,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
),
- 'default_return_value_with_unsupported_unit' => array(
+ 'returns value with unsupported unit' => array(
'font_size' => array(
'size' => '1000%',
'fluid' => false,
@@ -374,57 +374,65 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '1000%',
),
- 'return_fluid_value' => array(
+ 'returns clamp value with rem min and max units' => array(
'font_size' => array(
'size' => '1.75rem',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 2.523), 2.625rem)',
+ 'expected_output' => 'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
),
- 'return_fluid_value_with_floats_with_units' => array(
+ 'returns clamp value with em min and max units' => array(
+ 'font_size' => array(
+ 'size' => '1.75em',
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => 'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
+ ),
+
+ 'returns clamp value for floats' => array(
'font_size' => array(
'size' => '100.175px',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 9.03), 150.263px)',
+ 'expected_output' => 'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
),
- 'return_fluid_value_with_integer_coerced_to_px' => array(
+ 'coerces integer to `px` and returns clamp value' => array(
'font_size' => array(
'size' => 33,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 2.975), 49.5px)',
+ 'expected_output' => 'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
),
- 'return_fluid_value_with_float_coerced_to_px' => array(
+ 'coerces float to `px` and returns clamp value' => array(
'font_size' => array(
'size' => 100.23,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 9.035), 150.345px)',
+ 'expected_output' => 'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
),
- 'return_default_fluid_values_with_empty_fluid_array' => array(
+ 'returns clamp value when `fluid` is empty array' => array(
'font_size' => array(
'size' => '28px',
'fluid' => array(),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
),
- 'return_default_fluid_values_with_null_value' => array(
+ 'returns clamp value when `fluid` is `null`' => array(
'font_size' => array(
'size' => '28px',
'fluid' => null,
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 2.524), 42px)',
+ 'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
),
- 'return_clamped_value_if_min_font_size_is_greater_than_max' => array(
+ 'returns clamp value if min font size is greater than max' => array(
'font_size' => array(
'size' => '3rem',
'fluid' => array(
@@ -436,7 +444,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
),
- 'return_size_with_invalid_fluid_units' => array(
+ 'returns value with invalid min/max fluid units' => array(
'font_size' => array(
'size' => '10em',
'fluid' => array(
@@ -448,15 +456,23 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => '10em',
),
- 'return_clamped_size_where_no_min_is_given_and_less_than_default_min_size' => array(
+ 'returns value when size is < lower bounds and no fluid min/max set' => array(
'font_size' => array(
'size' => '3px',
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(3px, 0.188rem + ((1vw - 7.68px) * 0.18), 4.5px)',
+ 'expected_output' => '3px',
),
- 'return_fluid_clamp_value_with_different_min_max_units' => array(
+ 'returns value when size is equal to lower bounds and no fluid min/max set' => array(
+ 'font_size' => array(
+ 'size' => '14px',
+ ),
+ 'should_use_fluid_typography' => true,
+ 'expected_output' => '14px',
+ ),
+
+ 'returns clamp value with different min max units' => array(
'font_size' => array(
'size' => '28px',
'fluid' => array(
@@ -468,7 +484,7 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
),
- 'return_clamp_value_with_default_fluid_max_value' => array(
+ 'returns clamp value where no fluid max size is set' => array(
'font_size' => array(
'size' => '28px',
'fluid' => array(
@@ -476,10 +492,10 @@ public function data_generate_font_size_preset_fixtures() {
),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * 0.048), 42px)',
+ 'expected_output' => 'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
),
- 'default_return_clamp_value_with_default_fluid_min_value' => array(
+ 'returns clamp value where no fluid min size is set' => array(
'font_size' => array(
'size' => '28px',
'fluid' => array(
@@ -490,65 +506,41 @@ public function data_generate_font_size_preset_fixtures() {
'expected_output' => 'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
),
- 'should_adjust_computed_min_in_px_to_min_limit' => array(
- 'font_size' => array(
- 'size' => '14px',
- ),
- 'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.841), 21px)',
- ),
-
- 'should_adjust_computed_min_in_rem_to_min_limit' => array(
+ 'should not apply lower bound test when fluid values are set' => array(
'font_size' => array(
- 'size' => '1.1rem',
- ),
- 'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 1.49), 1.65rem)',
- ),
-
- 'default_return_clamp_value_with_replaced_fluid_min_value_in_em' => array(
- 'font_size' => array(
- 'size' => '1.1em',
- ),
- 'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(0.875em, 0.875rem + ((1vw - 0.48em) * 1.49), 1.65em)',
- ),
-
- 'should_adjust_fluid_min_value_in_px_to_min_limit' => array(
- 'font_size' => array(
- 'size' => '20px',
+ 'size' => '1.5rem',
'fluid' => array(
- 'min' => '12px',
+ 'min' => '0.5rem',
+ 'max' => '5rem',
),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(14px, 0.875rem + ((1vw - 7.68px) * 1.923), 30px)',
+ 'expected_output' => 'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
),
- 'should_adjust_fluid_min_value_in_rem_to_min_limit' => array(
+ 'should not apply lower bound test when only fluid min is set' => array(
'font_size' => array(
- 'size' => '1.5rem',
+ 'size' => '20px',
'fluid' => array(
- 'min' => '0.5rem',
+ 'min' => '12px',
),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 2.644), 2.25rem)',
+ 'expected_output' => 'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
),
- 'should_adjust_fluid_min_value_but_honor_max_value' => array(
+ 'should not apply lower bound test when only fluid max is set' => array(
'font_size' => array(
- 'size' => '1.5rem',
+ 'size' => '0.875rem',
'fluid' => array(
- 'min' => '0.5rem',
- 'max' => '5rem',
+ 'max' => '20rem',
),
),
'should_use_fluid_typography' => true,
- 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 7.933), 5rem)',
+ 'expected_output' => 'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
),
- 'should_return_fluid_value_when_min_and_max_font_sizes_are_equal' => array(
+ 'returns clamp value when min and max font sizes are equal' => array(
'font_size' => array(
'size' => '4rem',
'fluid' => array(
@@ -630,7 +622,7 @@ public function data_generate_block_supports_font_size_fixtures() {
'return_value_with_fluid_typography' => array(
'font_size_value' => '50px',
'should_use_fluid_typography' => true,
- 'expected_output' => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 4.507), 75px);',
+ 'expected_output' => 'font-size:clamp(37.5px, 2.344rem + ((1vw - 7.68px) * 1.502), 50px);',
),
);
}
@@ -688,7 +680,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
',
@@ -706,13 +698,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