From 3dee12c795d4540d0b428d8742d645ad14b6caae Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 16 Jun 2023 09:53:01 +0100 Subject: [PATCH 1/8] Remove custom button and show single menu on Navigation route --- .../sidebar-navigation-screen-main/index.js | 9 ++-- .../index.js | 41 +++------------- .../single-navigation-menu.js | 39 +++++++++++++++ .../index.js | 12 +++++ .../navigator-button.js | 47 ------------------- 5 files changed, 62 insertions(+), 86 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js delete mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 9df2e22b111d3..5c89c9f72a23b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -20,7 +20,6 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import SidebarNavigationScreenNavigationMenuButton from '../sidebar-navigation-screen-navigation-menus/navigator-button'; export default function SidebarNavigationScreenMain() { const { location } = useNavigator(); @@ -44,14 +43,14 @@ export default function SidebarNavigationScreenMain() { ) } content={ - { __( 'Navigation' ) } - - + - - - - } - title={ decodeEntities( menuTitle ) } - description={ - <> -

- { sprintf( - /* translators: %s: Navigation menu title */ - 'This is your "%s" navigation menu. ', - decodeEntities( menuTitle ) - ) } -

-

- { __( - 'You can edit this menu here, but be aware that visual styles might be applied separately in templates or template parts, so the preview shown here can be incomplete.' - ) } -

- - } - > - - + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js new file mode 100644 index 0000000000000..6351c83323f98 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { decodeEntities } from '@wordpress/html-entities'; +/** + * Internal dependencies + */ +import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus'; +import ScreenNavigationMoreMenu from './more-menu'; +import NavigationMenuEditor from './navigation-menu-editor'; + +export default function SingleNavigationMenu( { + navigationMenu, + handleDelete, + handleDuplicate, + handleSave, +} ) { + const menuTitle = navigationMenu?.title?.rendered; + + return ( + + } + title={ decodeEntities( menuTitle ) } + description={ __( + 'Navigation menus are a curated collection of blocks that allow visitors to get around your site.' + ) } + > + + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index 5706ff17bc038..8d3edad0de8d2 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -18,6 +18,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants'; import { useLink } from '../routes/link'; +import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor'; export default function SidebarNavigationScreenNavigationMenus() { const { records: navigationMenus, isResolving: isLoading } = @@ -45,6 +46,17 @@ export default function SidebarNavigationScreenNavigationMenus() { ); } + // if single menu then render it + if ( navigationMenus?.length === 1 ) { + return ( + + + + ); + } + return ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js deleted file mode 100644 index 7e75c544a0f16..0000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigator-button.js +++ /dev/null @@ -1,47 +0,0 @@ -/** - * WordPress dependencies - */ - -import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components'; -import { useEntityRecords } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants'; - -export default function SidebarNavigationScreenNavigationMenuButton( { - children, - ...props -} ) { - const { records: navigationMenus, isResolving: isLoading } = - useEntityRecords( - 'postType', - `wp_navigation`, - PRELOADED_NAVIGATION_MENUS_QUERY - ); - - const hasNavigationMenus = !! navigationMenus?.length; - const hasSingleNavigationMenu = navigationMenus?.length === 1; - const firstNavigationMenu = navigationMenus?.[ 0 ]; - - const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN - ? hasNavigationMenus - : false; - - // If there is a single menu then we can go directly to that menu. - // Otherwise we go to the navigation listing screen. - const path = hasSingleNavigationMenu - ? `/navigation/wp_navigation/${ firstNavigationMenu?.id }` - : '/navigation'; - - if ( ! showNavigationScreen ) { - return null; - } - - return ( - - { children } - - ); -} From 0848d064875289d0172fa6031a2a756b4d47c3ad Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 16 Jun 2023 14:11:16 +0100 Subject: [PATCH 2/8] Extract hooks --- .../index.js | 178 +++++++++++------- 1 file changed, 113 insertions(+), 65 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 9e0d8dc53339a..8bc5e5c34bcc5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -18,53 +18,73 @@ import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-nav import ScreenNavigationMoreMenu from './more-menu'; import SingleNavigationMenu from './single-navigation-menu'; -export default function SidebarNavigationScreenNavigationMenu() { +const postType = `wp_navigation`; + +function useDeleteNavigationMenu() { const { - deleteEntityRecord, - saveEntityRecord, - editEntityRecord, - saveEditedEntityRecord, - } = useDispatch( coreStore ); + goTo, + params: { postId }, + } = useNavigator(); + + const { deleteEntityRecord } = useDispatch( coreStore ); const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); - const postType = `wp_navigation`; + const handleDelete = async () => { + try { + await deleteEntityRecord( + 'postType', + postType, + postId, + { + force: true, + }, + { + throwOnError: true, + } + ); + createSuccessNotice( __( 'Deleted Navigation menu' ), { + type: 'snackbar', + } ); + goTo( '/navigation' ); + } catch ( error ) { + createErrorNotice( + sprintf( + /* translators: %s: error message describing why the navigation menu could not be deleted. */ + __( `Unable to delete Navigation menu (%s).` ), + error?.message + ), + + { + type: 'snackbar', + } + ); + } + }; + + return handleDelete; +} + +function useSaveNavigationMenu() { const { - goTo, params: { postId }, } = useNavigator(); - const { record: navigationMenu, isResolving } = useEntityRecord( - 'postType', - postType, - postId - ); - - const { getEditedEntityRecord, isSaving, isDeleting } = useSelect( - ( select ) => { - const { - isSavingEntityRecord, - isDeletingEntityRecord, - getEditedEntityRecord: getEditedEntityRecordSelector, - } = select( coreStore ); + const { getEditedEntityRecord } = useSelect( ( select ) => { + const { getEditedEntityRecord: getEditedEntityRecordSelector } = + select( coreStore ); - return { - isSaving: isSavingEntityRecord( 'postType', postType, postId ), - isDeleting: isDeletingEntityRecord( - 'postType', - postType, - postId - ), - getEditedEntityRecord: getEditedEntityRecordSelector, - }; - }, - [ postId, postType ] - ); + return { + getEditedEntityRecord: getEditedEntityRecordSelector, + }; + }, [] ); - const isLoading = isResolving || isSaving || isDeleting; + const { editEntityRecord, saveEditedEntityRecord } = + useDispatch( coreStore ); - const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); const handleSave = async ( edits = {} ) => { // Prepare for revert in case of error. @@ -103,38 +123,21 @@ export default function SidebarNavigationScreenNavigationMenu() { } }; - const handleDelete = async () => { - try { - await deleteEntityRecord( - 'postType', - postType, - postId, - { - force: true, - }, - { - throwOnError: true, - } - ); - createSuccessNotice( __( 'Deleted Navigation menu' ), { - type: 'snackbar', - } ); - goTo( '/navigation' ); - } catch ( error ) { - createErrorNotice( - sprintf( - /* translators: %s: error message describing why the navigation menu could not be deleted. */ - __( `Unable to delete Navigation menu (%s).` ), - error?.message - ), + return handleSave; +} + +function useDuplicateNavigationMenu( navigationMenu ) { + const { goTo } = useNavigator(); + + const { saveEntityRecord } = useDispatch( coreStore ); + + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); - { - type: 'snackbar', - } - ); - } - }; const handleDuplicate = async () => { + const menuTitle = + navigationMenu?.title?.rendered || navigationMenu?.slug; + try { const savedRecord = await saveEntityRecord( 'postType', @@ -174,6 +177,51 @@ export default function SidebarNavigationScreenNavigationMenu() { } }; + return handleDuplicate; +} + +export default function SidebarNavigationScreenNavigationMenu() { + const { + params: { postId }, + } = useNavigator(); + + const { record: navigationMenu, isResolving } = useEntityRecord( + 'postType', + postType, + postId + ); + + const { isSaving, isDeleting } = useSelect( + ( select ) => { + const { + isSavingEntityRecord, + isDeletingEntityRecord, + getEditedEntityRecord: getEditedEntityRecordSelector, + } = select( coreStore ); + + return { + isSaving: isSavingEntityRecord( 'postType', postType, postId ), + isDeleting: isDeletingEntityRecord( + 'postType', + postType, + postId + ), + getEditedEntityRecord: getEditedEntityRecordSelector, + }; + }, + [ postId ] + ); + + const isLoading = isResolving || isSaving || isDeleting; + + const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; + + const handleSave = useSaveNavigationMenu(); + + const handleDelete = useDeleteNavigationMenu(); + + const handleDuplicate = useDuplicateNavigationMenu( navigationMenu ); + if ( isLoading ) { return ( Date: Fri, 16 Jun 2023 14:17:10 +0100 Subject: [PATCH 3/8] Pass menu to all hooks --- .../index.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 8bc5e5c34bcc5..0ceacf793f1d5 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -20,11 +20,10 @@ import SingleNavigationMenu from './single-navigation-menu'; const postType = `wp_navigation`; -function useDeleteNavigationMenu() { - const { - goTo, - params: { postId }, - } = useNavigator(); +function useDeleteNavigationMenu( navigationMenu ) { + const { goTo } = useNavigator(); + + const postId = navigationMenu?.id; const { deleteEntityRecord } = useDispatch( coreStore ); @@ -66,10 +65,8 @@ function useDeleteNavigationMenu() { return handleDelete; } -function useSaveNavigationMenu() { - const { - params: { postId }, - } = useNavigator(); +function useSaveNavigationMenu( navigationMenu ) { + const postId = navigationMenu?.id; const { getEditedEntityRecord } = useSelect( ( select ) => { const { getEditedEntityRecord: getEditedEntityRecordSelector } = @@ -216,9 +213,9 @@ export default function SidebarNavigationScreenNavigationMenu() { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; - const handleSave = useSaveNavigationMenu(); + const handleSave = useSaveNavigationMenu( navigationMenu ); - const handleDelete = useDeleteNavigationMenu(); + const handleDelete = useDeleteNavigationMenu( navigationMenu ); const handleDuplicate = useDuplicateNavigationMenu( navigationMenu ); From c1dd30c2d862d6036c24f8559f8fdc596b81fab3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 16 Jun 2023 15:20:54 +0100 Subject: [PATCH 4/8] Use SingleMenu component and hooks on Navigation listing route --- .../index.js | 6 ++--- .../index.js | 26 ++++++++++++++----- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 0ceacf793f1d5..001e046c3cc6f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -20,7 +20,7 @@ import SingleNavigationMenu from './single-navigation-menu'; const postType = `wp_navigation`; -function useDeleteNavigationMenu( navigationMenu ) { +export function useDeleteNavigationMenu( navigationMenu ) { const { goTo } = useNavigator(); const postId = navigationMenu?.id; @@ -65,7 +65,7 @@ function useDeleteNavigationMenu( navigationMenu ) { return handleDelete; } -function useSaveNavigationMenu( navigationMenu ) { +export function useSaveNavigationMenu( navigationMenu ) { const postId = navigationMenu?.id; const { getEditedEntityRecord } = useSelect( ( select ) => { @@ -123,7 +123,7 @@ function useSaveNavigationMenu( navigationMenu ) { return handleSave; } -function useDuplicateNavigationMenu( navigationMenu ) { +export function useDuplicateNavigationMenu( navigationMenu ) { const { goTo } = useNavigator(); const { saveEntityRecord } = useDispatch( coreStore ); diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index 8d3edad0de8d2..ea6b2402d50b3 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -18,7 +18,12 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants'; import { useLink } from '../routes/link'; -import NavigationMenuEditor from '../sidebar-navigation-screen-navigation-menu/navigation-menu-editor'; +import { + useSaveNavigationMenu, + useDeleteNavigationMenu, + useDuplicateNavigationMenu, +} from '../sidebar-navigation-screen-navigation-menu'; +import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu'; export default function SidebarNavigationScreenNavigationMenus() { const { records: navigationMenus, isResolving: isLoading } = @@ -28,6 +33,14 @@ export default function SidebarNavigationScreenNavigationMenus() { PRELOADED_NAVIGATION_MENUS_QUERY ); + const firstNavigationMenu = navigationMenus?.[ 0 ]; + + const handleSave = useSaveNavigationMenu( firstNavigationMenu ); + + const handleDelete = useDeleteNavigationMenu( firstNavigationMenu ); + + const handleDuplicate = useDuplicateNavigationMenu( firstNavigationMenu ); + const hasNavigationMenus = !! navigationMenus?.length; if ( isLoading ) { @@ -49,11 +62,12 @@ export default function SidebarNavigationScreenNavigationMenus() { // if single menu then render it if ( navigationMenus?.length === 1 ) { return ( - - - + ); } From e94a244927ffbf4c05aec87274e35726ab06d820 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 16 Jun 2023 15:38:59 +0100 Subject: [PATCH 5/8] Move hooks to file file --- .../index.js | 169 +----------------- .../use-navigation-menu-handlers.js | 169 ++++++++++++++++++ .../index.js | 6 +- 3 files changed, 180 insertions(+), 164 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 001e046c3cc6f..0caef8f8020bb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -6,10 +6,9 @@ import { __experimentalUseNavigator as useNavigator, Spinner, } from '@wordpress/components'; -import { __, sprintf } from '@wordpress/i18n'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; import { decodeEntities } from '@wordpress/html-entities'; -import { store as noticesStore } from '@wordpress/notices'; /** * Internal dependencies @@ -17,165 +16,13 @@ import { store as noticesStore } from '@wordpress/notices'; import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus'; import ScreenNavigationMoreMenu from './more-menu'; import SingleNavigationMenu from './single-navigation-menu'; +import { + useDeleteNavigationMenu, + useDuplicateNavigationMenu, + useSaveNavigationMenu, +} from './use-navigation-menu-handlers'; -const postType = `wp_navigation`; - -export function useDeleteNavigationMenu( navigationMenu ) { - const { goTo } = useNavigator(); - - const postId = navigationMenu?.id; - - const { deleteEntityRecord } = useDispatch( coreStore ); - - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - - const handleDelete = async () => { - try { - await deleteEntityRecord( - 'postType', - postType, - postId, - { - force: true, - }, - { - throwOnError: true, - } - ); - createSuccessNotice( __( 'Deleted Navigation menu' ), { - type: 'snackbar', - } ); - goTo( '/navigation' ); - } catch ( error ) { - createErrorNotice( - sprintf( - /* translators: %s: error message describing why the navigation menu could not be deleted. */ - __( `Unable to delete Navigation menu (%s).` ), - error?.message - ), - - { - type: 'snackbar', - } - ); - } - }; - - return handleDelete; -} - -export function useSaveNavigationMenu( navigationMenu ) { - const postId = navigationMenu?.id; - - const { getEditedEntityRecord } = useSelect( ( select ) => { - const { getEditedEntityRecord: getEditedEntityRecordSelector } = - select( coreStore ); - - return { - getEditedEntityRecord: getEditedEntityRecordSelector, - }; - }, [] ); - - const { editEntityRecord, saveEditedEntityRecord } = - useDispatch( coreStore ); - - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - - const handleSave = async ( edits = {} ) => { - // Prepare for revert in case of error. - const originalRecord = getEditedEntityRecord( - 'postType', - 'wp_navigation', - postId - ); - - // Apply the edits. - editEntityRecord( 'postType', postType, postId, edits ); - - // Attempt to persist. - try { - await saveEditedEntityRecord( 'postType', postType, postId, { - throwOnError: true, - } ); - createSuccessNotice( __( 'Renamed Navigation menu' ), { - type: 'snackbar', - } ); - } catch ( error ) { - // Revert to original in case of error. - editEntityRecord( 'postType', postType, postId, originalRecord ); - - createErrorNotice( - sprintf( - /* translators: %s: error message describing why the navigation menu could not be renamed. */ - __( `Unable to rename Navigation menu (%s).` ), - error?.message - ), - - { - type: 'snackbar', - } - ); - } - }; - - return handleSave; -} - -export function useDuplicateNavigationMenu( navigationMenu ) { - const { goTo } = useNavigator(); - - const { saveEntityRecord } = useDispatch( coreStore ); - - const { createSuccessNotice, createErrorNotice } = - useDispatch( noticesStore ); - - const handleDuplicate = async () => { - const menuTitle = - navigationMenu?.title?.rendered || navigationMenu?.slug; - - try { - const savedRecord = await saveEntityRecord( - 'postType', - postType, - { - title: sprintf( - /* translators: %s: Navigation menu title */ - __( '%s (Copy)' ), - menuTitle - ), - content: navigationMenu?.content?.raw, - status: 'publish', - }, - { - throwOnError: true, - } - ); - - if ( savedRecord ) { - createSuccessNotice( __( 'Duplicated Navigation menu' ), { - type: 'snackbar', - } ); - goTo( `/navigation/${ postType }/${ savedRecord.id }` ); - } - } catch ( error ) { - createErrorNotice( - sprintf( - /* translators: %s: error message describing why the navigation menu could not be deleted. */ - __( `Unable to duplicate Navigation menu (%s).` ), - error?.message - ), - - { - type: 'snackbar', - } - ); - } - }; - - return handleDuplicate; -} +export const postType = `wp_navigation`; export default function SidebarNavigationScreenNavigationMenu() { const { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js new file mode 100644 index 0000000000000..7fe8cc089496c --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js @@ -0,0 +1,169 @@ +/** + * WordPress dependencies + */ +import { store as coreStore } from '@wordpress/core-data'; +import { __experimentalUseNavigator as useNavigator } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as noticesStore } from '@wordpress/notices'; +/** + * Internal dependencies + */ +import { postType } from '.'; + +export function useDeleteNavigationMenu( navigationMenu ) { + const { goTo } = useNavigator(); + + const postId = navigationMenu?.id; + + const { deleteEntityRecord } = useDispatch( coreStore ); + + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + + const handleDelete = async () => { + try { + await deleteEntityRecord( + 'postType', + postType, + postId, + { + force: true, + }, + { + throwOnError: true, + } + ); + createSuccessNotice( __( 'Deleted Navigation menu' ), { + type: 'snackbar', + } ); + goTo( '/navigation' ); + } catch ( error ) { + createErrorNotice( + sprintf( + /* translators: %s: error message describing why the navigation menu could not be deleted. */ + __( `Unable to delete Navigation menu (%s).` ), + error?.message + ), + + { + type: 'snackbar', + } + ); + } + }; + + return handleDelete; +} + +export function useSaveNavigationMenu( navigationMenu ) { + const postId = navigationMenu?.id; + + const { getEditedEntityRecord } = useSelect( ( select ) => { + const { getEditedEntityRecord: getEditedEntityRecordSelector } = + select( coreStore ); + + return { + getEditedEntityRecord: getEditedEntityRecordSelector, + }; + }, [] ); + + const { editEntityRecord, saveEditedEntityRecord } = + useDispatch( coreStore ); + + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + + const handleSave = async ( edits = {} ) => { + // Prepare for revert in case of error. + const originalRecord = getEditedEntityRecord( + 'postType', + 'wp_navigation', + postId + ); + + // Apply the edits. + editEntityRecord( 'postType', postType, postId, edits ); + + // Attempt to persist. + try { + await saveEditedEntityRecord( 'postType', postType, postId, { + throwOnError: true, + } ); + createSuccessNotice( __( 'Renamed Navigation menu' ), { + type: 'snackbar', + } ); + } catch ( error ) { + // Revert to original in case of error. + editEntityRecord( 'postType', postType, postId, originalRecord ); + + createErrorNotice( + sprintf( + /* translators: %s: error message describing why the navigation menu could not be renamed. */ + __( `Unable to rename Navigation menu (%s).` ), + error?.message + ), + + { + type: 'snackbar', + } + ); + } + }; + + return handleSave; +} + +export function useDuplicateNavigationMenu( navigationMenu ) { + const { goTo } = useNavigator(); + + const { saveEntityRecord } = useDispatch( coreStore ); + + const { createSuccessNotice, createErrorNotice } = + useDispatch( noticesStore ); + + const handleDuplicate = async () => { + const menuTitle = + navigationMenu?.title?.rendered || navigationMenu?.slug; + + try { + const savedRecord = await saveEntityRecord( + 'postType', + postType, + { + title: sprintf( + /* translators: %s: Navigation menu title */ + __( '%s (Copy)' ), + menuTitle + ), + content: navigationMenu?.content?.raw, + status: 'publish', + }, + { + throwOnError: true, + } + ); + + if ( savedRecord ) { + createSuccessNotice( __( 'Duplicated Navigation menu' ), { + type: 'snackbar', + } ); + goTo( `/navigation/${ postType }/${ savedRecord.id }` ); + } + } catch ( error ) { + createErrorNotice( + sprintf( + /* translators: %s: error message describing why the navigation menu could not be deleted. */ + __( `Unable to duplicate Navigation menu (%s).` ), + error?.message + ), + + { + type: 'snackbar', + } + ); + } + }; + + return handleDuplicate; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index ea6b2402d50b3..d3d638d8406fd 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -18,12 +18,12 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants'; import { useLink } from '../routes/link'; +import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu'; import { - useSaveNavigationMenu, useDeleteNavigationMenu, useDuplicateNavigationMenu, -} from '../sidebar-navigation-screen-navigation-menu'; -import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu'; + useSaveNavigationMenu, +} from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers'; export default function SidebarNavigationScreenNavigationMenus() { const { records: navigationMenus, isResolving: isLoading } = From f4fdef01840201c4a5dd06f39f8106fe59815271 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 16 Jun 2023 15:42:49 +0100 Subject: [PATCH 6/8] Consolidate to a single hook --- .../index.js | 13 +++---------- .../use-navigation-menu-handlers.js | 14 +++++++++++--- .../index.js | 13 +++---------- 3 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index 0caef8f8020bb..c5aa8dde0567f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -16,11 +16,7 @@ import { decodeEntities } from '@wordpress/html-entities'; import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus'; import ScreenNavigationMoreMenu from './more-menu'; import SingleNavigationMenu from './single-navigation-menu'; -import { - useDeleteNavigationMenu, - useDuplicateNavigationMenu, - useSaveNavigationMenu, -} from './use-navigation-menu-handlers'; +import useNavigationMenuHandlers from './use-navigation-menu-handlers'; export const postType = `wp_navigation`; @@ -60,11 +56,8 @@ export default function SidebarNavigationScreenNavigationMenu() { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; - const handleSave = useSaveNavigationMenu( navigationMenu ); - - const handleDelete = useDeleteNavigationMenu( navigationMenu ); - - const handleDuplicate = useDuplicateNavigationMenu( navigationMenu ); + const { handleSave, handleDelete, handleDuplicate } = + useNavigationMenuHandlers( navigationMenu ); if ( isLoading ) { return ( diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js index 7fe8cc089496c..b43bc78ec4bcf 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js @@ -11,7 +11,7 @@ import { store as noticesStore } from '@wordpress/notices'; */ import { postType } from '.'; -export function useDeleteNavigationMenu( navigationMenu ) { +function useDeleteNavigationMenu( navigationMenu ) { const { goTo } = useNavigator(); const postId = navigationMenu?.id; @@ -56,7 +56,7 @@ export function useDeleteNavigationMenu( navigationMenu ) { return handleDelete; } -export function useSaveNavigationMenu( navigationMenu ) { +function useSaveNavigationMenu( navigationMenu ) { const postId = navigationMenu?.id; const { getEditedEntityRecord } = useSelect( ( select ) => { @@ -114,7 +114,7 @@ export function useSaveNavigationMenu( navigationMenu ) { return handleSave; } -export function useDuplicateNavigationMenu( navigationMenu ) { +function useDuplicateNavigationMenu( navigationMenu ) { const { goTo } = useNavigator(); const { saveEntityRecord } = useDispatch( coreStore ); @@ -167,3 +167,11 @@ export function useDuplicateNavigationMenu( navigationMenu ) { return handleDuplicate; } + +export default function useNavigationMenuHandlers( navigationMenu ) { + return { + handleDelete: useDeleteNavigationMenu( navigationMenu ), + handleSave: useSaveNavigationMenu( navigationMenu ), + handleDuplicate: useDuplicateNavigationMenu( navigationMenu ), + }; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index d3d638d8406fd..38cb98baa706f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -19,11 +19,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import { PRELOADED_NAVIGATION_MENUS_QUERY } from './constants'; import { useLink } from '../routes/link'; import SingleNavigationMenu from '../sidebar-navigation-screen-navigation-menu/single-navigation-menu'; -import { - useDeleteNavigationMenu, - useDuplicateNavigationMenu, - useSaveNavigationMenu, -} from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers'; +import useNavigationMenuHandlers from '../sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers'; export default function SidebarNavigationScreenNavigationMenus() { const { records: navigationMenus, isResolving: isLoading } = @@ -35,11 +31,8 @@ export default function SidebarNavigationScreenNavigationMenus() { const firstNavigationMenu = navigationMenus?.[ 0 ]; - const handleSave = useSaveNavigationMenu( firstNavigationMenu ); - - const handleDelete = useDeleteNavigationMenu( firstNavigationMenu ); - - const handleDuplicate = useDuplicateNavigationMenu( firstNavigationMenu ); + const { handleSave, handleDelete, handleDuplicate } = + useNavigationMenuHandlers( firstNavigationMenu ); const hasNavigationMenus = !! navigationMenus?.length; From f5c88115bcb89c684555844e2c1593507a2ec1c9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 19 Jun 2023 09:25:36 +0100 Subject: [PATCH 7/8] Improve hooks by passing arg at call time --- .../index.js | 14 +++++----- .../use-navigation-menu-handlers.js | 26 +++++++++---------- .../index.js | 8 +++--- 3 files changed, 23 insertions(+), 25 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index c5aa8dde0567f..a22d26307c9ac 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -57,7 +57,7 @@ export default function SidebarNavigationScreenNavigationMenu() { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; const { handleSave, handleDelete, handleDuplicate } = - useNavigationMenuHandlers( navigationMenu ); + useNavigationMenuHandlers(); if ( isLoading ) { return ( @@ -85,9 +85,9 @@ export default function SidebarNavigationScreenNavigationMenu() { actions={ handleDelete( navigationMenu ) } + onSave={ () => handleSave( navigationMenu ) } + onDuplicate={ () => handleDuplicate( navigationMenu ) } /> } title={ decodeEntities( menuTitle ) } @@ -99,9 +99,9 @@ export default function SidebarNavigationScreenNavigationMenu() { return ( handleDelete( navigationMenu ) } + handleSave={ () => handleSave( navigationMenu ) } + handleDuplicate={ () => handleDuplicate( navigationMenu ) } /> ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js index b43bc78ec4bcf..1ddf1c8d86c6e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/use-navigation-menu-handlers.js @@ -11,17 +11,16 @@ import { store as noticesStore } from '@wordpress/notices'; */ import { postType } from '.'; -function useDeleteNavigationMenu( navigationMenu ) { +function useDeleteNavigationMenu() { const { goTo } = useNavigator(); - const postId = navigationMenu?.id; - const { deleteEntityRecord } = useDispatch( coreStore ); const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); - const handleDelete = async () => { + const handleDelete = async ( navigationMenu ) => { + const postId = navigationMenu?.id; try { await deleteEntityRecord( 'postType', @@ -56,9 +55,7 @@ function useDeleteNavigationMenu( navigationMenu ) { return handleDelete; } -function useSaveNavigationMenu( navigationMenu ) { - const postId = navigationMenu?.id; - +function useSaveNavigationMenu() { const { getEditedEntityRecord } = useSelect( ( select ) => { const { getEditedEntityRecord: getEditedEntityRecordSelector } = select( coreStore ); @@ -74,7 +71,8 @@ function useSaveNavigationMenu( navigationMenu ) { const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); - const handleSave = async ( edits = {} ) => { + const handleSave = async ( navigationMenu, edits = {} ) => { + const postId = navigationMenu?.id; // Prepare for revert in case of error. const originalRecord = getEditedEntityRecord( 'postType', @@ -114,7 +112,7 @@ function useSaveNavigationMenu( navigationMenu ) { return handleSave; } -function useDuplicateNavigationMenu( navigationMenu ) { +function useDuplicateNavigationMenu() { const { goTo } = useNavigator(); const { saveEntityRecord } = useDispatch( coreStore ); @@ -122,7 +120,7 @@ function useDuplicateNavigationMenu( navigationMenu ) { const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore ); - const handleDuplicate = async () => { + const handleDuplicate = async ( navigationMenu ) => { const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug; @@ -168,10 +166,10 @@ function useDuplicateNavigationMenu( navigationMenu ) { return handleDuplicate; } -export default function useNavigationMenuHandlers( navigationMenu ) { +export default function useNavigationMenuHandlers() { return { - handleDelete: useDeleteNavigationMenu( navigationMenu ), - handleSave: useSaveNavigationMenu( navigationMenu ), - handleDuplicate: useDuplicateNavigationMenu( navigationMenu ), + handleDelete: useDeleteNavigationMenu(), + handleSave: useSaveNavigationMenu(), + handleDuplicate: useDuplicateNavigationMenu(), }; } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js index 38cb98baa706f..b3fae528aaed2 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js @@ -32,7 +32,7 @@ export default function SidebarNavigationScreenNavigationMenus() { const firstNavigationMenu = navigationMenus?.[ 0 ]; const { handleSave, handleDelete, handleDuplicate } = - useNavigationMenuHandlers( firstNavigationMenu ); + useNavigationMenuHandlers(); const hasNavigationMenus = !! navigationMenus?.length; @@ -57,9 +57,9 @@ export default function SidebarNavigationScreenNavigationMenus() { return ( handleDelete( firstNavigationMenu ) } + handleDuplicate={ () => handleDuplicate( firstNavigationMenu ) } + handleSave={ () => handleSave( firstNavigationMenu ) } /> ); } From edb424fbe2cbf285323f5f52881a999e5aaf09e5 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 19 Jun 2023 09:32:42 +0100 Subject: [PATCH 8/8] Rename hooks --- .../index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js index a22d26307c9ac..6fae7b0926198 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/index.js @@ -59,6 +59,10 @@ export default function SidebarNavigationScreenNavigationMenu() { const { handleSave, handleDelete, handleDuplicate } = useNavigationMenuHandlers(); + const _handleDelete = () => handleDelete( navigationMenu ); + const _handleSave = () => handleSave( navigationMenu ); + const _handleDuplicate = () => handleDuplicate( navigationMenu ); + if ( isLoading ) { return ( handleDelete( navigationMenu ) } - onSave={ () => handleSave( navigationMenu ) } - onDuplicate={ () => handleDuplicate( navigationMenu ) } + onDelete={ _handleDelete } + onSave={ _handleSave } + onDuplicate={ _handleDuplicate } /> } title={ decodeEntities( menuTitle ) } @@ -99,9 +103,9 @@ export default function SidebarNavigationScreenNavigationMenu() { return ( handleDelete( navigationMenu ) } - handleSave={ () => handleSave( navigationMenu ) } - handleDuplicate={ () => handleDuplicate( navigationMenu ) } + handleDelete={ _handleDelete } + handleSave={ _handleSave } + handleDuplicate={ _handleDuplicate } /> ); }