@wordpress/components 30.6.1-next.b8c8708f3.0 → 30.6.1

package/build-types/font-size-picker/styles.d.ts

@@ -18,4 +18,7 @@ export declare const HeaderLabel: import("@emotion/styled").StyledComponent<impo
 } & import("react").RefAttributes<any> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
+export declare const StyledCustomSelectControl: import("@emotion/styled").StyledComponent<import("../custom-select-control/types").CustomSelectProps<import("../custom-select-control/types").CustomSelectOption> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
 //# sourceMappingURL=styles.d.ts.map

package/build-types/font-size-picker/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/styles.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,SAAS;;SAeR,MAAO,WAAW;2HAV/B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;UAElB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAKvB,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/styles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS;;SAWc,MAAO,WACpC;2HAPN,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;UAElB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAKvB,CAAC;AAGF,eAAO,MAAM,yBAAyB;;UAKrC,CAAC"}

package/build-types/font-size-picker/test/font-size-picker-select.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-size-picker-select.d.ts.map

package/build-types/font-size-picker/test/font-size-picker-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../../src/font-size-picker/test/font-size-picker-select.tsx"],"names":[],"mappings":""}

package/build-types/font-size-picker/test/font-size-picker-toggle-group.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=font-size-picker-toggle-group.d.ts.map

package/build-types/font-size-picker/test/font-size-picker-toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"font-size-picker-toggle-group.d.ts","sourceRoot":"","sources":["../../../src/font-size-picker/test/font-size-picker-toggle-group.tsx"],"names":[],"mappings":""}

package/build-types/font-size-picker/types.d.ts

@@ -37,6 +37,14 @@ export type FontSizePickerProps = {
      * as a number, the component operates in "unitless mode" where the `units` property has no effect.
      */
     value?: number | string;
+    /**
+     * Determines how the `value` prop should be interpreted.
+     * - `'literal'`: The `value` prop contains the actual font size value (number or string)
+     * - `'slug'`: The `value` prop contains the slug of the selected font size
+     *
+     * @default 'literal'
+     */
+    valueMode?: 'literal' | 'slug';
     /**
      * If `true`, a slider will be displayed alongside the input field when a
      * custom font size is active. Has no effect when `disableCustomFontSizes`
@@ -92,11 +100,17 @@ export type FontSize = {
      * size. Used for the class generation process.
      */
     slug: string;
+    /**
+     * The `hint` property is an optional string that provides additional information
+     * about the font size, such as fluid typography ranges or custom descriptions.
+     * Consumers can use this to provide their own preferred hints.
+     */
+    hint?: string;
 };
