Add ability to open the editor on the selected post on navigation. (#…

…47387)

* Refactor to have an onSelect event. (+1 squashed commit)
Squashed commits:
[d32556f] Add ability to open the editor on the selected post on navigation.

* onSelect in the click event.

packages/block-editor/src/components/off-canvas-editor/index.js

@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {boolean} props.showBlockMovers Flag to enable block movers
  * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
  * @param {Object}  props.LeafMoreMenu    Optional more menu substitution.
- * @param {string}  props.description         Optional accessible description for the tree grid component.
+ * @param {string}  props.description     Optional accessible description for the tree grid component.
+ * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
  * @param {Object}  ref                   Forwarded ref
  */
 function OffCanvasEditor(
@@ -71,9 +72,11 @@ function OffCanvasEditor(
 		isExpanded = false,
 		LeafMoreMenu,
 		description = __( 'Block navigation structure' ),
+		onSelect,
 	},
 	ref
 ) {
+	const { getBlock } = useSelect( blockEditorStore );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
@@ -113,8 +116,11 @@ function OffCanvasEditor(
 		( event, blockClientId ) => {
 			updateBlockSelection( event, blockClientId );
 			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;

packages/edit-site/src/components/navigation-inspector/index.js

@@ -20,7 +20,7 @@ import NavigationMenu from './navigation-menu';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-export default function NavigationInspector() {
+export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
 		clientIdToRef,
@@ -206,7 +206,10 @@ export default function NavigationInspector() {
 					onChange={ onChange }
 					onInput={ onInput }
 				>
-					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
+					<NavigationMenu
+						innerBlocks={ publishedInnerBlocks }
+						onSelect={ onSelect }
+					/>
 				</BlockEditorProvider>
 			) }
 

packages/edit-site/src/components/navigation-inspector/navigation-menu.js

@@ -36,7 +36,7 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks } ) {
+export default function NavigationMenu( { innerBlocks, onSelect } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	const { OffCanvasEditor } = unlock( blockEditorExperiments );
@@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } />;
+	return <OffCanvasEditor blocks={ innerBlocks } onSelect={ onSelect } />;
 }

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

@@ -2,22 +2,42 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import NavigationInspector from '../navigation-inspector';
+import { useHistory } from '../routes';
 
 export default function SidebarNavigationScreenNavigationMenus() {
+	const history = useHistory();
+	const onSelect = useCallback(
+		( selectedBlock ) => {
+			const { attributes } = selectedBlock;
+			if (
+				attributes.kind === 'post-type' &&
+				attributes.id &&
+				attributes.type &&
+				history
+			) {
+				history.push( {
+					postType: attributes.type,
+					postId: attributes.id,
+				} );
+			}
+		},
+		[ history ]
+	);
 	return (
 		<SidebarNavigationScreen
 			path="/navigation"
 			parentTitle={ __( 'Design' ) }
 			title={ __( 'Navigation' ) }
 			content={
 				<div className="edit-site-sidebar-navigation-screen-navigation-menus">
-					<NavigationInspector />
+					<NavigationInspector onSelect={ onSelect } />
 				</div>
 			}
 		/>