diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 3ca0fbc5a6906..cbc0af62acdd6 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -42,9 +42,9 @@ border: $border-width dashed currentColor; opacity: 0.4; border-radius: $radius-block-ui; - flex: 1; + flex: 1 0 $grid-unit-60; pointer-events: none; - min-height: $grid-unit-60; + min-height: $grid-unit-60 - $border-width - $border-width; } // Let the parent be selectable in the placeholder area. @@ -53,3 +53,28 @@ pointer-events: all; } } + +// Show an unselected empty group button as a dashed outline instead of the appender button. +// This effectively adds a selectable-to-delete state. +.is-layout-flow.block-editor-block-list__block:not(.is-selected) { + > .block-list-appender:only-child { + pointer-events: none; + + &::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border: $border-width dashed currentColor; + opacity: 0.4; + border-radius: $radius-block-ui; + pointer-events: none; + } + + .block-editor-inserter { + visibility: hidden; + } + } +}