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 044e39f1c8169..39503fbb5b5c0 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 }
>
-
+
-
+
);
@@ -85,10 +91,7 @@ function BlockStylesDropdownContent( {
styles,
} ) {
return (
-
+
{ 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 1d948e0d3c9d0..d4dfc69fa768f 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;