From ae327b22d6c1fd563290fbc304ea977b1f71480e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?=
 <grzegorz@gziolo.pl>
Date: Fri, 29 Nov 2019 10:08:18 +0100
Subject: [PATCH] Block Library: Update Columns block to use Patterns API
 (#18283)

* Block library: Refactor Columns block to use Patterns API

* Blocks: Add support for the default block pattern

* Components: Add size prop to the IconButton component

* Change the behavior of the selector which returns the default block pattern

* Block editor: Extract BLockPatternPicker component

* Abstract columns picker selection with __experimentalBlockPatternPicker

* Use Icon component to unify the way icons are handled
---
 .../components/block-pattern-picker/index.js  |  67 ++++++
 .../block-pattern-picker/style.scss           |  74 +++++++
 packages/block-editor/src/components/index.js |   1 +
 .../src/components/inner-blocks/README.md     |  63 ------
 .../src/components/inner-blocks/index.js      |  25 +--
 .../components/inner-blocks/index.native.js   |  18 +-
 .../src/components/inner-blocks/style.scss    |  75 -------
 .../inner-blocks/template-picker.js           |  67 ------
 packages/block-editor/src/style.scss          |   1 +
 packages/block-library/src/columns/edit.js    | 198 ++++++++----------
 packages/block-library/src/columns/index.js   |   2 +
 .../block-library/src/columns/patterns.js     |  63 ++++++
 .../block-library/src/columns/test/utils.js   |  20 --
 packages/block-library/src/columns/utils.js   |  18 +-
 packages/blocks/src/store/selectors.js        |  29 ++-
 packages/blocks/src/store/test/selectors.js   |  78 ++++++-
 packages/components/src/icon-button/index.js  |   5 +-
 .../src/icon-button/stories/index.js          |   4 +-
 packages/components/src/placeholder/index.js  |   5 +-
 .../components/src/placeholder/test/index.js  |   6 +-
 20 files changed, 419 insertions(+), 400 deletions(-)
 create mode 100644 packages/block-editor/src/components/block-pattern-picker/index.js
 create mode 100644 packages/block-editor/src/components/block-pattern-picker/style.scss
 delete mode 100644 packages/block-editor/src/components/inner-blocks/template-picker.js
 create mode 100644 packages/block-library/src/columns/patterns.js

diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-pattern-picker/index.js
new file mode 100644
index 0000000000000..3b2b0a1c05383
--- /dev/null
+++ b/packages/block-editor/src/components/block-pattern-picker/index.js
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Button, IconButton, Placeholder } from '@wordpress/components';
+
+function BlockPatternPicker( {
+	icon = 'layout',
+	label = __( 'Choose pattern' ),
+	instructions = __( 'Select a pattern to start with.' ),
+	patterns,
+	onSelect,
+	allowSkip,
+} ) {
+	const classes = classnames( 'block-editor-block-pattern-picker', {
+		'has-many-patterns': patterns.length > 4,
+	} );
+
+	return (
+		<Placeholder
+			icon={ icon }
+			label={ label }
+			instructions={ instructions }
+			className={ classes }
+		>
+			{
+				/*
+				* Disable reason: The `list` ARIA role is redundant but
+				* Safari+VoiceOver won't announce the list otherwise.
+				*/
+				/* eslint-disable jsx-a11y/no-redundant-roles */
+			}
+			<ul className="block-editor-block-pattern-picker__patterns" role="list">
+				{ patterns.map( ( pattern ) => (
+					<li key={ pattern.name }>
+						<IconButton
+							isLarge
+							icon={ pattern.icon }
+							size={ 48 }
+							onClick={ () => onSelect( pattern ) }
+							className="block-editor-block-pattern-picker__pattern"
+							label={ pattern.label }
+						/>
+					</li>
+				) ) }
+			</ul>
+			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+			{ allowSkip && (
+				<div className="block-editor-block-pattern-picker__skip">
+					<Button
+						isLink
+						onClick={ () => onSelect() }
+					>
+						{ __( 'Skip' ) }
+					</Button>
+				</div>
+			) }
+		</Placeholder>
+	);
+}
+
+export default BlockPatternPicker;
diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-pattern-picker/style.scss
new file mode 100644
index 0000000000000..ac92faea0848a
--- /dev/null
+++ b/packages/block-editor/src/components/block-pattern-picker/style.scss
@@ -0,0 +1,74 @@
+.block-editor-block-pattern-picker {
+	.components-placeholder__instructions {
+		// Defer to vertical margins applied by template picker options.
+		margin-bottom: 0;
+	}
+
+	.components-placeholder__fieldset {
+		// Options will render horizontally, but the immediate children of the
+		// fieldset are the options and the skip button, oriented vertically.
+		flex-direction: column;
+	}
+
+	&.has-many-patterns .components-placeholder__fieldset {
+		// Allow options to occupy a greater amount of the available space if
+		// many options exist.
+		max-width: 90%;
+	}
+}
+
+.block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns {
+	display: flex;
+	justify-content: center;
+	flex-direction: row;
+	flex-wrap: wrap;
+	width: 100%;
+	margin: $grid-size-small 0;
+	list-style: none;
+
+	> li {
+		list-style: none;
+		margin: $grid-size;
+		flex-shrink: 1;
+		max-width: 100px;
+	}
+
+	.block-editor-block-pattern-picker__pattern {
+		padding: $grid-size;
+	}
+}
+
+.block-editor-block-pattern-picker__pattern {
+	width: 100%;
+
+	&.components-icon-button {
+		// Override default styles inherited from <IconButton /> to center
+		// icon horizontally.
+		justify-content: center;
+
+		&.is-default {
+			background-color: $white;
+		}
+	}
+
+	&.components-button {
+		// Override default styles inherited from <Button /> to allow button
+		// to grow vertically.
+		height: auto;
+		padding: 0;
+	}
+
+	&::before {
+		// Use `padding-bottom` trick to style element as perfect square.
+		content: "";
+		padding-bottom: 100%;
+	}
+
+	&:first-child {
+		margin-left: 0;
+	}
+
+	&:last-child {
+		margin-right: 0;
+	}
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index 2ff44fed17fb4..c609173deb18e 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -15,6 +15,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as __experimentalBlockNavigationList } from './block-navigation/list';
+export { default as __experimentalBlockPatternPicker } from './block-pattern-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 5bed06f7a8047..676eba071437e 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -90,69 +90,6 @@ const TEMPLATE = [ [ 'core/columns', {}, [
 
 The previous example creates an InnerBlocks area containing two columns one with an image and the other with a paragraph.
 
