Initial commit: just seeing what needs to be done to add a rename/del…

…ete action to single pattern view in the site editor sidebar in view mode. See: #54173 (review)

packages/edit-site/src/components/template-actions/index.js

@@ -14,14 +14,16 @@ import {
 import { moreVertical } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
+import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../store';
 import isTemplateRemovable from '../../utils/is-template-removable';
-import isTemplateRevertable from '../../utils/is-template-revertable';
-import RenameMenuItem from './rename-menu-item';
+// import isTemplateRevertable from '../../utils/is-template-revertable';
+import RenameTemplate from './rename-menu-item';
+import RenamePattern from '../page-patterns/rename-menu-item';
 
 export default function TemplateActions( {
 	postType,
@@ -39,27 +41,78 @@ export default function TemplateActions( {
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
+	const { __experimentalDeleteReusableBlock } =
+		useDispatch( reusableBlocksStore );
+	// @TODO isRemovable and isRevertable do the same thing. Consolidate.
 	const isRemovable = isTemplateRemovable( template );
-	const isRevertable = isTemplateRevertable( template );
+	// const isRevertable = isTemplateRevertable( template );
+	const isUserPattern = template?.type === 'wp_block';
+	// Only custom patterns or custom template parts can be renamed or deleted.
+	// @TODO Maybe abstract constants and utils in packages/edit-site/src/components/page-patterns/utils.js.
+	const isTemplate =
+		template?.type === 'wp_template' ||
+		template?.type === 'wp_template_part';
 
-	if ( ! isRemovable && ! isRevertable ) {
+	if ( ! isTemplate && ! isRemovable( template ) && ! isUserPattern ) {
 		return null;
 	}
 
-	async function revertAndSaveTemplate() {
+	const isEditable = isUserPattern || isTemplateRemovable( template );
+
+	/*
+	 * @TODO This is because packages/edit-site/src/components/template-actions/rename-menu-item.js
+	 * and packages/edit-site/src/components/page-patterns/rename-menu-item.js are slighly different.
+	 * They should be consolidated.
+	 */
+	const record = isUserPattern
+		? {
+				...template,
+				title: template?.title?.raw,
+		  }
+		: template;
+	const RenameComponent = isUserPattern ? RenamePattern : RenameTemplate;
+
+	const deletePattern = async ( pattern ) => {
 		try {
-			await revertTemplate( template, { allowUndo: false } );
-			await saveEditedEntityRecord(
-				'postType',
-				template.type,
-				template.id
+			await __experimentalDeleteReusableBlock( pattern.id );
+			createSuccessNotice(
+				sprintf(
+					// translators: %s: The pattern's title e.g. 'Call to action'.
+					__( '"%s" deleted.' ),
+					pattern.title
+				),
+				{ type: 'snackbar', id: 'edit-site-patterns-success' }
 			);
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the pattern.' );
+			createErrorNotice( errorMessage, {
+				type: 'snackbar',
+				id: 'edit-site-patterns-error',
+			} );
+		}
+	};
+
+	const deleteItem = async ( item ) => {
+		if ( isUserPattern ) {
+			removeTemplate( item );
+		} else if ( isTemplateRemovable( item ) ) {
+			deletePattern( item );
+		}
+	};
+
+	async function revertAndSaveTemplate( item ) {
+		try {
+			await revertTemplate( template, { allowUndo: false } );
+			await saveEditedEntityRecord( 'postType', item.type, item.id );
 
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" reverted.' ),
-					decodeEntities( template.title.rendered )
+					decodeEntities( item.title.rendered )
 				),
 				{
 					type: 'snackbar',
@@ -85,29 +138,31 @@ export default function TemplateActions( {
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
-					{ isRemovable && (
+					{ isEditable && (
 						<>
-							<RenameMenuItem
-								template={ template }
+							<RenameComponent
+								item={ record }
 								onClose={ onClose }
 							/>
+
 							<DeleteMenuItem
 								onRemove={ () => {
-									removeTemplate( template );
+									deleteItem( record );
 									onRemove?.();
 									onClose();
 								} }
-								title={ template.title.rendered }
+								title={ record.title.rendered || record.title }
 							/>
 						</>
 					) }
-					{ isRevertable && (
+
+					{ isRemovable && (
 						<MenuItem
 							info={ __(
 								'Use the template as supplied by the theme.'
 							) }
 							onClick={ () => {
-								revertAndSaveTemplate();
+								revertAndSaveTemplate( record );
 								onClose();
 							} }
 						>

packages/edit-site/src/components/template-actions/rename-menu-item.js

@@ -16,8 +16,8 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 import { decodeEntities } from '@wordpress/html-entities';
 
-export default function RenameMenuItem( { template, onClose } ) {
-	const title = decodeEntities( template.title.rendered );
+export default function RenameMenuItem( { item, onClose } ) {
+	const title = decodeEntities( item.title.rendered );
 	const [ editedTitle, setEditedTitle ] = useState( title );
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 
@@ -28,15 +28,15 @@ export default function RenameMenuItem( { template, onClose } ) {
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
 
-	if ( template.type === 'wp_template' && ! template.is_custom ) {
+	if ( item.type === 'wp_template' && ! item.is_custom ) {
 		return null;
 	}
 
 	async function onTemplateRename( event ) {
 		event.preventDefault();
 
 		try {
-			await editEntityRecord( 'postType', template.type, template.id, {
+			await editEntityRecord( 'postType', item.type, item.id, {
 				title: editedTitle,
 			} );
 
@@ -48,8 +48,8 @@ export default function RenameMenuItem( { template, onClose } ) {
 			// Persist edited entity.
 			await saveSpecifiedEntityEdits(
 				'postType',
-				template.type,
-				template.id,
+				item.type,
+				item.id,
 				[ 'title' ], // Only save title to avoid persisting other edits.
 				{
 					throwOnError: true,