Add a modal to allow template switching

packages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useMemo, useState, useCallback } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
+import { MenuItem, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEntityRecord } from '@wordpress/core-data';
+import { parse } from '@wordpress/blocks';
+import { useAsyncList } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { store as editSiteStore } from '../../../store';
+import {
+	useAvailableTemplates,
+	useEditedPostContext,
+} from '../page-panels/hooks';
+
+export default function ReplaceTemplateButton( { onClick } ) {
+	const [ showModal, setShowModal ] = useState( false );
+	const availableTemplates = useAvailableTemplates();
+	const onClose = useCallback( () => {
+		setShowModal( false );
+	}, [] );
+
+	// TODO - this isn't a post, it's a template, so fetch the template entity.
+	const { postType, postId } = useEditedPostContext();
+	const entitiy = useEntityRecord( 'postType', postType, postId );
+	const { setPage } = useDispatch( editSiteStore );
+	if ( ! availableTemplates?.length ) {
+		return null;
+	}
+	const onTemplateSelect = async ( template ) => {
+		entitiy.edit( { template: template.name }, { undoIgnore: true } );
+		// TODO - work out how to save the template.
+		await setPage( {
+			context: { postType, postId },
+		} );
+		onClose(); // Close the template suggestions modal first.
+		onClick();
+	};
+	return (
+		<>
+			<MenuItem
+				info={ __(
+					'Replace this template entirely with another like it.'
+				) }
+				onClick={ () => setShowModal( true ) }
+			>
+				{ __( 'Replace template' ) }
+			</MenuItem>
+
+			{ showModal && (
+				<Modal
+					title={ __( 'Choose a template' ) }
+					onRequestClose={ onClose }
+					overlayClassName="edit-site-template-panel__replace-template-modal"
+					isFullScreen
+				>
+					<div className="edit-site-template-panel__replace-template-modal__content">
+						<TemplatesList onSelect={ onTemplateSelect } />
+					</div>
+				</Modal>
+			) }
+		</>
+	);
+}
+
+function TemplatesList( { onSelect } ) {
+	const availableTemplates = useAvailableTemplates();
+	const templatesAsPatterns = useMemo(
+		() =>
+			availableTemplates.map( ( template ) => ( {
+				name: template.slug,
+				blocks: parse( template.content.raw ),
+				title: decodeEntities( template.title.rendered ),
+				id: template.id,
+			} ) ),
+		[ availableTemplates ]
+	);
+	const shownTemplates = useAsyncList( templatesAsPatterns );
+
+	// TODO - make this use a grid layout.
+	return (
+		<BlockPatternsList
+			label={ __( 'Templates' ) }
+			blockPatterns={ templatesAsPatterns }
+			shownPatterns={ shownTemplates }
+			onClickPattern={ onSelect }
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js

@@ -11,13 +11,16 @@ import { moreVertical } from '@wordpress/icons';
  */
 import { store as editSiteStore } from '../../../store';
 import isTemplateRevertable from '../../../utils/is-template-revertable';
+import ReplaceTemplateButton from './replace-template-button';
 
 export default function Actions( { template } ) {
 	const { revertTemplate } = useDispatch( editSiteStore );
 	const isRevertable = isTemplateRevertable( template );
+	// TODO - update this condition so that we also show the dropdown when there are other template options.
 	if ( ! isRevertable ) {
 		return null;
 	}
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -38,6 +41,7 @@ export default function Actions( { template } ) {
 					>
 						{ __( 'Clear customizations' ) }
 					</MenuItem>
+					<ReplaceTemplateButton onClick={ onClose } />
 				</MenuGroup>
 			) }
 		</DropdownMenu>