Skip to content

Commit 5a94262

Browse files
ramonjdMamaduka
ramonjd
authored and
Mamaduka
committed
Fluid typography: adjust font size min and max rules (#45536)
* Initial commit. No tests. * Update PHP unit tests * Updating JS tests Harmonizing test descriptions across PHP and JS Updated CHANGELOG.md and README.md * Updating global styles JS tests * Update typography props JS units tests to reflect new max value * Aligning comments acrossing PHP and JS and making sure they're clearer. Bumping the lower bound from 14px to 16px Updating tests * Updating global styles tests * Revert "Updating global styles tests" This reverts commit 72d4a38. * Revert "Aligning comments acrossing PHP and JS and making sure they're clearer." This reverts commit 863d9ae.
1 parent cfcee1c commit 5a94262

File tree

9 files changed

+221
-274
lines changed

9 files changed

+221
-274
lines changed

‎lib/block-supports/typography.php

+25-30
Original file line numberDiff line numberDiff line change
@@ -461,7 +461,6 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
461461
$default_maximum_viewport_width = '1600px';
462462
$default_minimum_viewport_width = '768px';
463463
$default_minimum_font_size_factor = 0.75;
464-
$default_maximum_font_size_factor = 1.5;
465464
$default_scale_factor = 1;
466465
$default_minimum_font_size_limit = '14px';
467466

@@ -480,21 +479,11 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
480479
// Font sizes.
481480
$preferred_size = gutenberg_get_typography_value_and_unit( $preset['size'] );
482481

483-
// Protect against unsupported units.
482+
// Protects against unsupported units.
484483
if ( empty( $preferred_size['unit'] ) ) {
485484
return $preset['size'];
486485
}
487486

488-
// If no fluid max font size is available, create one using max font size factor.
489-
if ( ! $maximum_font_size_raw ) {
490-
$maximum_font_size_raw = round( $preferred_size['value'] * $default_maximum_font_size_factor, 3 ) . $preferred_size['unit'];
491-
}
492-
493-
// If no fluid min font size is available, create one using min font size factor.
494-
if ( ! $minimum_font_size_raw ) {
495-
$minimum_font_size_raw = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 ) . $preferred_size['unit'];
496-
}
497-
498487
// Parses the minimum font size limit, so we can perform checks using it.
499488
$minimum_font_size_limit = gutenberg_get_typography_value_and_unit(
500489
$default_minimum_font_size_limit,
@@ -503,29 +492,35 @@ function gutenberg_get_typography_font_size_value( $preset, $should_use_fluid_ty
503492
)
504493
);
505494

