@wordpress/components 19.1.5 → 19.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.1.5",
+	"version": "19.1.6",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,7 +36,7 @@
 		"@emotion/styled": "^11.3.0",
 		"@emotion/utils": "1.0.0",
 		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/compose": "^5.0.6",
+		"@wordpress/compose": "^5.0.7",
 		"@wordpress/date": "^4.2.3",
 		"@wordpress/deprecated": "^3.2.3",
 		"@wordpress/dom": "^3.2.7",
@@ -47,7 +47,7 @@
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/rich-text": "^5.0.6",
+		"@wordpress/rich-text": "^5.0.7",
 		"@wordpress/warning": "^2.2.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -74,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
+	"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
 }

package/src/font-size-picker/index.js

@@ -47,23 +47,28 @@ 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').
-	const shouldUseSelectControl =
-		fontSizes.length > 5 ||
-		fontSizes.some( ( { size } ) => ! isSimpleCssValue( size ) );
-
+	/**
+	 * The main font size UI displays a toggle group when the presets are less
+	 * than six and a select control when they are more.
+	 */
+	const fontSizesContainComplexValues = fontSizes.some(
+		( { size } ) => ! isSimpleCssValue( size )
+	);
+	const shouldUseSelectControl = fontSizes.length > 5;
 	const options = useMemo(
 		() =>
 			getFontSizeOptions(
 				shouldUseSelectControl,
 				fontSizes,
-				disableCustomFontSizes
+				disableCustomFontSizes,
+				fontSizesContainComplexValues
 			),
-		[ shouldUseSelectControl, fontSizes, disableCustomFontSizes ]
+		[
+			shouldUseSelectControl,
+			fontSizes,
+			disableCustomFontSizes,
+			fontSizesContainComplexValues,
+		]
 	);
 	const selectedOption = getSelectedOption( fontSizes, value );
 	const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE;
@@ -88,12 +93,21 @@ function FontSizePicker(
 		}
 		// Calculate the `hint` for toggle group control.
 		let hint = selectedOption.name;
-		if ( typeof selectedOption.size === 'string' ) {
+		if (
+			! fontSizesContainComplexValues &&
+			typeof selectedOption.size === 'string'
+		) {
 			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
 			hint += `(${ unit })`;
 		}
 		return hint;
-	}, [ showCustomValueControl, selectedOption?.slug, value, isCustomValue ] );
+	}, [
+		showCustomValueControl,
+		selectedOption?.slug,
+		value,
+		isCustomValue,
+		fontSizesContainComplexValues,
+	] );
 
 	if ( ! options ) {
 		return null;

package/src/font-size-picker/stories/index.js

@@ -156,3 +156,65 @@ export const differentControlBySize = () => {
 		<FontSizePickerWithState fontSizes={ fontSizes } initialValue={ 8 } />
 	);
 };
+
+export const withComplexCSSValues = () => {
+	const options = [
+		{
+			name: 'Small',
+			slug: 'small',
+			size: '0.65rem',
+		},
+		{
+			name: 'Medium',
+			slug: 'medium',
+			size: '1.125rem',
+		},
+		{
+			name: 'Large',
+			slug: 'large',
+			size: '1.7rem',
+		},
+		{
+			name: 'Extra Large',
+			slug: 'extra-large',
+			size: '1.95rem',
+		},
+		{
+			name: 'Extra Extra Large',
+			slug: 'extra-extra-large',
+			size: '2.5rem',
+		},
+		{
+			name: 'Huge',
+			slug: 'huge',
+			size: '2.8rem',
+		},
+	];
+	const showMoreFontSizes = boolean( 'Add more font sizes', false );
+	const addComplexCssValues = boolean(
+		'Add some complex css values(calc, var, etc..)',
+		true
+	);
+
+	const _options = options.map( ( option, index ) => {
+		const _option = { ...option };
+		// 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={ '1.125rem' }
+			/>
+		</div>
+	);
+};

package/src/font-size-picker/test/index.js

@@ -141,4 +141,91 @@ describe( 'FontSizePicker', () => {
 			expect( fontSize ).toBe( '16px' );
 		} );
 	} );