-export type FontSizePickerSelectProps = Pick<FontSizePickerProps, 'value' | 'size'> & {
+export type FontSizePickerSelectProps = Pick<FontSizePickerProps, 'value' | 'size' | 'valueMode'> & {
     fontSizes: NonNullable<FontSizePickerProps['fontSizes']>;
     disableCustomFontSizes: NonNullable<FontSizePickerProps['disableCustomFontSizes']>;
-    onChange: NonNullable<FontSizePickerProps['onChange']>;
+    onChange: (value: number | string | undefined, selectedItem?: FontSize) => void;
     onSelectCustom: () => void;
     __next40pxDefaultSize: boolean;
 };
@@ -106,8 +120,8 @@ export type FontSizePickerSelectOption = {
     value?: FontSize['size'];
     hint?: string;
 };
-export type FontSizePickerToggleGroupProps = Pick<FontSizePickerProps, 'value' | 'size' | '__next40pxDefaultSize'> & {
+export type FontSizePickerToggleGroupProps = Pick<FontSizePickerProps, 'value' | 'size' | '__next40pxDefaultSize' | 'valueMode'> & {
     fontSizes: NonNullable<FontSizePickerProps['fontSizes']>;
-    onChange: NonNullable<FontSizePickerProps['onChange']>;
+    onChange: (value: number | string | undefined, selectedItem?: FontSize) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/font-size-picker/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;;;OAIG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC3C,mBAAmB,EACnB,OAAO,GAAG,MAAM,CAChB,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,sBAAsB,EAAE,WAAW,CAClC,mBAAmB,CAAE,wBAAwB,CAAE,CAC/C,CAAC;IACF,QAAQ,EAAE,WAAW,CAAE,mBAAmB,CAAE,UAAU,CAAE,CAAE,CAAC;IAC3D,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qBAAqB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAE,MAAM,CAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAChD,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,uBAAuB,CAC1C,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,QAAQ,EAAE,WAAW,CAAE,mBAAmB,CAAE,UAAU,CAAE,CAAE,CAAC;CAC3D,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG;IACjC;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC/B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;OAQG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,kBAAkB,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACtB;;;;OAIG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC3C,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,WAAW,CAC9B,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,sBAAsB,EAAE,WAAW,CAClC,mBAAmB,CAAE,wBAAwB,CAAE,CAC/C,CAAC;IACF,QAAQ,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;IACV,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,qBAAqB,EAAE,OAAO,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,QAAQ,CAAE,MAAM,CAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAChD,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,uBAAuB,GAAG,WAAW,CACxD,GAAG;IACH,SAAS,EAAE,WAAW,CAAE,mBAAmB,CAAE,WAAW,CAAE,CAAE,CAAC;IAC7D,QAAQ,EAAE,CACT,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAClC,YAAY,CAAC,EAAE,QAAQ,KACnB,IAAI,CAAC;CACV,CAAC"}

package/build-types/font-size-picker/utils.d.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps } from './types';
+import type { FontSizePickerProps, FontSize } from './types';
 /**
  * Some themes use css vars for their font sizes, so until we
  * have the way of calculating them don't display them.
@@ -10,4 +10,13 @@ import type { FontSizePickerProps } from './types';
  * @return Whether the value is a simple css value.
  */
 export declare function isSimpleCssValue(value: NonNullable<FontSizePickerProps['value']>): boolean;
+/**
+ * Generates hint text for a font size.
+ * This function returns the hint provided by the consumer, if any.
+ * If no hint is provided, it falls back to showing the size value for simple CSS values.
+ *
+ * @param fontSize The font size object to generate hint text for.
+ * @return The hint text provided by the consumer, or the size value for simple CSS values, or undefined.
+ */
+export declare function generateFontSizeHint(fontSize: FontSize): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/build-types/font-size-picker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAKpD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAKpD;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAAE,QAAQ,EAAE,QAAQ,GAAI,MAAM,GAAG,SAAS,CAY7E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "30.6.1-next.b8c8708f3.0",
+	"version": "30.6.1",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -54,24 +54,24 @@
 		"@types/gradient-parser": "1.1.0",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/base-styles": "^6.8.1-next.b8c8708f3.0",
-		"@wordpress/compose": "^7.32.1-next.b8c8708f3.0",
-		"@wordpress/date": "^5.32.1-next.b8c8708f3.0",
-		"@wordpress/deprecated": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/dom": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/element": "^6.32.1-next.b8c8708f3.0",
-		"@wordpress/escape-html": "^3.32.1-next.b8c8708f3.0",
-		"@wordpress/hooks": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/html-entities": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/i18n": "^6.5.1-next.b8c8708f3.0",
-		"@wordpress/icons": "^11.0.1-next.b8c8708f3.0",
-		"@wordpress/is-shallow-equal": "^5.32.1-next.b8c8708f3.0",
-		"@wordpress/keycodes": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/primitives": "^4.32.1-next.b8c8708f3.0",
-		"@wordpress/private-apis": "^1.32.1-next.b8c8708f3.0",
-		"@wordpress/rich-text": "^7.32.1-next.b8c8708f3.0",
-		"@wordpress/warning": "^3.32.1-next.b8c8708f3.0",
+		"@wordpress/a11y": "^4.33.1",
+		"@wordpress/base-styles": "^6.9.1",
+		"@wordpress/compose": "^7.33.1",
+		"@wordpress/date": "^5.33.1",
+		"@wordpress/deprecated": "^4.33.1",
+		"@wordpress/dom": "^4.33.1",
+		"@wordpress/element": "^6.33.1",
+		"@wordpress/escape-html": "^3.33.1",
+		"@wordpress/hooks": "^4.33.1",
+		"@wordpress/html-entities": "^4.33.1",
+		"@wordpress/i18n": "^6.6.1",
+		"@wordpress/icons": "^11.0.1",
+		"@wordpress/is-shallow-equal": "^5.33.1",
+		"@wordpress/keycodes": "^4.33.1",
+		"@wordpress/primitives": "^4.33.1",
+		"@wordpress/private-apis": "^1.33.1",
+		"@wordpress/rich-text": "^7.33.1",
+		"@wordpress/warning": "^3.33.1",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -97,5 +97,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "67cfd7e661931aeb0d06bec894599d287a4f8d0f"
+	"gitHead": "5f84bafdec1bed05247c1080c12f6a237951b862"
 }

package/src/badge/styles.scss

@@ -18,6 +18,7 @@ $badge-colors: (
 	min-height: $grid-unit-30;
 	border-radius: $radius-small;
 	line-height: 0;
+	max-width: 100%;
 
 	// Prevents anchor text-decoration styles from being applied through a parent.
 	display: inline-block;

package/src/custom-select-control-v2/custom-select.tsx

@@ -12,7 +12,7 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { VisuallyHidden } from '..';
+import { VisuallyHidden } from '../visually-hidden';
 import * as Styled from './styles';
 import type {
 	CustomSelectContext as CustomSelectContextType,

package/src/font-size-picker/README.md

@@ -103,6 +103,16 @@ The current font size value.
 
 -   Required: No
 
+### `valueMode`: `'literal' | 'slug'`
+
+Determines how the `value` prop should be interpreted.
+
+- `'literal'`: The `value` prop contains the actual font size value (number or string).
+- `'slug'`: The `value` prop contains the slug of the selected font size.
+
+-   Required: No
+-   Default: `'literal'`
+
 ### `withReset`: `boolean`
 
 If `true`, a reset button will be displayed alongside the input field when a custom font size is active. Has no effect when `disableCustomFontSizes` is `true`.

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

@@ -2,16 +2,17 @@
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import CustomSelectControl from '../custom-select-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { isSimpleCssValue } from './utils';
+import { generateFontSizeHint } from './utils';
+import { StyledCustomSelectControl } from './styles';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -20,15 +21,19 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 };
 
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
+	const {
+		__next40pxDefaultSize,
+		fontSizes,
+		value,
+		size,
+		valueMode = 'literal',
+		onChange,
+	} = props;
 
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
-			let hint;
-			if ( isSimpleCssValue( fontSize.size ) ) {
-				hint = String( fontSize.size );
-			}
+			const hint = generateFontSizeHint( fontSize );
 			return {
 				key: fontSize.slug,
 				name: fontSize.name || fontSize.slug,
@@ -38,11 +43,30 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 		} ),
 	];
 
