Remove custom button and (conditionally) show single menu on Navigati…

…on route in Browse Mode (WordPress#51565) * Remove custom button and show single menu on Navigation route * Extract hooks * Pass menu to all hooks * Use SingleMenu component and hooks on Navigation listing route * Move hooks to file file * Consolidate to a single hook * Improve hooks by passing arg at call time * Rename hooks
pewresearch · Jul 13, 2023 · 40e6e02 · 40e6e02
1 parent ea59ca6
commit 40e6e02
Show file tree

Hide file tree

Showing 6 changed files with 259 additions and 212 deletions.
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
@@ -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={
 				<ItemGroup>
-					<SidebarNavigationScreenNavigationMenuButton
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/navigation"
 						withChevron
 						icon={ navigation }
-						as={ SidebarNavigationItem }
 					>
 						{ __( 'Navigation' ) }
-					</SidebarNavigationScreenNavigationMenuButton>
-
+					</NavigatorButton>
 					<SidebarNavigationItemGlobalStyles
 						withChevron
 						icon={ styles }

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
@@ -6,33 +6,22 @@ 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
  */
 import { SidebarNavigationScreenWrapper } from '../sidebar-navigation-screen-navigation-menus';
 import ScreenNavigationMoreMenu from './more-menu';
-import NavigationMenuEditor from './navigation-menu-editor';
-import EditButton from './edit-button';
+import SingleNavigationMenu from './single-navigation-menu';
+import useNavigationMenuHandlers from './use-navigation-menu-handlers';
 
-export default function SidebarNavigationScreenNavigationMenu() {
-	const {
-		deleteEntityRecord,
-		saveEntityRecord,
-		editEntityRecord,
-		saveEditedEntityRecord,
-	} = useDispatch( coreStore );
-
-	const { createSuccessNotice, createErrorNotice } =
-		useDispatch( noticesStore );
+export const postType = `wp_navigation`;
 
-	const postType = `wp_navigation`;
+export default function SidebarNavigationScreenNavigationMenu() {
 	const {
-		goTo,
 		params: { postId },
 	} = useNavigator();
 
@@ -42,7 +31,7 @@ export default function SidebarNavigationScreenNavigationMenu() {
 		postId
 	);
 
-	const { getEditedEntityRecord, isSaving, isDeleting } = useSelect(
+	const { isSaving, isDeleting } = useSelect(
 		( select ) => {
 			const {
 				isSavingEntityRecord,
@@ -60,120 +49,19 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				getEditedEntityRecord: getEditedEntityRecordSelector,
 			};
 		},
-		[ postId, postType ]
+		[ postId ]
 	);
 
 	const isLoading = isResolving || isSaving || isDeleting;
 
 	const menuTitle = navigationMenu?.title?.rendered || navigationMenu?.slug;
 
-	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 );
+	const { handleSave, handleDelete, handleDuplicate } =
+		useNavigationMenuHandlers();
 
-		// 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',
-				}
-			);
-		}
-	};
-
-	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',
-				}
-			);
-		}
-	};
-	const handleDuplicate = async () => {
-		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',
-				}
-			);
-		}
-	};
+	const _handleDelete = () => handleDelete( navigationMenu );
+	const _handleSave = () => handleSave( navigationMenu );
+	const _handleDuplicate = () => handleDuplicate( navigationMenu );
 
 	if ( isLoading ) {
 		return (
@@ -201,9 +89,9 @@ export default function SidebarNavigationScreenNavigationMenu() {
 				actions={
 					<ScreenNavigationMoreMenu
 						menuTitle={ decodeEntities( menuTitle ) }
-						onDelete={ handleDelete }
-						onSave={ handleSave }
-						onDuplicate={ handleDuplicate }
+						onDelete={ _handleDelete }
+						onSave={ _handleSave }
+						onDuplicate={ _handleDuplicate }
 					/>
 				}
 				title={ decodeEntities( menuTitle ) }
@@ -213,37 +101,11 @@ export default function SidebarNavigationScreenNavigationMenu() {
 	}
 
 	return (
-		<SidebarNavigationScreenWrapper
-			actions={
-				<>
-					<EditButton />
-					<ScreenNavigationMoreMenu
-						menuTitle={ decodeEntities( menuTitle ) }
-						onDelete={ handleDelete }
-						onSave={ handleSave }
-						onDuplicate={ handleDuplicate }
-					/>
-				</>
-			}
-			title={ decodeEntities( menuTitle ) }
-			description={
-				<>
-					<p>
-						{ sprintf(
-							/* translators: %s: Navigation menu title */
-							'This is your "%s" navigation menu. ',
-							decodeEntities( menuTitle )
-						) }
-					</p>
-					<p>
-						{ __(
-							'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.'
-						) }
-					</p>
-				</>
-			}
-		>
-			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
-		</SidebarNavigationScreenWrapper>
+		<SingleNavigationMenu
+			navigationMenu={ navigationMenu }
+			handleDelete={ _handleDelete }
+			handleSave={ _handleSave }
+			handleDuplicate={ _handleDuplicate }
+		/>
 	);
 }
diff --git a/...t-site/src/components/sidebar-navigation-screen-navigation-menu/single-navigation-menu.js b/...t-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 (
+		<SidebarNavigationScreenWrapper
+			actions={
+				<ScreenNavigationMoreMenu
+					menuTitle={ decodeEntities( menuTitle ) }
+					onDelete={ handleDelete }
+					onSave={ handleSave }
+					onDuplicate={ handleDuplicate }
+				/>
+			}
+			title={ decodeEntities( menuTitle ) }
+			description={ __(
+				'Navigation menus are a curated collection of blocks that allow visitors to get around your site.'
+			) }
+		>
+			<NavigationMenuEditor navigationMenuId={ navigationMenu?.id } />
+		</SidebarNavigationScreenWrapper>
+	);
+}