Fix columns to work with the new margins.

WordPress · Oct 24, 2019 · 6acfdd2 · 6acfdd2
1 parent 22c162b
commit 6acfdd2
Showing 1 changed file with 8 additions and 12 deletions.
diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -3,9 +3,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;
@@ -74,25 +71,25 @@
 
 			// 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.
 			// This has to match the same padding applied in style.scss.
 			// 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});
 				}
 			}
 
@@ -188,10 +185,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.