-	const selectedOption =
-		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
+	const selectedOption = useMemo( () => {
+		if ( value === undefined ) {
+			return DEFAULT_OPTION;
+		}
+
+		// If valueMode is 'slug', find by slug
+		if ( valueMode === 'slug' ) {
+			const optionBySlug = options.find(
+				( option ) => option.key === value
+			);
+			if ( optionBySlug ) {
+				return optionBySlug;
+			}
+		}
+
+		// If valueMode is 'literal', find by value (size)
+		return (
+			options.find( ( option ) => option.value === value ) ??
+			DEFAULT_OPTION
+		);
+	}, [ value, valueMode, options ] );
 
 	return (
-		<CustomSelectControl
+		<StyledCustomSelectControl
 			__next40pxDefaultSize={ __next40pxDefaultSize }
 			__shouldNotWarnDeprecated36pxSize
 			className="components-font-size-picker__select"
@@ -61,7 +85,16 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				onChange( selectedItem.value );
+				// Find the corresponding FontSize object
+				const matchingFontSize =
+					selectedItem.key === 'default'
+						? undefined
+						: fontSizes.find(
+								( fontSize ) =>
+									fontSize.slug === selectedItem.key
+						  );
+
+				onChange( selectedItem.value, matchingFontSize );
 			} }
 			size={ size }
 		/>

