From 1dc91452d2ba34e7b29aa95b88a884e650d4b399 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 30 May 2023 18:30:03 +0300 Subject: [PATCH 1/3] [Site Editor]: Add `delete` action for pages in navigation sidebar --- .../page-actions/delete-page-menu-item.js | 63 +++++++++++++++++++ .../src/components/page-actions/index.js | 36 +++++++++++ .../sidebar-navigation-screen-page/index.js | 21 +++++-- 3 files changed, 115 insertions(+), 5 deletions(-) create mode 100644 packages/edit-site/src/components/page-actions/delete-page-menu-item.js create mode 100644 packages/edit-site/src/components/page-actions/index.js 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 0000000000000..2bd7e346dd48d --- /dev/null +++ b/packages/edit-site/src/components/page-actions/delete-page-menu-item.js @@ -0,0 +1,63 @@ +/** + * 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 ); + 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 entity.' ); + + createErrorNotice( errorMessage, { type: 'snackbar' } ); + } + } + return ( + <> + setIsModalOpen( true ) } isDestructive> + { __( 'Delete' ) } + + 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 0000000000000..6aaf9cadc211d --- /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 b4d06bfbc675a..2404217dcd81a 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={ Date: Wed, 31 May 2023 11:42:51 +0300 Subject: [PATCH 2/3] throw errors on delete and address feedback --- .../components/page-actions/delete-page-menu-item.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 index 2bd7e346dd48d..f3522a47a2f6b 100644 --- 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 @@ -24,7 +24,13 @@ export default function DeletePageMenuItem( { postId, onRemove } ) { ); async function removePage() { try { - await deleteEntityRecord( 'postType', 'page', postId ); + await deleteEntityRecord( + 'postType', + 'page', + postId, + {}, + { throwOnError: true } + ); createSuccessNotice( sprintf( /* translators: The page's title. */ @@ -41,7 +47,7 @@ export default function DeletePageMenuItem( { postId, onRemove } ) { const errorMessage = error.message && error.code !== 'unknown_error' ? error.message - : __( 'An error occurred while deleting the entity.' ); + : __( 'An error occurred while deleting the page.' ); createErrorNotice( errorMessage, { type: 'snackbar' } ); } From 0322b346ad40404352cf0710d482ce4d4a67e21f Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 31 May 2023 13:52:21 +0300 Subject: [PATCH 3/3] close confrim dialog onRemove --- .../src/components/page-actions/delete-page-menu-item.js | 2 ++ 1 file changed, 2 insertions(+) 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 index f3522a47a2f6b..d28e3e16dab5e 100644 --- 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 @@ -50,6 +50,8 @@ export default function DeletePageMenuItem( { postId, onRemove } ) { : __( 'An error occurred while deleting the page.' ); createErrorNotice( errorMessage, { type: 'snackbar' } ); + } finally { + setIsModalOpen( false ); } } return (