-### `__experimentalTemplateOptions`
-
-* **Type:** `Array<Object>`
-
-To present the user with a set of template choices for the inner blocks, you may provide an array of template options.
-
-A template option is an object consisting of the following properties:
-
-- `title` (`string`): A human-readable label which describes the template. 
-- `icon` (`WPElement|string`): An element or [Dashicon](https://developer.wordpress.org/resource/dashicons/) slug to show as a visual approximation of the template.
-- `template` (`Array<Array>`): The template to apply when the option has been selected. See [`template` documentation](#template) for more information.
-
-For the template placeholder selection to be displayed, you must render `InnerBlocks` with a `template` prop value of `null`. You may track this as state of your component, updating its value when receiving the selected template via `__experimentalOnSelectTemplateOption`.
-
-```jsx
-import { useState } from '@wordpress/element';
-
-const TEMPLATE_OPTIONS = [
-	{
-		title: 'Two Columns',
-		icon: <svg />,
-		template: [
-			[ 'core/column', { width: 50 } ],
-			[ 'core/column', { width: 50 } ],
-		],
-	},
-	{
-		title: 'Three Columns',
-		icon: <svg />,
-		template: [
-			[ 'core/column', { width: 33.33 } ],
-			[ 'core/column', { width: 33.33 } ],
-			[ 'core/column', { width: 33.33 } ],
-		],
-	},
-];
-
-function edit() {
-	const [ template, setTemplate ] = useState( null );
-
-	return (
-		<InnerBlocks
-			template={ template }
-		    __experimentalTemplateOptions={ TEMPLATE_OPTIONS }
-		    __experimentalOnSelectTemplateOption={ setTemplate }
-		/>
-	);
-}
-```
-
-### `__experimentalOnSelectTemplateOption`
-
-* **Type:** `Function`
-
-Callback function invoked when the user makes a template selection, used in combination with the `__experimentalTemplateOptions` props. The selected template is passed as the first and only argument. The value of the template may be `undefined` if the `__experimentalAllowTemplateOptionSkip` prop is passed to `InnerBlocks` and the user opts to skip template selection.
-
-### `__experimentalAllowTemplateOptionSkip`
-
-* **Type:** `Boolean`
-* **Default:** `false`
-
-Whether to include a button in the template selection placeholder to allow the user to skip selection, used in combination with the `__experimentalTemplateOptions` prop. When clicked, the `__experimentalOnSelectTemplateOption` callback will be passed an `undefined` value as the template.
-
 ### `templateInsertUpdatesSelection`
 * **Type:** `Boolean`
 * **Default:** `true`
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index dc281d0f42f4f..19301cf37d7e8 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -25,7 +25,6 @@ import DefaultBlockAppender from './default-block-appender';
  */
 import BlockList from '../block-list';
 import { withBlockEditContext } from '../block-edit/context';
-import TemplatePicker from './template-picker';
 
 class InnerBlocks extends Component {
 	constructor() {
@@ -106,34 +105,22 @@ class InnerBlocks extends Component {
 			clientId,
 			hasOverlay,
 			renderAppender,
-			template,
 			__experimentalMoverDirection: moverDirection,
-			__experimentalTemplateOptions: templateOptions,
-			__experimentalOnSelectTemplateOption: onSelectTemplateOption,
-			__experimentalAllowTemplateOptionSkip: allowTemplateOptionSkip,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
-		const isPlaceholder = template === null && !! templateOptions;
-
 		const classes = classnames( 'editor-inner-blocks block-editor-inner-blocks', {
-			'has-overlay': enableClickThrough && ( hasOverlay && ! isPlaceholder ),
+			'has-overlay': enableClickThrough && hasOverlay,
 		} );
 
 		return (
 			<div className={ classes }>
 				{ ! templateInProcess && (
-					isPlaceholder ?
-						<TemplatePicker
-							options={ templateOptions }
-							onSelect={ onSelectTemplateOption }
-							allowSkip={ allowTemplateOptionSkip }
-						/> :
-						<BlockList
-							rootClientId={ clientId }
-							renderAppender={ renderAppender }
-							__experimentalMoverDirection={ moverDirection }
-						/>
+					<BlockList
+						rootClientId={ clientId }
+						renderAppender={ renderAppender }
+						__experimentalMoverDirection={ moverDirection }
+					/>
 				) }
 			</div>
 		);
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index 6d2d4290772fa..145c961f08233 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -106,24 +106,18 @@ class InnerBlocks extends Component {
 		const {
 			clientId,
 			renderAppender,
-			template,
-			__experimentalTemplateOptions: templateOptions,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
-		const isPlaceholder = template === null && !! templateOptions;
-
 		return (
 			<>
 				{ ! templateInProcess && (
-					isPlaceholder ?
-						null :
-						<BlockList
-							rootClientId={ clientId }
-							renderAppender={ renderAppender }
-							withFooter={ false }
-							isFullyBordered={ true }
-						/>
+					<BlockList
+						rootClientId={ clientId }
+						renderAppender={ renderAppender }
+						withFooter={ false }
+						isFullyBordered={ true }
+					/>
 				) }
 			</>
 		);
diff --git a/packages/block-editor/src/components/inner-blocks/style.scss b/packages/block-editor/src/components/inner-blocks/style.scss
index e7bd479e04e02..ff8e4b9adbe96 100644
--- a/packages/block-editor/src/components/inner-blocks/style.scss
+++ b/packages/block-editor/src/components/inner-blocks/style.scss
@@ -17,78 +17,3 @@
 	right: 0;
 	left: 0;
 }
-
-.block-editor-inner-blocks__template-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-options .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-inner-blocks__template-picker-options.block-editor-inner-blocks__template-picker-options {
-	display: flex;
-	justify-content: center;
-	flex-direction: row;
-	flex-wrap: wrap;
-	width: 100%;
-	margin: $grid-size-small 0;
-	list-style: none;
-
-	> li {
-		list-style: none;
-		margin: $grid-size;
-		flex-shrink: 1;
-		max-width: 100px;
-	}
-
-	.block-editor-inner-blocks__template-picker-option {
-		padding: $grid-size;
-	}
-}
-
-.block-editor-inner-blocks__template-picker-option {
-	width: 100%;
-
-	&.components-icon-button {
-		// Override default styles inherited from <IconButton /> to center
-		// icon horizontally.
-		justify-content: center;
-
-		&.is-default {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
-	}
-
-	&:last-child {
-		margin-right: 0;
-	}
-}
diff --git a/packages/block-editor/src/components/inner-blocks/template-picker.js b/packages/block-editor/src/components/inner-blocks/template-picker.js
deleted file mode 100644
index 8afc65a34e25e..0000000000000
--- a/packages/block-editor/src/components/inner-blocks/template-picker.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Button, IconButton, Placeholder } from '@wordpress/components';
-
-function InnerBlocksTemplatePicker( {
-	options,
-	onSelect,
-	allowSkip,
-} ) {
-	const classes = classnames( 'block-editor-inner-blocks__template-picker', {
-		'has-many-options': options.length > 4,
-	} );
-
-	const instructions = allowSkip ?
-		__( 'Select a layout to start with, or make one yourself.' ) :
-		__( 'Select a layout to start with.' );
-
-	return (
-		<Placeholder
-			icon="layout"
-			label={ __( 'Choose Layout' ) }
-			instructions={ instructions }
-			className={ classes }
-		>
-			{
-				/*
-				* Disable reason: The `list` ARIA role is redundant but
-				* Safari+VoiceOver won't announce the list otherwise.
-				*/
-				/* eslint-disable jsx-a11y/no-redundant-roles */
-			}
-			<ul className="block-editor-inner-blocks__template-picker-options" role="list">
-				{ options.map( ( templateOption, index ) => (
-					<li key={ index }>
-						<IconButton
-							isLarge
-							icon={ templateOption.icon }
-							onClick={ () => onSelect( templateOption.template ) }
-							className="block-editor-inner-blocks__template-picker-option"
-							label={ templateOption.title }
-						/>
-					</li>
-				) ) }
-			</ul>
-			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-			{ allowSkip && (
-				<div className="block-editor-inner-blocks__template-picker-skip">
-					<Button
-						isLink
-						onClick={ () => onSelect( undefined ) }
-					>
-						{ __( 'Skip' ) }
-					</Button>
-				</div>
-			) }
-		</Placeholder>
-	);
-}
-
-export default InnerBlocksTemplatePicker;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index de5698f91de48..1b0cd5f73c38e 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -8,6 +8,7 @@
 @import "./components/block-compare/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
+@import "./components/block-pattern-picker/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
index 48f35e90b2d9c..28376d28da5dd 100644
--- a/packages/block-library/src/columns/edit.js
+++ b/packages/block-library/src/columns/edit.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { dropRight, times } from 'lodash';
+import { dropRight, get, map, times } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -11,24 +11,25 @@ import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
 	RangeControl,
-	SVG,
-	Path,
 } from '@wordpress/components';
 import {
 	InspectorControls,
 	InnerBlocks,
 	BlockControls,
+	__experimentalBlockPatternPicker,
 	BlockVerticalAlignmentToolbar,
 } from '@wordpress/block-editor';
-import { withDispatch, useSelect } from '@wordpress/data';
+import {
+	withDispatch,
+	useDispatch,
+	useSelect,
+} from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
-import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import {
-	getColumnsTemplate,
 	hasExplicitColumnWidths,
 	getMappedColumnWidths,
 	getRedistributedColumnWidths,
@@ -46,66 +47,7 @@ import {
  */
 const ALLOWED_BLOCKS = [ 'core/column' ];
 
-/**
- * Template option choices for predefined columns layouts.
- *
- * @constant
- * @type {Array}
- */
-const TEMPLATE_OPTIONS = [
-	{
-		title: __( 'Two columns; equal split' ),
-		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z" /></SVG>,
-		template: [
-			[ 'core/column' ],
-			[ 'core/column' ],
-		],
-	},
-	{
-		title: __( 'Two columns; one-third, two-thirds split' ),
-		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z" /></SVG>,
-		template: [
-			[ 'core/column', { width: 33.33 } ],
-			[ 'core/column', { width: 66.66 } ],
-		],
-	},
-	{
-		title: __( 'Two columns; two-thirds, one-third split' ),
-		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z" /></SVG>,
-		template: [
-			[ 'core/column', { width: 66.66 } ],
-			[ 'core/column', { width: 33.33 } ],
-		],
-	},
-	{
-		title: __( 'Three columns; equal split' ),
-		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z" /></SVG>,
-		template: [
-			[ 'core/column' ],
-			[ 'core/column' ],
-			[ 'core/column' ],
-		],
-	},
-	{
-		title: __( 'Three columns; wide center column' ),
-		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z" /></SVG>,
-		template: [
-			[ 'core/column', { width: 25 } ],
-			[ 'core/column', { width: 50 } ],
-			[ 'core/column', { width: 25 } ],
-		],
-	},
-];
-
-/**
- * Number of columns to assume for template in case the user opts to skip
- * template option selection.
- *
- * @type {number}
- */
-const DEFAULT_COLUMNS = 2;
-
-export function ColumnsEdit( {
+function ColumnsEditContainer( {
 	attributes,
 	className,
 	updateAlignment,
@@ -119,63 +61,32 @@ export function ColumnsEdit( {
 			count: select( 'core/block-editor' ).getBlockCount( clientId ),
 		};
 	} );
-	const [ template, setTemplate ] = useState( getColumnsTemplate( count ) );
-	const [ forceUseTemplate, setForceUseTemplate ] = useState( false );
-
-	// This is used to force the usage of the template even if the count doesn't match the template
-	// The count doesn't match the template once you use undo/redo (this is used to reset to the placeholder state).
-	useEffect( () => {
-		// Once the template is applied, reset it.
-		if ( forceUseTemplate ) {
-			setForceUseTemplate( false );
-		}
-	}, [ forceUseTemplate ] );
 
 	const classes = classnames( className, {
 		[ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
-	// The template selector is shown when we first insert the columns block (count === 0).
-	// or if there's no template available.
-	// The count === 0 trick is useful when you use undo/redo.
-	const showTemplateSelector = ( count === 0 && ! forceUseTemplate ) || ! template;
-
 	return (
 		<>
-			{ ! showTemplateSelector && (
-				<>
-					<InspectorControls>
-						<PanelBody>
-							<RangeControl
-								label={ __( 'Columns' ) }
-								value={ count }
-								onChange={ ( value ) => updateColumns( count, value ) }
-								min={ 2 }
-								max={ 6 }
-							/>
-						</PanelBody>
-					</InspectorControls>
-					<BlockControls>
-						<BlockVerticalAlignmentToolbar
-							onChange={ updateAlignment }
-							value={ verticalAlignment }
-						/>
-					</BlockControls>
-				</>
-			) }
+			<InspectorControls>
+				<PanelBody>
+					<RangeControl
+						label={ __( 'Columns' ) }
+						value={ count }
+						onChange={ ( value ) => updateColumns( count, value ) }
+						min={ 2 }
+						max={ 6 }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={ updateAlignment }
+					value={ verticalAlignment }
+				/>
+			</BlockControls>
 			<div className={ classes }>
 				<InnerBlocks
-					__experimentalTemplateOptions={ TEMPLATE_OPTIONS }
-					__experimentalOnSelectTemplateOption={ ( nextTemplate ) => {
-						if ( nextTemplate === undefined ) {
-							nextTemplate = getColumnsTemplate( DEFAULT_COLUMNS );
-						}
-
-						setTemplate( nextTemplate );
-						setForceUseTemplate( true );
-					} }
-					__experimentalAllowTemplateOptionSkip
-					template={ showTemplateSelector ? null : template }
 					templateLock="all"
 					allowedBlocks={ ALLOWED_BLOCKS } />
 			</div>
@@ -183,7 +94,7 @@ export function ColumnsEdit( {
 	);
 }
 
-export default withDispatch( ( dispatch, ownProps, registry ) => ( {
+const ColumnsEditContainerWrapper = withDispatch( ( dispatch, ownProps, registry ) => ( {
 	/**
 	 * Update all child Column blocks with a new vertical alignment setting
 	 * based on whatever alignment is passed in. This allows change to parent
@@ -264,4 +175,59 @@ export default withDispatch( ( dispatch, ownProps, registry ) => ( {
 
 		replaceInnerBlocks( clientId, innerBlocks, false );
 	},
-} ) )( ColumnsEdit );
+} ) )( ColumnsEditContainer );
+
+const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
+	return map(
+		innerBlocksTemplate,
+		( [ name, attributes, innerBlocks = [] ] ) =>
+			createBlock( name, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
+	);
+};
+
+const ColumnsEdit = ( props ) => {
+	const { clientId, name } = props;
+	const { blockType, defaultPattern, hasInnerBlocks, patterns } = useSelect( ( select ) => {
+		const {
+			__experimentalGetBlockPatterns,
+			getBlockType,
+			__experimentalGetDefaultBlockPattern,
+		} = select( 'core/blocks' );
+
+		return {
+			blockType: getBlockType( name ),
+			defaultPattern: __experimentalGetDefaultBlockPattern( name ),
+			hasInnerBlocks: select( 'core/block-editor' ).getBlocks( clientId ).length > 0,
+			patterns: __experimentalGetBlockPatterns( name ),
+		};
+	}, [ clientId, name ] );
+
+	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
+
+	if ( hasInnerBlocks ) {
+		return (
+			<ColumnsEditContainerWrapper { ...props } />
+		);
+	}
+
+	return (
+		<__experimentalBlockPatternPicker
+			icon={ get( blockType, [ 'icon', 'src' ] ) }
+			label={ get( blockType, [ 'title' ] ) }
+			patterns={ patterns }
+			onSelect={ ( nextPattern = defaultPattern ) => {
+				if ( nextPattern.attributes ) {
+					props.setAttributes( nextPattern.attributes );
+				}
+				if ( nextPattern.innerBlocks ) {
+					replaceInnerBlocks(
+						props.clientId,
+						createBlocksFromInnerBlocksTemplate( nextPattern.innerBlocks )
+					);
+				}
+			} }
+			allowSkip
+		/> );
+};
+
+export default ColumnsEdit;
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js
index 990d94d45521c..f151a89fc5373 100644
--- a/packages/block-library/src/columns/index.js
+++ b/packages/block-library/src/columns/index.js
@@ -10,6 +10,7 @@ import deprecated from './deprecated';
 import edit from './edit';
 import icon from './icon';
 import metadata from './block.json';
+import patterns from './patterns';
 import save from './save';
 
 const { name } = metadata;
@@ -24,6 +25,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		html: false,
 	},
+	patterns,
 	example: {
 		innerBlocks: [
 			{
diff --git a/packages/block-library/src/columns/patterns.js b/packages/block-library/src/columns/patterns.js
new file mode 100644
index 0000000000000..90241750c031f
--- /dev/null
+++ b/packages/block-library/src/columns/patterns.js
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Template option choices for predefined columns layouts.
+ *
+ * @type {WPBlockPattern[]}
+ */
+const patterns = [
+	{
+		name: 'two-columns-equal',
+		label: __( 'Two columns; equal split' ),
+		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H25V34H39ZM23 34H9V14H23V34Z" /></SVG>,
+		isDefault: true,
+		innerBlocks: [
+			[ 'core/column' ],
+			[ 'core/column' ],
+		],
+	},
+	{
+		name: 'two-columns-one-third-two-thirds',
+		label: __( 'Two columns; one-third, two-thirds split' ),
+		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H20V34H39ZM18 34H9V14H18V34Z" /></SVG>,
+		innerBlocks: [
+			[ 'core/column', { width: 33.33 } ],
+			[ 'core/column', { width: 66.66 } ],
+		],
+	},
+	{
+		name: 'two-columns-two-thirds-one-third',
+		label: __( 'Two columns; two-thirds, one-third split' ),
+		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" clipRule="evenodd" d="M39 12C40.1046 12 41 12.8954 41 14V34C41 35.1046 40.1046 36 39 36H9C7.89543 36 7 35.1046 7 34V14C7 12.8954 7.89543 12 9 12H39ZM39 34V14H30V34H39ZM28 34H9V14H28V34Z" /></SVG>,
+		innerBlocks: [
+			[ 'core/column', { width: 66.66 } ],
+			[ 'core/column', { width: 33.33 } ],
+		],
+	},
+	{
+		name: 'three-columns-equal',
+		label: __( 'Three columns; equal split' ),
+		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM28.5 34h-9V14h9v20zm2 0V14H39v20h-8.5zm-13 0H9V14h8.5v20z" /></SVG>,
+		innerBlocks: [
+			[ 'core/column' ],
+			[ 'core/column' ],
+			[ 'core/column' ],
+		],
+	},
+	{
+		name: 'three-columns-wider-center',
+		label: __( 'Three columns; wide center column' ),
+		icon: <SVG width="48" height="48" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><Path fillRule="evenodd" d="M41 14a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h30a2 2 0 0 0 2-2V14zM31 34H17V14h14v20zm2 0V14h6v20h-6zm-18 0H9V14h6v20z" /></SVG>,
+		innerBlocks: [
+			[ 'core/column', { width: 25 } ],
+			[ 'core/column', { width: 50 } ],
+			[ 'core/column', { width: 25 } ],
+		],
+	},
+];
+
+export default patterns;
diff --git a/packages/block-library/src/columns/test/utils.js b/packages/block-library/src/columns/test/utils.js
index b89a63e2e0153..67ef6dd033272 100644
--- a/packages/block-library/src/columns/test/utils.js
+++ b/packages/block-library/src/columns/test/utils.js
@@ -2,7 +2,6 @@
  * Internal dependencies
  */
 import {
-	getColumnsTemplate,
 	toWidthPrecision,
 	getAdjacentBlocks,
 	getEffectiveColumnWidth,
@@ -13,25 +12,6 @@ import {
 	getMappedColumnWidths,
 } from '../utils';
 
-describe( 'getColumnsTemplate', () => {
-	it( 'should return a template corresponding to columns count', () => {
-		const template = getColumnsTemplate( 4 );
-
-		expect( template ).toEqual( [
-			[ 'core/column' ],
-			[ 'core/column' ],
-			[ 'core/column' ],
-			[ 'core/column' ],
-		] );
-	} );
-
-	it( 'should return null if columns count is not defined', () => {
-		const template = getColumnsTemplate( undefined );
-
-		expect( template ).toBe( null );
-	} );
-} );
-
 describe( 'toWidthPrecision', () => {
 	it( 'should round value to standard precision', () => {
 		const value = toWidthPrecision( 50.108 );
diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js
index a6773d469c98f..61b423f8ca761 100644
--- a/packages/block-library/src/columns/utils.js
+++ b/packages/block-library/src/columns/utils.js
@@ -1,23 +1,7 @@
 /**
  * External dependencies
  */
-import memoize from 'memize';
-import { times, findIndex, sumBy, merge, mapValues } from 'lodash';
-
-/**
- * Returns the layouts configuration for a given number of columns.
- *
- * @param {number} columns Number of columns.
- *
- * @return {Object[]} Columns layout configuration.
- */
-export const getColumnsTemplate = memoize( ( columns ) => {
-	if ( columns === undefined ) {
-		return null;
-	}
-
-	return times( columns, () => [ 'core/column' ] );
-} );
+import { findIndex, sumBy, merge, mapValues } from 'lodash';
 
 /**
  * Returns a column width attribute value rounded to standard precision.
diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js
index d334cbd5992ed..8e07052ad5584 100644
--- a/packages/blocks/src/store/selectors.js
+++ b/packages/blocks/src/store/selectors.js
@@ -2,7 +2,17 @@
  * External dependencies
  */
 import createSelector from 'rememo';
-import { filter, get, includes, map, some, flow, deburr } from 'lodash';
+import {
+	deburr,
+	filter,
+	findLast,
+	first,
+	flow,
+	get,
+	includes,
+	map,
+	some,
+} from 'lodash';
 
 /**
  * Given a block name or block type object, returns the corresponding
@@ -69,6 +79,23 @@ export function __experimentalGetBlockPatterns( state, blockName ) {
 	return state.blockPatterns[ blockName ];
 }
 
+/**
+ * Returns the default block pattern for the given block type.
+ * When there are multiple patterns annotated as the default one,
+ * the last added item is picked. This simplifies registering overrides.
+ * When there is no default pattern set, it returns the first item.
+ *
+ * @param {Object} state      Data state.
+ * @param {string} blockName  Block type name.
+ *
+ * @return {?WPBlockPattern} The default block pattern.
+ */
+export function __experimentalGetDefaultBlockPattern( state, blockName ) {
+	const patterns = __experimentalGetBlockPatterns( state, blockName );
+
+	return findLast( patterns, 'isDefault' ) || first( patterns );
+}
+
 /**
  * Returns all the available categories.
  *
diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js
index 05fc5a23040a8..a7833648bda51 100644
--- a/packages/blocks/src/store/test/selectors.js
+++ b/packages/blocks/src/store/test/selectors.js
@@ -1,10 +1,16 @@
+/**
+ * External dependencies
+ */
+import deepFreeze from 'deep-freeze';
+
 /**
  * Internal dependencies
  */
 import {
 	getChildBlockNames,
-	isMatchingSearchTerm,
+	__experimentalGetDefaultBlockPattern,
 	getGroupingBlockName,
+	isMatchingSearchTerm,
 } from '../selectors';
 
 describe( 'selectors', () => {
@@ -139,6 +145,76 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( '__experimentalGetDefaultBlockPattern', () => {
+		const blockName = 'block/name';
+		const createBlockPatternsState = ( patterns ) => {
+			return deepFreeze( {
+				blockPatterns: {
+					[ blockName ]: patterns,
+				},
+			} );
+		};
+		const firstBlockPattern = {
+			name: 'first-block-pattern',
+		};
+		const secondBlockPattern = {
+			name: 'second-block-pattern',
+		};
+		const thirdBlockPattern = {
+			name: 'third-block-pattern',
+		};
+
+		it( 'should return the default pattern when set', () => {
+			const defaultBlockPattern = {
+				...secondBlockPattern,
+				isDefault: true,
+			};
+			const state = createBlockPatternsState( [
+				firstBlockPattern,
+				defaultBlockPattern,
+				thirdBlockPattern,
+			] );
+
+			const result = __experimentalGetDefaultBlockPattern( state, blockName );
+
+			expect( result ).toEqual( defaultBlockPattern );
+		} );
+
+		it( 'should return the last pattern when multiple default patterns added', () => {
+			const defaultBlockPattern = {
+				...thirdBlockPattern,
+				isDefault: true,
+			};
+			const state = createBlockPatternsState( [
+				{
+					...firstBlockPattern,
+					isDefault: true,
+				},
+				{
+					...secondBlockPattern,
+					isDefault: true,
+				},
+				defaultBlockPattern,
+			] );
+
+			const result = __experimentalGetDefaultBlockPattern( state, blockName );
+
+			expect( result ).toEqual( defaultBlockPattern );
+		} );
+
+		it( 'should return the first pattern when no default pattern set', () => {
+			const state = createBlockPatternsState( [
+				firstBlockPattern,
+				secondBlockPattern,
+				thirdBlockPattern,
+			] );
+
+			const result = __experimentalGetDefaultBlockPattern( state, blockName );
+
+			expect( result ).toEqual( firstBlockPattern );
+		} );
+	} );
+
 	describe( 'isMatchingSearchTerm', () => {
 		const name = 'core/paragraph';
 		const blockType = {
diff --git a/packages/components/src/icon-button/index.js b/packages/components/src/icon-button/index.js
index 8c2e361eb2a37..b41b3335b0c3a 100644
--- a/packages/components/src/icon-button/index.js
+++ b/packages/components/src/icon-button/index.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isArray, isString } from 'lodash';
+import { isArray } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -25,6 +25,7 @@ function IconButton( props, ref ) {
 		tooltip,
 		shortcut,
 		labelPosition,
+		size,
 		...additionalProps
 	} = props;
 	const classes = classnames( 'components-icon-button', className, {
@@ -55,7 +56,7 @@ function IconButton( props, ref ) {
 			className={ classes }
 			ref={ ref }
 		>
-			{ isString( icon ) ? <Icon icon={ icon } /> : icon }
+			<Icon icon={ icon } size={ size } />
 			{ children }
 		</Button>
 	);
diff --git a/packages/components/src/icon-button/stories/index.js b/packages/components/src/icon-button/stories/index.js
index 0f0b82c2e876e..6b6861afd71c6 100644
--- a/packages/components/src/icon-button/stories/index.js
+++ b/packages/components/src/icon-button/stories/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { text } from '@storybook/addon-knobs';
+import { number, text } from '@storybook/addon-knobs';
 
 /**
  * Internal dependencies
@@ -13,11 +13,13 @@ export default { title: 'Components|IconButton', component: IconButton };
 export const _default = () => {
 	const icon = text( 'Icon', 'ellipsis' );
 	const label = text( 'Label', 'More' );
+	const size = number( 'Size' );
 
 	return (
 		<IconButton
 			icon={ icon }
 			label={ label }
+			size={ size }
 		/>
 	);
 };
diff --git a/packages/components/src/placeholder/index.js b/packages/components/src/placeholder/index.js
index 3a7c40c993001..b2f41381246ee 100644
--- a/packages/components/src/placeholder/index.js
+++ b/packages/components/src/placeholder/index.js
@@ -2,12 +2,11 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * Internal dependencies
  */
-import Dashicon from '../dashicon';
+import Icon from '../icon';
 
 /**
  * Renders a placeholder. Normally used by blocks to render their empty state.
@@ -27,7 +26,7 @@ function Placeholder( { icon, children, label, instructions, className, notices,
 				</div>
 			}
 			<div className="components-placeholder__label">
-				{ isString( icon ) ? <Dashicon icon={ icon } /> : icon }
+				<Icon icon={ icon } />
 				{ label }
 			</div>
 			{ !! instructions && <div className="components-placeholder__instructions">{ instructions }</div> }
diff --git a/packages/components/src/placeholder/test/index.js b/packages/components/src/placeholder/test/index.js
index 54f9f847f9750..ed27f2834c3d4 100644
--- a/packages/components/src/placeholder/test/index.js
+++ b/packages/components/src/placeholder/test/index.js
@@ -26,19 +26,19 @@ describe( 'Placeholder', () => {
 			expect( placeholderFieldset.exists() ).toBe( true );
 		} );
 
-		it( 'should render a Dashicon in the label section', () => {
+		it( 'should render an Icon in the label section', () => {
 			const placeholder = shallow( <Placeholder icon="wordpress" /> );
 			const placeholderLabel = placeholder.find( '.components-placeholder__label' );
 
 			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Dashicon' ).exists() ).toBe( true );
+			expect( placeholderLabel.find( 'Icon' ).exists() ).toBe( true );
 		} );
 
 		it( 'should render a label section', () => {
 			const label = 'WordPress';
 			const placeholder = shallow( <Placeholder label={ label } /> );
 			const placeholderLabel = placeholder.find( '.components-placeholder__label' );
-			const child = placeholderLabel.childAt( 0 );
+			const child = placeholderLabel.childAt( 1 );
 
 			expect( child.text() ).toBe( label );
 		} );