diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 1dc626a9e84e0..c2f1bd06e9b8a 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -10,9 +10,6 @@ // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere // When using CSS grid, margins do not collapse on the container. .wp-block-columns .editor-block-list__layout { - margin-left: 0; - margin-right: 0; - // This max-width is used to constrain the main editor column, it should not cascade into columns .editor-block-list__block { max-width: none; @@ -71,10 +68,10 @@ // Beyond mobile, allow 2 columns. @include break-small() { - flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2})); + flex-basis: calc(50% - (#{$grid-size-large})); flex-grow: 0; - margin-left: $block-padding; - margin-right: $block-padding; + margin-left: 0; + margin-right: 0; } // Add space between columns. Themes can customize this if they wish to work differently. @@ -82,14 +79,14 @@ // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. @include break-small() { &:nth-child(even) { - margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); + margin-left: calc(#{$grid-size-large * 2}); } } // When columns are in a single row, add space before all except the first. @include break-medium() { &:not(:first-child) { - margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); + margin-left: calc(#{$grid-size-large * 2}); } } @@ -185,10 +182,9 @@ 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 { padding: $block-padding; // Negate this padding for the placeholder.