package/src/font-size-picker/font-size-picker-toggle-group.tsx

@@ -14,7 +14,46 @@ import { T_SHIRT_ABBREVIATIONS, T_SHIRT_NAMES } from './constants';
 import type { FontSizePickerToggleGroupProps } from './types';
 
 const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
-	const { fontSizes, value, __next40pxDefaultSize, size, onChange } = props;
+	const {
+		fontSizes,
+		value,
+		valueMode = 'literal',
+		__next40pxDefaultSize,
+		size,
+		onChange,
+	} = props;
+
+	// Find the current value based on valueMode
+	const currentValue = ( () => {
+		if ( ! value ) {
+			return undefined;
+		}
+
+		// If valueMode is 'slug', the value is already the slug
+		if ( valueMode === 'slug' ) {
+			return String( value );
+		}
+
+		// If valueMode is 'literal', find the font size by size value
+		// If multiple font sizes have the same size value, we can't distinguish them
+		// without additional information, so we return undefined to avoid incorrect selection
+		const matchingFontSizes = fontSizes.filter(
+			( fontSize ) => fontSize.size === value
+		);
+
+		// If there are multiple matches, return undefined to avoid selecting the wrong font size
+		if ( matchingFontSizes.length > 1 ) {
+			return undefined;
+		}
+
+		// Find the font size by size value
+		const fontSizeBySize = fontSizes.find(
+			( fontSize ) => fontSize.size === value
+		);
+
+		return fontSizeBySize?.slug;
+	} )();
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
@@ -22,15 +61,30 @@ const FontSizePickerToggleGroup = ( props: FontSizePickerToggleGroupProps ) => {
 			__shouldNotWarnDeprecated36pxSize
 			label={ __( 'Font size' ) }
 			hideLabelFromVision
-			value={ value }
-			onChange={ onChange }
+			value={ currentValue }
+			onChange={ ( newSlug: string | number | undefined ) => {
+				if ( newSlug === undefined ) {
+					onChange( undefined );
+				} else {
+					// Find the font size by slug
+					const selectedFontSize = fontSizes.find(
+						( fontSize ) => fontSize.slug === String( newSlug )
+					);
+					if ( selectedFontSize ) {
+						onChange(
+							selectedFontSize.size as number | string,
+							selectedFontSize
+						);
+					}
+				}
+			} }
 			isBlock
 			size={ size }
 		>
 			{ fontSizes.map( ( fontSize, index ) => (
 				<ToggleGroupControlOption
 					key={ fontSize.slug }
-					value={ fontSize.size }
+					value={ fontSize.slug }
 					label={ T_SHIRT_ABBREVIATIONS[ index ] }
 					aria-label={ fontSize.name || T_SHIRT_NAMES[ index ] }
 					showTooltip

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

@@ -46,6 +46,7 @@ const UnforwardedFontSizePicker = (
 		size = 'default',
 		units: unitsProp = DEFAULT_UNITS,
 		value,
+		valueMode = 'literal',
 		withSlider = false,
 		withReset = true,
 	} = props;
@@ -59,15 +60,32 @@ const UnforwardedFontSizePicker = (
 		availableUnits: unitsProp,
 	} );
 
-	const selectedFontSize = fontSizes.find(
-		( fontSize ) => fontSize.size === value
-	);
+	const selectedFontSize = ( () => {
+		if ( ! value ) {
+			return undefined;
+		}
+
+		// If valueMode is 'slug', find by slug
+		if ( valueMode === 'slug' ) {
+			return fontSizes.find( ( fontSize ) => fontSize.slug === value );
+		}
+
+		// If valueMode is 'literal', find by size value
+		return fontSizes.find( ( fontSize ) => fontSize.size === value );
+	} )();
 	const isCustomValue = !! value && ! selectedFontSize;
 
 	// Initially request a custom picker if the value is not from the predef list.
 	const [ userRequestedCustom, setUserRequestedCustom ] =
 		useState( isCustomValue );
 
+	// Resolve the literal value to use in custom controls when operating in slug mode.
+	// When `valueMode` is 'slug', the `value` prop contains the slug of the
+	// selected preset. In that case, the custom input should reflect the preset's
+	// actual size value so it pre-populates correctly after clicking "Set custom size".
+	const resolvedValueForControls =
+		valueMode === 'slug' ? selectedFontSize?.size : value;
+
 	let currentPickerType;
 	if ( ! disableCustomFontSizes && userRequestedCustom ) {
 		// While showing the custom value picker, switch back to predef only if
@@ -88,10 +106,11 @@ const UnforwardedFontSizePicker = (
 	// 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';
+		typeof resolvedValueForControls === 'string' ||
+		typeof fontSizes[ 0 ]?.size === 'string';
 
 	const [ valueQuantity, valueUnit ] = parseQuantityAndUnitFromRawValue(
-		value,
+		resolvedValueForControls,
 		units
 	);
 	const isValueUnitRelative =
@@ -139,18 +158,16 @@ const UnforwardedFontSizePicker = (
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						fontSizes={ fontSizes }
 						value={ value }
+						valueMode={ valueMode }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						size={ size }
-						onChange={ ( newValue ) => {
+						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined );
+								onChange?.( undefined, selectedItem );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
+									selectedItem
 								);
 							}
 						} }
@@ -161,18 +178,16 @@ const UnforwardedFontSizePicker = (
 					<FontSizePickerToggleGroup
 						fontSizes={ fontSizes }
 						value={ value }
+						valueMode={ valueMode }
 						__next40pxDefaultSize={ __next40pxDefaultSize }
 						size={ size }
-						onChange={ ( newValue ) => {
+						onChange={ ( newValue, selectedItem ) => {
 							if ( newValue === undefined ) {
-								onChange?.( undefined );
+								onChange?.( undefined, selectedItem );
 							} else {
 								onChange?.(
 									hasUnits ? newValue : Number( newValue ),
-									fontSizes.find(
-										( fontSize ) =>
-											fontSize.size === newValue
-									)
+									selectedItem
 								);
 							}
 						} }
@@ -187,11 +202,21 @@ const UnforwardedFontSizePicker = (
 								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
-								value={ value }
+								value={
+									hasUnits
+										? `${ valueQuantity ?? '' }${
+												valueUnit ?? ''
+										  }`
+										: resolvedValueForControls
+								}
 								onChange={ ( newValue ) => {
 									setUserRequestedCustom( true );
 
-									if ( newValue === undefined ) {
+									// Treat clearing the input (empty string) as a reset
+									if (
+										newValue === undefined ||
+										newValue === ''
+									) {
 										onChange?.( undefined );
 									} else {
 										onChange?.(

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

@@ -8,6 +8,7 @@ import styled from '@emotion/styled';
  */
 import BaseControl from '../base-control';
 import Button from '../button';
+import CustomSelectControl from '../custom-select-control';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
 
@@ -32,3 +33,11 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	justify-content: flex-start;
 	margin-bottom: 0;
 `;
+
+// Custom styled component to force line break between name and hint while keeping checkmark on the right
+export const StyledCustomSelectControl = styled( CustomSelectControl )`
+	.components-custom-select-control__item
+		.components-custom-select-control__item-hint {
+		width: 100%;
+	}
+`;