Transform multiple selected blocks to Columns block (#25829)

* Transform multiple selected blocks to Columns block

* use the new function from blocks API

* createBlocksFromInnerBlocksTemplate unit tests

* add e2e tests

* change selection shortcuts in tests

packages/block-editor/src/autocompleters/block.js

@@ -1,13 +1,16 @@
 /**
  * External dependencies
  */
-import { noop, map, orderBy } from 'lodash';
+import { noop, orderBy } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -19,18 +22,6 @@ import BlockIcon from '../components/block-icon';
 
 const SHOWN_BLOCK_TYPES = 9;
 
-const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
-	return map(
-		innerBlocksTemplate,
-		( [ name, attributes, innerBlocks = [] ] ) =>
-			createBlock(
-				name,
-				attributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			)
-	);
-};
-
 /** @typedef {import('@wordpress/block-editor').WPEditorInserterItem} WPEditorInserterItem */
 
 /** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */

packages/block-editor/src/components/block-variation-picker/index.native.js

@@ -8,14 +8,13 @@ import {
 	TouchableWithoutFeedback,
 	Platform,
 } from 'react-native';
-import { map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withSelect, useDispatch } from '@wordpress/data';
 import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { createBlock } from '@wordpress/blocks';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
@@ -33,18 +32,6 @@ import styles from './style.scss';
 
 const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 
-function createBlocksFromInnerBlocksTemplate( innerBlocksTemplate ) {
-	return map(
-		innerBlocksTemplate,
-		( [ name, attributes, innerBlocks = [] ] ) =>
-			createBlock(
-				name,
-				attributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			)
-	);
-}
-
 function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
 	const isIOS = Platform.OS === 'ios';

packages/block-editor/src/components/inserter/hooks/use-block-types-state.js

@@ -1,28 +1,13 @@
-/**
- * External dependencies
- */
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useEffect } from '@wordpress/element';
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
 import { useSelect } from '@wordpress/data';
 
-// 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 )
-			)
-	);
-};
-
 /**
  * Retrieves the block types inserter state.
  *

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { dropRight, get, map, times } from 'lodash';
+import { dropRight, get, times } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,7 +19,10 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -197,18 +200,6 @@ const ColumnsEditContainerWrapper = withDispatch(
 	} )
 )( ColumnsEditContainer );
 
-const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
-	return map(
-		innerBlocksTemplate,
-		( [ name, attributes, innerBlocks = [] ] ) =>
-			createBlock(
-				name,
-				attributes,
-				createBlocksFromInnerBlocksTemplate( innerBlocks )
-			)
-	);
-};
-
 function Placeholder( { clientId, name, setAttributes } ) {
 	const { blockType, defaultVariation, variations } = useSelect(
 		( select ) => {

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

@@ -12,6 +12,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import variations from './variations';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -84,4 +85,5 @@ export const settings = {
 	deprecated,
 	edit,
 	save,
+	transforms,
 };

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

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+} from '@wordpress/blocks';
+
+const MAXIMUM_SELECTED_BLOCKS = 6;
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			__experimentalConvert: ( blocks ) => {
+				const columnWidth = +( 100 / blocks.length ).toFixed( 2 );
+				const innerBlocksTemplate = blocks.map(
+					( { name, attributes, innerBlocks } ) => [
+						'core/column',
+						{ width: `${ columnWidth }%` },
+						[ [ name, { ...attributes }, innerBlocks ] ],
+					]
+				);
+				return createBlock(
+					'core/columns',
+					{},
+					createBlocksFromInnerBlocksTemplate( innerBlocksTemplate )
+				);
+			},
+			isMatch: ( { length: selectedBlocksLength } ) =>
+				selectedBlocksLength > 1 &&
+				selectedBlocksLength <= MAXIMUM_SELECTED_BLOCKS,
+		},
+	],
+};
+
+export default transforms;

packages/blocks/README.md

@@ -205,6 +205,21 @@ _Returns_
 
 -   `Object`: Block object.
 
+<a name="createBlocksFromInnerBlocksTemplate" href="#createBlocksFromInnerBlocksTemplate">#</a> **createBlocksFromInnerBlocksTemplate**
+
+Given an array of InnerBlocks templates or Block Objects,
+returns an array of created Blocks from them.
+It handles the case of having InnerBlocks as Blocks by
+converting them to the proper format to continue recursively.
+
+_Parameters_
+
+-   _innerBlocksOrTemplate_ `Array`: Nested blocks or InnerBlocks templates.
+
+_Returns_
+
+-   `Array<Object>`: Array of Block objects.
+
 <a name="doBlocksMatchTemplate" href="#doBlocksMatchTemplate">#</a> **doBlocksMatchTemplate**
 
 Checks whether a list of blocks matches a template by comparing the block names.

packages/blocks/src/api/factory.js

@@ -91,6 +91,36 @@ export function createBlock( name, attributes = {}, innerBlocks = [] ) {
 	};
 }
 
+/**
+ * Given an array of InnerBlocks templates or Block Objects,
+ * returns an array of created Blocks from them.
+ * It handles the case of having InnerBlocks as Blocks by
+ * converting them to the proper format to continue recursively.
+ *
+ * @param {Array} innerBlocksOrTemplate Nested blocks or InnerBlocks templates.
+ *
+ * @return {Object[]} Array of Block objects.
+ */
+export function createBlocksFromInnerBlocksTemplate(
+	innerBlocksOrTemplate = []
+) {
+	return innerBlocksOrTemplate.map( ( innerBlock ) => {
+		const innerBlockTemplate = Array.isArray( innerBlock )
+			? innerBlock
+			: [
+					innerBlock.name,
+					innerBlock.attributes,
+					innerBlock.innerBlocks,
+			  ];
+		const [ name, attributes, innerBlocks = [] ] = innerBlockTemplate;
+		return createBlock(
+			name,
+			attributes,
+			createBlocksFromInnerBlocksTemplate( innerBlocks )
+		);
+	} );
+}
+
 /**
  * Given a block object, returns a copy of the block object, optionally merging
  * new attributes and/or replacing its inner blocks.

packages/blocks/src/api/index.js

@@ -1,5 +1,6 @@
 export {
 	createBlock,
+	createBlocksFromInnerBlocksTemplate,
 	cloneBlock,
 	getPossibleBlockTransformations,
 	switchToBlockType,

packages/blocks/src/api/test/factory.js

@@ -9,6 +9,7 @@ import { noop, times } from 'lodash';
  */
 import {
 	createBlock,
+	createBlocksFromInnerBlocksTemplate,
 	cloneBlock,
 	getPossibleBlockTransformations,
 	switchToBlockType,
@@ -160,6 +161,108 @@ describe( 'block factory', () => {
 		} );
 	} );
 
