@wordpress/components 29.5.0 → 29.6.0

package/build-module/query-controls/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number | null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' | 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' | 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\ntype Order = 'asc' | 'desc';\ntype OrderBy = 'date' | 'title';\n\ntype BaseQueryControlsProps = {\n\t/**\n\t * An array of the authors to select from.\n\t */\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/**\n\t * The maximum number of items.\n\t *\n\t * @default 100\n\t */\n\tmaxItems?: number;\n\t/**\n\t * The minimum number of items.\n\t *\n\t * @default 1\n\t */\n\tminItems?: number;\n\t/**\n\t * The selected number of items to retrieve via the query.\n\t */\n\tnumberOfItems?: number;\n\t/**\n\t * A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t */\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/**\n\t * A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t */\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/**\n\t * A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t */\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/**\n\t * A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t */\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/**\n\t * The order in which to retrieve posts.\n\t */\n\torder?: Order;\n\t/**\n\t * The meta key by which to order posts.\n\t */\n\torderBy?: OrderBy;\n\t/**\n\t * The selected author ID.\n\t */\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @deprecated Default behavior since WP 6.7. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/**\n\t\t * An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t */\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/**\n\t\t * The selected category for the `categoriesList` prop.\n\t\t */\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/**\n\t\t * A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/**\n\t\t * An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t */\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/**\n\t\t * The selected categories for the `categorySuggestions` prop.\n\t\t */\n\t\tselectedCategories?: Category[];\n\t\t/**\n\t\t * A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t| QueryControlsWithSingleCategorySelectionProps\n\t| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["@wordpress/components/src/query-controls/types.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type { FormTokenFieldProps } from '../form-token-field/types';\nimport type { TreeSelectProps } from '../tree-select/types';\n\nexport type Author = {\n\tid: number;\n\tname: string;\n};\n\nexport type Category = {\n\tid: number;\n\tname: string;\n\tparent: number;\n};\n\nexport type TermWithParentAndChildren = {\n\tid: string;\n\tname: string;\n\tparent: number | null;\n\tchildren: TermWithParentAndChildren[];\n};\n\nexport type TermsByParent = Record< string, TermWithParentAndChildren[] >;\n\nexport type CategorySelectProps = Pick<\n\tTreeSelectProps,\n\t'label' | 'noOptionLabel'\n> & {\n\tcategoriesList: Category[];\n\tonChange: ( newCategory: string ) => void;\n\tselectedCategoryId?: Category[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\nexport type AuthorSelectProps = Pick<\n\tTreeSelectProps,\n\t'label' | 'noOptionLabel'\n> & {\n\tauthorList?: Author[];\n\tonChange: ( newAuthor: string ) => void;\n\tselectedAuthorId?: Author[ 'id' ];\n\t__next40pxDefaultSize: boolean;\n};\n\ntype Order = 'asc' | 'desc';\ntype OrderBy = 'date' | 'title' | 'menu_order';\n\nexport type OrderByOption = {\n\t/**\n\t * The label to be shown to the user.\n\t */\n\tlabel: string;\n\t/**\n\t * Option value passed to `onChange` when the option is selected.\n\t */\n\tvalue: `${ OrderBy }/${ Order }`;\n};\n\ntype BaseQueryControlsProps = {\n\t/**\n\t * An array of the authors to select from.\n\t */\n\tauthorList?: AuthorSelectProps[ 'authorList' ];\n\t/**\n\t * The maximum number of items.\n\t *\n\t * @default 100\n\t */\n\tmaxItems?: number;\n\t/**\n\t * The minimum number of items.\n\t *\n\t * @default 1\n\t */\n\tminItems?: number;\n\t/**\n\t * The selected number of items to retrieve via the query.\n\t */\n\tnumberOfItems?: number;\n\t/**\n\t * A function that receives the new author value.\n\t * If not specified, the author controls are not rendered.\n\t */\n\tonAuthorChange?: AuthorSelectProps[ 'onChange' ];\n\t/**\n\t * A function that receives the new number of items.\n\t * If not specified, then the number of items\n\t * range control is not rendered.\n\t */\n\tonNumberOfItemsChange?: ( newNumber?: number ) => void;\n\t/**\n\t * A function that receives the new order value.\n\t * If this prop or the `onOrderByChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t */\n\tonOrderChange?: ( newOrder: Order ) => void;\n\t/**\n\t * A function that receives the new orderby value.\n\t * If this prop or the `onOrderChange` prop are not specified,\n\t * then the order controls are not rendered.\n\t */\n\tonOrderByChange?: ( newOrderBy: OrderBy ) => void;\n\t/**\n\t * The order in which to retrieve posts.\n\t */\n\torder?: Order;\n\t/**\n\t * The meta key by which to order posts.\n\t */\n\torderBy?: OrderBy;\n\t/**\n\t * List of available ordering options.\n\t */\n\torderByOptions?: OrderByOption[];\n\t/**\n\t * The selected author ID.\n\t */\n\tselectedAuthorId?: AuthorSelectProps[ 'selectedAuthorId' ];\n\t/**\n\t * Start opting into the larger default height that will become the\n\t * default size in a future version.\n\t *\n\t * @deprecated Default behavior since WP 6.7. Prop can be safely removed.\n\t * @ignore\n\t */\n\t__next40pxDefaultSize?: boolean;\n};\n\nexport type QueryControlsWithSingleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/**\n\t\t * An array of categories. When passed in conjunction with the\n\t\t * `onCategoryChange` prop, it causes the component to render UI that allows\n\t\t * selecting one category at a time.\n\t\t */\n\t\tcategoriesList?: CategorySelectProps[ 'categoriesList' ];\n\t\t/**\n\t\t * The selected category for the `categoriesList` prop.\n\t\t */\n\t\tselectedCategoryId?: CategorySelectProps[ 'selectedCategoryId' ];\n\t\t/**\n\t\t * A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: CategorySelectProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsWithMultipleCategorySelectionProps =\n\tBaseQueryControlsProps & {\n\t\t/**\n\t\t * An object of categories with the category name as the key. When passed in\n\t\t * conjunction with the `onCategoryChange` prop, it causes the component to\n\t\t * render UI that enables multiple selection.\n\t\t */\n\t\tcategorySuggestions?: Record< Category[ 'name' ], Category >;\n\t\t/**\n\t\t * The selected categories for the `categorySuggestions` prop.\n\t\t */\n\t\tselectedCategories?: Category[];\n\t\t/**\n\t\t * A function that receives the new category value. If not specified, the\n\t\t * category controls are not rendered.\n\t\t * The function's signature changes depending on whether multiple category\n\t\t * selection is enabled or not.\n\t\t */\n\t\tonCategoryChange?: FormTokenFieldProps[ 'onChange' ];\n\t};\n\nexport type QueryControlsProps =\n\t| QueryControlsWithSingleCategorySelectionProps\n\t| QueryControlsWithMultipleCategorySelectionProps;\n"],"mappings":"","ignoreList":[]}

