Template Parts: Update replace flow to separate template parts from p…

…atterns (#60203)
WordPress · Mar 28, 2024 · 6c47fe2 · 6c47fe2
1 parent 6ebbb8b
commit 6c47fe2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 78 deletions.
diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { serialize } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
@@ -34,18 +35,15 @@ import TemplatePartSelectionModal from './selection-modal';
 import { TemplatePartAdvancedControls } from './advanced-controls';
 import TemplatePartInnerBlocks from './inner-blocks';
 import { createTemplatePartId } from './utils/create-template-part-id';
-import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
 	useTemplatePartArea,
-	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 
 function ReplaceButton( {
 	isEntityAvailable,
 	area,
-	clientId,
 	templatePartId,
 	isTemplatePartSelectionOpen,
 	setIsTemplatePartSelectionOpen,
@@ -54,8 +52,7 @@ function ReplaceButton( {
 		area,
 		templatePartId
 	);
-	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const hasReplacements = !! templateParts.length || !! blockPatterns.length;
+	const hasReplacements = !! templateParts.length;
 	const canReplace =
 		isEntityAvailable &&
 		hasReplacements &&
@@ -102,6 +99,7 @@ export default function TemplatePartEdit( {
 	clientId,
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
 		[]
@@ -118,6 +116,7 @@ export default function TemplatePartEdit( {
 		isMissing,
 		area,
 		onNavigateToEntityRecord,
+		title,
 	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
@@ -150,6 +149,7 @@ export default function TemplatePartEdit( {
 				area: _area,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
+				title: entityRecord?.title,
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
@@ -172,10 +172,27 @@ export default function TemplatePartEdit( {
 		hasReplacements &&
 		( area === 'header' || area === 'footer' );
 
-	const createFromBlocks = useCreateTemplatePartFromBlocks(
-		area,
-		setAttributes
-	);
+	const onPatternSelect = async ( pattern ) => {
+		await editEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId,
+			{
+				blocks: pattern.blocks,
+				content: serialize( pattern.blocks ),
+			}
+		);
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: template part title. */
+				__( 'Template Part "%s" updated.' ),
+				title || slug
+			),
+			{
+				type: 'snackbar',
+			}
+		);
+	};
 
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
@@ -208,28 +225,6 @@ export default function TemplatePartEdit( {
 		);
 	}
 
-	const partsAsPatterns = templateParts.map( ( templatePart ) =>
-		mapTemplatePartToBlockPattern( templatePart )
-	);
-
-	const onTemplatePartSelect = ( templatePart ) => {
-		setAttributes( {
-			slug: templatePart.slug,
-			theme: templatePart.theme,
-			area: undefined,
-		} );
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: template part title. */
-				__( 'Template Part "%s" replaced.' ),
-				templatePart.title?.rendered || templatePart.slug
-			),
-			{
-				type: 'snackbar',
-			}
-		);
-	};
-
 	return (
 		<>
 			<RecursionProvider uniqueId={ templatePartId }>
@@ -298,31 +293,18 @@ export default function TemplatePartEdit( {
 					} }
 				</BlockSettingsMenuControls>
 
-				{ canReplace &&
-					( partsAsPatterns.length > 0 ||
-						blockPatterns.length > 0 ) && (
-						<InspectorControls>
-							<PanelBody title={ __( 'Design' ) }>
-								<TemplatesList
-									availableTemplates={ partsAsPatterns }
-									onSelect={ ( pattern ) => {
-										onTemplatePartSelect(
-											pattern.templatePart
-										);
-									} }
-								/>
-								<TemplatesList
-									availableTemplates={ blockPatterns }
-									onSelect={ ( pattern, blocks ) => {
-										createFromBlocks(
-											blocks,
-											pattern.title
-										);
-									} }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
+				{ canReplace && blockPatterns.length > 0 && (
+					<InspectorControls>
+						<PanelBody title={ __( 'Design' ) }>
+							<TemplatesList
+								availableTemplates={ blockPatterns }
+								onSelect={ ( pattern ) =>
+									onPatternSelect( pattern )
+								}
+							/>
+						</PanelBody>
+					</InspectorControls>
+				) }
 
 				{ isEntityAvailable && (
 					<TemplatePartInnerBlocks

diff --git a/packages/block-library/src/template-part/edit/selection-modal.js b/packages/block-library/src/template-part/edit/selection-modal.js
@@ -18,7 +18,6 @@ import {
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
-	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import { searchPatterns } from '../../utils/search-patterns';
@@ -31,11 +30,11 @@ export default function TemplatePartSelectionModal( {
 	clientId,
 } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-
 	const { templateParts } = useAlternativeTemplateParts(
 		area,
 		templatePartId
 	);
+
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
 	const filteredTemplateParts = useMemo( () => {
 		const partsAsPatterns = templateParts.map( ( templatePart ) =>
@@ -49,7 +48,6 @@ export default function TemplatePartSelectionModal( {
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
-	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -72,11 +70,6 @@ export default function TemplatePartSelectionModal( {
 		onClose();
 	};
 
-	const createFromBlocks = useCreateTemplatePartFromBlocks(
-		area,
-		setAttributes
-	);
-
 	const hasTemplateParts = !! filteredTemplateParts.length;
 	const hasBlockPatterns = !! filteredBlockPatterns.length;
 
@@ -104,20 +97,6 @@ export default function TemplatePartSelectionModal( {
 				</div>
 			) }
 
-			{ hasBlockPatterns && (
-				<div>
-					<h2>{ __( 'Patterns' ) }</h2>
-					<BlockPatternsList
-						blockPatterns={ filteredBlockPatterns }
-						shownPatterns={ shownBlockPatterns }
-						onClickPattern={ ( pattern, blocks ) => {
-							createFromBlocks( blocks, pattern.title );
-							onClose();
-						} }
-					/>
-				</div>
-			) }
-
 			{ ! hasTemplateParts && ! hasBlockPatterns && (
 				<HStack alignment="center">
 					<p>{ __( 'No results found.' ) }</p>