Update: Reuse and unify template actions.

WordPress · Apr 15, 2024 · bfab2f0 · bfab2f0
1 parent ee773ce
commit bfab2f0
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 54 deletions.
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js b/packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
@@ -18,18 +18,18 @@ import { useAsyncList } from '@wordpress/compose';
 import { serialize } from '@wordpress/blocks';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import TemplateActions from '../../template-actions';
 import PluginTemplateSettingPanel from '../../plugin-template-setting-panel';
 import { useAvailablePatterns } from './hooks';
 import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
 const { PatternOverridesPanel } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
@@ -50,11 +50,6 @@ function TemplatesList( { availableTemplates, onSelect } ) {
 	);
 }
 
-const POST_TYPE_PATH = {
-	wp_template: '/wp_template',
-	wp_template_part: '/patterns',
-};
-
 export default function TemplatePanel() {
 	const { title, description, record, postType, postId } = useSelect(
 		( select ) => {
@@ -81,6 +76,22 @@ export default function TemplatePanel() {
 		[]
 	);
 	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'delete-template' ) {
+				history.push( {
+					path:
+						items[ 0 ].type === TEMPLATE_PART_POST_TYPE
+							? '/' + TEMPLATE_PART_POST_TYPE + '/all'
+							: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
 	const availablePatterns = useAvailablePatterns( record );
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -100,17 +111,7 @@ export default function TemplatePanel() {
 			<PostCardPanel
 				className="edit-site-template-card"
 				actions={
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						className="edit-site-template-card__actions"
-						toggleProps={ { size: 'small' } }
-						onRemove={ () => {
-							history.push( {
-								path: POST_TYPE_PATH[ postType ],
-							} );
-						} }
-					/>
+					<PostActions onActionPerformed={ onActionPerformed } />
 				}
 			/>
 			<PluginTemplateSettingPanel.Slot />

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -9,6 +9,9 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
+import { useCallback } from '@wordpress/element';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
 /**
  * Internal dependencies
  */
@@ -19,9 +22,11 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import { useAddedBy } from '../page-templates-template-parts/hooks';
-import TemplateActions from '../template-actions';
 import HomeTemplateDetails from './home-template-details';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import { TEMPLATE_PART_POST_TYPE } from '../../utils/constants';
+
+const { PostActions } = unlock( editorPrivateApis );
 
 function useTemplateDetails( postType, postId ) {
 	const { getDescription, getTitle, record } = useEditedEntityRecord(
@@ -103,20 +108,25 @@ export default function SidebarNavigationScreenTemplate() {
 		postType,
 		postId
 	);
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'delete-template' ) {
+				navigator.goTo(
+					items[ 0 ].type === TEMPLATE_PART_POST_TYPE
+						? '/' + TEMPLATE_PART_POST_TYPE + '/all'
+						: '/' + items[ 0 ].type
+				);
+			}
+		},
+		[ navigator ]
+	);
 
 	return (
 		<SidebarNavigationScreen
 			title={ title }
 			actions={
 				<>
-					<TemplateActions
-						postType={ postType }
-						postId={ postId }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							navigator.goTo( '/' + postType );
-						} }
-					/>
+					<PostActions onActionPerformed={ onActionPerformed } />
 					<SidebarButton
 						onClick={ () => setCanvasMode( 'edit' ) }
 						label={ __( 'Edit' ) }

diff --git a/packages/editor/src/components/post-actions/actions.js b/packages/editor/src/components/post-actions/actions.js
@@ -21,7 +21,12 @@ import {
 /**
  * Internal dependencies
  */
-import { TEMPLATE_ORIGINS, TEMPLATE_POST_TYPE } from '../../store/constants';
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+} from '../../store/constants';
 import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 import isTemplateRevertable from '../../store/utils/is-template-revertable';
@@ -33,13 +38,19 @@ function getItemTitle( item ) {
 	return decodeEntities( item.title?.rendered || '' );
 }
 
+const SITE_EDITING_POST_TYPES = [
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+	PATTERN_POST_TYPE,
+];
+
 const trashPostAction = {
 	id: 'move-to-trash',
 	label: __( 'Move to Trash' ),
 	isPrimary: true,
 	icon: trash,
-	isEligible( { status } ) {
-		return status !== 'trash';
+	isEligible( { type, status } ) {
+		return status !== 'trash' && ! SITE_EDITING_POST_TYPES.includes( type );
 	},
 	supportsBulk: true,
 	hideModalHeader: true,
@@ -182,8 +193,11 @@ function usePermanentlyDeletePostAction() {
 			id: 'permanently-delete',
 			label: __( 'Permanently delete' ),
 			supportsBulk: true,
-			isEligible( { status } ) {
-				return status === 'trash';
+			isEligible( { status, type } ) {
+				return (
+					status === 'trash' &&
+					! SITE_EDITING_POST_TYPES.includes( type )
+				);
 			},
 			async callback( posts, onActionPerformed ) {
 				const promiseResult = await Promise.allSettled(
@@ -292,8 +306,11 @@ function useRestorePostAction() {
 			isPrimary: true,
 			icon: backup,
 			supportsBulk: true,
-			isEligible( { status } ) {
-				return status === 'trash';
+			isEligible( { status, type } ) {
+				return (
+					status === 'trash' &&
+					! SITE_EDITING_POST_TYPES.includes( type )
+				);
 			},
 			async callback( posts, onActionPerformed ) {
 				try {
@@ -371,7 +388,10 @@ const viewPostAction = {
 	isPrimary: true,
 	icon: external,
 	isEligible( post ) {
-		return post.status !== 'trash';
+		return (
+			post.status !== 'trash' &&
+			! SITE_EDITING_POST_TYPES.includes( post.type )
+		);
 	},
 	callback( posts, onActionPerformed ) {
 		const post = posts[ 0 ];
@@ -387,21 +407,25 @@ const editPostAction = {
 	label: __( 'Edit' ),
 	isPrimary: true,
 	icon: edit,
-	isEligible( { status } ) {
-		return status !== 'trash';
+	isEligible( { status, type } ) {
+		return status !== 'trash' && ! SITE_EDITING_POST_TYPES.includes( type );
 	},
 	callback( posts, onActionPerformed ) {
 		if ( onActionPerformed ) {
 			onActionPerformed( posts );
 		}
 	},
 };
+
 const postRevisionsAction = {
 	id: 'view-post-revisions',
 	label: __( 'View revisions' ),
 	isPrimary: false,
 	isEligible: ( post ) => {
-		if ( post.status === 'trash' ) {
+		if (
+			post.status === 'trash' ||
+			SITE_EDITING_POST_TYPES.includes( post.type )
+		) {
 			return false;
 		}
 		const lastRevisionId =
@@ -426,7 +450,10 @@ const renamePostAction = {
 	id: 'rename-post',
 	label: __( 'Rename' ),
 	isEligible( post ) {
-		return post.status !== 'trash';
+		return (
+			post.status !== 'trash' &&
+			! SITE_EDITING_POST_TYPES.includes( post.type )
+		);
 	},
 	RenderModal: ( { items, closeModal, onActionPerformed } ) => {
 		const [ item ] = items;
@@ -534,7 +561,7 @@ const resetTemplateAction = {
 						: sprintf(
 								/* translators: The template/part's name. */
 								__( '"%s" reset.' ),
-								decodeEntities( items[ 0 ].title.rendered )
+								getItemTitle( items[ 0 ] )
 						  ),
 					{
 						type: 'snackbar',
@@ -603,7 +630,11 @@ const resetTemplateAction = {
  * @return {boolean} Whether the template is revertable.
  */
 function isTemplateRemovable( template ) {
-	if ( ! template ) {
+	if (
+		! template ||
+		( template.type !== TEMPLATE_POST_TYPE &&
+			template.type !== TEMPLATE_PART_POST_TYPE )
+	) {
 		return false;
 	}
 
@@ -636,9 +667,7 @@ const deleteTemplateAction = {
 						: sprintf(
 								// translators: %s: The template or template part's titles
 								__( 'Delete "%s"?' ),
-								decodeEntities(
-									templates?.[ 0 ]?.title?.rendered
-								)
+								getItemTitle( templates[ 0 ] )
 						  ) }
 				</Text>
 				<HStack justify="right">
@@ -679,7 +708,7 @@ const renameTemplateAction = {
 	},
 	RenderModal: ( { items: templates, closeModal, onActionPerformed } ) => {
 		const template = templates[ 0 ];
-		const title = decodeEntities( template.title.rendered );
+		const title = getItemTitle( template );
 		const [ editedTitle, setEditedTitle ] = useState( title );
 		const {
 			editEntityRecord,

diff --git a/packages/editor/src/components/post-actions/index.js b/packages/editor/src/components/post-actions/index.js
@@ -36,7 +36,10 @@ const POST_ACTIONS_WHILE_EDITING = [
 	'view-post',
 	'view-post-revisions',
 	'rename-post',
+	'rename-template',
 	'move-to-trash',
+	'reset-template',
+	'delete-template',
 ];
 
 export default function PostActions( { onActionPerformed } ) {
@@ -68,13 +71,7 @@ export default function PostActions( { onActionPerformed } ) {
 			{ primaryActions: [], secondaryActions: [] }
 		);
 	}, [ actions, item ] );
-	if (
-		[
-			TEMPLATE_POST_TYPE,
-			TEMPLATE_PART_POST_TYPE,
-			PATTERN_POST_TYPE,
-		].includes( postType )
-	) {
+	if ( PATTERN_POST_TYPE === postType ) {
 		return null;
 	}
 	return (

diff --git a/packages/editor/src/store/utils/is-template-revertable.js b/packages/editor/src/store/utils/is-template-revertable.js
@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { TEMPLATE_ORIGINS } from '../constants';
+import {
+	TEMPLATE_ORIGINS,
+	TEMPLATE_POST_TYPE,
+	TEMPLATE_PART_POST_TYPE,
+} from '../constants';
 
 // Copy of the function from packages/edit-site/src/utils/is-template-revertable.js
 
@@ -12,7 +16,11 @@ import { TEMPLATE_ORIGINS } from '../constants';
  * @return {boolean} Whether the template is revertable.
  */
 export default function isTemplateRevertable( template ) {
-	if ( ! template ) {
+	if (
+		! template ||
+		( template.type !== TEMPLATE_POST_TYPE &&
+			template.type !== TEMPLATE_PART_POST_TYPE )
+	) {
 		return false;
 	}
 	/* eslint-disable camelcase */