506-
if ( ! empty( $minimum_font_size_limit ) ) {
495+
// Don't enforce minimum font size if a font size has explicitly set a min and max value.
496+
if ( ! empty( $minimum_font_size_limit ) && ( ! $minimum_font_size_raw && ! $maximum_font_size_raw ) ) {
507497
/*
508498
* If a minimum size was not passed to this function
509499
* and the user-defined font size is lower than $minimum_font_size_limit,
510-
* then uses the user-defined font size as the minimum font-size.
500+
* do not calculate a fluid value.
511501
*/
512-
if ( ! isset( $fluid_font_size_settings['min'] ) && $preferred_size['value'] < $minimum_font_size_limit['value'] ) {
513-
$minimum_font_size_raw = implode( '', $preferred_size );
502+
if ( $preferred_size['value'] <= $minimum_font_size_limit['value'] ) {
503+
return $preset['size'];
504+
}
505+
}
506+
507+
// If no fluid max font size is available use the incoming value.
508+
if ( ! $maximum_font_size_raw ) {
509+
$maximum_font_size_raw = $preferred_size['value'] . $preferred_size['unit'];
510+
}
511+
512+
/*
513+
* If no minimumFontSize is provided, create one using
514+
* the given font size multiplied by the min font size scale factor.
515+
*/
516+
if ( ! $minimum_font_size_raw ) {
517+
$calculated_minimum_font_size = round( $preferred_size['value'] * $default_minimum_font_size_factor, 3 );
518+
519+
// Only use calculated min font size if it's > $minimum_font_size_limit value.
520+
if ( ! empty( $minimum_font_size_limit ) && $calculated_minimum_font_size <= $minimum_font_size_limit['value'] ) {
521+
$minimum_font_size_raw = $minimum_font_size_limit['value'] . $minimum_font_size_limit['unit'];
514522
} else {
515-
$minimum_font_size_parsed = gutenberg_get_typography_value_and_unit(
516-
$minimum_font_size_raw,
517-
array(
518-
'coerce_to' => $preferred_size['unit'],
519-
)
520-
);
521-
522-
/*
523-
* If the passed or calculated minimum font size is lower than $minimum_font_size_limit
524-
* use $minimum_font_size_limit instead.
525-
*/
526-
if ( ! empty( $minimum_font_size_parsed ) && $minimum_font_size_parsed['value'] < $minimum_font_size_limit['value'] ) {
527-
$minimum_font_size_raw = implode( '', $minimum_font_size_limit );
528-
}
523+
$minimum_font_size_raw = $calculated_minimum_font_size . $preferred_size['unit'];
529524
}
530525
}
531526

‎packages/block-editor/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Enhancement
6+
7+
- Fluid typography: adjust font size min and max rules ([#45536](https://github.com/WordPress/gutenberg/pull/45536)).
8+
59
### Bug Fix
610

711
- `FontSizePicker`: Update fluid utils so that only string, floats and integers are treated as valid font sizes for the purposes of fluid typography ([#44847](https://github.com/WordPress/gutenberg/pull/44847))

‎packages/block-editor/README.md

-1
Original file line numberDiff line numberDiff line change
@@ -428,7 +428,6 @@ _Parameters_
428428
- _args.minimumFontSize_ `?string`: Minimum font size for any clamp() calculation. Optional.
429429
- _args.scaleFactor_ `?number`: A scale factor to determine how fast a font scales within boundaries. Optional.
430430
- _args.minimumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive minimumFontSize. Optional.
431-
- _args.maximumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive maximumFontSize. Optional.
432431

433432
_Returns_
434433

‎packages/block-editor/src/components/font-sizes/fluid-utils.js

+37-64
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';
99
const DEFAULT_MINIMUM_VIEWPORT_WIDTH = '768px';
1010
const DEFAULT_SCALE_FACTOR = 1;
1111
const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
12-
const DEFAULT_MAXIMUM_FONT_SIZE_FACTOR = 1.5;
1312
const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
1413

1514
/**
@@ -41,7 +40,6 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
4140
* @param {?string} args.minimumFontSize Minimum font size for any clamp() calculation. Optional.
4241
* @param {?number} args.scaleFactor A scale factor to determine how fast a font scales within boundaries. Optional.
4342
* @param {?number} args.minimumFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
44-
* @param {?number} args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
4543
*
4644
* @return {string|null} A font-size value using clamp().
4745
*/
@@ -53,15 +51,8 @@ export function getComputedFluidTypographyValue( {
5351
maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
5452
scaleFactor = DEFAULT_SCALE_FACTOR,
5553
minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
56-
maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
5754
minimumFontSizeLimit = DEFAULT_MINIMUM_FONT_SIZE_LIMIT,
5855
} ) {
59-
/*
60-
* Caches minimumFontSize in minimumFontSizeValue
61-
* so we can check if minimumFontSize exists later.
62-
*/
63-
let minimumFontSizeValue = minimumFontSize;
64-
6556
/*
6657
* Calculates missing minimumFontSize and maximumFontSize from
6758
* defaultFontSize if provided.
@@ -75,15 +66,6 @@ export function getComputedFluidTypographyValue( {
7566
return null;
7667
}
7768

78-
// If no minimumFontSize is provided, derive using min scale factor.
79-
if ( ! minimumFontSizeValue ) {
80-
minimumFontSizeValue =
81-
roundToPrecision(
82-
fontSizeParsed.value * minimumFontSizeFactor,
83-
3
84-
) + fontSizeParsed.unit;
85-
}
86-
8769
// Parses the minimum font size limit, so we can perform checks using it.
8870
const minimumFontSizeLimitParsed = getTypographyValueAndUnit(
8971
minimumFontSizeLimit,
@@ -92,57 +74,51 @@ export function getComputedFluidTypographyValue( {
9274
}
9375
);
9476

95-
if ( !! minimumFontSizeLimitParsed?.value ) {
77+
// Don't enforce minimum font size if a font size has explicitly set a min and max value.
78+
if (
79+
!! minimumFontSizeLimitParsed?.value &&
80+
! minimumFontSize &&
81+
! maximumFontSize
82+
) {
9683
/*
9784
* If a minimum size was not passed to this function
98-
* and the user-defined font size is lower than `minimumFontSizeLimit`,
99-
* then uses the user-defined font size as the minimum font-size.
85+
* and the user-defined font size is lower than $minimum_font_size_limit,
86+
* do not calculate a fluid value.
10087
*/
101-
if (
102-
! minimumFontSize &&
103-
fontSizeParsed?.value < minimumFontSizeLimitParsed?.value
104-
) {
105-
minimumFontSizeValue = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
106-
} else {
107-
const minimumFontSizeParsed = getTypographyValueAndUnit(
108-
minimumFontSizeValue,
109-
{
110-
coerceTo: fontSizeParsed.unit,
111-
}
112-
);
113-
114-
/*
115-
* Otherwise, if the passed or calculated minimum font size is lower than `minimumFontSizeLimit`
116-
* use `minimumFontSizeLimit` instead.
117-
*/
118-
if (
119-
!! minimumFontSizeParsed?.value &&
120-
minimumFontSizeParsed.value <
121-
minimumFontSizeLimitParsed.value
122-
) {
123-
minimumFontSizeValue = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
124-
}
88+
if ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {
89+
return null;
12590
}
12691
}
12792

128-
// If no maximumFontSize is provided, derive using max scale factor.
93+
// If no fluid max font size is available use the incoming value.
12994
if ( ! maximumFontSize ) {
130-
maximumFontSize =
131-
roundToPrecision(
132-
fontSizeParsed.value * maximumFontSizeFactor,
133-
3
134-
) + fontSizeParsed.unit;
95+
maximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;
13596
}
136-
}
13797

138-
// Return early if one of the provided inputs is not provided.
139-
if ( ! minimumFontSizeValue || ! maximumFontSize ) {
140-
return null;
98+
/*
99+
* If no minimumFontSize is provided, create one using
100+
* the given font size multiplied by the min font size scale factor.
101+
*/
102+
if ( ! minimumFontSize ) {
103+
const calculatedMinimumFontSize = roundToPrecision(
104+
fontSizeParsed.value * minimumFontSizeFactor,
105+
3
106+
);
107+
108+
// Only use calculated min font size if it's > $minimum_font_size_limit value.
109+
if (
110+
!! minimumFontSizeLimitParsed?.value &&
111+
calculatedMinimumFontSize < minimumFontSizeLimitParsed?.value
112+
) {
113+
minimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;
114+
} else {
115+
minimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;
116+
}
117+
}
141118
}
142119

143120
// Grab the minimum font size and normalize it in order to use the value for calculations.
144-
const minimumFontSizeParsed =
145-
getTypographyValueAndUnit( minimumFontSizeValue );
121+
const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
146122

147123
// We get a 'preferred' unit to keep units consistent when calculating,
148124
// otherwise the result will not be accurate.
@@ -159,12 +135,9 @@ export function getComputedFluidTypographyValue( {
159135
}
160136

161137
// Uses rem for accessible fluid target font scaling.
162-
const minimumFontSizeRem = getTypographyValueAndUnit(
163-
minimumFontSizeValue,
164-
{
165-
coerceTo: 'rem',
166-
}
167-
);
138+
const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
139+
coerceTo: 'rem',
140+
} );
168141

169142
// Viewport widths defined for fluid typography. Normalize units
170143
const maximumViewPortWidthParsed = getTypographyValueAndUnit(
@@ -205,7 +178,7 @@ export function getComputedFluidTypographyValue( {
205178
);
206179
const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
207180

208-
return `clamp(${ minimumFontSizeValue }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
181+
return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
209182
}
210183

211184
/**

‎packages/block-editor/src/components/font-sizes/test/fluid-utils.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
3333
fontSize: '30px',
3434
} );
3535
expect( fluidTypographyValues ).toBe(
36-
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
36+
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
3737
);
3838
} );
3939

@@ -42,7 +42,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
4242
fontSize: '30px',
4343
} );
4444
expect( fluidTypographyValues ).toBe(
45-
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 2.704), 45px)'
45+
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 0.901), 30px)'
4646
);
4747
} );
4848

@@ -53,7 +53,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
5353
maximumViewPortWidth: '1000px',
5454
} );
5555
expect( fluidTypographyValues ).toBe(
56-
'clamp(22.5px, 1.406rem + ((1vw - 5px) * 4.5), 45px)'
56+
'clamp(22.5px, 1.406rem + ((1vw - 5px) * 1.5), 30px)'
5757
);
5858
} );
5959

@@ -63,7 +63,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
6363
scaleFactor: '2',
6464
} );
6565
expect( fluidTypographyValues ).toBe(
66-
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 5.409), 45px)'
66+
'clamp(22.5px, 1.406rem + ((1vw - 7.68px) * 1.803), 30px)'
6767
);
6868
} );
6969

@@ -74,7 +74,7 @@ describe( 'getComputedFluidTypographyValue()', () => {
7474
maximumFontSizeFactor: '2',
7575
} );
7676
expect( fluidTypographyValues ).toBe(
77-
'clamp(15px, 0.938rem + ((1vw - 7.68px) * 5.409), 60px)'
77+
'clamp(15px, 0.938rem + ((1vw - 7.68px) * 1.803), 30px)'
7878
);
7979
} );
8080

‎packages/block-editor/src/hooks/test/use-typography-props.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ describe( 'getTypographyClassesAndStyles', () => {
4242
style: {
4343
letterSpacing: '22px',
4444
fontSize:
45-
'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
45+
'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 0.962), 2rem)',
4646
textTransform: 'uppercase',
4747
},
4848
} );

0 commit comments

Comments
 (0)