+	describe( 'renders different control', () => {
+		const options = [
+			{
+				name: 'Small',
+				slug: 'small',
+				size: '0.65rem',
+			},
+			{
+				name: 'Medium',
+				slug: 'medium',
+				size: '1.125rem',
+			},
+			{
+				name: 'Large',
+				slug: 'large',
+				size: '1.7rem',
+			},
+		];
+		it( 'should render select control when we have more than five font sizes', () => {
+			const extraOptions = [
+				{
+					name: 'Extra Large',
+					slug: 'extra-large',
+					size: '1.95rem',
+				},
+				{
+					name: 'Extra Extra Large',
+					slug: 'extra-extra-large',
+					size: '2.5rem',
+				},
+				{
+					name: 'Huge',
+					slug: 'huge',
+					size: '2.8rem',
+				},
+			];
+			const fontSizes = [ ...options, ...extraOptions ];
+			render(
+				<FontSizePicker
+					fontSizes={ fontSizes }
+					value={ fontSizes[ 0 ].size }
+				/>
+			);
+			// Trigger click to open the select menu and take into account
+			// the two extra options (default, custom);
+			fireEvent.click(
+				screen.getByLabelText( 'Font size', { selector: 'button' } )
+			);
+			const element = screen.getAllByRole( 'option' );
+			expect( element ).toHaveLength( fontSizes.length + 2 );
+		} );
+		describe( 'segmented control', () => {
+			it( 'should use numeric labels for simple css values', () => {
+				const fontSizes = [ ...options ];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+					/>
+				);
+				const element = screen.getByLabelText( 'Large' );
+				expect( element ).toBeInTheDocument();
+				expect( element.children ).toHaveLength( 2 );
+				expect( element.children[ 0 ].textContent ).toBe( '1.7' );
+			} );
+			it( 'should use incremental sequence of numbers as labels if we have complex css', () => {
+				const fontSizes = [
+					...options,
+					{
+						name: 'Extra Large',
+						slug: 'extra-large',
+						size: 'clamp(1.75rem, 3vw, 2.25rem)',
+					},
+				];
+				render(
+					<FontSizePicker
+						fontSizes={ fontSizes }
+						value={ fontSizes[ 0 ].size }
+					/>
+				);
+				const element = screen.getByLabelText( 'Large' );
+				expect( element ).toBeInTheDocument();
+				expect( element.children ).toHaveLength( 2 );
+				expect( element.children[ 0 ].textContent ).toBe( '3' );
+			} );
+		} );
+	} );
 } );

package/src/font-size-picker/utils.js

@@ -14,6 +14,15 @@ const CUSTOM_FONT_SIZE_OPTION = {
 	name: __( 'Custom' ),
 };
 
+/**
+ * In case we have at most five font sizes, where at least one the them
+ * contain a complex css value(clamp, var, etc..) show a incremental sequence
+ * of numbers as a label of the font size. We do this because complex css values
+ * cannot be caluclated properly and the incremental sequence of numbers as labels
+ * can help the user better mentally map the different available font sizes.
+ */
+const FONT_SIZES_ALIASES = [ '1', '2', '3', '4', '5' ];
+
 /**
  * Helper util to split a font size to its numeric value
  * and its `unit`, if exists.
@@ -46,22 +55,24 @@ export function isSimpleCssValue( value ) {
  * Return font size options in the proper format depending
  * on the currently used control (select, toggle group).
  *
- * @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}  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}  optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..).
  * @return {Object[]|null} Array of font sizes in proper format for the used control.
  */
 export function getFontSizeOptions(
 	useSelectControl,
 	optionsArray,
-	disableCustomFontSizes
+	disableCustomFontSizes,
+	optionsContainComplexCssValues
 ) {
 	if ( disableCustomFontSizes && ! optionsArray.length ) {
 		return null;
 	}
 	return useSelectControl
 		? getSelectOptions( optionsArray, disableCustomFontSizes )
-		: getToggleGroupOptions( optionsArray );
+		: getToggleGroupOptions( optionsArray, optionsContainComplexCssValues );
 }
 
 function getSelectOptions( optionsArray, disableCustomFontSizes ) {
@@ -79,10 +90,12 @@ function getSelectOptions( optionsArray, disableCustomFontSizes ) {
 	} ) );
 }
 
