diff --git a/core-blocks/columns/editor.scss b/core-blocks/columns/editor.scss index 87695cab379dc..6688f057ca73b 100644 --- a/core-blocks/columns/editor.scss +++ b/core-blocks/columns/editor.scss @@ -2,6 +2,9 @@ // This is sort of an experiment at making sure the editor looks as much like the end result as possible // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere .wp-block-columns .editor-block-list__layout { + margin-left: 0; + margin-right: 0; + &:first-child { margin-left: -$block-padding; } @@ -15,16 +18,6 @@ } } -// Wide: show no left/right margin on wide, so they stack with the column side UI -.editor-block-list__block[data-align="wide"] .wp-block-columns .editor-block-list__layout { - &:first-child { - margin-left: 0; - } - &:last-child { - margin-right: 0; - } -} - // 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 // @todo this could be revisited, by for example showing this margin only when the parent block was selected first diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 2f3e02146ef93..76e5b770e6ec8 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -111,10 +111,19 @@ padding-right: $block-side-ui-padding; } - // Don't add side padding for nested blocks, @todo see if this can be scoped better + // Don't add side padding for nested blocks, and compensate for block padding .editor-block-list__block & { + // compensate for side UI padding-left: 0; padding-right: 0; + + // compensate for block padding horizontally + margin-left: -$block-padding; + margin-right: -$block-padding; + + // compensate for block padding and collapsing margins vertically + margin-top: -$block-padding + 1px; + margin-top: -$block-padding + 1px; } }