@wordpress/block-editor 10.0.4 → 10.0.6

package/src/components/font-sizes/fluid-utils.js

@@ -0,0 +1,221 @@
+/**
+ * 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|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 {?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 })`;
+}
+
+/**
+ * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].
+ * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.
+ *
+ * @param {string|number}    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 ( typeof rawValue !== 'string' && typeof rawValue !== 'number' ) {
+		return null;
+	}
+
+	// Converts numeric values to pixel values by default.
+	if ( isFinite( 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;
+}

package/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';

package/src/components/font-sizes/test/fluid-utils.js

@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+import { logged } from '@wordpress/deprecated';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getComputedFluidTypographyValue,
+	getTypographyValueAndUnit,
+} 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)'
+		);
+	} );
+
+	describe( 'getTypographyValueAndUnit', () => {
+		it( 'should return the expected return values', () => {
+			[
+				{
+					value: null,
+					expected: null,
+				},
+				{
+					value: false,
+					expected: null,
+				},
+				{
+					value: true,
+					expected: null,
+				},
+				{
+					value: [ '10' ],
+					expected: null,
+				},
+				{
+					value: '10vh',
+					expected: null,
+				},
+				{
+					value: 'calc(2 * 10px)',
+					expected: null,
+				},
+				{
+					value: 'clamp(15px, 0.9375rem + ((1vw - 7.68px) * 5.409), 60px)',
+					expected: null,
+				},
+				{
+					value: '10',
+					expected: {
+						value: 10,
+						unit: 'px',
+					},
+				},
+				{
+					value: 11,
+					expected: {
+						value: 11,
+						unit: 'px',
+					},
+				},
+				{
+					value: 11.234,
+					expected: {
+						value: 11.234,
+						unit: 'px',
+					},
+				},
+				{
+					value: '12rem',
+					expected: {
+						value: 12,
+						unit: 'rem',
+					},
+				},
+				{
+					value: '12px',
+					expected: {
+						value: 12,
+						unit: 'px',
+					},
+				},
+				{
+					value: '12em',
+					expected: {
+						value: 12,
+						unit: 'em',
+					},
+				},
+				{
+					value: '12.74em',
+					expected: {
+						value: 12.74,
+						unit: 'em',
+					},
+				},
+			].forEach( ( { value, expected } ) => {
+				expect( getTypographyValueAndUnit( value ) ).toEqual(
+					expected
+				);
+			} );
+		} );
+	} );
+} );

package/src/components/inserter/search-items.js

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { noCase } from 'change-case';
 import removeAccents from 'remove-accents';
-import { find } from 'lodash';
+import { find, words } from 'lodash';
 
 // Default search helpers.
 const defaultGetName = ( item ) => item.name || '';
@@ -36,17 +35,6 @@ function normalizeSearchInput( input = '' ) {
 	return input;
 }
 
-/**
- * Extracts words from an input string.
- *
- * @param {string} input The input string.
- *
- * @return {Array} Words, extracted from the input string.
- */
-function extractWords( input = '' ) {
-	return noCase( input ).split( ' ' ).filter( Boolean );
-}
-
 /**
  * Converts the search term into a list of normalized terms.
  *
@@ -55,7 +43,7 @@ function extractWords( input = '' ) {
  * @return {string[]} The normalized list of search terms.
  */
 export const getNormalizedSearchTerms = ( input = '' ) => {
-	return extractWords( normalizeSearchInput( input ) );
+	return words( normalizeSearchInput( input ) );
 };
 
 const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
@@ -162,7 +150,7 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 			category,
 			collection,
 		].join( ' ' );
-		const normalizedSearchTerms = extractWords( normalizedSearchInput );
+		const normalizedSearchTerms = words( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,
 			terms

package/src/components/inserter/test/search-items.js

@@ -42,6 +42,10 @@ describe( 'getNormalizedSearchTerms', () => {
 			getNormalizedSearchTerms( '  Média  &   Text Tag-Cloud > 123' )
 		).toEqual( [ 'media', 'text', 'tag', 'cloud', '123' ] );
 	} );
