Make it possible to apply initial attributes and inner blocks directl…

…y from the inserter
WordPress · Jan 16, 2020 · 47f4a06 · 47f4a06
1 parent cb9ae90
commit 47f4a06
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -17,8 +22,36 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
 		/* eslint-disable jsx-a11y/no-redundant-roles */
 		<ul role="list" className="block-editor-block-types-list">
 			{ items && items.map( ( item ) => {
-				const { patterns = [] } = item;
-				const matchedPatterns = patterns.filter( ( { matched } ) => matched );
+				if ( ! isEmpty( item.patterns ) ) {
+					return item.patterns.map( ( pattern ) => {
+						const customizedItem = {
+							...item,
+							initialAttributes: {
+								...item.initialAttributes,
+								...pattern.attributes,
+							},
+							innerBlocks: pattern.innerBlocks,
+						};
+						return (
+							<InserterListItem
+								key={ item.id + pattern.name }
+								className={ getBlockMenuDefaultClassName( item.id ) }
+								icon={ pattern.icon || item.icon }
+								onClick={ () => {
+									onSelect( customizedItem );
+									onHover( null );
+								} }
+								onFocus={ () => onHover( customizedItem ) }
+								onMouseEnter={ () => onHover( customizedItem ) }
+								onMouseLeave={ () => onHover( null ) }
+								onBlur={ () => onHover( null ) }
+								isDisabled={ item.isDisabled }
+								title={ item.title }
+								patternName={ pattern.label }
+							/>
+						);
+					} );
+				}
 				return (
 					<InserterListItem
 						key={ item.id }
@@ -34,7 +67,6 @@ function BlockTypesList( { items, onSelect, onHover = () => {}, children } ) {
 						onBlur={ () => onHover( null ) }
 						isDisabled={ item.isDisabled }
 						title={ item.title }
-						patterns={ matchedPatterns }
 					/>
 				);
 			} ) }

diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -19,7 +19,7 @@ function InserterListItem( {
 	isDisabled,
 	title,
 	className,
-	patterns = [],
+	patternName,
 	...props
 } ) {
 	const itemIconStyle = icon ? {
@@ -52,10 +52,8 @@ function InserterListItem( {
 				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-				{ patterns.map(
-					( { label, name } ) => (
-						<em style={ { padding: '5px' } } key={ name }>{ label }</em>
-					)
+				{ patternName && (
+					<em>{ patternName }</em>
 				) }
 			</Button>
 		</li>

diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
@@ -58,6 +58,15 @@ const stopKeyPropagation = ( event ) => event.stopPropagation();
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
+// Copied over from the Columns block. It seems like it should become part of public API.
+const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
+	return map(
+		innerBlocksTemplate,
+		( [ name, attributes, innerBlocks = [] ] ) =>
+			createBlock( name, attributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) )
+	);
+};
+
 export class InserterMenu extends Component {
 	constructor() {
 		super( ...arguments );
@@ -534,9 +543,13 @@ export default compose(
 					onSelect,
 					__experimentalSelectBlockOnInsert: selectBlockOnInsert,
 				} = ownProps;
-				const { name, title, initialAttributes } = item;
+				const { name, title, initialAttributes, innerBlocks } = item;
 				const selectedBlock = getSelectedBlock();
-				const insertedBlock = createBlock( name, initialAttributes );
+				const insertedBlock = createBlock(
+					name,
+					initialAttributes,
+					createBlocksFromInnerBlocksTemplate( innerBlocks )
+				);
 
 				if ( ! isAppender && selectedBlock && isUnmodifiedDefaultBlock( selectedBlock ) ) {
 					replaceBlocks( selectedBlock.clientId, insertedBlock );

diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js
@@ -7,6 +7,7 @@ import {
 	find,
 	get,
 	intersectionWith,
+	isEmpty,
 	words,
 } from 'lodash';
 
@@ -102,22 +103,25 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
 
 		return unmatchedTerms.length === 0;
 	} ).map( ( item ) => {
-		if ( ! item.patterns ) {
+		if ( isEmpty( item.patterns ) ) {
+			return item;
+		}
+
+		const matchedPatterns = item.patterns.filter( ( pattern ) => {
+			return intersectionWith(
+				normalizedSearchTerms,
+				normalizeSearchTerm( pattern.label ),
+				( termToMatch, labelTerm ) => labelTerm.includes( termToMatch )
+			).length > 0;
+		} );
+		// When no partterns matched, fallback to all patterns.
+		if ( isEmpty( matchedPatterns ) ) {
 			return item;
 		}
 
 		return {
 			...item,
-			patterns: item.patterns.map( ( pattern ) => {
-				return {
-					...pattern,
-					matched: intersectionWith(
-						normalizedSearchTerms,
-						normalizeSearchTerm( pattern.label ),
-						( termToMatch, labelTerm ) => labelTerm.includes( termToMatch )
-					).length > 0,
-				};
-			} ),
+			patterns: matchedPatterns,
 		};
 	} );
 };
diff --git a/packages/block-editor/src/components/inserter/test/search-items.js b/packages/block-editor/src/components/inserter/test/search-items.js
@@ -84,12 +84,19 @@ describe( 'searchItems', () => {
 		);
 	} );
 
-	it( 'should match words using the patterns and mark those matched which are scoped to inserter', () => {
+	it( 'should match words using also patterns and return all matched patterns', () => {
+		const filteredItems = searchItems( items, categories, collections, 'pattern' );
+
+		expect( filteredItems ).toHaveLength( 1 );
+		expect( filteredItems[ 0 ].patterns ).toHaveLength( 3 );
+	} );
+
+	it( 'should match words using also patterns and filter out unmatched patterns', () => {
 		const filteredItems = searchItems( items, categories, collections, 'patterns two three' );
 
 		expect( filteredItems ).toHaveLength( 1 );
-		expect( filteredItems[ 0 ].patterns[ 0 ].matched ).toBe( false );
-		expect( filteredItems[ 0 ].patterns[ 1 ].matched ).toBe( true );
-		expect( filteredItems[ 0 ].patterns[ 2 ].matched ).toBe( true );
+		expect( filteredItems[ 0 ].patterns ).toHaveLength( 2 );
+		expect( filteredItems[ 0 ].patterns[ 0 ].label ).toBe( 'Pattern Two' );
+		expect( filteredItems[ 0 ].patterns[ 1 ].label ).toBe( 'Pattern Three' );
 	} );
 } );