diff --git a/blocks/library/columns/editor.scss b/blocks/library/columns/editor.scss index 5185750bc4ae95..d68749cccf9d21 100644 --- a/blocks/library/columns/editor.scss +++ b/blocks/library/columns/editor.scss @@ -8,10 +8,14 @@ &:last-child { margin-right: -$block-padding; } -} + // This max-width is used to constrain the main editor column, it should not cascade into columns + .editor-block-list__block { + max-width: none; + } +} -.editor-block-list__block[data-align="full"] .wp-block-columns .editor-block-list__layout, +// 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; @@ -20,3 +24,16 @@ 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 +// Then at least an unselected columns block would be an accurate preview +.editor-block-list__block[data-align="full"] .wp-block-columns .editor-block-list__layout { + &:first-child { + margin-left: $block-side-ui-padding; + } + &:last-child { + margin-right: $block-side-ui-padding; + } +} diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index e8b69bc36f41dc..a9aec58947379f 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -242,7 +242,7 @@ margin-right: -$block-side-ui-padding; } - .editor-block-list__block-edit { + > .editor-block-list__block-edit { margin-left: -$block-padding; margin-right: -$block-padding; @@ -252,7 +252,7 @@ } } - .editor-block-list__block-edit:before { + > .editor-block-list__block-edit:before { left: 0; right: 0; border-left-width: 0;