package/build-style/style-rtl.css

@@ -485,7 +485,6 @@ p + .components-button.is-tertiary {
 }
 .components-button.is-compact.has-icon:not(.has-text) {
   padding: 0;
-  width: 32px;
   min-width: 32px;
 }
 .components-button.is-small {
@@ -496,7 +495,6 @@ p + .components-button.is-tertiary {
 }
 .components-button.is-small.has-icon:not(.has-text) {
   padding: 0;
-  width: 24px;
   min-width: 24px;
 }
 .components-button.has-icon {

package/build-style/style.css

@@ -485,7 +485,6 @@ p + .components-button.is-tertiary {
 }
 .components-button.is-compact.has-icon:not(.has-text) {
   padding: 0;
-  width: 32px;
   min-width: 32px;
 }
 .components-button.is-small {
@@ -496,7 +495,6 @@ p + .components-button.is-tertiary {
 }
 .components-button.is-small.has-icon:not(.has-text) {
   padding: 0;
-  width: 24px;
   min-width: 24px;
 }
 .components-button.has-icon {

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

@@ -1 +1 @@
-{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AASjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCAwD9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"font-size-picker-select.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/font-size-picker-select.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACX,yBAAyB,EAEzB,MAAM,SAAS,CAAC;AASjB,QAAA,MAAM,oBAAoB,UAAY,yBAAyB,gCA+C9D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAoRnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/font-size-picker/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAwPnD,eAAO,MAAM,cAAc,qGAA0C,CAAC;AAEtE,eAAe,cAAc,CAAC"}

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

@@ -18,8 +18,4 @@ export declare const HeaderLabel: import("@emotion/styled").StyledComponent<impo
 } & import("react").RefAttributes<any> & {
     theme?: import("@emotion/react").Theme;
 }, {}, {}>;
-export declare const HeaderHint: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 //# 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":"AAcA,eAAO,MAAM,SAAS;;SAYR,MAAO,WACpB;2HARA,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;UAElB,CAAC;AAEF,eAAO,MAAM,YAAY;;UAExB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;UAKvB,CAAC;AAEF,eAAO,MAAM,UAAU;;SAVT,MAAO,WACpB;2GAWA,CAAC"}
+{"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"}

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

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
+import type { FontSizePickerProps } 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,12 +10,4 @@ import type { FontSizePickerProps, FontSize } from './types';
  * @return Whether the value is a simple css value.
  */
 export declare function isSimpleCssValue(value: NonNullable<FontSizePickerProps['value']>): boolean;
-/**
- * If all of the given font sizes have the same unit (e.g. 'px'), return that
- * unit. Otherwise return null.
- *
- * @param fontSizes List of font sizes.
- * @return The common unit, or null.
- */
-export declare function getCommonSizeUnit(fontSizes: FontSize[]): string | null | 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,QAAQ,EAAE,MAAM,SAAS,CAAC;AAG7D;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC/B,KAAK,EAAE,WAAW,CAAE,mBAAmB,CAAE,OAAO,CAAE,CAAE,WAKpD;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAE,SAAS,EAAE,QAAQ,EAAE,6BAavD"}
+{"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"}

package/build-types/query-controls/index.d.ts

@@ -5,7 +5,7 @@ import type { QueryControlsProps } from './types';
  * ```jsx
  * const MyQueryControls = () => (
  *   <QueryControls
- *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
  *     onOrderByChange={ ( newOrderBy ) => {
  *       updateQuery( { orderBy: newOrderBy } )
  *     }
@@ -24,6 +24,6 @@ import type { QueryControlsProps } from './types';
  * );
  * ```
  */
-export declare function QueryControls({ authorList, selectedAuthorId, numberOfItems, order, orderBy, maxItems, minItems, onAuthorChange, onNumberOfItemsChange, onOrderChange, onOrderByChange, ...props }: QueryControlsProps): import("react").JSX.Element;
+export declare function QueryControls({ authorList, selectedAuthorId, numberOfItems, order, orderBy, orderByOptions, maxItems, minItems, onAuthorChange, onNumberOfItemsChange, onOrderChange, onOrderByChange, ...props }: QueryControlsProps): import("react").JSX.Element;
 export default QueryControls;
 //# sourceMappingURL=index.d.ts.map

package/build-types/query-controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-controls/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACX,kBAAkB,EAGlB,MAAM,SAAS,CAAC;AAkBjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAE,EAC9B,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,OAAO,EACP,QAA4B,EAC5B,QAA4B,EAC5B,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,eAAe,EAGf,GAAG,KAAK,EACR,EAAE,kBAAkB,+BA4HpB;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/query-controls/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACX,kBAAkB,EAIlB,MAAM,SAAS,CAAC;AAuCjB;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,aAAa,CAAE,EAC9B,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,KAAK,EACL,OAAO,EACP,cAAsC,EACtC,QAA4B,EAC5B,QAA4B,EAC5B,cAAc,EACd,qBAAqB,EACrB,aAAa,EACb,eAAe,EAGf,GAAG,KAAK,EACR,EAAE,kBAAkB,+BAyGpB;AAED,eAAe,aAAa,CAAC"}

package/build-types/query-controls/types.d.ts

@@ -32,7 +32,17 @@ export type AuthorSelectProps = Pick<TreeSelectProps, 'label' | 'noOptionLabel'>
     __next40pxDefaultSize: boolean;
 };
 type Order = 'asc' | 'desc';
-type OrderBy = 'date' | 'title';
+type OrderBy = 'date' | 'title' | 'menu_order';
+export type OrderByOption = {
+    /**
+     * The label to be shown to the user.
+     */
+    label: string;
+    /**
+     * Option value passed to `onChange` when the option is selected.
+     */
+    value: `${OrderBy}/${Order}`;
+};
 type BaseQueryControlsProps = {
     /**
      * An array of the authors to select from.
@@ -85,6 +95,10 @@ type BaseQueryControlsProps = {
      * The meta key by which to order posts.
      */
     orderBy?: OrderBy;
+    /**
+     * List of available ordering options.
+     */
+    orderByOptions?: OrderByOption[];
     /**
      * The selected author ID.
      */

package/build-types/query-controls/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/query-controls/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/query-controls/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "29.5.0",
+	"version": "29.6.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.19.0",
-		"@wordpress/compose": "^7.19.0",
-		"@wordpress/date": "^5.19.0",
-		"@wordpress/deprecated": "^4.19.0",
-		"@wordpress/dom": "^4.19.0",
-		"@wordpress/element": "^6.19.0",
-		"@wordpress/escape-html": "^3.19.0",
-		"@wordpress/hooks": "^4.19.0",
-		"@wordpress/html-entities": "^4.19.0",
-		"@wordpress/i18n": "^5.19.0",
-		"@wordpress/icons": "^10.19.0",
-		"@wordpress/is-shallow-equal": "^5.19.0",
-		"@wordpress/keycodes": "^4.19.0",
-		"@wordpress/primitives": "^4.19.0",
-		"@wordpress/private-apis": "^1.19.0",
-		"@wordpress/rich-text": "^7.19.0",
-		"@wordpress/warning": "^3.19.0",
+		"@wordpress/a11y": "^4.20.0",
+		"@wordpress/compose": "^7.20.0",
+		"@wordpress/date": "^5.20.0",
+		"@wordpress/deprecated": "^4.20.0",
+		"@wordpress/dom": "^4.20.0",
+		"@wordpress/element": "^6.20.0",
+		"@wordpress/escape-html": "^3.20.0",
+		"@wordpress/hooks": "^4.20.0",
+		"@wordpress/html-entities": "^4.20.0",
+		"@wordpress/i18n": "^5.20.0",
+		"@wordpress/icons": "^10.20.0",
+		"@wordpress/is-shallow-equal": "^5.20.0",
+		"@wordpress/keycodes": "^4.20.0",
+		"@wordpress/primitives": "^4.20.0",
+		"@wordpress/private-apis": "^1.20.0",
+		"@wordpress/rich-text": "^7.20.0",
+		"@wordpress/warning": "^3.20.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -85,5 +85,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d6b0b20fa927b110140dc7fdd906a7e0bf662004"
+	"gitHead": "72476970386146d450c375e5c71a96dda7c9aaa8"
 }

package/src/button/style.scss

@@ -302,7 +302,6 @@
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-compact;
 			min-width: $button-size-compact;
 		}
 	}
