From d3fa9c233c7b75f9628bd8ef8aa5489922b50a4f Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 14:56:45 +1000
Subject: [PATCH 01/15] Use Dropdown for Block Styles control

---
 .../block-styles/block-styles-dropdown.js     | 136 ++++++++++++++++++
 .../src/components/block-styles/index.js      |  52 ++-----
 .../src/components/block-styles/style.scss    |  49 +------
 .../block-styles/use-styles-for-block.js      |  20 ++-
 4 files changed, 168 insertions(+), 89 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-styles/block-styles-dropdown.js

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
new file mode 100644
index 00000000000000..90b4038ee8a7d2
--- /dev/null
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	Flex,
+	FlexItem,
+	Icon,
+	MenuGroup,
+	MenuItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
+
+const checkIcon = <Icon icon={ check } size={ 24 } />;
+const noop = () => undefined;
+
+function BlockStyleColorIndicator( { blockStyle } ) {
+	const { background, gradient, text } = blockStyle?.styles?.color || {};
+	const label = blockStyle?.label || blockStyle?.name;
+
+	return (
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ gradient ?? background } />
+				</Flex>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ text } />
+				</Flex>
+			</ZStack>
+			<FlexItem title={ label }>{ label }</FlexItem>
+		</HStack>
+	);
+}
+
+function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames( 'block-editor-block-styles__dropdown-toggle', {
+			'is-open': isOpen,
+		} ),
+		'aria-expanded': isOpen,
+		'aria-label': __( 'Block style options' ),
+	};
+
+	return (
+		<Button __next40pxDefaultSize { ...toggleProps }>
+			<BlockStyleColorIndicator blockStyle={ blockStyle } />
+		</Button>
+	);
+}
+
+function BlockStylesDropdownContent( {
+	activeStyle,
+	handlePreview,
+	onSelect,
+	styles,
+} ) {
+	return (
+		<MenuGroup
+			className="block-editor-block-styles__dropdown-group"
+			label={ __( 'Block styles' ) }
+		>
+			{ styles.map( ( style ) => {
+				const isSelected = activeStyle?.name === style.name;
+
+				return (
+					<MenuItem
+						isSelected={ isSelected }
+						key={ style.name }
+						onBlur={ () => handlePreview( null ) }
+						onClick={ () => onSelect( style ) }
+						onFocus={ () => handlePreview( style ) }
+						onMouseEnter={ () => handlePreview( style ) }
+						onMouseLeave={ () => handlePreview( null ) }
+						role="menuitemradio"
+						suffix={ isSelected ? checkIcon : undefined }
+					>
+						<BlockStyleColorIndicator blockStyle={ style } />
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
+}
+
+export default function BlockStylesDropdown( {
+	className,
+	handlePreview = noop,
+	onSelect = noop,
+	styles,
+	value,
+	...props
+} ) {
+	if ( ! styles?.length ) {
+		return null;
+	}
+
+	const classes = classnames(
+		className,
+		'block-editor-block-styles__dropdown'
+	);
+
+	return (
+		<Dropdown
+			{ ...props }
+			label={ __( 'Block styles' ) }
+			className={ classes }
+			renderToggle={ ( toggleProps ) => (
+				<BlockStylesDropdownToggle
+					{ ...toggleProps }
+					blockStyle={ value }
+				/>
+			) }
+			renderContent={ ( contentProps ) => (
+				<BlockStylesDropdownContent
+					{ ...contentProps }
+					activeStyle={ value }
+					handlePreview={ handlePreview }
+					onSelect={ onSelect }
+					styles={ styles }
+				/>
+			) }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a9fdbe94356ef6..0a986091e742a6 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,22 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-	Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockStylesDropdown from './block-styles-dropdown';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -61,40 +53,12 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	return (
 		<div className="block-editor-block-styles">
-			<div className="block-editor-block-styles__variants">
-				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
-
-					return (
-						<Button
-							__next40pxDefaultSize
-							className={ classnames(
-								'block-editor-block-styles__item',
-								{
-									'is-active':
-										activeStyle.name === style.name,
-								}
-							) }
-							key={ style.name }
-							variant="secondary"
-							label={ buttonText }
-							onMouseEnter={ () => styleItemHandler( style ) }
-							onFocus={ () => styleItemHandler( style ) }
-							onMouseLeave={ () => styleItemHandler( null ) }
-							onBlur={ () => styleItemHandler( null ) }
-							onClick={ () => onSelectStylePreview( style ) }
-							aria-current={ activeStyle.name === style.name }
-						>
-							<Truncate
-								numberOfLines={ 1 }
-								className="block-editor-block-styles__item-text"
-							>
-								{ buttonText }
-							</Truncate>
-						</Button>
-					);
-				} ) }
-			</div>
+			<BlockStylesDropdown
+				handlePreview={ styleItemHandler }
+				onSelect={ onSelectStylePreview }
+				styles={ stylesToRender }
+				value={ activeStyle }
+			/>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index a83adb25c6ae15..01ed5a4a3f1f08 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,49 +13,12 @@
 	}
 }
 
-.block-editor-block-styles__variants {
-	display: flex;
-	flex-wrap: wrap;
-	justify-content: space-between;
-	gap: $grid-unit-10;
-
-	button.components-button.block-editor-block-styles__item {
-		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
-		display: inline-block;
-		width: calc(50% - #{$grid-unit-05});
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 $border-width $gray-300;
-		}
-
-		&.is-active,
-		&.is-active:hover {
-			background-color: $gray-900;
-			box-shadow: none;
-		}
-
-		&.is-active .block-editor-block-styles__item-text,
-		&.is-active:hover .block-editor-block-styles__item-text {
-			color: $white;
-		}
-
-		&:focus,
-		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
-		}
-	}
-
-	.block-editor-block-styles__item-text {
-		word-break: break-all;
-		// The Button component is white-space: nowrap, and that won't work with line-clamp.
-		white-space: normal;
-
-		// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-		text-align: start;
-		text-align-last: center;
-	}
+.block-editor-block-styles__dropdown {
+	width: 100%;
+}
+.block-editor-block-styles__dropdown-toggle {
+	box-shadow: inset 0 0 0 $border-width $gray-300;
+	width: 100%;
 }
 
 // To prevent overflow in the preview container,
diff --git a/packages/block-editor/src/components/block-styles/use-styles-for-block.js b/packages/block-editor/src/components/block-styles/use-styles-for-block.js
index 521c13081944ce..3385f8ab1b090c 100644
--- a/packages/block-editor/src/components/block-styles/use-styles-for-block.js
+++ b/packages/block-editor/src/components/block-styles/use-styles-for-block.js
@@ -54,7 +54,7 @@ function useGenericPreviewBlock( block, type ) {
  */
 export default function useStylesForBlocks( { clientId, onSwitch } ) {
 	const selector = ( select ) => {
-		const { getBlock } = select( blockEditorStore );
+		const { getBlock, getSettings } = select( blockEditorStore );
 		const block = getBlock( clientId );
 
 		if ( ! block ) {
@@ -62,11 +62,27 @@ export default function useStylesForBlocks( { clientId, onSwitch } ) {
 		}
 		const blockType = getBlockType( block.name );
 		const { getBlockStyles } = select( blocksStore );
+		const styles = getBlockStyles( block.name );
+
+		// Add theme.json styles for each block style if available.
+		// These will be used to customize the block style control
+		// For example, by displaying color swatches.
+		const variations =
+			getSettings().__experimentalStyles?.blocks?.[ block.name ]
+				?.variations ?? {};
+
+		if ( variations ) {
+			styles?.forEach( ( style, index ) => {
+				if ( variations[ style.name ] ) {
+					styles[ index ].styles = variations[ style.name ];
+				}
+			} );
+		}
 
 		return {
 			block,
 			blockType,
-			styles: getBlockStyles( block.name ),
+			styles,
 			className: block.attributes.className || '',
 			attributes: block.attributes,
 		};

From 48967c6099f4ac9c5923efb08553d99e7dd506b0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:03:16 +1000
Subject: [PATCH 02/15] Partial revert of Use Dropdown for Block Styles control

This partially reverts commit d3fa9c233c7b75f9628bd8ef8aa5489922b50a4f.
---
 .../block-styles/block-styles-dropdown.js     | 136 ------------------
 .../src/components/block-styles/index.js      |  52 +++++--
 .../src/components/block-styles/style.scss    |   8 --
 3 files changed, 44 insertions(+), 152 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-styles/block-styles-dropdown.js

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
deleted file mode 100644
index 90b4038ee8a7d2..00000000000000
--- a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
+++ /dev/null
@@ -1,136 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import {
-	Button,
-	ColorIndicator,
-	Dropdown,
-	Flex,
-	FlexItem,
-	Icon,
-	MenuGroup,
-	MenuItem,
-	__experimentalHStack as HStack,
-	__experimentalZStack as ZStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
-
-const checkIcon = <Icon icon={ check } size={ 24 } />;
-const noop = () => undefined;
-
-function BlockStyleColorIndicator( { blockStyle } ) {
-	const { background, gradient, text } = blockStyle?.styles?.color || {};
-	const label = blockStyle?.label || blockStyle?.name;
-
-	return (
-		<HStack justify="flex-start">
-			<ZStack isLayered={ false } offset={ -8 }>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ gradient ?? background } />
-				</Flex>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ text } />
-				</Flex>
-			</ZStack>
-			<FlexItem title={ label }>{ label }</FlexItem>
-		</HStack>
-	);
-}
-
-function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
-	const toggleProps = {
-		onClick: onToggle,
-		className: classnames( 'block-editor-block-styles__dropdown-toggle', {
-			'is-open': isOpen,
-		} ),
-		'aria-expanded': isOpen,
-		'aria-label': __( 'Block style options' ),
-	};
-
-	return (
-		<Button __next40pxDefaultSize { ...toggleProps }>
-			<BlockStyleColorIndicator blockStyle={ blockStyle } />
-		</Button>
-	);
-}
-
-function BlockStylesDropdownContent( {
-	activeStyle,
-	handlePreview,
-	onSelect,
-	styles,
-} ) {
-	return (
-		<MenuGroup
-			className="block-editor-block-styles__dropdown-group"
-			label={ __( 'Block styles' ) }
-		>
-			{ styles.map( ( style ) => {
-				const isSelected = activeStyle?.name === style.name;
-
-				return (
-					<MenuItem
-						isSelected={ isSelected }
-						key={ style.name }
-						onBlur={ () => handlePreview( null ) }
-						onClick={ () => onSelect( style ) }
-						onFocus={ () => handlePreview( style ) }
-						onMouseEnter={ () => handlePreview( style ) }
-						onMouseLeave={ () => handlePreview( null ) }
-						role="menuitemradio"
-						suffix={ isSelected ? checkIcon : undefined }
-					>
-						<BlockStyleColorIndicator blockStyle={ style } />
-					</MenuItem>
-				);
-			} ) }
-		</MenuGroup>
-	);
-}
-
-export default function BlockStylesDropdown( {
-	className,
-	handlePreview = noop,
-	onSelect = noop,
-	styles,
-	value,
-	...props
-} ) {
-	if ( ! styles?.length ) {
-		return null;
-	}
-
-	const classes = classnames(
-		className,
-		'block-editor-block-styles__dropdown'
-	);
-
-	return (
-		<Dropdown
-			{ ...props }
-			label={ __( 'Block styles' ) }
-			className={ classes }
-			renderToggle={ ( toggleProps ) => (
-				<BlockStylesDropdownToggle
-					{ ...toggleProps }
-					blockStyle={ value }
-				/>
-			) }
-			renderContent={ ( contentProps ) => (
-				<BlockStylesDropdownContent
-					{ ...contentProps }
-					activeStyle={ value }
-					handlePreview={ handlePreview }
-					onSelect={ onSelect }
-					styles={ styles }
-				/>
-			) }
-		/>
-	);
-}
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 0a986091e742a6..a9fdbe94356ef6 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,14 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import { Popover } from '@wordpress/components';
+import {
+	Button,
+	__experimentalTruncate as Truncate,
+	Popover,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockStylesDropdown from './block-styles-dropdown';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -53,12 +61,40 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	return (
 		<div className="block-editor-block-styles">
-			<BlockStylesDropdown
-				handlePreview={ styleItemHandler }
-				onSelect={ onSelectStylePreview }
-				styles={ stylesToRender }
-				value={ activeStyle }
-			/>
+			<div className="block-editor-block-styles__variants">
+				{ stylesToRender.map( ( style ) => {
+					const buttonText = style.label || style.name;
+
+					return (
+						<Button
+							__next40pxDefaultSize
+							className={ classnames(
+								'block-editor-block-styles__item',
+								{
+									'is-active':
+										activeStyle.name === style.name,
+								}
+							) }
+							key={ style.name }
+							variant="secondary"
+							label={ buttonText }
+							onMouseEnter={ () => styleItemHandler( style ) }
+							onFocus={ () => styleItemHandler( style ) }
+							onMouseLeave={ () => styleItemHandler( null ) }
+							onBlur={ () => styleItemHandler( null ) }
+							onClick={ () => onSelectStylePreview( style ) }
+							aria-current={ activeStyle.name === style.name }
+						>
+							<Truncate
+								numberOfLines={ 1 }
+								className="block-editor-block-styles__item-text"
+							>
+								{ buttonText }
+							</Truncate>
+						</Button>
+					);
+				} ) }
+			</div>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 01ed5a4a3f1f08..6ef7bf655b8bf4 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,14 +13,6 @@
 	}
 }
 
-.block-editor-block-styles__dropdown {
-	width: 100%;
-}
-.block-editor-block-styles__dropdown-toggle {
-	box-shadow: inset 0 0 0 $border-width $gray-300;
-	width: 100%;
-}
-
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.

From 1317cb9b17b2d7957a76d656931a39a39394de4b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:37:05 +1000
Subject: [PATCH 03/15] Export v2 CustomSelect and CustomSelectItem as private
 apis

---
 packages/components/src/private-apis.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 6694c1d30bdce8..6eb019f0f7c3e8 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -14,6 +14,7 @@ import {
 	useCompositeStore as useCompositeStoreV2,
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
+import { CustomSelect, CustomSelectItem } from './custom-select-control-v2';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
@@ -41,6 +42,8 @@ lock( privateApis, {
 	CompositeRowV2,
 	useCompositeStoreV2,
 	CustomSelectControl,
+	CustomSelect,
+	CustomSelectItem,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,

From 41243b807daa5c9b41853342dd085f6f0a81eb10 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:43:56 +1000
Subject: [PATCH 04/15] Add support for custom popover props to CustomSelect

---
 packages/components/CHANGELOG.md                       |  4 ++++
 .../components/src/custom-select-control-v2/README.md  |  6 ++++++
 .../src/custom-select-control-v2/custom-select.tsx     | 10 +++++++++-
 .../components/src/custom-select-control-v2/types.ts   |  4 ++++
 4 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index b6d1af65f61f72..137ee316880981 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
+-   `CustomSelectControlV2`: Support custom popover props.([#57780](https://github.com/WordPress/gutenberg/pull/57780)).
+
 ## 26.0.1 (2024-02-13)
 
 ### Bug Fix
diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md
index 634b25808c7d4a..2dc612ed6c6205 100644
--- a/packages/components/src/custom-select-control-v2/README.md
+++ b/packages/components/src/custom-select-control-v2/README.md
@@ -123,6 +123,12 @@ A function that receives the new value of the input.
 
 -   Required: no
 
+##### `popoverProps`: `Object`
+
+Optional props passed to the Ariakit Select Popover.
+
+-   Required: no
+
 ##### `renderSelectedValue`: `( selectValue: string | string[] ) => React.ReactNode`
 
 Can be used to render select UI with custom styled values.
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index 2bd1221f1381eb..790a692bcca08d 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -96,10 +96,18 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 		children,
 		hideLabelFromVision = false,
 		label,
+		popoverProps,
 		store,
 		...restProps
 	} = props;
 
+	const selectPopoverProps = {
+		gutter: 12,
+		sameWidth: true,
+		...popoverProps,
+		store,
+	};
+
 	return (
 		<>
 			{ hideLabelFromVision ? ( // TODO: Replace with BaseControl
@@ -110,7 +118,7 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 				</Styled.SelectLabel>
 			) }
 			<CustomSelectButton { ...restProps } store={ store } />
-			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
+			<Styled.SelectPopover { ...selectPopoverProps }>
 				<CustomSelectContext.Provider value={ { store } }>
 					{ children }
 				</CustomSelectContext.Provider>
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index b32f3ee2113080..9095be314f8b8a 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -57,6 +57,10 @@ export type _CustomSelectProps = {
 	 * Accessible label for the control.
 	 */
 	label: string;
+	/**
+	 * Optional props passed to the Ariakit Select Popover.
+	 */
+	popoverProps?: Ariakit.SelectPopoverProps;
 };
 
 export type CustomSelectProps = _CustomSelectProps &

From ff5c1db6e936e87a71e9cf51d6617ea0d3a20bfc Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:44:20 +1000
Subject: [PATCH 05/15] Add new block styles control

---
 .../block-styles/block-styles-control.js      | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 packages/block-editor/src/components/block-styles/block-styles-control.js

diff --git a/packages/block-editor/src/components/block-styles/block-styles-control.js b/packages/block-editor/src/components/block-styles/block-styles-control.js
new file mode 100644
index 00000000000000..646a52bb17bb11
--- /dev/null
+++ b/packages/block-editor/src/components/block-styles/block-styles-control.js
@@ -0,0 +1,80 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	ColorIndicator,
+	Flex,
+	FlexItem,
+	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { getDefaultStyle } from './utils';
+
+const { CustomSelect, CustomSelectItem } = unlock( componentsPrivateApis );
+
+function BlockStyleItem( { blockStyle: { styles, label } } ) {
+	const indicators = [ styles?.color?.background, styles?.color?.text ];
+
+	return (
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				{ indicators.map( ( indicator, index ) => (
+					<Flex key={ index } expanded={ false }>
+						<ColorIndicator colorValue={ indicator } />
+					</Flex>
+				) ) }
+			</ZStack>
+			<FlexItem title={ label }>{ label }</FlexItem>
+		</HStack>
+	);
+}
+
+export default function BlockStylesControl( props ) {
+	const { value, blockStyles, onChange, onHover } = props;
+	const defaultStyle = getDefaultStyle( blockStyles );
+
+	const renderSelectedBlockStyle = ( currentStyle ) => {
+		const currentBlockStyle = blockStyles.find(
+			( style ) => style.name === currentStyle
+		);
+
+		if ( ! currentBlockStyle ) {
+			return null;
+		}
+
+		return <BlockStyleItem blockStyle={ currentBlockStyle } />;
+	};
+
+	return (
+		<CustomSelect
+			className="block-editor-block-styles__button"
+			defaultValue={ defaultStyle?.name }
+			label={ __( 'Select a block style' ) }
+			onChange={ onChange }
+			renderSelectedValue={ renderSelectedBlockStyle }
+			value={ value?.name }
+			hideLabelFromVision
+			popoverProps={ { className: 'block-editor-block-styles__popover' } }
+		>
+			{ blockStyles.map( ( blockStyle, index ) => (
+				<CustomSelectItem
+					key={ index }
+					value={ blockStyle.name }
+					onMouseEnter={ () => onHover( blockStyle ) }
+					onMouseLeave={ () => onHover( null ) }
+					onFocus={ () => onHover( blockStyle ) }
+					onBlur={ () => onHover( null ) }
+				>
+					<BlockStyleItem blockStyle={ blockStyle } />
+				</CustomSelectItem>
+			) ) }
+		</CustomSelect>
+	);
+}

From ea76a8611bab329ca982744aaad65dd4f83b6456 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 21 Feb 2024 17:44:37 +1000
Subject: [PATCH 06/15] Use new block styles control

---
 .../src/components/block-styles/index.js      | 72 +++++--------------
 .../src/components/block-styles/style.scss    |  4 ++
 2 files changed, 21 insertions(+), 55 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a9fdbe94356ef6..978c966d06889c 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,22 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-	Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockStylesControl from './block-styles-control';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -30,10 +22,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		activeStyle,
 		genericPreviewBlock,
 		className: previewClassName,
-	} = useStylesForBlocks( {
-		clientId,
-		onSwitch,
-	} );
+	} = useStylesForBlocks( { clientId, onSwitch } );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
@@ -43,58 +32,31 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
 
-	const onSelectStylePreview = ( style ) => {
-		onSelect( style );
+	const handleOnChange = ( style ) => {
+		onSelect( { name: style } );
 		onHoverClassName( null );
 		setHoveredStyle( null );
 		debouncedSetHoveredStyle.cancel();
 	};
 
-	const styleItemHandler = ( item ) => {
-		if ( hoveredStyle === item ) {
+	const hoverStyleHandler = ( style ) => {
+		if ( hoveredStyle === style ) {
 			debouncedSetHoveredStyle.cancel();
 			return;
 		}
-		debouncedSetHoveredStyle( item );
-		onHoverClassName( item?.name ?? null );
+
+		debouncedSetHoveredStyle( style );
+		onHoverClassName( style?.name ?? null );
 	};
 
 	return (
 		<div className="block-editor-block-styles">
-			<div className="block-editor-block-styles__variants">
-				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
-
-					return (
-						<Button
-							__next40pxDefaultSize
-							className={ classnames(
-								'block-editor-block-styles__item',
-								{
-									'is-active':
-										activeStyle.name === style.name,
-								}
-							) }
-							key={ style.name }
-							variant="secondary"
-							label={ buttonText }
-							onMouseEnter={ () => styleItemHandler( style ) }
-							onFocus={ () => styleItemHandler( style ) }
-							onMouseLeave={ () => styleItemHandler( null ) }
-							onBlur={ () => styleItemHandler( null ) }
-							onClick={ () => onSelectStylePreview( style ) }
-							aria-current={ activeStyle.name === style.name }
-						>
-							<Truncate
-								numberOfLines={ 1 }
-								className="block-editor-block-styles__item-text"
-							>
-								{ buttonText }
-							</Truncate>
-						</Button>
-					);
-				} ) }
-			</div>
+			<BlockStylesControl
+				blockStyles={ stylesToRender }
+				value={ activeStyle }
+				onChange={ handleOnChange }
+				onHover={ hoverStyleHandler }
+			/>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
@@ -103,7 +65,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				>
 					<div
 						className="block-editor-block-styles__preview-panel"
-						onMouseLeave={ () => styleItemHandler( null ) }
+						onMouseLeave={ () => hoverStyleHandler( null ) }
 					>
 						<BlockStylesPreviewPanel
 							activeStyle={ activeStyle }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 6ef7bf655b8bf4..e3b22731af3163 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,6 +13,10 @@
 	}
 }
 
+.block-editor-block-styles__popover {
+	z-index: z-index(".components-popover");
+}
+
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.

From 0cf95cf2a4c4f6eebb7aa9d10e6f2aba7df10c9b Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:33:04 +1000
Subject: [PATCH 07/15] Revert "Use new block styles control"

This reverts commit ea76a8611bab329ca982744aaad65dd4f83b6456.
---
 .../src/components/block-styles/index.js      | 72 ++++++++++++++-----
 .../src/components/block-styles/style.scss    |  4 --
 2 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 978c966d06889c..a9fdbe94356ef6 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,14 +1,22 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import { Popover } from '@wordpress/components';
+import {
+	Button,
+	__experimentalTruncate as Truncate,
+	Popover,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import BlockStylesControl from './block-styles-control';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -22,7 +30,10 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		activeStyle,
 		genericPreviewBlock,
 		className: previewClassName,
-	} = useStylesForBlocks( { clientId, onSwitch } );
+	} = useStylesForBlocks( {
+		clientId,
+		onSwitch,
+	} );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
@@ -32,31 +43,58 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	const debouncedSetHoveredStyle = debounce( setHoveredStyle, 250 );
 
-	const handleOnChange = ( style ) => {
-		onSelect( { name: style } );
+	const onSelectStylePreview = ( style ) => {
+		onSelect( style );
 		onHoverClassName( null );
 		setHoveredStyle( null );
 		debouncedSetHoveredStyle.cancel();
 	};
 
-	const hoverStyleHandler = ( style ) => {
-		if ( hoveredStyle === style ) {
+	const styleItemHandler = ( item ) => {
+		if ( hoveredStyle === item ) {
 			debouncedSetHoveredStyle.cancel();
 			return;
 		}
-
-		debouncedSetHoveredStyle( style );
-		onHoverClassName( style?.name ?? null );
+		debouncedSetHoveredStyle( item );
+		onHoverClassName( item?.name ?? null );
 	};
 
 	return (
 		<div className="block-editor-block-styles">
-			<BlockStylesControl
-				blockStyles={ stylesToRender }
-				value={ activeStyle }
-				onChange={ handleOnChange }
-				onHover={ hoverStyleHandler }
-			/>
+			<div className="block-editor-block-styles__variants">
+				{ stylesToRender.map( ( style ) => {
+					const buttonText = style.label || style.name;
+
+					return (
+						<Button
+							__next40pxDefaultSize
+							className={ classnames(
+								'block-editor-block-styles__item',
+								{
+									'is-active':
+										activeStyle.name === style.name,
+								}
+							) }
+							key={ style.name }
+							variant="secondary"
+							label={ buttonText }
+							onMouseEnter={ () => styleItemHandler( style ) }
+							onFocus={ () => styleItemHandler( style ) }
+							onMouseLeave={ () => styleItemHandler( null ) }
+							onBlur={ () => styleItemHandler( null ) }
+							onClick={ () => onSelectStylePreview( style ) }
+							aria-current={ activeStyle.name === style.name }
+						>
+							<Truncate
+								numberOfLines={ 1 }
+								className="block-editor-block-styles__item-text"
+							>
+								{ buttonText }
+							</Truncate>
+						</Button>
+					);
+				} ) }
+			</div>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
@@ -65,7 +103,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 				>
 					<div
 						className="block-editor-block-styles__preview-panel"
-						onMouseLeave={ () => hoverStyleHandler( null ) }
+						onMouseLeave={ () => styleItemHandler( null ) }
 					>
 						<BlockStylesPreviewPanel
 							activeStyle={ activeStyle }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index e3b22731af3163..6ef7bf655b8bf4 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,10 +13,6 @@
 	}
 }
 
-.block-editor-block-styles__popover {
-	z-index: z-index(".components-popover");
-}
-
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.

From 29f2a6ccd1c5ec54b4b7997fb61b9d62a3f180a5 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:33:07 +1000
Subject: [PATCH 08/15] Revert "Add new block styles control"

This reverts commit ff5c1db6e936e87a71e9cf51d6617ea0d3a20bfc.
---
 .../block-styles/block-styles-control.js      | 80 -------------------
 1 file changed, 80 deletions(-)
 delete mode 100644 packages/block-editor/src/components/block-styles/block-styles-control.js

diff --git a/packages/block-editor/src/components/block-styles/block-styles-control.js b/packages/block-editor/src/components/block-styles/block-styles-control.js
deleted file mode 100644
index 646a52bb17bb11..00000000000000
--- a/packages/block-editor/src/components/block-styles/block-styles-control.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	ColorIndicator,
-	Flex,
-	FlexItem,
-	privateApis as componentsPrivateApis,
-	__experimentalHStack as HStack,
-	__experimentalZStack as ZStack,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { getDefaultStyle } from './utils';
-
-const { CustomSelect, CustomSelectItem } = unlock( componentsPrivateApis );
-
-function BlockStyleItem( { blockStyle: { styles, label } } ) {
-	const indicators = [ styles?.color?.background, styles?.color?.text ];
-
-	return (
-		<HStack justify="flex-start">
-			<ZStack isLayered={ false } offset={ -8 }>
-				{ indicators.map( ( indicator, index ) => (
-					<Flex key={ index } expanded={ false }>
-						<ColorIndicator colorValue={ indicator } />
-					</Flex>
-				) ) }
-			</ZStack>
-			<FlexItem title={ label }>{ label }</FlexItem>
-		</HStack>
-	);
-}
-
-export default function BlockStylesControl( props ) {
-	const { value, blockStyles, onChange, onHover } = props;
-	const defaultStyle = getDefaultStyle( blockStyles );
-
-	const renderSelectedBlockStyle = ( currentStyle ) => {
-		const currentBlockStyle = blockStyles.find(
-			( style ) => style.name === currentStyle
-		);
-
-		if ( ! currentBlockStyle ) {
-			return null;
-		}
-
-		return <BlockStyleItem blockStyle={ currentBlockStyle } />;
-	};
-
-	return (
-		<CustomSelect
-			className="block-editor-block-styles__button"
-			defaultValue={ defaultStyle?.name }
-			label={ __( 'Select a block style' ) }
-			onChange={ onChange }
-			renderSelectedValue={ renderSelectedBlockStyle }
-			value={ value?.name }
-			hideLabelFromVision
-			popoverProps={ { className: 'block-editor-block-styles__popover' } }
-		>
-			{ blockStyles.map( ( blockStyle, index ) => (
-				<CustomSelectItem
-					key={ index }
-					value={ blockStyle.name }
-					onMouseEnter={ () => onHover( blockStyle ) }
-					onMouseLeave={ () => onHover( null ) }
-					onFocus={ () => onHover( blockStyle ) }
-					onBlur={ () => onHover( null ) }
-				>
-					<BlockStyleItem blockStyle={ blockStyle } />
-				</CustomSelectItem>
-			) ) }
-		</CustomSelect>
-	);
-}

From 7a503aad0aea55fda66cf981ddb6d61e82990b23 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:33:13 +1000
Subject: [PATCH 09/15] Revert "Add support for custom popover props to
 CustomSelect"

This reverts commit 41243b807daa5c9b41853342dd085f6f0a81eb10.
---
 packages/components/CHANGELOG.md                       |  4 ----
 .../components/src/custom-select-control-v2/README.md  |  6 ------
 .../src/custom-select-control-v2/custom-select.tsx     | 10 +---------
 .../components/src/custom-select-control-v2/types.ts   |  4 ----
 4 files changed, 1 insertion(+), 23 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 137ee316880981..b6d1af65f61f72 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,10 +2,6 @@
 
 ## Unreleased
 
-### Enhancements
-
--   `CustomSelectControlV2`: Support custom popover props.([#57780](https://github.com/WordPress/gutenberg/pull/57780)).
-
 ## 26.0.1 (2024-02-13)
 
 ### Bug Fix
diff --git a/packages/components/src/custom-select-control-v2/README.md b/packages/components/src/custom-select-control-v2/README.md
index 2dc612ed6c6205..634b25808c7d4a 100644
--- a/packages/components/src/custom-select-control-v2/README.md
+++ b/packages/components/src/custom-select-control-v2/README.md
@@ -123,12 +123,6 @@ A function that receives the new value of the input.
 
 -   Required: no
 
-##### `popoverProps`: `Object`
-
-Optional props passed to the Ariakit Select Popover.
-
--   Required: no
-
 ##### `renderSelectedValue`: `( selectValue: string | string[] ) => React.ReactNode`
 
 Can be used to render select UI with custom styled values.
diff --git a/packages/components/src/custom-select-control-v2/custom-select.tsx b/packages/components/src/custom-select-control-v2/custom-select.tsx
index 790a692bcca08d..2bd1221f1381eb 100644
--- a/packages/components/src/custom-select-control-v2/custom-select.tsx
+++ b/packages/components/src/custom-select-control-v2/custom-select.tsx
@@ -96,18 +96,10 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 		children,
 		hideLabelFromVision = false,
 		label,
-		popoverProps,
 		store,
 		...restProps
 	} = props;
 
-	const selectPopoverProps = {
-		gutter: 12,
-		sameWidth: true,
-		...popoverProps,
-		store,
-	};
-
 	return (
 		<>
 			{ hideLabelFromVision ? ( // TODO: Replace with BaseControl
@@ -118,7 +110,7 @@ function _CustomSelect( props: _CustomSelectProps & CustomSelectStore ) {
 				</Styled.SelectLabel>
 			) }
 			<CustomSelectButton { ...restProps } store={ store } />
-			<Styled.SelectPopover { ...selectPopoverProps }>
+			<Styled.SelectPopover gutter={ 12 } store={ store } sameWidth>
 				<CustomSelectContext.Provider value={ { store } }>
 					{ children }
 				</CustomSelectContext.Provider>
diff --git a/packages/components/src/custom-select-control-v2/types.ts b/packages/components/src/custom-select-control-v2/types.ts
index 9095be314f8b8a..b32f3ee2113080 100644
--- a/packages/components/src/custom-select-control-v2/types.ts
+++ b/packages/components/src/custom-select-control-v2/types.ts
@@ -57,10 +57,6 @@ export type _CustomSelectProps = {
 	 * Accessible label for the control.
 	 */
 	label: string;
-	/**
-	 * Optional props passed to the Ariakit Select Popover.
-	 */
-	popoverProps?: Ariakit.SelectPopoverProps;
 };
 
 export type CustomSelectProps = _CustomSelectProps &

From 90264e7621dea84f61a66559dfe22e06723f22c1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:33:16 +1000
Subject: [PATCH 10/15] Revert "Export v2 CustomSelect and CustomSelectItem as
 private apis"

This reverts commit 1317cb9b17b2d7957a76d656931a39a39394de4b.
---
 packages/components/src/private-apis.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/components/src/private-apis.ts b/packages/components/src/private-apis.ts
index 6eb019f0f7c3e8..6694c1d30bdce8 100644
--- a/packages/components/src/private-apis.ts
+++ b/packages/components/src/private-apis.ts
@@ -14,7 +14,6 @@ import {
 	useCompositeStore as useCompositeStoreV2,
 } from './composite/v2';
 import { default as CustomSelectControl } from './custom-select-control';
-import { CustomSelect, CustomSelectItem } from './custom-select-control-v2';
 import { positionToPlacement as __experimentalPopoverLegacyPositionToPlacement } from './popover/utils';
 import { default as ProgressBar } from './progress-bar';
 import { createPrivateSlotFill } from './slot-fill';
@@ -42,8 +41,6 @@ lock( privateApis, {
 	CompositeRowV2,
 	useCompositeStoreV2,
 	CustomSelectControl,
-	CustomSelect,
-	CustomSelectItem,
 	__experimentalPopoverLegacyPositionToPlacement,
 	createPrivateSlotFill,
 	ComponentsContext,

From 40e9f7b79a282090d8bdd006ec7118fca16e782d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 11:33:44 +1000
Subject: [PATCH 11/15] Revert "Partial revert of Use Dropdown for Block Styles
 control"

This reverts commit 48967c6099f4ac9c5923efb08553d99e7dd506b0.
---
 .../block-styles/block-styles-dropdown.js     | 136 ++++++++++++++++++
 .../src/components/block-styles/index.js      |  52 ++-----
 .../src/components/block-styles/style.scss    |   8 ++
 3 files changed, 152 insertions(+), 44 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-styles/block-styles-dropdown.js

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
new file mode 100644
index 00000000000000..90b4038ee8a7d2
--- /dev/null
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	ColorIndicator,
+	Dropdown,
+	Flex,
+	FlexItem,
+	Icon,
+	MenuGroup,
+	MenuItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
+
+const checkIcon = <Icon icon={ check } size={ 24 } />;
+const noop = () => undefined;
+
+function BlockStyleColorIndicator( { blockStyle } ) {
+	const { background, gradient, text } = blockStyle?.styles?.color || {};
+	const label = blockStyle?.label || blockStyle?.name;
+
+	return (
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ gradient ?? background } />
+				</Flex>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ text } />
+				</Flex>
+			</ZStack>
+			<FlexItem title={ label }>{ label }</FlexItem>
+		</HStack>
+	);
+}
+
+function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
+	const toggleProps = {
+		onClick: onToggle,
+		className: classnames( 'block-editor-block-styles__dropdown-toggle', {
+			'is-open': isOpen,
+		} ),
+		'aria-expanded': isOpen,
+		'aria-label': __( 'Block style options' ),
+	};
+
+	return (
+		<Button __next40pxDefaultSize { ...toggleProps }>
+			<BlockStyleColorIndicator blockStyle={ blockStyle } />
+		</Button>
+	);
+}
+
+function BlockStylesDropdownContent( {
+	activeStyle,
+	handlePreview,
+	onSelect,
+	styles,
+} ) {
+	return (
+		<MenuGroup
+			className="block-editor-block-styles__dropdown-group"
+			label={ __( 'Block styles' ) }
+		>
+			{ styles.map( ( style ) => {
+				const isSelected = activeStyle?.name === style.name;
+
+				return (
+					<MenuItem
+						isSelected={ isSelected }
+						key={ style.name }
+						onBlur={ () => handlePreview( null ) }
+						onClick={ () => onSelect( style ) }
+						onFocus={ () => handlePreview( style ) }
+						onMouseEnter={ () => handlePreview( style ) }
+						onMouseLeave={ () => handlePreview( null ) }
+						role="menuitemradio"
+						suffix={ isSelected ? checkIcon : undefined }
+					>
+						<BlockStyleColorIndicator blockStyle={ style } />
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
+}
+
+export default function BlockStylesDropdown( {
+	className,
+	handlePreview = noop,
+	onSelect = noop,
+	styles,
+	value,
+	...props
+} ) {
+	if ( ! styles?.length ) {
+		return null;
+	}
+
+	const classes = classnames(
+		className,
+		'block-editor-block-styles__dropdown'
+	);
+
+	return (
+		<Dropdown
+			{ ...props }
+			label={ __( 'Block styles' ) }
+			className={ classes }
+			renderToggle={ ( toggleProps ) => (
+				<BlockStylesDropdownToggle
+					{ ...toggleProps }
+					blockStyle={ value }
+				/>
+			) }
+			renderContent={ ( contentProps ) => (
+				<BlockStylesDropdownContent
+					{ ...contentProps }
+					activeStyle={ value }
+					handlePreview={ handlePreview }
+					onSelect={ onSelect }
+					styles={ styles }
+				/>
+			) }
+		/>
+	);
+}
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index a9fdbe94356ef6..0a986091e742a6 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -1,22 +1,14 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
-import {
-	Button,
-	__experimentalTruncate as Truncate,
-	Popover,
-} from '@wordpress/components';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import BlockStylesDropdown from './block-styles-dropdown';
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
@@ -61,40 +53,12 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 
 	return (
 		<div className="block-editor-block-styles">
-			<div className="block-editor-block-styles__variants">
-				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.label || style.name;
-
-					return (
-						<Button
-							__next40pxDefaultSize
-							className={ classnames(
-								'block-editor-block-styles__item',
-								{
-									'is-active':
-										activeStyle.name === style.name,
-								}
-							) }
-							key={ style.name }
-							variant="secondary"
-							label={ buttonText }
-							onMouseEnter={ () => styleItemHandler( style ) }
-							onFocus={ () => styleItemHandler( style ) }
-							onMouseLeave={ () => styleItemHandler( null ) }
-							onBlur={ () => styleItemHandler( null ) }
-							onClick={ () => onSelectStylePreview( style ) }
-							aria-current={ activeStyle.name === style.name }
-						>
-							<Truncate
-								numberOfLines={ 1 }
-								className="block-editor-block-styles__item-text"
-							>
-								{ buttonText }
-							</Truncate>
-						</Button>
-					);
-				} ) }
-			</div>
+			<BlockStylesDropdown
+				handlePreview={ styleItemHandler }
+				onSelect={ onSelectStylePreview }
+				styles={ stylesToRender }
+				value={ activeStyle }
+			/>
 			{ hoveredStyle && ! isMobileViewport && (
 				<Popover
 					placement="left-start"
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 6ef7bf655b8bf4..01ed5a4a3f1f08 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -13,6 +13,14 @@
 	}
 }
 
+.block-editor-block-styles__dropdown {
+	width: 100%;
+}
+.block-editor-block-styles__dropdown-toggle {
+	box-shadow: inset 0 0 0 $border-width $gray-300;
+	width: 100%;
+}
+
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding
 // do not add to the block container's width.

From fa360c30a9057eae6a208a4b6646d389baceeeb1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 14:30:54 +1000
Subject: [PATCH 12/15] Try color cards in a dropdown

---
 .../block-styles/block-styles-dropdown.js     | 139 ++++++++++++------
 .../src/components/block-styles/index.js      |   2 +-
 .../src/components/block-styles/style.scss    |  45 ++++++
 3 files changed, 142 insertions(+), 44 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
index 90b4038ee8a7d2..83c54b213a211d 100644
--- a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -12,37 +12,76 @@ import {
 	Dropdown,
 	Flex,
 	FlexItem,
-	Icon,
-	MenuGroup,
-	MenuItem,
 	__experimentalHStack as HStack,
+	__experimentalTruncate as Truncate,
 	__experimentalZStack as ZStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { check } from '@wordpress/icons';
 
-const checkIcon = <Icon icon={ check } size={ 24 } />;
 const noop = () => undefined;
 
-function BlockStyleColorIndicator( { blockStyle } ) {
-	const { background, gradient, text } = blockStyle?.styles?.color || {};
-	const label = blockStyle?.label || blockStyle?.name;
+function BlockStyleColorCard( { blockStyle } ) {
+	const textColor = blockStyle?.styles?.color?.text;
+	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
 
 	return (
-		<HStack justify="flex-start">
-			<ZStack isLayered={ false } offset={ -8 }>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ gradient ?? background } />
-				</Flex>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ text } />
-				</Flex>
-			</ZStack>
-			<FlexItem title={ label }>{ label }</FlexItem>
+		<HStack justify="space-around">
+			<Flex expanded={ false }>
+				<ColorIndicator colorValue={ textColor } />
+			</Flex>
+			<Flex expanded={ false }>
+				<ColorIndicator colorValue={ linkColor } />
+			</Flex>
 		</HStack>
 	);
 }
 
+function BlockStyleButton( {
+	handlePreview,
+	isSelected,
+	onClick,
+	blockStyle,
+} ) {
+	// If the block style variation does not contain color values,
+	// render a textual label to cover styles such as the Button's
+	// Outline, or Image's Rounded, block styles.
+	const { label, name } = blockStyle;
+	const { background, gradient, text } = blockStyle.styles?.color || {};
+	const hasColors = background || gradient || text;
+	const styles = {
+		background: gradient,
+		backgroundColor: gradient ? undefined : background,
+	};
+
+	return (
+		<Button
+			aria-current={ isSelected }
+			className={ classnames( 'block-editor-block-styles__item', {
+				'is-active': isSelected,
+			} ) }
+			label={ blockStyle.label || blockStyle.name }
+			onBlur={ () => handlePreview( null ) }
+			onClick={ () => onClick( blockStyle ) }
+			onFocus={ () => handlePreview( blockStyle ) }
+			onMouseEnter={ () => handlePreview( blockStyle ) }
+			onMouseLeave={ () => handlePreview( null ) }
+			style={ styles }
+			variant="secondary"
+			__next40pxDefaultSize
+		>
+			{ hasColors && <BlockStyleColorCard blockStyle={ blockStyle } /> }
+			{ ! hasColors && (
+				<Truncate
+					numberOfLines={ 1 }
+					classsName="block-editor-block-styles__item-text"
+				>
+					{ label || name }
+				</Truncate>
+			) }
+		</Button>
+	);
+}
+
 function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
 	const toggleProps = {
 		onClick: onToggle,
@@ -53,44 +92,58 @@ function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
 		'aria-label': __( 'Block style options' ),
 	};
 
+	const { background, gradient, text } = blockStyle?.styles?.color || {};
+	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
+	const label = blockStyle?.label || blockStyle?.name;
+	const hasColors = gradient || background || text || linkColor;
+
 	return (
 		<Button __next40pxDefaultSize { ...toggleProps }>
-			<BlockStyleColorIndicator blockStyle={ blockStyle } />
+			<HStack justify="flex-start">
+				{ hasColors && (
+					<ZStack isLayered={ false } offset={ -8 }>
+						<Flex expanded={ false }>
+							<ColorIndicator
+								colorValue={ gradient ?? background }
+							/>
+						</Flex>
+						<Flex expanded={ false }>
+							<ColorIndicator colorValue={ text } />
+						</Flex>
+						{ !! linkColor && (
+							<Flex expanded={ false }>
+								<ColorIndicator colorValue={ linkColor } />
+							</Flex>
+						) }
+					</ZStack>
+				) }
+				<FlexItem title={ label }>{ label }</FlexItem>
+			</HStack>
 		</Button>
 	);
 }
 
 function BlockStylesDropdownContent( {
 	activeStyle,
+	blockStyles,
 	handlePreview,
 	onSelect,
-	styles,
+	...props
 } ) {
 	return (
-		<MenuGroup
-			className="block-editor-block-styles__dropdown-group"
-			label={ __( 'Block styles' ) }
-		>
-			{ styles.map( ( style ) => {
-				const isSelected = activeStyle?.name === style.name;
-
+		<div className="block-editor-block-styles__variants" { ...props }>
+			{ blockStyles.map( ( style ) => {
 				return (
-					<MenuItem
-						isSelected={ isSelected }
+					<BlockStyleButton
+						blockStyle={ style }
+						handlePreview={ handlePreview }
+						isSelected={ activeStyle?.name === style.name }
+						onClick={ onSelect }
 						key={ style.name }
-						onBlur={ () => handlePreview( null ) }
-						onClick={ () => onSelect( style ) }
-						onFocus={ () => handlePreview( style ) }
-						onMouseEnter={ () => handlePreview( style ) }
-						onMouseLeave={ () => handlePreview( null ) }
-						role="menuitemradio"
-						suffix={ isSelected ? checkIcon : undefined }
-					>
-						<BlockStyleColorIndicator blockStyle={ style } />
-					</MenuItem>
+					/>
 				);
 			} ) }
-		</MenuGroup>
+		</div>
 	);
 }
 
@@ -98,11 +151,11 @@ export default function BlockStylesDropdown( {
 	className,
 	handlePreview = noop,
 	onSelect = noop,
-	styles,
+	blockStyles,
 	value,
 	...props
 } ) {
-	if ( ! styles?.length ) {
+	if ( ! blockStyles?.length ) {
 		return null;
 	}
 
@@ -126,9 +179,9 @@ export default function BlockStylesDropdown( {
 				<BlockStylesDropdownContent
 					{ ...contentProps }
 					activeStyle={ value }
+					blockStyles={ blockStyles }
 					handlePreview={ handlePreview }
 					onSelect={ onSelect }
-					styles={ styles }
 				/>
 			) }
 		/>
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index 0a986091e742a6..ee1064dc43d845 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -54,9 +54,9 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	return (
 		<div className="block-editor-block-styles">
 			<BlockStylesDropdown
+				blockStyles={ stylesToRender }
 				handlePreview={ styleItemHandler }
 				onSelect={ onSelectStylePreview }
-				styles={ stylesToRender }
 				value={ activeStyle }
 			/>
 			{ hoveredStyle && ! isMobileViewport && (
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 01ed5a4a3f1f08..b6ef2c8bfe8406 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -20,6 +20,51 @@
 	box-shadow: inset 0 0 0 $border-width $gray-300;
 	width: 100%;
 }
+.block-editor-block-styles__variants {
+	display: grid;
+	gap: $grid-unit-10;
+	grid-template-columns: repeat(3, 1fr);
+	// Sidebar width minus sidebar and popover padding.
+	width: $sidebar-width - ($grid-unit-20 * 2) - ($grid-unit-10 * 2);
+
+	.block-editor-block-styles__item {
+		color: $gray-900;
+		box-shadow: inset 0 0 0 $border-width $gray-300;
+		display: inline-block;
+		// width: calc(50% - #{$grid-unit-05});
+
+		&:hover {
+			color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 $border-width $gray-300;
+		}
+
+		&.is-active,
+		&.is-active:hover {
+			background-color: $gray-900;
+			box-shadow: none;
+		}
+
+		&.is-active .block-editor-block-styles__item-text,
+		&.is-active:hover .block-editor-block-styles__item-text {
+			color: $white;
+		}
+
+		&:focus,
+		&.is-active:focus {
+			@include block-toolbar-button-style__focus();
+		}
+	}
+}
+
+.block-editor-block-styles__item-text {
+	word-break: break-all;
+	// The Button component is white-space: nowrap, and that won't work with line-clamp.
+	white-space: normal;
+
+	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
+	text-align: start;
+	text-align-last: center;
+}
 
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding

From 6e84280f2654151b2f694e74b563ff640a73caa2 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 15:24:14 +1000
Subject: [PATCH 13/15] Revert "Try color cards in a dropdown"

This reverts commit fa360c30a9057eae6a208a4b6646d389baceeeb1.
---
 .../block-styles/block-styles-dropdown.js     | 139 ++++++------------
 .../src/components/block-styles/index.js      |   2 +-
 .../src/components/block-styles/style.scss    |  45 ------
 3 files changed, 44 insertions(+), 142 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
index 83c54b213a211d..90b4038ee8a7d2 100644
--- a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -12,76 +12,37 @@ import {
 	Dropdown,
 	Flex,
 	FlexItem,
+	Icon,
+	MenuGroup,
+	MenuItem,
 	__experimentalHStack as HStack,
-	__experimentalTruncate as Truncate,
 	__experimentalZStack as ZStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { check } from '@wordpress/icons';
 
+const checkIcon = <Icon icon={ check } size={ 24 } />;
 const noop = () => undefined;
 
-function BlockStyleColorCard( { blockStyle } ) {
-	const textColor = blockStyle?.styles?.color?.text;
-	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
+function BlockStyleColorIndicator( { blockStyle } ) {
+	const { background, gradient, text } = blockStyle?.styles?.color || {};
+	const label = blockStyle?.label || blockStyle?.name;
 
 	return (
-		<HStack justify="space-around">
-			<Flex expanded={ false }>
-				<ColorIndicator colorValue={ textColor } />
-			</Flex>
-			<Flex expanded={ false }>
-				<ColorIndicator colorValue={ linkColor } />
-			</Flex>
+		<HStack justify="flex-start">
+			<ZStack isLayered={ false } offset={ -8 }>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ gradient ?? background } />
+				</Flex>
+				<Flex expanded={ false }>
+					<ColorIndicator colorValue={ text } />
+				</Flex>
+			</ZStack>
+			<FlexItem title={ label }>{ label }</FlexItem>
 		</HStack>
 	);
 }
 
-function BlockStyleButton( {
-	handlePreview,
-	isSelected,
-	onClick,
-	blockStyle,
-} ) {
-	// If the block style variation does not contain color values,
-	// render a textual label to cover styles such as the Button's
-	// Outline, or Image's Rounded, block styles.
-	const { label, name } = blockStyle;
-	const { background, gradient, text } = blockStyle.styles?.color || {};
-	const hasColors = background || gradient || text;
-	const styles = {
-		background: gradient,
-		backgroundColor: gradient ? undefined : background,
-	};
-
-	return (
-		<Button
-			aria-current={ isSelected }
-			className={ classnames( 'block-editor-block-styles__item', {
-				'is-active': isSelected,
-			} ) }
-			label={ blockStyle.label || blockStyle.name }
-			onBlur={ () => handlePreview( null ) }
-			onClick={ () => onClick( blockStyle ) }
-			onFocus={ () => handlePreview( blockStyle ) }
-			onMouseEnter={ () => handlePreview( blockStyle ) }
-			onMouseLeave={ () => handlePreview( null ) }
-			style={ styles }
-			variant="secondary"
-			__next40pxDefaultSize
-		>
-			{ hasColors && <BlockStyleColorCard blockStyle={ blockStyle } /> }
-			{ ! hasColors && (
-				<Truncate
-					numberOfLines={ 1 }
-					classsName="block-editor-block-styles__item-text"
-				>
-					{ label || name }
-				</Truncate>
-			) }
-		</Button>
-	);
-}
-
 function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
 	const toggleProps = {
 		onClick: onToggle,
@@ -92,58 +53,44 @@ function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
 		'aria-label': __( 'Block style options' ),
 	};
 
-	const { background, gradient, text } = blockStyle?.styles?.color || {};
-	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
-	const label = blockStyle?.label || blockStyle?.name;
-	const hasColors = gradient || background || text || linkColor;
-
 	return (
 		<Button __next40pxDefaultSize { ...toggleProps }>
-			<HStack justify="flex-start">
-				{ hasColors && (
-					<ZStack isLayered={ false } offset={ -8 }>
-						<Flex expanded={ false }>
-							<ColorIndicator
-								colorValue={ gradient ?? background }
-							/>
-						</Flex>
-						<Flex expanded={ false }>
-							<ColorIndicator colorValue={ text } />
-						</Flex>
-						{ !! linkColor && (
-							<Flex expanded={ false }>
-								<ColorIndicator colorValue={ linkColor } />
-							</Flex>
-						) }
-					</ZStack>
-				) }
-				<FlexItem title={ label }>{ label }</FlexItem>
-			</HStack>
+			<BlockStyleColorIndicator blockStyle={ blockStyle } />
 		</Button>
 	);
 }
 
 function BlockStylesDropdownContent( {
 	activeStyle,
-	blockStyles,
 	handlePreview,
 	onSelect,
-	...props
+	styles,
 } ) {
 	return (
-		<div className="block-editor-block-styles__variants" { ...props }>
-			{ blockStyles.map( ( style ) => {
+		<MenuGroup
+			className="block-editor-block-styles__dropdown-group"
+			label={ __( 'Block styles' ) }
+		>
+			{ styles.map( ( style ) => {
+				const isSelected = activeStyle?.name === style.name;
+
 				return (
-					<BlockStyleButton
-						blockStyle={ style }
-						handlePreview={ handlePreview }
-						isSelected={ activeStyle?.name === style.name }
-						onClick={ onSelect }
+					<MenuItem
+						isSelected={ isSelected }
 						key={ style.name }
-					/>
+						onBlur={ () => handlePreview( null ) }
+						onClick={ () => onSelect( style ) }
+						onFocus={ () => handlePreview( style ) }
+						onMouseEnter={ () => handlePreview( style ) }
+						onMouseLeave={ () => handlePreview( null ) }
+						role="menuitemradio"
+						suffix={ isSelected ? checkIcon : undefined }
+					>
+						<BlockStyleColorIndicator blockStyle={ style } />
+					</MenuItem>
 				);
 			} ) }
-		</div>
+		</MenuGroup>
 	);
 }
 
@@ -151,11 +98,11 @@ export default function BlockStylesDropdown( {
 	className,
 	handlePreview = noop,
 	onSelect = noop,
-	blockStyles,
+	styles,
 	value,
 	...props
 } ) {
-	if ( ! blockStyles?.length ) {
+	if ( ! styles?.length ) {
 		return null;
 	}
 
@@ -179,9 +126,9 @@ export default function BlockStylesDropdown( {
 				<BlockStylesDropdownContent
 					{ ...contentProps }
 					activeStyle={ value }
-					blockStyles={ blockStyles }
 					handlePreview={ handlePreview }
 					onSelect={ onSelect }
+					styles={ styles }
 				/>
 			) }
 		/>
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js
index ee1064dc43d845..0a986091e742a6 100644
--- a/packages/block-editor/src/components/block-styles/index.js
+++ b/packages/block-editor/src/components/block-styles/index.js
@@ -54,9 +54,9 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	return (
 		<div className="block-editor-block-styles">
 			<BlockStylesDropdown
-				blockStyles={ stylesToRender }
 				handlePreview={ styleItemHandler }
 				onSelect={ onSelectStylePreview }
+				styles={ stylesToRender }
 				value={ activeStyle }
 			/>
 			{ hoveredStyle && ! isMobileViewport && (
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index b6ef2c8bfe8406..01ed5a4a3f1f08 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -20,51 +20,6 @@
 	box-shadow: inset 0 0 0 $border-width $gray-300;
 	width: 100%;
 }
-.block-editor-block-styles__variants {
-	display: grid;
-	gap: $grid-unit-10;
-	grid-template-columns: repeat(3, 1fr);
-	// Sidebar width minus sidebar and popover padding.
-	width: $sidebar-width - ($grid-unit-20 * 2) - ($grid-unit-10 * 2);
-
-	.block-editor-block-styles__item {
-		color: $gray-900;
-		box-shadow: inset 0 0 0 $border-width $gray-300;
-		display: inline-block;
-		// width: calc(50% - #{$grid-unit-05});
-
-		&:hover {
-			color: var(--wp-admin-theme-color);
-			box-shadow: inset 0 0 0 $border-width $gray-300;
-		}
-
-		&.is-active,
-		&.is-active:hover {
-			background-color: $gray-900;
-			box-shadow: none;
-		}
-
-		&.is-active .block-editor-block-styles__item-text,
-		&.is-active:hover .block-editor-block-styles__item-text {
-			color: $white;
-		}
-
-		&:focus,
-		&.is-active:focus {
-			@include block-toolbar-button-style__focus();
-		}
-	}
-}
-
-.block-editor-block-styles__item-text {
-	word-break: break-all;
-	// The Button component is white-space: nowrap, and that won't work with line-clamp.
-	white-space: normal;
-
-	// Without this, the ellipsis can sometimes be partially hidden by the Button padding.
-	text-align: start;
-	text-align-last: center;
-}
 
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding

From 26d3afa8482fe5efdaea258322e79286d9e92ba0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 16:41:54 +1000
Subject: [PATCH 14/15] Try Dropdown with stack of items including color cards

---
 .../block-styles/block-styles-dropdown.js     | 45 +++++++++++++------
 .../src/components/block-styles/style.scss    | 12 +++++
 2 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
index 90b4038ee8a7d2..044e39f1c8169b 100644
--- a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -16,7 +16,6 @@ import {
 	MenuGroup,
 	MenuItem,
 	__experimentalHStack as HStack,
-	__experimentalZStack as ZStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
@@ -24,20 +23,39 @@ import { check } from '@wordpress/icons';
 const checkIcon = <Icon icon={ check } size={ 24 } />;
 const noop = () => undefined;
 
-function BlockStyleColorIndicator( { blockStyle } ) {
-	const { background, gradient, text } = blockStyle?.styles?.color || {};
+function BlockStyleColorCard( { blockStyle } ) {
+	const { background, gradient, text } = blockStyle.styles?.color || {};
+	const linkColor = blockStyle?.styles?.elements?.link?.color?.text;
+	const styles = {
+		background: gradient,
+		backgroundColor: gradient ? undefined : background,
+	};
+
+	return (
+		<HStack
+			className={ classnames( 'block-editor-block-styles__color-card', {
+				'no-background': ! background && ! gradient,
+			} ) }
+			justify="space-around"
+			style={ styles }
+			spacing={ 2 }
+		>
+			<Flex expanded={ false }>
+				<ColorIndicator colorValue={ text } />
+			</Flex>
+			<Flex expanded={ false }>
+				<ColorIndicator colorValue={ linkColor } />
+			</Flex>
+		</HStack>
+	);
+}
+
+function BlockStyleItem( { blockStyle } ) {
 	const label = blockStyle?.label || blockStyle?.name;
 
 	return (
 		<HStack justify="flex-start">
-			<ZStack isLayered={ false } offset={ -8 }>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ gradient ?? background } />
-				</Flex>
-				<Flex expanded={ false }>
-					<ColorIndicator colorValue={ text } />
-				</Flex>
-			</ZStack>
+			<BlockStyleColorCard blockStyle={ blockStyle } />
 			<FlexItem title={ label }>{ label }</FlexItem>
 		</HStack>
 	);
@@ -55,7 +73,7 @@ function BlockStylesDropdownToggle( { onToggle, isOpen, blockStyle } ) {
 
 	return (
 		<Button __next40pxDefaultSize { ...toggleProps }>
-			<BlockStyleColorIndicator blockStyle={ blockStyle } />
+			<BlockStyleItem blockStyle={ blockStyle } />
 		</Button>
 	);
 }
@@ -85,8 +103,9 @@ function BlockStylesDropdownContent( {
 						onMouseLeave={ () => handlePreview( null ) }
 						role="menuitemradio"
 						suffix={ isSelected ? checkIcon : undefined }
+						__next40pxDefaultSize
 					>
-						<BlockStyleColorIndicator blockStyle={ style } />
+						<BlockStyleItem blockStyle={ style } />
 					</MenuItem>
 				);
 			} ) }
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 01ed5a4a3f1f08..1d948e0d3c9d03 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -20,6 +20,18 @@
 	box-shadow: inset 0 0 0 $border-width $gray-300;
 	width: 100%;
 }
+.block-editor-block-styles__dropdown-group,
+.block-editor-block-styles__dropdown-toggle {
+	.block-editor-block-styles__color-card {
+		width: $grid-unit-80;
+		padding: $grid-unit-05 $grid-unit-10;
+		box-sizing: border-box;
+
+		&.no-background {
+			box-shadow: inset 0 0 0 $border-width $gray-300;
+		}
+	}
+}
 
 // To prevent overflow in the preview container,
 // ensure that block contents' margin and padding

From ad093163dfc4513e486e3e70e08c1cc3b99bea62 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 29 Feb 2024 17:00:31 +1000
Subject: [PATCH 15/15] Tweak styling of color card

---
 .../block-styles/block-styles-dropdown.js       | 17 ++++++++++-------
 .../src/components/block-styles/style.scss      | 10 ++++++++--
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
index 044e39f1c8169b..39503fbb5b5c02 100644
--- a/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
+++ b/packages/block-editor/src/components/block-styles/block-styles-dropdown.js
@@ -38,13 +38,19 @@ function BlockStyleColorCard( { blockStyle } ) {
 			} ) }
 			justify="space-around"
 			style={ styles }
-			spacing={ 2 }
+			spacing={ 1 }
 		>
 			<Flex expanded={ false }>
-				<ColorIndicator colorValue={ text } />
+				<ColorIndicator
+					className="block-editor-block-styles__color-indicator"
+					colorValue={ text }
+				/>
 			</Flex>
 			<Flex expanded={ false }>
-				<ColorIndicator colorValue={ linkColor } />
+				<ColorIndicator
+					className="block-editor-block-styles__color-indicator"
+					colorValue={ linkColor }
+				/>
 			</Flex>
 		</HStack>
 	);
@@ -85,10 +91,7 @@ function BlockStylesDropdownContent( {
 	styles,
 } ) {
 	return (
-		<MenuGroup
-			className="block-editor-block-styles__dropdown-group"
-			label={ __( 'Block styles' ) }
-		>
+		<MenuGroup className="block-editor-block-styles__dropdown-group">
 			{ styles.map( ( style ) => {
 				const isSelected = activeStyle?.name === style.name;
 
diff --git a/packages/block-editor/src/components/block-styles/style.scss b/packages/block-editor/src/components/block-styles/style.scss
index 1d948e0d3c9d03..d4dfc69fa768ff 100644
--- a/packages/block-editor/src/components/block-styles/style.scss
+++ b/packages/block-editor/src/components/block-styles/style.scss
@@ -20,12 +20,18 @@
 	box-shadow: inset 0 0 0 $border-width $gray-300;
 	width: 100%;
 }
+.block-editor-block-styles__color-indicator {
+	width: $grid-unit-10;
+	height: $grid-unit-10;
+}
 .block-editor-block-styles__dropdown-group,
 .block-editor-block-styles__dropdown-toggle {
 	.block-editor-block-styles__color-card {
-		width: $grid-unit-80;
-		padding: $grid-unit-05 $grid-unit-10;
+		// Width is 2 x 8px indicators, 2 x 8px padding, 4px gap.
+		width: $grid-unit-40 + $grid-unit-05;
+		padding: $grid-unit-10;
 		box-sizing: border-box;
+		border-radius: $radius-block-ui;
 
 		&.no-background {
 			box-shadow: inset 0 0 0 $border-width $gray-300;