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

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menu/navigation-menu-editor.js

@@ -1,60 +1,21 @@
 /**
  * WordPress dependencies
  */
-import { useCallback, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import NavigationMenuContent from '../sidebar-navigation-screen-navigation-menus/navigation-menu-content';
-import {
-	isPreviewingTheme,
-	currentlyPreviewingTheme,
-} from '../../utils/is-previewing-theme';
-
-const { useHistory } = unlock( routerPrivateApis );
 
 const noop = () => {};
 
 export default function NavigationMenuEditor( { navigationMenuId } ) {
-	const history = useHistory();
-
-	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() && {
-						gutenberg_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-			if ( name === 'core/page-list-item' && attributes.id && history ) {
-				history.push( {
-					postType: 'page',
-					postId: attributes.id,
-					...( isPreviewingTheme() && {
-						gutenberg_theme_preview: currentlyPreviewingTheme(),
-					} ),
-				} );
-			}
-		},
-		[ history ]
-	);
-
 	const { storedSettings } = useSelect( ( select ) => {
 		const { getSettings } = unlock( select( editSiteStore ) );
 
@@ -83,10 +44,7 @@ export default function NavigationMenuEditor( { navigationMenuId } ) {
 			onInput={ noop }
 		>
 			<div className="edit-site-sidebar-navigation-screen-navigation-menus__content">
-				<NavigationMenuContent
-					rootClientId={ blocks[ 0 ].clientId }
-					onSelect={ onSelect }
-				/>
+				<NavigationMenuContent rootClientId={ blocks[ 0 ].clientId } />
 			</div>
 		</BlockEditorProvider>
 	);

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js

@@ -5,15 +5,29 @@
 import { chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { DropdownMenu, MenuItem, MenuGroup } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
 };
 
+/**
+ * Internal dependencies
+ */
+import {
+	isPreviewingTheme,
+	currentlyPreviewingTheme,
+} from '../../utils/is-previewing-theme';
+import { unlock } from '../../lock-unlock';
+
+const { useHistory } = unlock( routerPrivateApis );
+
 export default function LeafMoreMenu( props ) {
+	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
 	const { moveBlocksDown, moveBlocksUp, removeBlocks } =
@@ -25,6 +39,12 @@ export default function LeafMoreMenu( props ) {
 		BlockTitle( { clientId, maximumLength: 25 } )
 	);
 
+	const goToLabel = sprintf(
+		/* translators: %s: block name */
+		__( 'Go to %s' ),
+		BlockTitle( { clientId, maximumLength: 25 } )
+	);
+
 	const rootClientId = useSelect(
 		( select ) => {
 			const { getBlockRootClientId } = select( blockEditorStore );
@@ -34,6 +54,36 @@ export default function LeafMoreMenu( props ) {
 		[ clientId ]
 	);
 
+	const onGoToPage = 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() && {
+						gutenberg_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				history.push( {
+					postType: 'page',
+					postId: attributes.id,
+					...( isPreviewingTheme() && {
+						gutenberg_theme_preview: currentlyPreviewingTheme(),
+					} ),
+				} );
+			}
+		},
+		[ history ]
+	);
+
 	return (
 		<DropdownMenu
 			icon={ moreVertical }
@@ -64,6 +114,16 @@ export default function LeafMoreMenu( props ) {
 						>
 							{ __( 'Move down' ) }
 						</MenuItem>
+						{ block.attributes?.id && (
+							<MenuItem
+								onClick={ () => {
+									onGoToPage();
+									onClose();
+								} }
+							>
+								{ goToLabel }
+							</MenuItem>
+						) }
 					</MenuGroup>
 					<MenuGroup>
 						<MenuItem

packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/navigation-menu-content.js

@@ -37,7 +37,7 @@ const PAGES_QUERY = [
 	},
 ];
 
-export default function NavigationMenuContent( { rootClientId, onSelect } ) {
+export default function NavigationMenuContent( { rootClientId } ) {
 	const { listViewRootClientId, isLoading } = useSelect(
 		( select ) => {
 			const {
@@ -89,11 +89,9 @@ export default function NavigationMenuContent( { rootClientId, onSelect } ) {
 					block.clientId,
 					createBlock( 'core/navigation-link', block.attributes )
 				);
-			} else {
-				onSelect( block );
 			}
 		},
-		[ onSelect, __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
+		[ __unstableMarkNextChangeAsNotPersistent, replaceBlock ]
 	);
 
 	// The hidden block is needed because it makes block edit side effects trigger.