Edit Site: Add convert to template part flow. (WordPress#20445)

* Edit Site: Add convert to template part flow.

* auto create in placeholder if innerBlocks are present

* add comment for auto-creation in placeholder

* remove outdated JSDOC param

* jsdoc format spacing

* remove unnecessary popover

* remove transform, define creation in converter

* ensure blocks[0] exists (causing error in e2e)

* wrap spinner in a placeholder for more consistent style

* comment update

Co-authored-by: Addison-Stavlo <stavz01@gmail.com>

packages/block-library/src/template-part/edit/index.js

@@ -79,7 +79,10 @@ export default function TemplatePartEdit( {
 	return (
 		<TagName { ...blockProps }>
 			{ isPlaceholder && (
-				<TemplatePartPlaceholder setAttributes={ setAttributes } />
+				<TemplatePartPlaceholder
+					setAttributes={ setAttributes }
+					innerBlocks={ innerBlocks }
+				/>
 			) }
 			{ isTemplateFile && (
 				<BlockControls>

packages/block-library/src/template-part/edit/placeholder/index.js

@@ -2,18 +2,22 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useEffect } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { cleanForSlug } from '@wordpress/url';
-import { Placeholder, Dropdown, Button } from '@wordpress/components';
+import { Placeholder, Dropdown, Button, Spinner } from '@wordpress/components';
 import { blockDefault } from '@wordpress/icons';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import TemplatePartSelection from '../selection';
 
-export default function TemplatePartPlaceholder( { setAttributes } ) {
+export default function TemplatePartPlaceholder( {
+	setAttributes,
+	innerBlocks,
+} ) {
 	const { saveEntityRecord } = useDispatch( 'core' );
 	const onCreate = useCallback( async () => {
 		const title = 'Untitled Template Part';
@@ -26,6 +30,7 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 				status: 'publish',
 				slug,
 				meta: { theme: 'custom' },
+				content: serialize( innerBlocks ),
 			}
 		);
 		setAttributes( {
@@ -35,6 +40,21 @@ export default function TemplatePartPlaceholder( { setAttributes } ) {
 		} );
 	}, [ setAttributes ] );
 
+	// If there are inner blocks present, the content for creation is clear.
+	// Therefore immediately create the template part with the given inner blocks as its content.
+	useEffect( () => {
+		if ( innerBlocks.length ) {
+			onCreate();
+		}
+	}, [] );
+	if ( innerBlocks.length ) {
+		return (
+			<Placeholder>
+				<Spinner />
+			</Placeholder>
+		);
+	}
+
 	return (
 		<Placeholder
 			icon={ blockDefault }

packages/edit-site/src/components/block-editor/index.js

@@ -17,6 +17,7 @@ import {
 /**
  * Internal dependencies
  */
+import TemplatePartConverter from '../template-part-converter';
 import NavigateToLink from '../navigate-to-link';
 import { SidebarInspectorFill } from '../sidebar';
 
@@ -49,6 +50,7 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			useSubRegistry={ false }
 		>
 			<BlockEditorKeyboardShortcuts />
+			<TemplatePartConverter />
 			<__experimentalLinkControl.ViewerFill>
 				{ useCallback(
 					( fillProps ) => (

packages/edit-site/src/components/template-part-converter/index.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { createBlock } 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' );
+
+	// Avoid transforming a single `core/template-part` block.
+	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
+		return null;
+	}
+
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { onClose } ) => (
+				<MenuItem
+					onClick={ () => {
+						replaceBlocks(
+							clientIds,
+							createBlock(
+								'core/template-part',
+								{},
+								blocks.map( ( block ) =>
+									createBlock(
+										block.name,
+										block.attributes,
+										block.innerBlocks
+									)
+								)
+							)
+						);
+						onClose();
+					} }
+				>
+					{ __( 'Make template part' ) }
+				</MenuItem>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}