[Components - FontSizePicker]: Add alias option in font sizes

lib/compat/wordpress-5.9/theme-i18n.json

@@ -3,7 +3,8 @@
 		"typography": {
 				"fontSizes": [
 					{
-						"name": "Font size name"
+						"name": "Font size name",
+						"alias": "Short font size name"
 					}
 				],
 				"fontFamilies": [

packages/components/src/font-size-picker/README.md

@@ -65,10 +65,11 @@ If no value exists, this prop defines the starting position for the font size pi
 
 ### fontSizes
 
-An array of font size objects. The object should contain properties size, name, and slug.
+An array of font size objects. The object should contain properties `size`, `name`, `slug` and can contain `alias` on special use cases described right below.
 The property `size` contains a number with the font size value, in `px` or a string specifying the font size CSS property that should be used eg: "13px", "1em", or "clamp(12px, 5vw, 100px)".
 The `name` property includes a label for that font size e.g.: `Small`.
 The `slug` property is a string with a unique identifier for the font size. Used for the class generation process.
+The `alias` property will only be used if available font sizes are eligible for showing the segmented control, contain some complex css value(`clamp, var, etc..`) and is present in every font size.
 
 **Note:** The slugs `default` and `custom` are reserved and cannot be used.
 

packages/components/src/font-size-picker/index.js

@@ -47,23 +47,41 @@ function FontSizePicker(
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
 
-	// The main font size UI displays a toggle group when the presets are less
-	// than six and a select control when they are more.
-	//
-	// A select control is also used when the value of a preset cannot be
-	// immediately computed (eg. 'calc', 'var').
+	/**
+	 * The main font size UI displays a toggle group when the presets are less
+	 * than six and a select control when they are more.
+	 *
+	 * A select control is also used when the value of a preset cannot be
+	 * immediately computed (eg. 'calc', 'var') and there is no `alias` provided
+	 * for every font size.
+	 */
+	const fontSizesContainComplexValues = fontSizes.some(
+		( { size } ) => ! isSimpleCssValue( size )
+	);
+	const allFontSizesHaveAliases = fontSizes.every(
+		( { alias } ) => !! alias
+	);
 	const shouldUseSelectControl =
 		fontSizes.length > 5 ||
-		fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );
+		( fontSizesContainComplexValues && ! allFontSizesHaveAliases );
+	const shouldUseAliases =
+		fontSizesContainComplexValues && allFontSizesHaveAliases;
 
 	const options = useMemo(
 		() =>
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes
+				disableCustomFontSizes,
+				shouldUseAliases
 			),
-		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
+		[
+			shouldUseSelectControl,
+			fontSizes,
+			disableCustomFontSizes,
+			allFontSizesHaveAliases,
+			shouldUseAliases,
+		]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -88,12 +106,18 @@ function FontSizePicker(
 		}
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
-		if ( typeof selectedOption.size === 'string' ) {
+		if ( ! shouldUseAliases && typeof selectedOption.size === 'string' ) {
 			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
 			hint += `(${ unit })`;
 		}
 		return hint;
-	}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );
+	}, [
+		showCustomValueControl,
+		selectedOption?.slug,
+		value,
+		isCustomValue,
+		shouldUseAliases,
+	] );
 
 	if ( ! options ) {
 		return null;

packages/components/src/font-size-picker/stories/index.js

@@ -194,3 +194,73 @@ export const withComplexCSSValues = () => {
 		</div>
 	);
 };
+
+export const withAliasesAndComplexCssValues = () => {
+	const aliases = [ 'XS', 'S', 'N', 'L', 'XL', 'XXL' ];
+	const options = [
+		{
+			name: 'Extra Small',
+			slug: 'extra-small',
+			size: '0.65rem',
+		},
+		{
+			name: 'Small',
+			slug: 'small',
+			size: '0.75rem',
+		},
+		{
+			name: 'Normal',
+			slug: 'normal',
+			size: '1rem',
+		},
+		{
+			name: 'Large',
+			slug: 'large',
+			size: '2.5rem',
+		},
+		{
+			name: 'Extra Large',
+			slug: 'extra-large',
+			size: '3.5rem',
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: '3.8rem',
+		},
+	];
+	const showMoreFontSizes = boolean( 'Add more font sizes', false );
+	const addComplexCssValues = boolean(
+		'Add some complex css values(calc, var, etc..)',
+		true
+	);
+	const addAliases = boolean(
+		'Add aliases to font sizes - used depending the number of available options and whether they contain complex css values',
+		true
+	);
+
+	const _options = options.map( ( option, index ) => {
+		const _option = { ...option };
+		if ( addAliases ) {
+			_option.alias = aliases[ index ];
+		}
+		// Adding just one complex css value is enough (first element);
+		if ( addComplexCssValues && ! index ) {
+			_option.size = 'clamp(1.75rem, 3vw, 2.25rem)';
+		}
+		return _option;
+	} );
+
+	const fontSizes = _options.slice(
+		0,
+		showMoreFontSizes ? _options.length : 5
+	);
+	return (
+		<div style={ { maxWidth: '248px' } }>
+			<FontSizePickerWithState
+				fontSizes={ fontSizes }
+				initialValue={ '1rem' }
+			/>
+		</div>
+	);
+};

packages/components/src/font-size-picker/utils.js

@@ -50,19 +50,21 @@ export function isSimpleCssValue( value ) {
  * @param {boolean}  useSelectControl       Whether to use a select control.
  * @param {Object[]} optionsArray           Array of available font sizes objects.
  * @param {*}        disableCustomFontSizes Flag that indicates if custom font sizes are disabled.
+ * @param {boolean}  shouldUseAliases       Flag for using `alias` in ToggleGroupControl - if applicable.
  * @return {Object[]|null} Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
 	useSelectControl,
 	optionsArray,
-	disableCustomFontSizes
+	disableCustomFontSizes,
+	shouldUseAliases
 ) {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
 	return useSelectControl
 		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
+		: getToggleGroupOptions( optionsArray, shouldUseAliases );
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
@@ -80,10 +82,10 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function getToggleGroupOptions( optionsArray ) {
-	return optionsArray.map( ( { slug, size, name } ) => {
-		let label = size;
-		if ( typeof size === 'string' ) {
+function getToggleGroupOptions( optionsArray, shouldUseAliases ) {
+	return optionsArray.map( ( { slug, size, name, alias } ) => {
+		let label = shouldUseAliases ? alias : size;
+		if ( ! shouldUseAliases && typeof size === 'string' ) {
 			const [ numericValue ] = splitValueAndUnitFromSize( size );
 			label = numericValue;
 		}