Reuse and unify post and page actions, accross the different use case…

…s. (WordPress#60486) Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
garridinsi · Apr 9, 2024 · 6c43d27 · 6c43d27
1 parent 5299bc3
commit 6c43d27
Show file tree

Hide file tree

Showing 11 changed files with 279 additions and 143 deletions.
diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
@@ -130,6 +130,7 @@ $z-layers: (
 	".block-editor-block-rename-modal": 1000001,
 	".edit-site-list__rename-modal": 1000001,
 	".dataviews-action-modal": 1000001,
+	".editor-action-modal": 1000001,
 	".editor-post-template__swap-template-modal": 1000001,
 	".edit-site-template-panel__replace-template-modal": 1000001,
 

diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -27,6 +27,7 @@ import {
 	PostTaxonomiesPanel,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
+import { addQueryArgs } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -39,7 +40,7 @@ import { store as editPostStore } from '../../../store';
 import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
 
 const { Tabs } = unlock( componentsPrivateApis );
 const { PatternOverridesPanel } = unlock( editorPrivateApis );
@@ -53,6 +54,15 @@ export const sidebars = {
 	block: 'edit-post/block',
 };
 
+function onActionPerformed( actionId, items ) {
+	if ( actionId === 'move-to-trash' ) {
+		const postType = items[ 0 ].type;
+		document.location.href = addQueryArgs( 'edit.php', {
+			post_type: postType,
+		} );
+	}
+}
+
 const SidebarContent = ( {
 	sidebarName,
 	keyboardShortcut,
@@ -113,7 +123,13 @@ const SidebarContent = ( {
 		>
 			<Tabs.Context.Provider value={ tabsContextValue }>
 				<Tabs.TabPanel tabId={ sidebars.document } focusable={ false }>
-					<PostCardPanel />
+					<PostCardPanel
+						actions={
+							<PostActions
+								onActionPerformed={ onActionPerformed }
+							/>
+						}
+					/>
 					{ ! isEditingTemplate && (
 						<>
 							<PostStatus />

diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js
diff --git a/packages/edit-site/src/components/page-actions/trash-page-menu-item.js b/packages/edit-site/src/components/page-actions/trash-page-menu-item.js
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js b/packages/edit-site/src/components/sidebar-edit-mode/page-panels/index.js
@@ -16,40 +16,58 @@ import {
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '../../../store';
-import PageActions from '../../page-actions';
 import PageContent from './page-content';
 import PageSummary from './page-summary';
 
 import { unlock } from '../../../lock-unlock';
 
-const { PostCardPanel } = unlock( editorPrivateApis );
+const { PostCardPanel, PostActions } = unlock( editorPrivateApis );
 const { useHistory } = unlock( routerPrivateApis );
 
 export default function PagePanels() {
-	const { hasResolved, page, renderingMode } = useSelect( ( select ) => {
-		const { getEditedPostContext } = select( editSiteStore );
-		const { getEditedEntityRecord, hasFinishedResolution } =
-			select( coreStore );
-		const { getRenderingMode } = select( editorStore );
-		const context = getEditedPostContext();
-		const queryArgs = [ 'postType', context.postType, context.postId ];
-		return {
-			hasResolved: hasFinishedResolution(
-				'getEditedEntityRecord',
-				queryArgs
-			),
-			page: getEditedEntityRecord( ...queryArgs ),
-			renderingMode: getRenderingMode(),
-		};
-	}, [] );
-	const history = useHistory();
+	const { id, type, hasResolved, status, date, password, renderingMode } =
+		useSelect( ( select ) => {
+			const { getEditedPostContext } = select( editSiteStore );
+			const { getEditedEntityRecord, hasFinishedResolution } =
+				select( coreStore );
+			const { getRenderingMode } = select( editorStore );
+			const context = getEditedPostContext();
+			const queryArgs = [ 'postType', context.postType, context.postId ];
+			const page = getEditedEntityRecord( ...queryArgs );
+			return {
+				hasResolved: hasFinishedResolution(
+					'getEditedEntityRecord',
+					queryArgs
+				),
+				id: page?.id,
+				type: page?.type,
+				status: page?.status,
+				date: page?.date,
+				password: page?.password,
+				renderingMode: getRenderingMode(),
+			};
+		}, [] );
 
-	const { id, type, status, date, password } = page;
+	const history = useHistory();
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'move-to-trash' ) {
+				history.push( {
+					path: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
 
 	if ( ! hasResolved ) {
 		return null;
@@ -59,16 +77,7 @@ export default function PagePanels() {
 		<>
 			<PostCardPanel
 				actions={
-					<PageActions
-						page={ page }
-						className="edit-site-page-card__actions"
-						toggleProps={ { size: 'small' } }
-						onRemove={ () => {
-							history.push( {
-								path: '/page',
-							} );
-						} }
-					/>
+					<PostActions onActionPerformed={ onActionPerformed } />
 				}
 			/>
 			<PanelBody title={ __( 'Summary' ) }>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
@@ -15,8 +15,9 @@ import { pencil } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { escapeAttribute } from '@wordpress/escape-html';
 import { safeDecodeURIComponent, filterURLForDisplay } from '@wordpress/url';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -26,17 +27,16 @@ import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import PageDetails from './page-details';
-import PageActions from '../page-actions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
 
 const { useHistory } = unlock( routerPrivateApis );
+const { PostActions } = unlock( editorPrivateApis );
 
 export default function SidebarNavigationScreenPage( { backPath } ) {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const history = useHistory();
 	const {
 		params: { postId },
-		goTo,
 	} = useNavigator();
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
@@ -82,6 +82,20 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 		}
 	}, [ hasResolved, history ] );
 
+	const onActionPerformed = useCallback(
+		( actionId, items ) => {
+			if ( actionId === 'move-to-trash' ) {
+				history.push( {
+					path: '/' + items[ 0 ].type,
+					postId: undefined,
+					postType: undefined,
+					canvas: 'view',
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	const featureImageAltText = featuredMediaAltText
 		? decodeEntities( featuredMediaAltText )
 		: decodeEntities( record?.title?.rendered || __( 'Featured image' ) );
@@ -94,13 +108,7 @@ export default function SidebarNavigationScreenPage( { backPath } ) {
 			) }
 			actions={
 				<>
-					<PageActions
-						page={ record }
-						toggleProps={ { as: SidebarButton } }
-						onRemove={ () => {
-							goTo( '/page' );
-						} }
-					/>
+					<PostActions onActionPerformed={ onActionPerformed } />
 					<SidebarButton
 						onClick={ () => setCanvasMode( 'edit' ) }
 						label={ __( 'Edit' ) }

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss
@@ -61,3 +61,7 @@
 		fill: $alert-green;
 	}
 }
+
+.edit-site-sidebar-navigation-screen__actions .editor-all-actions-button {
+	color: inherit;
+}