+
+	it( 'should support non-latin letters', () => {
+		expect( getNormalizedSearchTerms( 'მედია' ) ).toEqual( [ 'მედია' ] );
+	} );
 } );
 
 describe( 'getItemSearchRank', () => {

package/src/hooks/font-size.js

@@ -5,6 +5,7 @@ import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
 import TokenList from '@wordpress/token-list';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -14,6 +15,7 @@ import {
 	getFontSizeClass,
 	getFontSizeObjectByValue,
 	FontSizePicker,
+	getComputedFluidTypographyValue,
 } from '../components/font-sizes';
 import { TYPOGRAPHY_SUPPORT_KEY } from './typography';
 import {
@@ -22,6 +24,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -282,6 +285,69 @@ export function addTransforms( result, source, index, results ) {
 	);
 }
 
+/**
+ * Allow custom font sizes to appear fluid when fluid typography is enabled at
+ * the theme level.
+ *
+ * Adds a custom getEditWrapperProps() callback to all block types that support
+ * font sizes. Then, if fluid typography is enabled, this callback will swap any
+ * custom font size in style.fontSize with a fluid font size (i.e. one that uses
+ * clamp()).
+ *
+ * It's important that this hook runs after 'core/style/addEditProps' sets
+ * style.fontSize as otherwise fontSize will be overwritten.
+ *
+ * @param {Object} blockType Block settings object.
+ */
+function addEditPropsForFluidCustomFontSizes( blockType ) {
+	if (
+		! hasBlockSupport( blockType, FONT_SIZE_SUPPORT_KEY ) ||
+		shouldSkipSerialization( blockType, TYPOGRAPHY_SUPPORT_KEY, 'fontSize' )
+	) {
+		return blockType;
+	}
+
+	const existingGetEditWrapperProps = blockType.getEditWrapperProps;
+
+	blockType.getEditWrapperProps = ( attributes ) => {
+		const wrapperProps = existingGetEditWrapperProps
+			? existingGetEditWrapperProps( attributes )
+			: {};
+
+		const fontSize = wrapperProps?.style?.fontSize;
+
+		// TODO: This sucks! We should be using useSetting( 'typography.fluid' )
+		// or even useSelect( blockEditorStore ). We can't do either here
+		// because getEditWrapperProps is a plain JavaScript function called by
+		// BlockListBlock and not a React component rendered within
+		// BlockListContext.Provider. If we set fontSize using editor.
+		// BlockListBlock instead of using getEditWrapperProps then the value is
+		// clobbered when the core/style/addEditProps filter runs.
+		const isFluidTypographyEnabled =
+			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+				?.typography?.fluid;
+
+		const newFontSize =
+			fontSize && isFluidTypographyEnabled
+				? getComputedFluidTypographyValue( { fontSize } )
+				: null;
+
+		if ( newFontSize === null ) {
+			return wrapperProps;
+		}
+
+		return {
+			...wrapperProps,
+			style: {
+				...wrapperProps?.style,
+				fontSize: newFontSize,
+			},
+		};
+	};
+
+	return blockType;
+}
+
 addFilter(
 	'blocks.registerBlockType',
 	'core/font/addAttribute',
@@ -307,3 +373,12 @@ addFilter(
 	'core/font-size/addTransforms',
 	addTransforms
 );
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/font-size/addEditPropsForFluidCustomFontSizes',
+	addEditPropsForFluidCustomFontSizes,
+	// Run after 'core/style/addEditProps' so that the style object has already
+	// been translated into inline CSS.
+	11
+);

package/src/hooks/margin.js

@@ -190,10 +190,10 @@ export function MarginVisualizer( { clientId, attributes } ) {
 			borderRightWidth: marginRight,
 			borderBottomWidth: marginBottom,
 			borderLeftWidth: marginLeft,
-			top: marginTop !== 0 ? `-${ marginTop }` : 0,
-			right: marginRight !== 0 ? `-${ marginRight }` : 0,
-			bottom: marginBottom !== 0 ? `-${ marginBottom }` : 0,
-			left: marginLeft !== 0 ? `-${ marginLeft }` : 0,
+			top: marginTop !== 0 ? `calc(${ marginTop } * -1)` : 0,
+			right: marginRight !== 0 ? `calc(${ marginRight } * -1)` : 0,
+			bottom: marginBottom !== 0 ? `calc(${ marginBottom } * -1)` : 0,
+			left: marginLeft !== 0 ? `calc(${ marginLeft } * -1)` : 0,
 		};
 	}, [ margin ] );
 

package/src/hooks/test/use-typography-props.js

@@ -25,4 +25,26 @@ describe( 'getTypographyClassesAndStyles', () => {
 			},
 		} );
 	} );
+
+	it( 'should return fluid font size styles', () => {
+		const attributes = {
+			fontFamily: 'tofu',
+			style: {
+				typography: {
+					letterSpacing: '22px',
+					fontSize: '2rem',
+					textTransform: 'uppercase',
+				},
+			},
+		};
+		expect( getTypographyClassesAndStyles( attributes, true ) ).toEqual( {
+			className: 'has-tofu-font-family',
+			style: {
+				letterSpacing: '22px',
+				fontSize:
+					'clamp(1.5rem, 1.5rem + ((1vw - 0.48rem) * 2.885), 3rem)',
+				textTransform: 'uppercase',
+			},
+		} );
+	} );
 } );

package/src/hooks/use-typography-props.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import { getInlineStyles } from './style';
 import { getFontSizeClass } from '../components/font-sizes';
+import { getComputedFluidTypographyValue } from '../components/font-sizes/fluid-utils';
 
 // This utility is intended to assist where the serialization of the typography
 // block support is being skipped for a block but the typography related CSS
@@ -18,12 +19,26 @@ import { getFontSizeClass } from '../components/font-sizes';
  * Provides the CSS class names and inline styles for a block's typography support
  * attributes.
  *
- * @param {Object} attributes Block attributes.
+ * @param {Object}  attributes            Block attributes.
+ * @param {boolean} isFluidFontSizeActive Whether the function should try to convert font sizes to fluid values.
  *
  * @return {Object} Typography block support derived CSS classes & styles.
  */
-export function getTypographyClassesAndStyles( attributes ) {
-	const typographyStyles = attributes?.style?.typography || {};
+export function getTypographyClassesAndStyles(
+	attributes,
+	isFluidFontSizeActive
+) {
+	let typographyStyles = attributes?.style?.typography || {};
+
+	if ( isFluidFontSizeActive ) {
+		typographyStyles = {
+			...typographyStyles,
+			fontSize: getComputedFluidTypographyValue( {
+				fontSize: attributes?.style?.typography?.fontSize,
+			} ),
+		};
+	}
+
 	const style = getInlineStyles( { typography: typographyStyles } );
 	const fontFamilyClassName = !! attributes?.fontFamily
 		? `has-${ kebabCase( attributes.fontFamily ) }-font-family`