diff --git a/packages/edit-site/src/components/page-actions/delete-page-menu-item.js b/packages/edit-site/src/components/page-actions/delete-page-menu-item.js
new file mode 100644
index 00000000000000..d28e3e16dab5e5
--- /dev/null
+++ b/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 (
+ <>
+
+ setIsModalOpen( false ) }
+ >
+ { __( 'Are you sure you want to delete this page?' ) }
+
+ >
+ );
+}
diff --git a/packages/edit-site/src/components/page-actions/index.js b/packages/edit-site/src/components/page-actions/index.js
new file mode 100644
index 00000000000000..6aaf9cadc211dd
--- /dev/null
+++ b/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 (
+
+ { () => (
+
+
+
+ ) }
+
+ );
+}
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
index b4d06bfbc675ac..2404217dcd81ac 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js
+++ b/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={
- setCanvasMode( 'edit' ) }
- label={ __( 'Edit' ) }
- icon={ pencil }
- />
+
+
{
+ navigator.goTo( '/page' );
+ } }
+ />
+ setCanvasMode( 'edit' ) }
+ label={ __( 'Edit' ) }
+ icon={ pencil }
+ />
+
}
meta={