@wordpress/components 21.2.0 → 22.0.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ReactNode, ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,11 @@ import { useState, useMemo, forwardRef } from '@wordpress/element';
 import Button from '../button';
 import RangeControl from '../range-control';
 import { Flex, FlexItem } from '../flex';
-import { default as UnitControl, useCustomUnits } from '../unit-control';
+import {
+	default as UnitControl,
+	parseQuantityAndUnitFromRawValue,
+	useCustomUnits,
+} from '../unit-control';
 import CustomSelectControl from '../custom-select-control';
 import { VisuallyHidden } from '../visually-hidden';
 import {
@@ -27,11 +31,9 @@ import {
 import {
 	getFontSizeOptions,
 	getSelectedOption,
-	splitValueAndUnitFromSize,
 	isSimpleCssValue,
 	CUSTOM_FONT_SIZE,
 } from './utils';
-import { VStack } from '../v-stack';
 import { HStack } from '../h-stack';
 import type {
 	FontSizePickerProps,
@@ -47,20 +49,6 @@ import {
 } from './styles';
 import { Spacer } from '../spacer';
 
-// This conditional is needed to maintain the spacing before the slider in the `withSlider` case.
-const MaybeVStack = ( {
-	__nextHasNoMarginBottom,
-	children,
-}: {
-	__nextHasNoMarginBottom: boolean;
-	children: ReactNode;
-} ) =>
-	! __nextHasNoMarginBottom ? (
-		<>{ children }</>
-	) : (
-		<VStack spacing={ 6 } children={ children } />
-	);
-
 const UnforwardedFontSizePicker = (
 	props: FontSizePickerProps,
 	ref: ForwardedRef< any >
@@ -85,11 +73,6 @@ const UnforwardedFontSizePicker = (
 		} );
 	}
 
-	const hasUnits = [ typeof value, typeof fontSizes?.[ 0 ]?.size ].includes(
-		'string'
-	);
-	const noUnitsValue = ! hasUnits ? value : parseInt( String( value ) );
-	const isPixelValue = typeof value === 'number' || value?.endsWith?.( 'px' );
 	const units = useCustomUnits( {
 		availableUnits: [ 'px', 'em', 'rem' ],
 	} );
@@ -139,12 +122,15 @@ const UnforwardedFontSizePicker = (
 		}
 
 		// Calculate the `hint` for toggle group control.
-		let hint = selectedOption.name;
+		let hint = selectedOption?.name || selectedOption.slug;
 		if (
 			! fontSizesContainComplexValues &&
 			typeof selectedOption.size === 'string'
 		) {
-			const [ , unit ] = splitValueAndUnitFromSize( selectedOption.size );
+			const [ , unit ] = parseQuantityAndUnitFromRawValue(
+				selectedOption.size,
+				units
+			);
 			hint += `(${ unit })`;
 		}
 		return hint;
@@ -169,12 +155,28 @@ const UnforwardedFontSizePicker = (
 		__( 'Currently selected font size: %s' ),
 		selectedOption.name
 	);
+
+	// If neither the value or first font size is a string, then FontSizePicker
+	// operates in a legacy "unitless" mode where UnitControl can only be used
+	// to select px values and onChange() is always called with number values.
+	const hasUnits =
+		typeof value === 'string' || typeof fontSizes[ 0 ]?.size === 'string';
+
+	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
+		value,
+		units
+	);
+	const isValueUnitRelative =
+		!! valueUnit && [ 'em', 'rem' ].includes( valueUnit );
+
 	return (
 		<Container ref={ ref } className="components-font-size-picker">
 			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
 			<Spacer>
 				<HStack className="components-font-size-picker__header">
-					<HeaderLabel>
+					<HeaderLabel
+						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
+					>
 						{ __( 'Size' ) }
 						{ headerHint && (
 							<HeaderHint className="components-font-size-picker__header__hint">
@@ -201,141 +203,149 @@ const UnforwardedFontSizePicker = (
 					) }
 				</HStack>
 			</Spacer>
-			<MaybeVStack __nextHasNoMarginBottom={ __nextHasNoMarginBottom }>
-				<Controls
-					className="components-font-size-picker__controls"
-					__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-				>
-					{ !! fontSizes.length &&
-						shouldUseSelectControl &&
-						! showCustomValueControl && (
-							<CustomSelectControl
-								__nextUnconstrainedWidth
-								className="components-font-size-picker__select"
-								label={ __( 'Font size' ) }
-								hideLabelFromVision
-								describedBy={ currentFontSizeSR }
-								options={ options as FontSizeSelectOption[] }
-								value={ (
-									options as FontSizeSelectOption[]
-								 ).find(
-									( option ) =>
-										option.key === selectedOption.slug
-								) }
-								onChange={ ( {
-									selectedItem,
-								}: {
-									selectedItem: FontSizeSelectOption;
-								} ) => {
+			<Controls
+				className="components-font-size-picker__controls"
+				__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			>
+				{ !! fontSizes.length &&
+					shouldUseSelectControl &&
+					! showCustomValueControl && (
+						<CustomSelectControl
+							__nextUnconstrainedWidth
+							className="components-font-size-picker__select"
+							label={ __( 'Font size' ) }
+							hideLabelFromVision
+							describedBy={ currentFontSizeSR }
+							options={ options as FontSizeSelectOption[] }
+							value={ ( options as FontSizeSelectOption[] ).find(
+								( option ) => option.key === selectedOption.slug
+							) }
+							onChange={ ( {
+								selectedItem,
+							}: {
+								selectedItem: FontSizeSelectOption;
+							} ) => {
+								if ( selectedItem.size === undefined ) {
+									onChange?.( undefined );
+								} else {
 									onChange?.(
 										hasUnits
 											? selectedItem.size
 											: Number( selectedItem.size )
 									);
-									if (
-										selectedItem.key === CUSTOM_FONT_SIZE
-									) {
-										setShowCustomValueControl( true );
+								}
+								if ( selectedItem.key === CUSTOM_FONT_SIZE ) {
+									setShowCustomValueControl( true );
+								}
+							} }
+							size={ size }
+						/>
+					) }
+				{ ! shouldUseSelectControl && ! showCustomValueControl && (
+					<ToggleGroupControl
+						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+						label={ __( 'Font size' ) }
+						hideLabelFromVision
+						value={ value }
+						onChange={ ( newValue ) => {
+							if ( newValue === undefined ) {
+								onChange?.( undefined );
+							} else {
+								onChange?.(
+									hasUnits ? newValue : Number( newValue )
+								);
+							}
+						} }
+						isBlock
+						size={ size }
+					>
+						{ ( options as FontSizeToggleGroupOption[] ).map(
+							( option ) => (
+								<ToggleGroupControlOption
+									key={ option.key }
+									value={ option.value }
+									label={ option.label }
+									aria-label={ option.name }
+									showTooltip={ true }
+								/>
+							)
+						) }
+					</ToggleGroupControl>
+				) }
+				{ ! disableCustomFontSizes && showCustomValueControl && (
+					<Flex className="components-font-size-picker__custom-size-control">
+						<FlexItem isBlock>
+							<UnitControl
+								label={ __( 'Custom' ) }
+								labelPosition="top"
+								hideLabelFromVision
+								value={ value }
+								onChange={ ( newValue ) => {
+									if ( newValue === undefined ) {
+										onChange?.( undefined );
+									} else {
+										onChange?.(
+											hasUnits
+												? newValue
+												: parseInt( newValue, 10 )
+										);
 									}
 								} }
 								size={ size }
+								units={ hasUnits ? units : [] }
+								min={ 0 }
 							/>
-						) }
-					{ ! shouldUseSelectControl && ! showCustomValueControl && (
-						<ToggleGroupControl
-							__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-							label={ __( 'Font size' ) }
-							hideLabelFromVision
-							value={ value }
-							onChange={ ( newValue ) => {
-								onChange?.(
-									hasUnits ? newValue : Number( newValue )
-								);
-							} }
-							isBlock
-							size={ size }
-						>
-							{ ( options as FontSizeToggleGroupOption[] ).map(
-								( option ) => (
-									<ToggleGroupControlOption
-										key={ option.key }
-										value={ option.value }
-										label={ option.label }
-										aria-label={ option.name }
-										showTooltip={ true }
-									/>
-								)
-							) }
-						</ToggleGroupControl>
-					) }
-					{ ! withSlider &&
-						! disableCustomFontSizes &&
-						showCustomValueControl && (
-							<Flex className="components-font-size-picker__custom-size-control">
-								<FlexItem isBlock>
-									<UnitControl
-										label={ __( 'Custom' ) }
-										labelPosition="top"
+						</FlexItem>
+						{ withSlider && (
+							<FlexItem isBlock>
+								<Spacer marginX={ 2 } marginBottom={ 0 }>
+									<RangeControl
+										__nextHasNoMarginBottom={
+											__nextHasNoMarginBottom
+										}
+										className="components-font-size-picker__custom-input"
+										label={ __( 'Custom Size' ) }
 										hideLabelFromVision
-										value={ value }
-										onChange={ ( nextSize ) => {
-											if (
-												! nextSize ||
-												0 === parseFloat( nextSize )
-											) {
+										value={ valueQuantity }
+										initialPosition={ fallbackFontSize }
+										withInputField={ false }
+										onChange={ ( newValue ) => {
+											if ( newValue === undefined ) {
 												onChange?.( undefined );
-											} else {
+											} else if ( hasUnits ) {
 												onChange?.(
-													hasUnits
-														? nextSize
-														: parseInt(
-																nextSize,
-																10
-														  )
+													newValue +
+														( valueUnit ?? 'px' )
 												);
+											} else {
+												onChange?.( newValue );
 											}
 										} }
-										size={ size }
-										units={ hasUnits ? units : [] }
+										min={ 0 }
+										max={ isValueUnitRelative ? 10 : 100 }
+										step={ isValueUnitRelative ? 0.1 : 1 }
 									/>
-								</FlexItem>
-								{ withReset && (
-									<FlexItem>
-										<ResetButton
-											disabled={ value === undefined }
-											onClick={ () => {
-												onChange?.( undefined );
-											} }
-											isSmall
-											variant="secondary"
-											size={ size }
-										>
-											{ __( 'Reset' ) }
-										</ResetButton>
-									</FlexItem>
-								) }
-							</Flex>
+								</Spacer>
+							</FlexItem>
 						) }
-				</Controls>
-				{ withSlider && (
-					<RangeControl
-						__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
-						className="components-font-size-picker__custom-input"
-						label={ __( 'Custom Size' ) }
-						value={
-							isPixelValue && noUnitsValue
-								? Number( noUnitsValue )
-								: undefined
-						}
-						initialPosition={ fallbackFontSize }
-						onChange={ ( newValue ) => {
-							onChange?.( hasUnits ? newValue + 'px' : newValue );
-						} }
-						min={ 12 }
-						max={ 100 }
-					/>
+						{ withReset && (
+							<FlexItem>
+								<ResetButton
+									disabled={ value === undefined }
+									onClick={ () => {
+										onChange?.( undefined );
+									} }
+									isSmall
+									variant="secondary"
+									size={ size }
+								>
+									{ __( 'Reset' ) }
+								</ResetButton>
+							</FlexItem>
+						) }
+					</Flex>
 				) }
-			</MaybeVStack>
+			</Controls>
 		</Container>
 	);
 };

package/src/font-size-picker/styles.ts

@@ -19,12 +19,14 @@ export const Container = styled.fieldset`
 `;
 
 export const HeaderLabel = styled( BaseControl.VisualLabel )`
+	display: flex;
+	gap: ${ space( 1 ) };
+	justify-content: flex-start;
 	margin-bottom: 0;
 `;
 
 export const HeaderHint = styled.span`
 	color: ${ COLORS.gray[ 700 ] };
-	margin-left: ${ space( 1 ) };
 `;
 
 export const Controls = styled.div< {