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)

Starting to consolidate rename-menu-item.js

Tightening up conditions.

Removed unused rename component.

Set decoded title var
Ensure correct back path when deleting templates

packages/edit-site/src/components/page-patterns/grid-item.js

@@ -41,7 +41,6 @@ import { downloadBlob } from '@wordpress/blob';
 /**
  * Internal dependencies
  */
-import RenameMenuItem from './rename-menu-item';
 import DuplicateMenuItem from './duplicate-menu-item';
 import {
 	PATTERN_TYPES,
@@ -51,6 +50,7 @@ import {
 import { store as editSiteStore } from '../../store';
 import { useLink } from '../routes/link';
 import { unlock } from '../../lock-unlock';
+import RenameMenuItem from '../template-actions/rename-menu-item';
 
 const { useGlobalStyle } = unlock( blockEditorPrivateApis );
 
@@ -283,7 +283,8 @@ function GridItem( { categoryId, item, ...props } ) {
 						<MenuGroup>
 							{ isCustomPattern && ! hasThemeFile && (
 								<RenameMenuItem
-									item={ item }
+									postId={ item.id }
+									postType={ item.type }
 									onClose={ onClose }
 								/>
 							) }

packages/edit-site/src/components/sidebar-navigation-screen-template/index.js

@@ -98,6 +98,11 @@ export default function SidebarNavigationScreenTemplate() {
 		postId
 	);
 
+	// The absence of a post type in the query params for templates
+	// indicates the user has arrived at the template via the "manage all"
+	// page and the back button should return them to that list page.
+	const backPath =
+		postType !== 'wp_template' ? `/${ postType }/all` : `/${ postType }`;
 	return (
 		<SidebarNavigationScreen
 			title={ title }
@@ -108,7 +113,7 @@ export default function SidebarNavigationScreenTemplate() {
 						postId={ postId }
 						toggleProps={ { as: SidebarButton } }
 						onRemove={ () => {
-							navigator.goTo( `/${ postType }/all` );
+							navigator.goTo( backPath );
 						} }
 					/>
 					<SidebarButton

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

@@ -14,6 +14,7 @@ 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
@@ -22,7 +23,12 @@ 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 { TEMPLATE_POST_TYPE } from '../../utils/constants';
+import {
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	POST_TYPE_LABELS,
+	PATTERN_TYPES,
+} from '../../utils/constants';
 
 export default function TemplateActions( {
 	postType,
@@ -31,7 +37,7 @@ export default function TemplateActions( {
 	toggleProps,
 	onRemove,
 } ) {
-	const template = useSelect(
+	const record = useSelect(
 		( select ) =>
 			select( coreStore ).getEntityRecord( 'postType', postType, postId ),
 		[ postType, postId ]
@@ -40,40 +46,82 @@ export default function TemplateActions( {
 	const { saveEditedEntityRecord } = useDispatch( coreStore );
 	const { createSuccessNotice, createErrorNotice } =
 		useDispatch( noticesStore );
-	const isRemovable = isTemplateRemovable( template );
-	const isRevertable = isTemplateRevertable( template );
+	const { __experimentalDeleteReusableBlock } =
+		useDispatch( reusableBlocksStore );
+	const isRemovable = isTemplateRemovable( record );
+	// Only custom patterns or custom template parts can be renamed or deleted.
+	const isUserPattern = record?.type === PATTERN_TYPES.user;
+	const isTemplate = record?.type === TEMPLATE_POST_TYPE;
+	const isTemplatePart = record?.type === TEMPLATE_PART_POST_TYPE;
 
-	if ( ! isRemovable && ! isRevertable ) {
+	if (
+		! isRemovable &&
+		! isTemplatePart &&
+		! isTemplate &&
+		! isUserPattern
+	) {
 		return null;
 	}
 
-	async function revertAndSaveTemplate() {
+	const isEditable = isUserPattern || isRemovable;
+	const decodedTitle = decodeEntities(
+		record?.title?.rendered || record?.title?.raw
+	);
+
+	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.' ),
+					decodedTitle
+				),
+				{ 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 ( isTemplateRemovable( item ) ) {
+			removeTemplate( item );
+		} else if ( isUserPattern ) {
+			deletePattern( item );
+		}
+	};
+
+	async function revertAndSaveTemplate( item ) {
+		try {
+			await revertTemplate( record, { allowUndo: false } );
+			await saveEditedEntityRecord( 'postType', item.type, item.id );
 
 			createSuccessNotice(
 				sprintf(
 					/* translators: The template/part's name. */
 					__( '"%s" reverted.' ),
-					decodeEntities( template.title.rendered )
+					decodedTitle
 				),
 				{
 					type: 'snackbar',
 					id: 'edit-site-template-reverted',
 				}
 			);
 		} catch ( error ) {
-			const fallbackErrorMessage =
-				template.type === TEMPLATE_POST_TYPE
-					? __( 'An error occurred while reverting the template.' )
-					: __(
-							'An error occurred while reverting the template part.'
-					  );
+			const fallbackErrorMessage = sprintf(
+				// translators: %s is a post type label, e.g., Template, Template Part or Pattern.
+				__( 'An error occurred while reverting the %s.' ),
+				POST_TYPE_LABELS[ postType ] ??
+					POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ]
+			);
 			const errorMessage =
 				error.message && error.code !== 'unknown_error'
 					? error.message
@@ -83,6 +131,12 @@ export default function TemplateActions( {
 		}
 	}
 
+	const shouldDisplayMenu = isEditable || isTemplateRevertable( record );
+
+	if ( ! shouldDisplayMenu ) {
+		return null;
+	}
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -92,29 +146,32 @@ export default function TemplateActions( {
 		>
 			{ ( { onClose } ) => (
 				<MenuGroup>
-					{ isRemovable && (
+					{ isEditable && (
 						<>
 							<RenameMenuItem
-								template={ template }
+								postId={ postId }
+								postType={ postType }
 								onClose={ onClose }
 							/>
 							<DeleteMenuItem
+								isDestructive={ true }
 								onRemove={ () => {
-									removeTemplate( template );
+									deleteItem( record );
 									onRemove?.();
 									onClose();
 								} }
-								title={ template.title.rendered }
+								title={ decodedTitle }
 							/>
 						</>
 					) }
-					{ isRevertable && (
+
+					{ isTemplateRevertable( record ) && (
 						<MenuItem
 							info={ __(
 								'Use the template as supplied by the theme.'
 							) }
 							onClick={ () => {
-								revertAndSaveTemplate();
+								revertAndSaveTemplate( record );
 								onClose();
 							} }
 						>