diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index ae60ac1fe512de..22a53cd34de81e 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -199,70 +199,6 @@ opacity: 1; } } - - // Add extra border to parent blocks when their children are selected. - &.has-child-selected { - - > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - &.is-hovered > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before, - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block.is-hovered:not(.is-selected) > .block-editor-block-list__block-edit::before { - border-style: solid; - border-color: $dark-opacity-light-500; - border-left-color: transparent; - - .is-dark-theme & { - border-color: $light-opacity-light-400; - border-left-color: transparent; - } - } - } - - // Add extra border to child blocks when they are selected. - &.is-selected { - - > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected), - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-cover__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected), - > .block-editor-block-list__block-edit > [data-block] > div > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block:not(.is-selected) { - - > .block-editor-block-list__block-edit::before { - border: $border-width dashed $dark-opacity-light-600; - - .is-dark-theme & { - border-color: $light-opacity-light-500; - } - } - - &.is-hovered > .block-editor-block-list__block-edit::before { - border-style: solid; - border-color: $dark-opacity-light-500; - border-left-color: transparent; - - .is-dark-theme & { - border-color: $light-opacity-light-400; - border-left-color: transparent; - } - } - } - } } /** diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 31189ccf39bef6..99790414819a20 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -170,23 +170,6 @@ div.block-core-columns.is-vertically-aligned-bottom { right: 0; } -/** - * Add extra padding when the parent block is selected, for easier interaction. - */ -[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks { - padding: $block-padding; - - // Negate this padding for the placeholder. - > .components-placeholder { - margin: -$block-padding; - width: calc(100% + #{$block-padding * 2}); - } -} - - // Fullwide: show margin left/right to ensure there's room for the side UI. // This is not a 1:1 preview with the front-end where these margins would presumably be zero. [data-type="core/columns"][data-align="full"] .wp-block-columns { diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss index 166d3992c6daf9..9ef7f28eae6b4d 100644 --- a/packages/block-library/src/group/editor.scss +++ b/packages/block-library/src/group/editor.scss @@ -86,20 +86,6 @@ } } -// Add padding when the block is selected, for easier interaction. -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/group"].is-selected > .block-editor-block-list__block-edit > [data-block] > .wp-block-group { - - > .wp-block-group__inner-container > .block-editor-inner-blocks { - padding: $block-padding; - } - - &:not(.has-background) > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { - margin-top: -$block-padding * 2; - margin-bottom: -$block-padding * 2; - } -} - // Place block list appender in the same place content will appear. [data-type="core/group"].is-selected {