@@ -315,7 +314,6 @@
 
 		&.has-icon:not(.has-text) {
 			padding: 0;
-			width: $button-size-small;
 			min-width: $button-size-small;
 		}
 	}

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

@@ -7,12 +7,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import CustomSelectControl from '../custom-select-control';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import type {
 	FontSizePickerSelectProps,
 	FontSizePickerSelectOption,
 } from './types';
-import { getCommonSizeUnit, isSimpleCssValue } from './utils';
+import { isSimpleCssValue } from './utils';
 
 const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	key: 'default',
@@ -23,20 +22,11 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
 
-	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
-
 	const options: FontSizePickerSelectOption[] = [
 		DEFAULT_OPTION,
 		...fontSizes.map( ( fontSize ) => {
 			let hint;
-			if ( areAllSizesSameUnit ) {
-				const [ quantity ] = parseQuantityAndUnitFromRawValue(
-					fontSize.size
-				);
-				if ( quantity !== undefined ) {
-					hint = String( quantity );
-				}
-			} else if ( isSimpleCssValue( fontSize.size ) ) {
+			if ( isSimpleCssValue( fontSize.size ) ) {
 				hint = String( fontSize.size );
 			}
 			return {

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

@@ -8,7 +8,8 @@ import type { ForwardedRef } from 'react';
  */
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
-import { useState, useMemo, forwardRef } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -21,20 +22,11 @@ import {
 	parseQuantityAndUnitFromRawValue,
 	useCustomUnits,
 } from '../unit-control';
-import { VisuallyHidden } from '../visually-hidden';
-import { getCommonSizeUnit } from './utils';
 import type { FontSizePickerProps } from './types';
-import {
-	Container,
-	Header,
-	HeaderHint,
-	HeaderLabel,
-	HeaderToggle,
-} from './styles';
+import { Container, Header, HeaderLabel, HeaderToggle } from './styles';
 import { Spacer } from '../spacer';
 import FontSizePickerSelect from './font-size-picker-select';
 import FontSizePickerToggleGroup from './font-size-picker-toggle-group';
-import { T_SHIRT_NAMES } from './constants';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
@@ -58,6 +50,11 @@ const UnforwardedFontSizePicker = (
 		withReset = true,
 	} = props;
 
+	const labelId = useInstanceId(
+		UnforwardedFontSizePicker,
+		'font-size-picker-label'
+	);
+
 	const units = useCustomUnits( {
 		availableUnits: unitsProp,
 	} );
@@ -83,29 +80,6 @@ const UnforwardedFontSizePicker = (
 				: ( 'togglegroup' as const );
 	}
 
-	const headerHint = useMemo( () => {
-		switch ( currentPickerType ) {
-			case 'custom':
-				return __( 'Custom' );
-			case 'togglegroup':
-				if ( selectedFontSize ) {
-					return (
-						selectedFontSize.name ||
-						T_SHIRT_NAMES[ fontSizes.indexOf( selectedFontSize ) ]
-					);
-				}
-				break;
-			case 'select':
-				const commonUnit = getCommonSizeUnit( fontSizes );
-				if ( commonUnit ) {
-					return `(${ commonUnit })`;
-				}
-				break;
-		}
-
-		return '';
-	}, [ currentPickerType, selectedFontSize, fontSizes ] );
-
 	if ( fontSizes.length === 0 && disableCustomFontSizes ) {
 		return null;
 	}
@@ -131,19 +105,16 @@ const UnforwardedFontSizePicker = (
 	} );
 
 	return (
-		<Container ref={ ref } className="components-font-size-picker">
-			<VisuallyHidden as="legend">{ __( 'Font size' ) }</VisuallyHidden>
+		<Container
+			ref={ ref }
+			className="components-font-size-picker"
+			// This Container component renders a fieldset element that needs to be labeled.
+			aria-labelledby={ labelId }
+		>
 			<Spacer>
 				<Header className="components-font-size-picker__header">
-					<HeaderLabel
-						aria-label={ `${ __( 'Size' ) } ${ headerHint || '' }` }
-					>
-						{ __( 'Size' ) }
-						{ headerHint && (
-							<HeaderHint className="components-font-size-picker__header__hint">
-								{ headerHint }
-							</HeaderHint>
-						) }
+					<HeaderLabel id={ labelId }>
+						{ __( 'Font size' ) }
 					</HeaderLabel>
 					{ ! disableCustomFontSizes && (
 						<HeaderToggle
@@ -213,7 +184,7 @@ const UnforwardedFontSizePicker = (
 							<UnitControl
 								__next40pxDefaultSize={ __next40pxDefaultSize }
 								__shouldNotWarnDeprecated36pxSize
-								label={ __( 'Custom' ) }
+								label={ __( 'Font size' ) }
 								labelPosition="top"
 								hideLabelFromVision
 								value={ value }
@@ -245,7 +216,7 @@ const UnforwardedFontSizePicker = (
 										}
 										__shouldNotWarnDeprecated36pxSize
 										className="components-font-size-picker__custom-input"
-										label={ __( 'Custom Size' ) }
+										label={ __( 'Font size' ) }
 										hideLabelFromVision
 										value={ valueQuantity }
 										initialPosition={ fallbackFontSize }

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

@@ -10,7 +10,6 @@ import BaseControl from '../base-control';
 import Button from '../button';
 import { HStack } from '../h-stack';
 import { space } from '../utils/space';
-import { COLORS } from '../utils';
 
 export const Container = styled.fieldset`
 	border: 0;
@@ -33,7 +32,3 @@ export const HeaderLabel = styled( BaseControl.VisualLabel )`
 	justify-content: flex-start;
 	margin-bottom: 0;
 `;
-
-export const HeaderHint = styled.span`
-	color: ${ COLORS.gray[ 700 ] };
-`;

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

@@ -52,7 +52,9 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker value={ value } onChange={ onChange } />
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.clear( input );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 3 ); // Once for the clear, then once per keystroke.
@@ -79,7 +81,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const input = screen.getByLabelText( 'Custom' );
+			const input = screen.getByRole( 'spinbutton', {
+				name: 'Font size',
+			} );
 			await user.type( input, '80' );
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( expectedValue );
@@ -129,28 +133,14 @@ describe( 'FontSizePicker', () => {
 			const options = screen.getAllByRole( 'option' );
 			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
-			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
-			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
-			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16' );
-			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
-			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
-			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
+			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
+			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12px' );
+			expect( options[ 3 ] ).toHaveAccessibleName( 'Medium 16px' );
+			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20px' );
+			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
+			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size (px)' },
-			{ value: '8px', expectedLabel: 'Size (px)' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -158,7 +148,7 @@ describe( 'FontSizePicker', () => {
 				expectedArguments: [ undefined ],
 			},
 			{
-				option: 'Tiny 8',
+				option: 'Tiny 8px',
 				value: undefined,
 				expectedArguments: [ '8px', fontSizes[ 0 ] ],
 			},
@@ -255,23 +245,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '8px', expectedLabel: 'Size' },
-			{ value: '1em', expectedLabel: 'Size' },
-			{ value: '2rem', expectedLabel: 'Size' },
-			{ value: 'clamp(1.75rem, 3vw, 2.25rem)', expectedLabel: 'Size' },
-			{ value: '3px', expectedLabel: 'Size Custom' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{
 				option: 'Default',
@@ -372,20 +345,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Gigantosaurus' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '40px', expectedLabel: 'Size Gigantosaurus' },
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
 			const onChange = jest.fn();
@@ -439,25 +398,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 3 ] ).toHaveAccessibleName( 'Extra Large' );
 		} );
 
-		test.each( [
-			{ value: undefined, expectedLabel: 'Size' },
-			{ value: '12px', expectedLabel: 'Size Small' },
-			{ value: '1em', expectedLabel: 'Size Medium' },
-			{ value: '2rem', expectedLabel: 'Size Large' },
-			{
-				value: 'clamp(1.75rem, 3vw, 2.25rem)',
-				expectedLabel: 'Size Extra Large',
-			},
-		] )(
-			'displays $expectedLabel as label when value is $value',
-			async ( { value, expectedLabel } ) => {
-				await render(
-					<FontSizePicker fontSizes={ fontSizes } value={ value } />
-				);
-				expect( screen.getByLabelText( expectedLabel ) ).toBeVisible();
-			}
-		);
-
 		test.each( [
 			{ radio: 'Small', expectedArguments: [ '12px', fontSizes[ 0 ] ] },
 			{ radio: 'Medium', expectedArguments: [ '1em', fontSizes[ 1 ] ] },
@@ -524,14 +464,18 @@ describe( 'FontSizePicker', () => {
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'hides custom input when disableCustomFontSizes is set to `true` with a custom font size', async () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -549,7 +493,9 @@ describe( 'FontSizePicker', () => {
 			const { rerender } = await render(
 				<FontSizePicker fontSizes={ fontSizes } value="3px" />
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 
 			rerender(
 				<FontSizePicker
@@ -557,7 +503,9 @@ describe( 'FontSizePicker', () => {
 					value={ fontSizes[ 0 ].size }
 				/>
 			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
+			expect(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } )
+			).toBeVisible();
 		} );
 
 		it( 'allows custom values by default', async () => {
@@ -569,7 +517,10 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 			expect( onChange ).toHaveBeenCalledTimes( 2 ); // Once per keystroke.
 			expect( onChange ).toHaveBeenCalledWith( '80px' );
 		} );
@@ -585,7 +536,10 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
 
-			await user.type( screen.getByLabelText( 'Custom' ), '80' );
+			await user.type(
+				screen.getByRole( 'spinbutton', { name: 'Font size' } ),
+				'80'
+			);
 
 			await user.click(
 				screen.getByRole( 'button', { name: 'Use size preset' } )
@@ -632,7 +586,9 @@ describe( 'FontSizePicker', () => {
 			await user.click(
 				screen.getByRole( 'button', { name: 'Set custom size' } )
 			);
-			const sliderInput = screen.getByLabelText( 'Custom Size' );
+			const sliderInput = screen.getByRole( 'slider', {
+				name: 'Font size',
+			} );
 			fireEvent.change( sliderInput, {
 				target: { value: 80 },
 			} );