From 9fbab73ca4b37fd1aeabe7ce46cf25a563e6b422 Mon Sep 17 00:00:00 2001
From: Marty Helmick <info@martyhelmick.com>
Date: Fri, 1 Feb 2019 04:46:57 -0500
Subject: [PATCH] Remove unintentional right-margin on last odd-item. (#12199)

* Remove unintentional right-margin on last odd-item.

Looks like it wasn't intended to for the last column to have a `right-margin`, but the `:not(:last-child)` used here would only "not add" the margin. It didn't remove it if the column was odd numbered.

This simplifies the logic and adds right and left margin to all columns but removes it from first-left and last-right.

I also replaced the `flex: 1;` property with `flex-grow: 1;`.
`flex: 1` is = to `flex-grow: 1; flex-shrink: 1; flex-basis: 0;`
In this case `flex-shrink` keeps it's default value of `1` and `flex-basis` overwritten and is set to `100%` a couple lines after. So `flex-grow` is all we need.

* update editor to match style.css column margin changes

* account for beginning and end margins with breakpoints

* update editor.css to match style.css

* account for editor block padding and the medium breakpoint

* remove whitespace

* account for negative margins added by the editor

* correct flex-basis calculation for column width
---
 .../block-library/src/columns/editor.scss     | 18 ++++--------
 packages/block-library/src/columns/style.scss | 28 ++++++++-----------
 2 files changed, 18 insertions(+), 28 deletions(-)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index ebd2cbf5fdb9d7..cadafcd2ef360b 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -35,7 +35,7 @@
 		// Responsiveness: Allow wrapping on mobile.
 		flex-wrap: wrap;
 
-		@include break-small() {
+		@include break-medium() {
 			flex-wrap: nowrap;
 		}
 
@@ -89,7 +89,7 @@
 
 			// Beyond mobile, allow 2 columns.
 			@include break-small() {
-				flex-basis: 50%;
+				flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
 				flex-grow: 0;
 			}
 
@@ -97,21 +97,15 @@
 			// 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(odd) {
-					margin-right: $grid-size-large * 2;
-				}
 				&:nth-child(even) {
-					margin-left: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 
-			@include break-small() {
+			// When columns are in a single row, add space before all except the first.
+			@include break-medium() {
 				&:not(:first-child) {
-					margin-left: $grid-size-large * 2;
-				}
-
-				&:not(:last-child) {
-					margin-right: $grid-size-large * 2;
+					margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
 				}
 			}
 		}
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 90c61ea5acb0ff..00322b0afe7997 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -10,18 +10,12 @@
 }
 
 .wp-block-column {
-	flex: 1;
+	flex-grow: 1;
 	margin-bottom: 1em;
 
 	// Responsiveness: Show at most one columns on mobile.
 	flex-basis: 100%;
 
-	// Beyond mobile, allow 2 columns.
-	@include break-small() {
-		flex-basis: 50%;
-		flex-grow: 0;
-	}
-
 	// Prevent the columns from growing wider than their distributed sizes.
 	min-width: 0;
 
@@ -29,22 +23,24 @@
 	word-break: break-word; // For back-compat.
 	overflow-wrap: break-word; // New standard.
 
-	// Add space between columns. Themes can customize this if they wish to work differently.
-	// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 	@include break-small() {
-		&:nth-child(odd) {
-			margin-right: $grid-size-large * 2;
-		}
+
+		// Beyond mobile, allow 2 columns.
+		flex-basis: calc(50% - #{$grid-size-large});
+		flex-grow: 0;
+
+		// Add space between the 2 columns. Themes can customize this if they wish to work differently.
+		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
 			margin-left: $grid-size-large * 2;
 		}
+	}
+
+	@include break-medium() {
 
+		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
 			margin-left: $grid-size-large * 2;
 		}
-
-		&:not(:last-child) {
-			margin-right: $grid-size-large * 2;
-		}
 	}
 }