Columns Block: Make responsive, make editor and theme match (WordPres…

…s#10541) * Add basic responsiveness. * Refactor columns metrics. Level the playing field in editor and frontend. * Add space between colums. Fixes WordPress#7818. Fixes WordPress#6048. * Remove "beta" designation from columns block. * Columns block: Fix column width when editing * Column block: Improve padding for the first and last item in a row * Tests: Rename Columns block name also in e2e tests
antpb · Oct 26, 2018 · 921dbf4 · 921dbf4
1 parent 9fc9648
commit 921dbf4
Show file tree

Hide file tree

Showing 4 changed files with 128 additions and 20 deletions.
diff --git a/packages/block-library/src/columns/editor.scss b/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;
+				}
 			}
 		}
 	}

diff --git a/packages/block-library/src/columns/index.js b/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>,
 

diff --git a/packages/block-library/src/columns/style.scss b/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;
+		}
+	}
 }
diff --git a/test/e2e/specs/block-hierarchy-navigation.test.js b/test/e2e/specs/block-hierarchy-navigation.test.js
@@ -21,14 +21,14 @@ describe( 'Navigating the block hierarchy', () => {
 	} );
 
 	it( 'should navigate using the block hierarchy dropdown menu', async () => {
-		await insertBlock( 'Columns (beta)' );
+		await insertBlock( 'Columns' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.type( 'First column' );
 
 		// Navigate to the columns blocks.
 		await page.click( '[aria-label="Block Navigation"]' );
-		const columnsBlockMenuItem = ( await page.$x( "//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Columns (beta)')]" ) )[ 0 ];
+		const columnsBlockMenuItem = ( await page.$x( "//button[contains(@class,'editor-block-navigation__item') and contains(text(), 'Columns')]" ) )[ 0 ];
 		await columnsBlockMenuItem.click();
 
 		// Tweak the columns count.
@@ -53,7 +53,7 @@ describe( 'Navigating the block hierarchy', () => {
 	} );
 
 	it( 'should navigate block hierarchy using only the keyboard', async () => {
-		await insertBlock( 'Columns (beta)' );
+		await insertBlock( 'Columns' );
 
 		// Add a paragraph in the first column.
 		await page.keyboard.type( 'First column' );