diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 7ea432f30f016..9afad334b46f8 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -48,6 +48,7 @@ // Let the parent be selectable in the placeholder area. pointer-events: none; + .block-editor-inserter { pointer-events: all; } @@ -64,15 +65,15 @@ padding: 0; margin: 0; } + .components-placeholder__instructions { margin-bottom: 18px; } - .wp-block-group-placeholder__variations svg { - fill: $gray-400 !important; - } + .wp-block-group-placeholder__variations svg:hover { fill: var(--wp-admin-theme-color) !important; } + .wp-block-group-placeholder__variations > li { margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15; width: auto; @@ -80,23 +81,31 @@ flex-direction: column; align-items: center; } + .wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button { - width: 44px; - height: 32px; - padding: 0; - &:hover { - box-shadow: none; - } + width: auto; + height: auto; + padding: $grid-unit-10; + margin-right: 0; } + .components-placeholder { min-height: auto; padding: $grid-unit-30; align-items: center; } + .is-small, .is-medium { .wp-block-group-placeholder__variations > li { margin: $grid-unit-15; } } + + .wp-block-group-placeholder__variation-label { + font-family: $default-font; + font-size: 12px; + display: block; + line-height: 1.4; + } } diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js index 16a99a9287338..187154a643cf3 100644 --- a/packages/block-library/src/group/placeholder.js +++ b/packages/block-library/src/group/placeholder.js @@ -159,15 +159,18 @@ function GroupPlaceHolder( { name, onSelect } ) { { variations.map( ( variation ) => (
  • ) ) }