Columns: Avoid using CSS variables for block gap styles (#37436)

* Initial commit Co-authored-by: Ramon <[email protected]> * Fix vertical alignment issue, try to find a compromise with tablet viewport sizes * Remove tablet break * Hide the layout controls so that we can reconcile the discrepancies between layout support styles and columns stack on mobile styles. The layout controls are not shown on trunk, and there is some confusion between multiple lines wrap (layout) vs stack on mobile (columns) options. In order to override the layout support flex-wrap styles, we do need `!important` on our wrap/nowrap declarations. * Update style.scss Reverting break-small change * Reinstate blockGap support for the columns block. Co-authored-by: Andrew Serong <[email protected]> Co-authored-by: Ben Dwyer <[email protected]>
WordPress · Jan 5, 2022 · d9cb56c · d9cb56c
1 parent fe9b08a
commit d9cb56c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 48 deletions.
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
@@ -95,7 +95,7 @@ Display content in multiple columns, with blocks added to each column.
 
 -	**Name:** core/columns
 -	**Category:** design
--	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), ~~html~~
+-	**Supports:** align (full, wide), anchor, color (background, gradients, link, text), spacing (blockGap, margin, padding), ~~html~~
 -	**Attributes:** isStackedOnMobile, verticalAlignment
 
 ## Comment Author Avatar

diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
@@ -24,11 +24,21 @@
 			"link": true
 		},
 		"spacing": {
+			"blockGap": true,
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
 				"padding": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap"
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
@@ -8,21 +8,6 @@
 	margin-right: 0;
 }
 
-// To do: remove horizontal margin override by the editor.
-@include break-small() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: var(--wp--style--block-gap, 2em);
-	}
-}
-
-@include break-medium() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: var(--wp--style--block-gap, 2em);
-	}
-}
-
 // Individual columns do not have top and bottom margins on the frontend.
 // So we make the editor match that.
 // We use :where to provide minimum specificity, so that intentional margins,

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
@@ -4,12 +4,16 @@
 	box-sizing: border-box;
 
 	// Responsiveness: Allow wrapping on mobile.
-	flex-wrap: wrap;
+	flex-wrap: wrap !important;
 
 	@include break-medium() {
-		flex-wrap: nowrap;
+		flex-wrap: nowrap !important;
 	}
 
+	// Ensure full vertical column stretch when alignment is not set.
+	// This overrides the Layout block support's default align-items setting of `center`.
+	align-items: initial !important;
+
 	/**
 	* All Columns Alignment
 	*/
@@ -26,30 +30,12 @@
 	}
 
 	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
-		@media (max-width: #{ ($break-small - 1) }) {
+		@media (max-width: #{ ($break-medium - 1) }) {
 			// Responsiveness: Show at most one columns on mobile. This must be
 			// important since the Column assigns its own width as an inline style.
 			flex-basis: 100% !important;
 		}
 
-		// Between mobile and large viewports, allow 2 columns.
-		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-			// Only add two column styling if there are two or more columns
-			&:not(:only-child) {
-				// As with mobile styles, this must be important since the Column
-				// assigns its own width as an inline style, which should take effect
-				// starting at `break-medium`.
-				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
-				flex-grow: 0;
-			}
-
-			// Add space between the multiple 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: var(--wp--style--block-gap, 2em);
-			}
-		}
-
 		// At large viewports, show all columns horizontally.
 		@include break-medium() {
 			// Available space should be divided equally amongst columns without an
@@ -67,16 +53,11 @@
 			&[style*="flex-basis"] {
 				flex-grow: 0;
 			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
-			}
 		}
 	}
 
 	&.is-not-stacked-on-mobile {
-		flex-wrap: nowrap;
+		flex-wrap: nowrap !important;
 
 		> .wp-block-column {
 			// Available space should be divided equally amongst columns.
@@ -88,11 +69,6 @@
 			&[style*="flex-basis"] {
 				flex-grow: 0;
 			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
-			}
 		}
 	}
 }