Template parts: use the template actions component for template parts…

… patterns (#54173) * Using the template actions component for template parts patterns * Using backPath to ensure the correct redirect after deletion * using the template's name in the delete modal
WordPress · Sep 8, 2023 · 1964eb9 · 1964eb9
1 parent 69132c4
commit 1964eb9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 14 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
@@ -16,11 +16,14 @@ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-e
 import usePatternDetails from './use-pattern-details';
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import TemplateActions from '../template-actions';
 
 export default function SidebarNavigationScreenPattern() {
-	const { params } = useNavigator();
+	const navigator = useNavigator();
+	const {
+		params: { postType, postId },
+	} = navigator;
 	const { categoryType } = getQueryArgs( window.location.href );
-	const { postType, postId } = params;
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 
 	useInitEditedEntityFromURL();
@@ -38,11 +41,21 @@ export default function SidebarNavigationScreenPattern() {
 	return (
 		<SidebarNavigationScreen
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<>
+					<TemplateActions
+						postType={ postType }
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( backPath );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</>
 			}
 			backPath={ backPath }
 			{ ...patternDetails }

diff --git a/packages/edit-site/src/components/template-actions/index.js b/packages/edit-site/src/components/template-actions/index.js
@@ -97,7 +97,7 @@ export default function TemplateActions( {
 									onRemove?.();
 									onClose();
 								} }
-								isTemplate={ template.type === 'wp_template' }
+								title={ template.title.rendered }
 							/>
 						</>
 					) }
@@ -120,7 +120,7 @@ export default function TemplateActions( {
 	);
 }
 
-function DeleteMenuItem( { onRemove, isTemplate } ) {
+function DeleteMenuItem( { onRemove, title } ) {
 	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	return (
 		<>
@@ -133,11 +133,11 @@ function DeleteMenuItem( { onRemove, isTemplate } ) {
 				onCancel={ () => setIsModalOpen( false ) }
 				confirmButtonText={ __( 'Delete' ) }
 			>
-				{ isTemplate
-					? __( 'Are you sure you want to delete this template?' )
-					: __(
-							'Are you sure you want to delete this template part?'
-					  ) }
+				{ sprintf(
+					// translators: %s: The template or template part's title.
+					__( 'Are you sure you want to delete "%s"?' ),
+					decodeEntities( title )
+				) }
 			</ConfirmDialog>
 		</>
 	);