Make custom font sizes appear fluid in the block editor when fluid ty…

…pography is enabled (#44765) * Make custom font sizes appear fluid in the block editor when fluid typography is enabled * Add tests for fluid utils * update description * You shall not pass with a number, well, yes, but we'll coerce it to `px` and the tests shall pass nonetheless!!! Co-authored-by: Ben Dwyer <[email protected]> Co-authored-by: ramonjd <[email protected]>
WordPress · Oct 10, 2022 · b70b8b8 · b70b8b8
1 parent 6a2d304
commit b70b8b8
Show file tree

Hide file tree

Showing 7 changed files with 437 additions and 185 deletions.
diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
@@ -395,6 +395,45 @@ _Returns_
 
 -   `?Object`: Color object included in the colors array whose color property equals colorValue. Returns undefined if no color object matches this requirement.
 
+### getComputedFluidTypographyValue
+
+Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+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.
+
+_Usage_
+
+```js
+// Calculate fluid font-size value from a minimum and maximum value.
+const fontSize = getComputedFluidTypographyValue( {
+	minimumFontSize: '20px',
+	maximumFontSize: '45px',
+} );
+// Calculate fluid font-size value from a single font size.
+const fontSize = getComputedFluidTypographyValue( {
+	fontSize: '30px',
+} );
+```
+
+_Parameters_
+
+-   _args_ `Object`:
+-   _args.minimumViewPortWidth_ `?string`: Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+-   _args.maximumViewPortWidth_ `?string`: Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+-   _args.fontSize_ `?string`: Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
+-   _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.maximumFontSizeFactor_ `?number`: How much to scale defaultFontSize by to derive maximumFontSize. Optional.
+
+_Returns_
+
+-   `string|null`: A font-size value using clamp().
+
 ### getFontSize
 
 Returns the font size object based on an array of named font sizes and the namedFontSize and customFontSize values.

diff --git a/packages/block-editor/src/components/font-sizes/fluid-utils.js b/packages/block-editor/src/components/font-sizes/fluid-utils.js
@@ -0,0 +1,218 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+// Defaults.
+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;
+
+/**
+ * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * 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.
+ *
+ * @example
+ * ```js
+ * // Calculate fluid font-size value from a minimum and maximum value.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     minimumFontSize: '20px',
+ *     maximumFontSize: '45px'
+ * } );
+ * // Calculate fluid font-size value from a single font size.
+ * const fontSize = getComputedFluidTypographyValue( {
+ *     fontSize: '30px',
+ * } );
+ * ```
+ *
+ * @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} 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 {?number} args.maximumFontSizeFactor How much to scale defaultFontSize by to derive maximumFontSize. Optional.
+ *
+ * @return {string|null} A font-size value using clamp().
+ */
+export function getComputedFluidTypographyValue( {
+	minimumFontSize,
+	maximumFontSize,
+	fontSize,
+	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+	scaleFactor = DEFAULT_SCALE_FACTOR,
+	minimumFontSizeFactor = DEFAULT_MINIMUM_FONT_SIZE_FACTOR,
+	maximumFontSizeFactor = DEFAULT_MAXIMUM_FONT_SIZE_FACTOR,
+} ) {
+	// Calculate missing minimumFontSize and maximumFontSize from
+	// defaultFontSize if provided.
+	if ( fontSize && ( ! minimumFontSize || ! maximumFontSize ) ) {
+		// Parse default font size.
+		const fontSizeParsed = getTypographyValueAndUnit( fontSize );
+
+		// Protect against invalid units.
+		if ( ! fontSizeParsed?.unit ) {
+			return null;
+		}
+
+		// If no minimumFontSize is provided, derive using min scale factor.
+		if ( ! minimumFontSize ) {
+			minimumFontSize =
+				fontSizeParsed.value * minimumFontSizeFactor +
+				fontSizeParsed.unit;
+		}
+
+		// If no maximumFontSize is provided, derive using max scale factor.
+		if ( ! maximumFontSize ) {
+			maximumFontSize =
+				fontSizeParsed.value * maximumFontSizeFactor +
+				fontSizeParsed.unit;
+		}
+	}
+
+	// Return early if one of the provided inputs is not provided.
+	if ( ! minimumFontSize || ! maximumFontSize ) {
+		return null;
+	}
+
+	// Grab the minimum font size and normalize it in order to use the value for calculations.
+	const minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );
+
+	// We get a 'preferred' unit to keep units consistent when calculating,
+	// otherwise the result will not be accurate.
+	const fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';
+
+	// Grab the maximum font size and normalize it in order to use the value for calculations.
+	const maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {
+		coerceTo: fontSizeUnit,
+	} );
+
+	// Protect against unsupported units.
+	if ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {
+		return null;
+	}
+
+	// Use rem for accessible fluid target font scaling.
+	const minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {
+		coerceTo: 'rem',
+	} );
+
+	// Viewport widths defined for fluid typography. Normalize units
+	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
+		maximumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
+		minimumViewPortWidth,
+		{ coerceTo: fontSizeUnit }
+	);
+
+	// Protect against unsupported units.
+	if (
+		! maximumViewPortWidthParsed ||
+		! minumumViewPortWidthParsed ||
+		! minimumFontSizeRem
+	) {
+		return null;
+	}
+
+	// Build CSS rule.
+	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
+	const minViewPortWidthOffsetValue = roundToPrecision(
+		minumumViewPortWidthParsed.value / 100,
+		3
+	);
+
+	const viewPortWidthOffset = minViewPortWidthOffsetValue + fontSizeUnit;
+	let linearFactor =
+		100 *
+		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
+			( maximumViewPortWidthParsed.value -
+				minumumViewPortWidthParsed.value ) );
+	linearFactor = roundToPrecision( linearFactor, 3 ) || 1;
+	const linearFactorScaled = linearFactor * scaleFactor;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+
+	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
+}
+
+/**
+ *
+ * @param {string}           rawValue Raw size value from theme.json.
+ * @param {Object|undefined} options  Calculation options.
+ *
+ * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.
+ */
+export function getTypographyValueAndUnit( rawValue, options = {} ) {
+	if ( ! rawValue ) {
+		return null;
+	}
+
+	if ( typeof rawValue === 'number' && ! Number.isNaN( rawValue ) ) {
+		rawValue = `${ rawValue }px`;
+	}
+
+	const { coerceTo, rootSizeValue, acceptableUnits } = {
+		coerceTo: '',
+		// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( "html" ) ).fontSize`.
+		rootSizeValue: 16,
+		acceptableUnits: [ 'rem', 'px', 'em' ],
+		...options,
+	};
+
+	const acceptableUnitsGroup = acceptableUnits?.join( '|' );
+	const regexUnits = new RegExp(
+		`^(\\d*\\.?\\d+)(${ acceptableUnitsGroup }){1,1}$`
+	);
+
+	const matches = rawValue.match( regexUnits );
+
+	// We need a number value and a unit.
+	if ( ! matches || matches.length < 3 ) {
+		return null;
+	}
+
+	let [ , value, unit ] = matches;
+
+	let returnValue = parseFloat( value );
+
+	if ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {
+		returnValue = returnValue * rootSizeValue;
+		unit = coerceTo;
+	}
+
+	if ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {
+		returnValue = returnValue / rootSizeValue;
+		unit = coerceTo;
+	}
+
+	return {
+		value: returnValue,
+		unit,
+	};
+}
+
+/**
+ * Returns a value rounded to defined precision.
+ * Returns `undefined` if the value is not a valid finite number.
+ *
+ * @param {number} value  Raw value.
+ * @param {number} digits The number of digits to appear after the decimal point
+ *
+ * @return {number|undefined} Value rounded to standard precision.
+ */
+export function roundToPrecision( value, digits = 3 ) {
+	return Number.isFinite( value )
+		? parseFloat( value.toFixed( digits ) )
+		: undefined;
+}
diff --git a/packages/block-editor/src/components/font-sizes/index.js b/packages/block-editor/src/components/font-sizes/index.js
@@ -3,5 +3,6 @@ export {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 } from './utils';
+export { getComputedFluidTypographyValue } from './fluid-utils';
 export { default as FontSizePicker } from './font-size-picker';
 export { default as withFontSizes } from './with-font-sizes';
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
@@ -0,0 +1,77 @@
+/**
+ * WordPress dependencies
+ */
+import { logged } from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import { getComputedFluidTypographyValue } from '../fluid-utils';
+
+describe( 'getComputedFluidTypographyValue()', () => {
+	afterEach( () => {
+		for ( const key in logged ) {
+			delete logged[ key ];
+		}
+	} );
+
+	it( 'should return a fluid font size when given a min and max font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			minimumFontSize: '20px',
+			maximumFontSize: '45px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(20px, 1.25rem + ((1vw - 7.68px) * 3.005), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 2.704), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size based on px when given a numerical font size', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 2.704), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a min and max viewport width', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			minimumViewPortWidth: '500px',
+			maximumViewPortWidth: '1000px',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 5px) * 4.5), 45px)'
+		);
+	} );
+
+	it( 'should return a fluid font size when given a scale factor', () => {
+		const fluidTypographyValues = getComputedFluidTypographyValue( {
+			fontSize: '30px',
+			scaleFactor: '2',
+		} );
+		expect( fluidTypographyValues ).toBe(
+			'clamp(22.5px, 1.40625rem + ((1vw - 7.68px) * 5.408), 45px)'
+		);
+	} );
+
+	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.9375rem + ((1vw - 7.68px) * 5.409), 60px)'
+		);
+	} );
+} );