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;