Columns Block: Make responsive, make editor and theme match

packages/block-library/src/columns/editor.scss

@@ -6,13 +6,6 @@
 	margin-left: 0;
 	margin-right: 0;
 
-	&:first-child {
-		margin-left: -$block-padding;
-	}
-	&: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;
@@ -47,14 +40,92 @@
 	> .editor-inner-blocks > .editor-block-list__layout {
 		display: flex;
 
+		// Responsiveness: Allow wrapping on mobile.
+		flex-wrap: wrap;
+
+		@include break-medium() {
+			flex-wrap: nowrap;
+		}
+
 		> [data-type="core/column"] {
 			display: flex;
 			flex-direction: column;
 			flex: 1;
-			width: 0;
 
-			.editor-block-list__block-edit {
-				flex-basis: 100%;
+			// The Column block is a child of the Columns block and is mostly a passthrough container.
+			// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
+			// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
+			margin-top: -$block-padding;
+			margin-bottom: -$block-padding;
+
+			// On mobile, only a single column is shown, so match adjacent block paddings.
+			padding-left: 0;
+			padding-right: 0;
+			margin-left: -$block-padding;
+			margin-right: -$block-padding;
+			@include break-small () {
+				padding-left: $block-padding;
+				padding-right: $block-padding;
+				margin-right: inherit;
+				// Every .editor-block-list__block has auto-left/right margins, which centers columns.
+				// Since they aren't centered on the front-end, we explicitly set a zero left margin here.
+				margin-left: 0;
+			}
+
+			@include break-small() {
+				> .editor-block-contextual-toolbar {
+					top: $block-toolbar-height - $border-width;
+					transform: translateY(-$block-toolbar-height - $border-width);
+					margin-left: -$block-padding - $block-padding - $border-width;
+				}
+
+				> .editor-block-list__block-edit::before {
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+				}
+
+				> .editor-block-list__breadcrumb {
+					margin-right: -$block-padding - $border-width;
+				}
+			}
+
+			// 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;
+			}
+
+			// 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() {
+				> .editor-block-list__block-edit {
+					padding-left: $grid-size-large;
+					padding-right: $grid-size-large;
+				}
+
+				&:nth-child(odd) > .editor-block-list__block-edit {
+					padding-left: 0;
+				}
+
+				&:nth-child(even) > .editor-block-list__block-edit {
+					padding-right: 0;
+				}
+			}
+
+			@include break-medium() {
+				&:not(:first-child) > .editor-block-list__block-edit {
+					padding-left: $grid-size-large;
+				}
+
+				&:not(:last-child) > .editor-block-list__block-edit {
+					padding-right: $grid-size-large;
+				}
 			}
 		}
 	}

packages/block-library/src/columns/index.js

@@ -8,7 +8,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { PanelBody, RangeControl } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
@@ -42,12 +42,7 @@ const getColumnsTemplate = memoize( ( columns ) => {
 export const name = 'core/columns';
 
 export const settings = {
-	title: sprintf(
-		/* translators: Block title modifier */
-		__( '%1$s (%2$s)' ),
-		__( 'Columns' ),
-		__( 'beta' )
-	),
+	title: __( 'Columns' ),
 
 	icon: <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0V0z" /><g><path d="M21 4H3L2 5v14l1 1h18l1-1V5l-1-1zM8 18H4V6h4v12zm6 0h-4V6h4v12zm6 0h-4V6h4v12z" /></g></svg>,
 

packages/block-library/src/columns/style.scss

@@ -1,7 +1,49 @@
 .wp-block-columns {
 	display: flex;
+
+	// Responsiveness: Allow wrapping on mobile.
+	flex-wrap: wrap;
+
+	@include break-medium() {
+		flex-wrap: nowrap;
+	}
 }
 
 .wp-block-column {
 	flex: 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;
+	}
+
+	// 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() {
+		padding-left: $grid-size-large;
+		padding-right: $grid-size-large;
+
+		&:nth-child(odd) {
+			padding-left: 0;
+		}
+
+		&:nth-child(even) {
+			padding-right: 0;
+		}
+	}
+
+	@include break-medium() {
+		&:not(:first-child) {
+			padding-left: $grid-size-large;
+		}
+
+		&:not(:last-child) {
+			padding-right: $grid-size-large;
+		}
+	}
 }