Try Dropdown with stack of items including color cards

WordPress · Feb 29, 2024 · 26d3afa · 26d3afa
1 parent 6e84280
commit 26d3afa
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 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
@@ -16,28 +16,46 @@ import {
 	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 || {};
+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
@@ -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