-function getToggleGroupOptions( optionsArray ) {
-	return optionsArray.map( ( { slug, size, name } ) => {
-		let label = size;
-		if ( typeof size === 'string' ) {
+function getToggleGroupOptions( optionsArray, optionsContainComplexCssValues ) {
+	return optionsArray.map( ( { slug, size, name }, index ) => {
+		let label = optionsContainComplexCssValues
+			? FONT_SIZES_ALIASES[ index ]
+			: size;
+		if ( ! optionsContainComplexCssValues && typeof size === 'string' ) {
 			const [ numericValue ] = splitValueAndUnitFromSize( size );
 			label = numericValue;
 		}

package/src/palette-edit/index.js

@@ -40,6 +40,8 @@ import { NavigableMenu } from '../navigable-container';
 import { DEFAULT_GRADIENT } from '../custom-gradient-picker/constants';
 import CustomGradientPicker from '../custom-gradient-picker';
 
+const DEFAULT_COLOR = '#000';
+
 function NameInput( { value, onChange, label } ) {
 	return (
 		<NameInputControl
@@ -51,6 +53,14 @@ function NameInput( { value, onChange, label } ) {
 	);
 }
 
+function getNameForPosition( position ) {
+	return sprintf(
+		/* translators: %s: is a temporary id for a custom color */
+		__( 'Color %s ' ),
+		position + 1
+	);
+}
+
 function Option( {
 	canOnlyChangeValues,
 	element,
@@ -143,6 +153,14 @@ function Option( {
 	);
 }
 
+function isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {
+	return (
+		slug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&
+		( ( !! color && color === DEFAULT_COLOR ) ||
+			( !! gradient && gradient === DEFAULT_GRADIENT ) )
+	);
+}
+
 function PaletteEditListView( {
 	elements,
 	onChange,
@@ -159,9 +177,14 @@ function PaletteEditListView( {
 	}, [ elements ] );
 	useEffect( () => {
 		return () => {
-			if ( elementsReference.current.some( ( { slug } ) => ! slug ) ) {
+			if (
+				elementsReference.current.some( ( element, index ) =>
+					isTemporaryElement( slugPrefix, element, index )
+				)
+			) {
 				const newElements = elementsReference.current.filter(
-					( { slug } ) => slug
+					( element, index ) =>
+						! isTemporaryElement( slugPrefix, element, index )
 				);
 				onChange( newElements.length ? newElements : undefined );
 			}
@@ -272,19 +295,19 @@ export default function PaletteEdit( {
 									: __( 'Add color' )
 							}
 							onClick={ () => {
-								const tempOptionName = sprintf(
-									/* translators: %s: is a temporary id for a custom color */
-									__( 'Color %s ' ),
-									elementsLength + 1
+								const tempOptionName = getNameForPosition(
+									elementsLength
 								);
 								onChange( [
 									...elements,
 									{
 										...( isGradient
 											? { gradient: DEFAULT_GRADIENT }
-											: { color: '#000' } ),
+											: { color: DEFAULT_COLOR } ),
 										name: tempOptionName,
-										slug: '',
+										slug:
+											slugPrefix +
+											kebabCase( tempOptionName ),
 									},
 								] );
 								setIsEditing( true );
@@ -293,71 +316,81 @@ export default function PaletteEdit( {
 						/>
 					) }
 
-					{ hasElements && ( canReset || ! canOnlyChangeValues ) && (
-						<DropdownMenu
-							icon={ moreVertical }
-							label={
-								isGradient
-									? __( 'Gradient options' )
-									: __( 'Color options' )
-							}
-							toggleProps={ {
-								isSmall: true,
-							} }
-						>
-							{ ( { onClose } ) => (
-								<>
-									<NavigableMenu role="menu">
-										<Button
-											variant="tertiary"
-											disabled={ isEditing }
-											onClick={ () => {
-												setIsEditing( true );
-												onClose();
-											} }
-											className="components-palette-edit__menu-button"
-										>
-											{ __( 'Edit custom colors' ) }
-										</Button>
-										{ ! canOnlyChangeValues && (
-											<Button
-												variant="tertiary"
-												onClick={ () => {
-													setEditingElement( null );
-													setIsEditing( false );
-													onChange();
-													onClose();
-												} }
-												className="components-palette-edit__menu-button"
-											>
-												{ isGradient
-													? __(
-															'Remove all gradients'
-													  )
-													: __(
-															'Remove all colors'
-													  ) }
-											</Button>
-										) }
-										{ canReset && (
-											<Button
-												variant="tertiary"
-												onClick={ () => {
-													setEditingElement( null );
-													onChange();
-													onClose();
-												} }
-											>
-												{ isGradient
-													? __( 'Reset gradient' )
-													: __( 'Reset colors' ) }
-											</Button>
-										) }
-									</NavigableMenu>
-								</>
-							) }
-						</DropdownMenu>
-					) }
+					{ hasElements &&
+						( ! isEditing ||
+							! canOnlyChangeValues ||
+							canReset ) && (
+							<DropdownMenu
+								icon={ moreVertical }
+								label={
+									isGradient
+										? __( 'Gradient options' )
+										: __( 'Color options' )
+								}
+								toggleProps={ {
+									isSmall: true,
+								} }
+							>
+								{ ( { onClose } ) => (
+									<>
+										<NavigableMenu role="menu">
+											{ ! isEditing && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setIsEditing( true );
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ isGradient
+														? __( 'Edit gradients' )
+														: __( 'Edit colors' ) }
+												</Button>
+											) }
+											{ ! canOnlyChangeValues && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														setIsEditing( false );
+														onChange();
+														onClose();
+													} }
+													className="components-palette-edit__menu-button"
+												>
+													{ isGradient
+														? __(
+																'Remove all gradients'
+														  )
+														: __(
+																'Remove all colors'
+														  ) }
+												</Button>
+											) }
+											{ canReset && (
+												<Button
+													variant="tertiary"
+													onClick={ () => {
+														setEditingElement(
+															null
+														);
+														onChange();
+														onClose();
+													} }
+												>
+													{ isGradient
+														? __( 'Reset gradient' )
+														: __( 'Reset colors' ) }
+												</Button>
+											) }
+										</NavigableMenu>
+									</>
+								) }
+							</DropdownMenu>
+						) }
 				</PaletteActionsContainer>
 			</PaletteHStackHeader>
 			{ hasElements && (

package/src/palette-edit/styles.js

@@ -57,9 +57,7 @@ export const NameContainer = styled.div`
 export const PaletteHeading = styled( Heading )`
 	text-transform: uppercase;
 	line-height: ${ space( 6 ) };
-	font-weight: 500;
 	&&& {
-		font-size: 11px;
 		margin-bottom: 0;
 	}
 `;