Navigtion on Browse Mode: Move the action to the leaf menu

WordPress · May 22, 2023 · c20bb02 · c20bb02
1 parent 1939eae
commit c20bb02
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 64 deletions.
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
@@ -2,12 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -16,12 +15,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import NavigationMenuContent from './navigation-menu-content';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
-
-const { useHistory } = unlock( routerPrivateApis );
 
 const noop = () => {};
 const NAVIGATION_MENUS_QUERY = {
@@ -45,7 +38,6 @@ function SidebarNavigationScreenWrapper( { children, actions } ) {
 }
 
 export default function SidebarNavigationScreenNavigationMenus() {
-	const history = useHistory();
 	const { navigationMenus, hasResolvedNavigationMenus, storedSettings } =
 		useSelect( ( select ) => {
 			const { getSettings } = unlock( select( editSiteStore ) );
@@ -76,36 +68,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 
-	const onSelect = useCallback(
-		( selectedBlock ) => {
-			const { attributes, name } = selectedBlock;
-			if (
-				attributes.kind === 'post-type' &&
-				attributes.id &&
-				attributes.type &&
-				history
-			) {
-				history.push( {
-					postType: attributes.type,
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-		},
-		[ history ]
-	);
-
 	if ( hasResolvedNavigationMenus && ! hasNavigationMenus ) {
 		return (
 			<SidebarNavigationScreenWrapper>
@@ -125,7 +87,6 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
 					<NavigationMenuContent
 						rootClientId={ blocks[ 0 ].clientId }
-						onSelect={ onSelect }
 					/>
 				</div>
 			</SidebarNavigationScreenWrapper>

diff --git a/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -7,6 +7,18 @@ import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+
+/**
+ * Internal dependencies
+ */
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { unlock } from '../../private-apis';
+
+const { useHistory } = unlock( routerPrivateApis );
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -19,13 +31,20 @@ export default function LeafMoreMenu( props ) {
 	const { clientId } = block;
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
 		useDispatch( blockEditorStore );
+	const history = useHistory();
 
 	const removeLabel = sprintf(
 		/* translators: %s: block name */
 		__( 'Remove %s' ),
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
+	const navigateLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Navigate to %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
 	const rootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -35,6 +54,33 @@ export default function LeafMoreMenu( props ) {
 		[ clientId ]
 	);
 
+	const onNavigate = () => {
+		const { attributes, name } = block;
+		if (
+			attributes.kind === 'post-type' &&
+			attributes.id &&
+			attributes.type &&
+			history
+		) {
+			history.push( {
+				postType: attributes.type,
+				postId: attributes.id,
+				...( isPreviewingTheme() && {
+					theme_preview: currentlyPreviewingTheme(),
+				} ),
+			} );
+		}
+		if ( name === 'core/page-list-item' && attributes.id && history ) {
+			history.push( {
+				postType: 'page',
+				postId: attributes.id,
+				...( isPreviewingTheme() && {
+					theme_preview: currentlyPreviewingTheme(),
+				} ),
+			} );
+		}
+	};
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -65,6 +111,16 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
+						{ block.attributes?.id && (
+							<MenuItem
+								onClick={ () => {
+									onNavigate();
+									onClose();
+								} }
+							>
+								{ navigateLabel }
+							</MenuItem>
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

diff --git a/...site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js b/...site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js
@@ -7,10 +7,9 @@ import {
 	BlockList,
 	BlockTools,
 } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
-import { createBlock } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 import { VisuallyHidden } from '@wordpress/components';
-import { useCallback, useEffect, useState } from '@wordpress/element';
+import { useEffect, useState } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -35,7 +34,7 @@ const PAGES_QUERY = [
 	},
 ];
 
-export default function NavigationMenuContent( { rootClientId, onSelect } ) {
+export default function NavigationMenuContent( { rootClientId } ) {
 	const [ isLoading, setIsLoading ] = useState( true );
 	const { clientIdsTree, shouldKeepLoading, isSinglePageList } = useSelect(
 		( select ) => {
@@ -70,8 +69,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 		},
 		[ rootClientId ]
 	);
-	const { replaceBlock, __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
 
 	// Delay loading stop by 50ms to avoid flickering.
 	useEffect( () => {
@@ -93,23 +90,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 	}, [ shouldKeepLoading, clientIdsTree, isLoading ] );
 
 	const { PrivateListView } = unlock( blockEditorPrivateApis );
-	const offCanvasOnselect = useCallback(
-		( block ) => {
-			if (
-				block.name === 'core/navigation-link' &&
-				! block.attributes.url
-			) {
-				__unstableMarkNextChangeAsNotPersistent();
-				replaceBlock(
-					block.clientId,
-					createBlock( 'core/navigation-link', block.attributes )
-				);
-			} else {
-				onSelect( block );
-			}
-		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
-	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.
 	// For example a navigation page list load its items has an effect on edit to load its items.
@@ -122,7 +102,6 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 							? clientIdsTree[ 0 ].innerBlocks
 							: clientIdsTree
 					}
-					onSelect={ offCanvasOnselect }
 					blockSettingsMenu={ LeafMoreMenu }
 					showAppender={ false }
 				/>