Block library: Refactor Columns block to use Patterns API

WordPress · Nov 5, 2019 · 72b45bc · 72b45bc
1 parent 61701db
commit 72b45bc
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 68 deletions.
diff --git a/packages/block-editor/src/components/inner-blocks/template-picker.js b/packages/block-editor/src/components/inner-blocks/template-picker.js
@@ -37,14 +37,14 @@ function InnerBlocksTemplatePicker( {
 				/* 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 }>
+				{ options.map( ( templateOption ) => (
+					<li key={ templateOption.name }>
 						<IconButton
 							isLarge
 							icon={ templateOption.icon }
-							onClick={ () => onSelect( templateOption.template ) }
+							onClick={ () => onSelect( templateOption.innerBlocks ) }
 							className="block-editor-inner-blocks__template-picker-option"
-							label={ templateOption.title }
+							label={ templateOption.label }
 						/>
 					</li>
 				) ) }

diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js
@@ -11,8 +11,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
 	RangeControl,
-	SVG,
-	Path,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -46,65 +44,6 @@ 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( {
 	attributes,
 	className,
@@ -114,9 +53,10 @@ export function ColumnsEdit( {
 } ) {
 	const { verticalAlignment } = attributes;
 
-	const { count } = useSelect( ( select ) => {
+	const { count, patterns } = useSelect( ( select ) => {
 		return {
 			count: select( 'core/block-editor' ).getBlockCount( clientId ),
+			patterns: select( 'core/blocks' ).__experimentalGetBlockPatterns( 'core/columns' ),
 		};
 	} );
 	const [ template, setTemplate ] = useState( getColumnsTemplate( count ) );
@@ -165,10 +105,10 @@ export function ColumnsEdit( {
 			) }
 			<div className={ classes }>
 				<InnerBlocks
-					__experimentalTemplateOptions={ TEMPLATE_OPTIONS }
+					__experimentalTemplateOptions={ patterns }
 					__experimentalOnSelectTemplateOption={ ( nextTemplate ) => {
 						if ( nextTemplate === undefined ) {
-							nextTemplate = getColumnsTemplate( DEFAULT_COLUMNS );
+							nextTemplate = getColumnsTemplate( 2 );
 						}
 
 						setTemplate( nextTemplate );

diff --git 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
@@ -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;