@wordpress/components 19.7.0-next.e230fbab09.0 → 19.8.1

package/src/card/test/__snapshots__/index.js.snap

@@ -8,8 +8,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+     class="components-scrollable components-card__body components-card-body css-qqu4qj-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++     class="components-scrollable components-card__body components-card-body css-1w878rm-View-Scrollable-scrollableScrollbar-scrollY-Body-borderRadius-medium em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -25,8 +25,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+     class="components-card__body components-card-body css-19nlika-View-Body-borderRadius-medium-shady em57xhy0"
+-     class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++     class="components-card__body components-card-body css-kqnlb3-View-Body-borderRadius-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardBody"
     >
@@ -42,8 +42,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-f5ly6j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__footer components-card-footer css-1xx98hc-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -59,8 +59,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__footer components-card-footer css-otmewz-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__footer components-card-footer css-sonr8h-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
+-     class="components-flex components-card__footer components-card-footer css-p1v47q-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__footer components-card-footer css-gg08fg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-medium em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardFooter"
     >
@@ -76,8 +76,8 @@ Snapshot Diff:
 @@ -1,8 +1,8 @@
   <div>
     <div
--     class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+     class="components-flex components-card__header components-card-header css-d00z5k-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
+-     class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
++     class="components-flex components-card__header components-card-header css-121pfkj-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium-shady em57xhy0"
       data-wp-c16t="true"
       data-wp-component="CardHeader"
     >
@@ -96,16 +96,16 @@ Snapshot Diff:
       class="css-mgwsf4-View-Content em57xhy0"
     >
       <div
--       class="components-flex components-card__header components-card-header css-cw4qrt-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
-+       class="components-flex components-card__header components-card-header css-1dtpden-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
+-       class="components-flex components-card__header components-card-header css-1g5oj2q-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-medium em57xhy0"
++       class="components-flex components-card__header components-card-header css-1e8ifbz-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardHeader"
       >
         Header
       </div>
       <div
--       class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
-+       class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
+-       class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
++       class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
         data-wp-c16t="true"
         data-wp-component="CardBody"
       >
