From ae5fceb93ffc933391b233ccbd7984d1ed919a5e Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 18 Oct 2019 10:51:14 +0200 Subject: [PATCH] Fix columns full-wide regression. The Columns block, when full-wide, has intentional left and right padding to ensure the mover controls of child blocks are accessible. This is editor-only, and only when the block is selected. This regressed at some point, a while ago, probably around the introduction of extra on-click padding to show the dashed outlines of child elements. This PR shuffles the rules a bit, reduces some of their specificity, and applies the left and right padding elsewhere to make it work. --- .../block-library/src/columns/editor.scss | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 2045a1e12e965..60c6730fc2b08 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -12,18 +12,6 @@ } } -// 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 > .editor-inner-blocks { - padding-left: $block-padding; - padding-right: $block-padding; - - @include break-small() { - padding-left: $block-container-side-padding; - padding-right: $block-container-side-padding; - } -} - .wp-block-columns { display: block; @@ -188,10 +176,10 @@ div.block-core-columns.is-vertically-aligned-bottom { /** * Add extra padding when the parent block is selected, for easier interaction. */ -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].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[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].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[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks { +[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. @@ -200,3 +188,16 @@ div.block-core-columns.is-vertically-aligned-bottom { 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 { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-container-side-padding; + padding-right: $block-container-side-padding; + } +}