Tweak styling of color card

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

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -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;