Blocks: Add support for the default block pattern

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

@@ -53,10 +53,11 @@ export function ColumnsEdit( {
 } ) {
 	const { verticalAlignment } = attributes;
 
-	const { count, patterns } = useSelect( ( select ) => {
+	const { count, defaultPattern, patterns } = useSelect( ( select ) => {
 		return {
 			count: select( 'core/block-editor' ).getBlockCount( clientId ),
 			patterns: select( 'core/blocks' ).__experimentalGetBlockPatterns( 'core/columns' ),
+			defaultPattern: select( 'core/blocks' ).__experimentalGetDefaultBlockPattern( 'core/columns' ),
 		};
 	} );
 	const [ template, setTemplate ] = useState( getColumnsTemplate( count ) );
@@ -106,11 +107,7 @@ export function ColumnsEdit( {
 			<div className={ classes }>
 				<InnerBlocks
 					__experimentalTemplateOptions={ patterns }
-					__experimentalOnSelectTemplateOption={ ( nextTemplate ) => {
-						if ( nextTemplate === undefined ) {
-							nextTemplate = getColumnsTemplate( 2 );
-						}
-
+					__experimentalOnSelectTemplateOption={ ( nextTemplate = defaultPattern.innerBlocks ) => {
 						setTemplate( nextTemplate );
 						setForceUseTemplate( true );
 					} }

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,
+	find,
+	first,
+	flow,
+	get,
+	includes,
+	map,
+	some,
+} from 'lodash';
 
 /**
  * Given a block name or block type object, returns the corresponding
@@ -69,6 +79,21 @@ export function __experimentalGetBlockPatterns( state, blockName ) {
 	return state.blockPatterns[ blockName ];
 }
 
+/**
+ * Returns the default block pattern for the given block type.
+ * If 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 find( patterns, 'isDefault' ) || first( patterns );
+}
+
 /**
  * Returns all the available categories.
  *

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,49 @@ 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',
+		};
+
+		it( 'should return the default pattern when set', () => {
+			const defaultBlockPattern = {
+				...secondBlockPattern,
+				isDefault: true,
+			};
+			const state = createBlockPatternsState( [
+				firstBlockPattern,
+				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,
+			] );
+
+			const result = __experimentalGetDefaultBlockPattern( state, blockName );
+
+			expect( result ).toEqual( firstBlockPattern );
+		} );
+	} );
+
 	describe( 'isMatchingSearchTerm', () => {
 		const name = 'core/paragraph';
 		const blockType = {