[Site Editor]: Add delete action for pages in navigation sidebar (#…

…51101)

* [Site Editor]: Add `delete` action for pages in navigation sidebar

* throw errors on delete and address feedback

* close confrim dialog onRemove

packages/edit-site/src/components/page-actions/delete-page-menu-item.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { useState } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	MenuItem,
+	__experimentalConfirmDialog as ConfirmDialog,
+} from '@wordpress/components';
+import { store as noticesStore } from '@wordpress/notices';
+
+export default function DeletePageMenuItem( { postId, onRemove } ) {
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
+	const { createSuccessNotice, createErrorNotice } =
+		useDispatch( noticesStore );
+	const { deleteEntityRecord } = useDispatch( coreStore );
+	const page = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'postType', 'page', postId ),
+		[ postId ]
+	);
+	async function removePage() {
+		try {
+			await deleteEntityRecord(
+				'postType',
+				'page',
+				postId,
+				{},
+				{ throwOnError: true }
+			);
+			createSuccessNotice(
+				sprintf(
+					/* translators: The page's title. */
+					__( '"%s" deleted.' ),
+					decodeEntities( page.title.rendered )
+				),
+				{
+					type: 'snackbar',
+					id: 'edit-site-page-removed',
+				}
+			);
+			onRemove?.();
+		} catch ( error ) {
+			const errorMessage =
+				error.message && error.code !== 'unknown_error'
+					? error.message
+					: __( 'An error occurred while deleting the page.' );
+
+			createErrorNotice( errorMessage, { type: 'snackbar' } );
+		} finally {
+			setIsModalOpen( false );
+		}
+	}
+	return (
+		<>
+			<MenuItem onClick={ () => setIsModalOpen( true ) } isDestructive>
+				{ __( 'Delete' ) }
+			</MenuItem>
+			<ConfirmDialog
+				isOpen={ isModalOpen }
+				onConfirm={ removePage }
+				onCancel={ () => setIsModalOpen( false ) }
+			>
+				{ __( 'Are you sure you want to delete this page?' ) }
+			</ConfirmDialog>
+		</>
+	);
+}

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

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { DropdownMenu, MenuGroup } from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import DeletePageMenuItem from './delete-page-menu-item';
+
+export default function PageActions( {
+	postId,
+	className,
+	toggleProps,
+	onRemove,
+} ) {
+	return (
+		<DropdownMenu
+			icon={ moreVertical }
+			label={ __( 'Actions' ) }
+			className={ className }
+			toggleProps={ toggleProps }
+		>
+			{ () => (
+				<MenuGroup>
+					<DeletePageMenuItem
+						postId={ postId }
+						onRemove={ onRemove }
+					/>
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}

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

@@ -33,8 +33,10 @@ import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
 import PageDetails from './page-details';
+import PageActions from '../page-actions';
 
 export default function SidebarNavigationScreenPage() {
+	const navigator = useNavigator();
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const {
 		params: { postId },
@@ -77,11 +79,20 @@ export default function SidebarNavigationScreenPage() {
 				record?.title?.rendered || __( '(no title)' )
 			) }
 			actions={
-				<SidebarButton
-					onClick={ () => setCanvasMode( 'edit' ) }
-					label={ __( 'Edit' ) }
-					icon={ pencil }
-				/>
+				<div>
+					<PageActions
+						postId={ postId }
+						toggleProps={ { as: SidebarButton } }
+						onRemove={ () => {
+							navigator.goTo( '/page' );
+						} }
+					/>
+					<SidebarButton
+						onClick={ () => setCanvasMode( 'edit' ) }
+						label={ __( 'Edit' ) }
+						icon={ pencil }
+					/>
+				</div>
 			}
 			meta={
 				<ExternalLink