Refactor to have an onSelect event. (+1 squashed commit)

Squashed commits:
[d32556f] Add ability to open the editor on the selected post on navigation.

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

@@ -20,7 +20,21 @@ import NavigationMenu from './navigation-menu';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
-export default function NavigationInspector() {
+function SelectionEffect( { onSelect } ) {
+	const selectedBlock = useSelect( ( select ) => {
+		const { getSelectedBlock } = select( blockEditorStore );
+		return getSelectedBlock();
+	} );
+	// When a navigation item is selected call the onSelect callback.
+	useEffect( () => {
+		if ( selectedBlock ) {
+			onSelect( selectedBlock );
+		}
+	}, [ selectedBlock ] );
+	return null;
+}
+
+export default function NavigationInspector( { onSelect } ) {
 	const {
 		selectedNavigationBlockId,
 		clientIdToRef,
@@ -207,6 +221,7 @@ export default function NavigationInspector() {
 					onInput={ onInput }
 				>
 					<NavigationMenu innerBlocks={ publishedInnerBlocks } />
+					{ onSelect && <SelectionEffect onSelect={ onSelect } /> }
 				</BlockEditorProvider>
 			) }
 

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

@@ -56,5 +56,5 @@ export default function NavigationMenu( { innerBlocks } ) {
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
 
-	return <OffCanvasEditor blocks={ innerBlocks } />;
+	return <OffCanvasEditor blocks={ innerBlocks } selectBlockInCanvas={ true } />;
 }

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>
 			}
 		/>