Edit Site: Add convert to template part flow.

WordPress · Feb 25, 2020 · 927b609 · 927b609
1 parent 7c21d2c
commit 927b609
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 5 deletions.
diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js
@@ -14,7 +14,8 @@ export default function TemplatePartInnerBlocks() {
 	);
 	return (
 		<InnerBlocks
-			__experimentalBlocks={ blocks }
+			// Allow initial blocks from a block transform to load, if any.
+			__experimentalBlocks={ blocks.length === 0 ? undefined : blocks }
 			onInput={ onInput }
 			onChange={ onChange }
 		/>

diff --git a/packages/block-library/src/template-part/index.js b/packages/block-library/src/template-part/index.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -18,4 +19,31 @@ export const settings = {
 		html: false,
 	},
 	edit,
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				isMultiBlock: true,
+				blocks: [ '*' ],
+				__experimentalConvert( blocks ) {
+					// Avoid transforming a single `core/template-part` block.
+					if ( blocks.length === 1 && blocks[ 0 ].name === name ) {
+						return;
+					}
+
+					return createBlock(
+						name,
+						{},
+						blocks.map( ( block ) =>
+							createBlock(
+								block.name,
+								block.attributes,
+								block.innerBlocks
+							)
+						)
+					);
+				},
+			},
+		],
+	},
 };
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
@@ -730,6 +730,7 @@ _Parameters_
 
 -   _blocks_ `(Array|Object)`: Blocks array or block object.
 -   _name_ `string`: Block name.
+-   _isGroupingBlock_ `boolean`: Set to true to bypass default grouping block selection.
 
 _Returns_
 

diff --git a/packages/blocks/src/api/factory.js b/packages/blocks/src/api/factory.js
@@ -396,12 +396,13 @@ export function getBlockTransforms( direction, blockTypeOrName ) {
 /**
  * Switch one or more blocks into one or more blocks of the new block type.
  *
- * @param {Array|Object} blocks Blocks array or block object.
- * @param {string}       name   Block name.
+ * @param {Array|Object} blocks          Blocks array or block object.
+ * @param {string}       name            Block name.
+ * @param {boolean}      isGroupingBlock Set to true to bypass default grouping block selection.
  *
  * @return {?Array} Array of blocks or null.
  */
-export function switchToBlockType( blocks, name ) {
+export function switchToBlockType( blocks, name, isGroupingBlock ) {
 	const blocksArray = castArray( blocks );
 	const isMultiBlock = blocksArray.length > 1;
 	const firstBlock = blocksArray[ 0 ];
@@ -413,7 +414,8 @@ export function switchToBlockType( blocks, name ) {
 	if (
 		! isContainerGroupBlock( name ) &&
 		isMultiBlock &&
-		! isBlockSelectionOfSameType( blocksArray )
+		! isBlockSelectionOfSameType( blocksArray ) &&
+		! isGroupingBlock
 	) {
 		return null;
 	}

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -15,11 +15,13 @@ import {
 	BlockList,
 	ButtonBlockerAppender,
 } from '@wordpress/block-editor';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
+import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
 import Sidebar from '../sidebar';
 
@@ -68,7 +70,9 @@ export default function BlockEditor() {
 			onChange={ onChange }
 			useSubRegistry={ false }
 		>
+			<Popover.Slot name="block-toolbar" />
 			<BlockEditorKeyboardShortcuts />
+			<TemplatePartConverter />
 			<URLPopover.LinkViewer.Fill>
 				{ useCallback(
 					( fillProps ) => (

diff --git a/packages/edit-site/src/components/template-part-converter/index.js b/packages/edit-site/src/components/template-part-converter/index.js
@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { switchToBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+export default function TemplatePartConverter() {
+	const { clientIds, blocks } = useSelect( ( select ) => {
+		const { getSelectedBlockClientIds, getBlocksByClientId } = select(
+			'core/block-editor'
+		);
+		const selectedBlockClientIds = getSelectedBlockClientIds();
+		return {
+			clientIds: selectedBlockClientIds,
+			blocks: getBlocksByClientId( selectedBlockClientIds ),
+		};
+	} );
+	const { replaceBlocks } = useDispatch( 'core/block-editor' );
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { onClose } ) => (
+				<MenuItem
+					onClick={ () => {
+						replaceBlocks(
+							clientIds,
+							switchToBlockType(
+								blocks,
+								'core/template-part',
+								true
+							)
+						);
+						onClose();
+					} }
+				>
+					{ __( 'Make template part' ) }
+				</MenuItem>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}