@@ -113,6 +113,23 @@ Snapshot Diff:
       </div>
 `;
 
+exports[`Card Card component should add rounded border when the isRounded prop is true 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -1,9 +1,8 @@
+  Array [
+    Object {
+      "background-color": "#fff",
+-     "border-radius": "calc(2px - 1px)",
+      "box-shadow": "0 0 0 1px rgba(0, 0, 0, 0.1)",
+      "color": "#1e1e1e",
+      "outline": "none",
+      "position": "relative",
+    },
+`;
+
 exports[`Card Card component should get the isBorderless and isSize props (passed from its context) overriddenwhen the same props is specified directly on the component 1`] = `
 Snapshot Diff:
 - First value
@@ -124,24 +141,24 @@ Snapshot Diff:
         class="css-mgwsf4-View-Content em57xhy0"
       >
         <div
--         class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1lr0m0h-View-Body-borderRadius-medium em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
++         class="components-card__body components-card-body css-1nwhnu3-View-Body-borderRadius-medium em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-1t7s584-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__footer components-card-footer css-cwhos2-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-xSmallCardPadding em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -157,8 +174,8 @@ Snapshot Diff:
 @@ -1,30 +1,30 @@
   <div>
     <div
--     class="components-surface components-card css-ssx2ib-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
-+     class="components-surface components-card css-1vyvcpq-View-Surface-getBorders-primary-Card-rounded em57xhy0"
+-     class="components-surface components-card css-hkvggq-View-Surface-getBorders-primary-Card-boxShadowless-rounded em57xhy0"
++     class="components-surface components-card css-nsno0f-View-Surface-getBorders-primary-Card-rounded em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Card"
     >
@@ -166,24 +183,24 @@ Snapshot Diff:
         class="css-mgwsf4-View-Content em57xhy0"
       >
         <div
--         class="components-flex components-card__header components-card-header css-t8b09c-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__header components-card-header css-1e0mt81-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__header components-card-header css-1uuauve-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__header components-card-header css-yf9nll-View-Flex-sx-Base-sx-Items-ItemsRow-Header-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardHeader"
         >
           Header
         </div>
         <div
--         class="components-card__body components-card-body css-bwr6fa-View-Body-borderRadius-large em57xhy0"
-+         class="components-card__body components-card-body css-1cnf18v-View-Body-borderRadius-small em57xhy0"
+-         class="components-card__body components-card-body css-1nonx1n-View-Body-borderRadius-large em57xhy0"
++         class="components-card__body components-card-body css-5spj1a-View-Body-borderRadius-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardBody"
         >
           Body
         </div>
         <div
--         class="components-flex components-card__footer components-card-footer css-c7cteg-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
-+         class="components-flex components-card__footer components-card-footer css-1trggei-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
+-         class="components-flex components-card__footer components-card-footer css-s0icc3-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-large-borderless em57xhy0"
++         class="components-flex components-card__footer components-card-footer css-oc4v7j-View-Flex-sx-Base-sx-Items-ItemsRow-Footer-borderRadius-borderColor-small em57xhy0"
           data-wp-c16t="true"
           data-wp-component="CardFooter"
         >
@@ -196,11 +213,11 @@ Object {
   "asFragment": [Function],
   "baseElement": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {
@@ -242,13 +259,13 @@ Object {
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-6 {
@@ -259,13 +276,13 @@ Object {
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-10 {
@@ -294,13 +311,13 @@ Object {
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-16 {
@@ -338,13 +355,13 @@ Object {
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-18 {
@@ -452,11 +469,11 @@ Object {
   </body>,
   "container": .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {
@@ -498,13 +515,13 @@ Object {
 }
 
 .emotion-4:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-4:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-6 {
@@ -515,13 +532,13 @@ Object {
 }
 
 .emotion-6:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-6:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-10 {
@@ -550,13 +567,13 @@ Object {
 }
 
 .emotion-14:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-14:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-16 {
@@ -594,13 +611,13 @@ Object {
 }
 
 .emotion-16:first-of-type {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
+  border-top-left-radius: calc(2px - 1px);
+  border-top-right-radius: calc(2px - 1px);
 }
 
 .emotion-16:last-of-type {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-bottom-left-radius: calc(2px - 1px);
+  border-bottom-right-radius: calc(2px - 1px);
 }
 
 .emotion-18 {
@@ -792,11 +809,11 @@ Compared values have no visual difference.
 exports[`Card Card component should warn when the isElevated prop is passed 1`] = `
 .emotion-0 {
   background-color: #fff;
-  color: #000;
+  color: #1e1e1e;
   position: relative;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   outline: none;
-  border-radius: 2px;
+  border-radius: calc(2px - 1px);
 }
 
 .emotion-2 {

package/src/card/test/index.js

@@ -14,7 +14,6 @@ import {
 	CardHeader,
 	CardMedia,
 } from '../';
-import { CONFIG } from '../../utils';
 
 describe( 'Card', () => {
 	describe( 'Card component', () => {
@@ -51,12 +50,15 @@ describe( 'Card', () => {
 		} );
 
 		it( 'should add rounded border when the isRounded prop is true', () => {
-			const { container } = render(
+			const { container: containerRounded } = render(
 				<Card isRounded={ true }>Code is Poetry</Card>
 			);
-			expect( container.firstChild ).toHaveStyle( {
-				borderRadius: CONFIG.cardBorderRadius,
-			} );
+			const { container: containerSquared } = render(
+				<Card isRounded={ false }>Code is Poetry</Card>
+			);
+			expect( containerRounded.firstChild ).toMatchStyleDiffSnapshot(
+				containerSquared.firstChild
+			);
 		} );
 
 		it( 'should show a box shadow when the elevation prop is greater than 0', () => {

package/src/checkbox-control/index.js

@@ -6,9 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+import { useInstanceId, useRefEffect } from '@wordpress/compose';
 import deprecated from '@wordpress/deprecated';
-import { Icon, check } from '@wordpress/icons';
+import { Icon, check, reset } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -20,6 +21,7 @@ export default function CheckboxControl( {
 	className,
 	heading,
 	checked,
+	indeterminate,
 	help,
 	onChange,
 	...props
@@ -31,6 +33,27 @@ export default function CheckboxControl( {
 		} );
 	}
 
+	const [ showCheckedIcon, setShowCheckedIcon ] = useState( false );
+	const [ showIndeterminateIcon, setShowIndeterminateIcon ] = useState(
+		false
+	);
+
+	// Run the following callback everytime the `ref` (and the additional
+	// dependencies) change.
+	const ref = useRefEffect(
+		( node ) => {
+			if ( ! node ) {
+				return;
+			}
+
+			// It cannot be set using an HTML attribute.
+			node.indeterminate = !! indeterminate;
+
+			setShowCheckedIcon( node.matches( ':checked' ) );
+			setShowIndeterminateIcon( node.matches( ':indeterminate' ) );
+		},
+		[ checked, indeterminate ]
+	);
 	const instanceId = useInstanceId( CheckboxControl );
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
@@ -44,6 +67,7 @@ export default function CheckboxControl( {
 		>
 			<span className="components-checkbox-control__input-container">
 				<input
+					ref={ ref }
 					id={ id }
 					className="components-checkbox-control__input"
 					type="checkbox"
@@ -53,7 +77,14 @@ export default function CheckboxControl( {
 					aria-describedby={ !! help ? id + '__help' : undefined }
 					{ ...props }
 				/>
-				{ checked ? (
+				{ showIndeterminateIcon ? (
+					<Icon
+						icon={ reset }
+						className="components-checkbox-control__indeterminate"
+						role="presentation"
+					/>
+				) : null }
+				{ showCheckedIcon ? (
 					<Icon
 						icon={ check }
 						className="components-checkbox-control__checked"

package/src/checkbox-control/stories/index.js

@@ -45,3 +45,47 @@ export const all = () => {
 
 	return <CheckboxControlWithState label={ label } help={ help } checked />;
 };
+
+export const Indeterminate = () => {
+	const [ fruits, setFruits ] = useState( { apple: false, orange: false } );
+
+	const isAllChecked = Object.values( fruits ).every( Boolean );
+	const isIndeterminate =
+		Object.values( fruits ).some( Boolean ) && ! isAllChecked;
+
+	return (
+		<>
+			<CheckboxControl
+				label="Select All"
+				checked={ isAllChecked }
+				indeterminate={ isIndeterminate }
+				onChange={ ( newValue ) =>
+					setFruits( {
+						apple: newValue,
+						orange: newValue,
+					} )
+				}
+			/>
+			<CheckboxControl
+				label="Apple"
+				checked={ fruits.apple }
+				onChange={ ( apple ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						apple,
+					} ) )
+				}
+			/>
+			<CheckboxControl
+				label="Orange"
+				checked={ fruits.orange }
+				onChange={ ( orange ) =>
+					setFruits( ( prevState ) => ( {
+						...prevState,
+						orange,
+					} ) )
+				}
+			/>
+		</>
+	);
+};

package/src/checkbox-control/style.scss

@@ -33,7 +33,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 		outline: 2px solid transparent;
 	}
 
-	&:checked {
+	&:checked,
+	&:indeterminate {
 		background: var(--wp-admin-theme-color);
 		border-color: var(--wp-admin-theme-color);
 
@@ -62,7 +63,8 @@ $checkbox-input-size-sm: 24px; // Width & height for small viewports.
 	}
 }
 
-svg.components-checkbox-control__checked {
+svg.components-checkbox-control__checked,
+svg.components-checkbox-control__indeterminate {
 	fill: $white;
 	cursor: pointer;
 	position: absolute;

package/src/color-palette/README.md

@@ -74,3 +74,9 @@ const MyColorPalette = () => {
 	);
 } );
 ```
+
+If you're using this component outside the editor, you can
+[ensure `Tooltip` positioning](/packages/components/README.md#popovers-and-tooltips)
+for the `ColorPalette`'s color swatches, by rendering your `ColorPalette` with a
+`Popover.Slot` further up the element tree and within a
+`SlotFillProvider` overall.

package/src/color-palette/index.js

@@ -21,6 +21,8 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
+import { Flex, FlexItem } from '../flex';
+import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
 
 extend( [ namesPlugin, a11yPlugin ] );
@@ -125,6 +127,31 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 	);
 }
 
+const extractColorNameFromCurrentValue = (
+	currentValue,
+	colors = [],
+	showMultiplePalettes = false
+) => {
+	if ( ! currentValue ) {
+		return '';
+	}
+
+	// Normalize format of `colors` to simplify the following loop
+	const colorPalettes = showMultiplePalettes ? colors : [ { colors } ];
+	for ( const { colors: paletteColors } of colorPalettes ) {
+		for ( const { name: colorName, color: colorValue } of paletteColors ) {
+			if (
+				colord( currentValue ).toHex() === colord( colorValue ).toHex()
+			) {
+				return colorName;
+			}
+		}
+	}
+
+	// translators: shown when the user has picked a custom color (i.e not in the palette of colors).
+	return __( 'Custom' );
+};
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -137,10 +164,9 @@ export default function ColorPalette( {
 	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
-	const Component =
-		__experimentalHasMultipleOrigins && colors?.length
-			? MultiplePalettes
-			: SinglePalette;
+	const showMultiplePalettes =
+		__experimentalHasMultipleOrigins && colors?.length;
+	const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette;
 
 	const renderCustomColorPicker = () => (
 		<ColorPicker
@@ -157,6 +183,30 @@ export default function ColorPalette( {
 
 	const colordColor = colord( value );
 
+	const valueWithoutLeadingHash = value?.startsWith( '#' )
+		? value.substring( 1 )
+		: value ?? '';
+	const buttonLabelName = useMemo(
+		() =>
+			extractColorNameFromCurrentValue(
+				value,
+				colors,
+				showMultiplePalettes
+			),
+		[ value, colors, showMultiplePalettes ]
+	);
+
+	const customColorAccessibleLabel = !! valueWithoutLeadingHash
+		? sprintf(
+				// translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00".
+				__(
+					'Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'
+				),
+				buttonLabelName,
+				valueWithoutLeadingHash
+		  )
+		: __( 'Custom color picker.' );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
@@ -165,12 +215,15 @@ export default function ColorPalette( {
 					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
-						<button
+						<Flex
+							as={ 'button' }
+							justify="space-between"
+							align="flex-start"
 							className="components-color-palette__custom-color"
 							aria-expanded={ isOpen }
 							aria-haspopup="true"
 							onClick={ onToggle }
-							aria-label={ __( 'Custom color picker' ) }
+							aria-label={ customColorAccessibleLabel }
 							style={ {
 								background: value,
 								color:
@@ -180,8 +233,20 @@ export default function ColorPalette( {
 										: '#000',
 							} }
 						>
-							{ value }
-						</button>
+							<FlexItem
+								isBlock
+								as={ Truncate }
+								className="components-color-palette__custom-color-name"
+							>
+								{ buttonLabelName }
+							</FlexItem>
+							<FlexItem
+								as="span"
+								className="components-color-palette__custom-color-value"
+							>
+								{ valueWithoutLeadingHash }
+							</FlexItem>
+						</Flex>
 					) }
 				/>
 			) }