+	describe( 'createBlocksFromInnerBlocksTemplate', () => {
+		it( 'should create a block without InnerBlocks', () => {
+			const blockName = 'core/test-block';
+			registerBlockType( blockName, { ...defaultBlockSettings } );
+			const res = createBlock(
+				blockName,
+				{ ...defaultBlockSettings },
+				createBlocksFromInnerBlocksTemplate()
+			);
+			expect( res ).toEqual(
+				expect.objectContaining( {
+					name: blockName,
+					innerBlocks: [],
+				} )
+			);
+		} );
+		describe( 'create block with InnerBlocks', () => {
+			beforeEach( () => {
+				registerBlockType( 'core/test-block', {
+					...defaultBlockSettings,
+				} );
+				registerBlockType( 'core/test-other', {
+					...defaultBlockSettings,
+				} );
+				registerBlockType( 'core/test-paragraph', {
+					...defaultBlockSettings,
+					attributes: {
+						content: {
+							type: 'string',
+							default: 'hello',
+						},
+					},
+				} );
+			} );
+			it( 'should create block with InnerBlocks from template', () => {
+				const res = createBlock(
+					'core/test-block',
+					defaultBlockSettings,
+					createBlocksFromInnerBlocksTemplate( [
+						[ 'core/test-other' ],
+						[ 'core/test-paragraph', { content: 'fromTemplate' } ],
+						[ 'core/test-paragraph' ],
+					] )
+				);
+				expect( res.innerBlocks ).toHaveLength( 3 );
+				expect( res.innerBlocks ).toEqual(
+					expect.arrayContaining( [
+						expect.objectContaining( {
+							name: 'core/test-other',
+						} ),
+						expect.objectContaining( {
+							name: 'core/test-paragraph',
+							attributes: { content: 'fromTemplate' },
+						} ),
+						expect.objectContaining( {
+							name: 'core/test-paragraph',
+							attributes: { content: 'hello' },
+						} ),
+					] )
+				);
+			} );
+			it( 'should create blocks with InnerBlocks template and InnerBlock objects', () => {
+				const nestedInnerBlocks = [
+					createBlock( 'core/test-other' ),
+					createBlock( 'core/test-paragraph' ),
+				];
+				const res = createBlock(
+					'core/test-block',
+					defaultBlockSettings,
+					createBlocksFromInnerBlocksTemplate( [
+						[ 'core/test-other' ],
+						[
+							'core/test-paragraph',
+							{ content: 'fromTemplate' },
+							nestedInnerBlocks,
+						],
+					] )
+				);
+				expect( res.innerBlocks ).toHaveLength( 2 );
+				expect( res.innerBlocks ).toEqual(
+					expect.arrayContaining( [
+						expect.objectContaining( {
+							name: 'core/test-other',
+						} ),
+						expect.objectContaining( {
+							name: 'core/test-paragraph',
+							attributes: { content: 'fromTemplate' },
+							innerBlocks: expect.arrayContaining( [
+								expect.objectContaining( {
+									name: 'core/test-other',
+								} ),
+								expect.objectContaining( {
+									name: 'core/test-other',
+								} ),
+							] ),
+						} ),
+					] )
+				);
+			} );
+		} );
+	} );
+
 	describe( 'cloneBlock()', () => {
 		it( 'should merge attributes into the existing block', () => {
 			registerBlockType( 'core/test-block', {