Skip to content

Commit

Permalink
In this commit, we use a logarithmic scale factor to calculate a mini…
Browse files Browse the repository at this point in the history 
…mum 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)
  • Loading branch information
@ramonjd
ramonjd committed Apr 11, 2023
1 parent 4236498 commit 430b09f
Show file tree
Hide file tree
Showing 6 changed files with 100 additions and 123 deletions.
34 changes: 13 additions & 21 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 ) ) {
/*
Expand All @@ -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'] ) {
Expand Down
6 changes: 3 additions & 3 deletions packages/block-editor/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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_

Expand All @@ -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_
Expand All @@ -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_

Expand Down
57 changes: 27 additions & 30 deletions packages/block-editor/src/components/font-sizes/fluid-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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().
*/
Expand All @@ -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.
Expand Down Expand Up @@ -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 &&
Expand All @@ -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 &&
Expand Down
21 changes: 5 additions & 16 deletions packages/block-editor/src/components/font-sizes/test/fluid-utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)'
);
} );

Expand All @@ -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)'
);
} );

Expand All @@ -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)'
);
} );

Expand All @@ -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)'
);
} );

Expand All @@ -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)'
);
} );

Expand Down
Loading

0 comments on commit 430b09f

Please sign in to comment.