Refactor View button to use editor hook pattern

- Move View button implementation from navigation-link block to editor hook
- Create navigation-link-view-button.js hook following pattern-overrides.js pattern
- Hook targets core/navigation-link and core/navigation-submenu blocks
- Use __unstableBlockToolbarLastItem to position button as last item
- Remove router dependency issues by using editor hook context
- Register hook in editor hooks index

Author: getdave

packages/block-library/src/navigation-link/edit.js

@@ -28,16 +28,14 @@ import {
 	getColorClassName,
 	useInnerBlocksProps,
 	useBlockEditingMode,
-	__unstableBlockToolbarLastItem as BlockToolbarLastItem,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
+import { useState, useEffect, useRef } from '@wordpress/element';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { useMergeRefs, usePrevious } from '@wordpress/compose';
-import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 /**
  * Internal dependencies
@@ -46,10 +44,6 @@ import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { unlock } from '../lock-unlock';
-
-// Safely access useHistory - it may not be available in all contexts
-const { useHistory } = routerPrivateApis ? unlock( routerPrivateApis ) : {};
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -492,24 +486,6 @@ export default function NavigationLinkEdit( {
 		customBackgroundColor,
 	} = getColors( context, ! isTopLevelLink );
 
-	const history = useHistory();
-
-	const onViewPage = useCallback( () => {
-		if ( kind === 'post-type' && id && type ) {
-			if ( history ) {
-				// Site editor context
-				history.navigate( `/${ type }/${ id }?canvas=edit` );
-			} else {
-				// Post editor context - navigate to the post
-
-				window.open(
-					`/wp-admin/post.php?post=${ id }&action=edit`,
-					'_blank'
-				);
-			}
-		}
-	}, [ kind, id, type, history ] );
-
 	function onKeyDown( event ) {
 		if ( isKeyboardEvent.primary( event, 'k' ) ) {
 			// Required to prevent the command center from opening,
@@ -595,20 +571,6 @@ export default function NavigationLinkEdit( {
 						/>
 					) }
 				</ToolbarGroup>
-				{ /* View button for page-type links */ }
-				{ kind === 'post-type' && id && type && (
-					<BlockToolbarLastItem>
-						<ToolbarGroup>
-							<ToolbarButton
-								name="view"
-								title={ __( 'View' ) }
-								onClick={ onViewPage }
-							>
-								{ __( 'View' ) }
-							</ToolbarButton>
-						</ToolbarGroup>
-					</BlockToolbarLastItem>
-				) }
 			</BlockControls>
 			{ /* Warning, this duplicated in packages/block-library/src/navigation-submenu/edit.js */ }
 			<InspectorControls>

packages/editor/src/hooks/index.js

@@ -5,3 +5,4 @@ import './custom-sources-backwards-compatibility';
 import './default-autocompleters';
 import './media-upload';
 import './pattern-overrides';
+import './navigation-link-view-button';

packages/editor/src/hooks/navigation-link-view-button.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __unstableBlockToolbarLastItem as BlockToolbarLastItem } from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+
+// Target blocks that should have the View button
+const SUPPORTED_BLOCKS = [ 'core/navigation-link', 'core/navigation-submenu' ];
+
+/**
+ * Component that renders the View button for navigation blocks
+ *
+ * @param {Object} props            Component props.
+ * @param {Object} props.attributes Block attributes.
+ */
+function NavigationViewButton( { attributes } ) {
+	const { kind, id, type } = attributes;
+
+	const onViewPage = useCallback( () => {
+		if ( kind === 'post-type' && id && type ) {
+			// Navigate to the post in edit mode
+			const url = `/wp-admin/post.php?post=${ id }&action=edit`;
+			window.open( url, '_blank' );
+		}
+	}, [ kind, id, type ] );
+
+	// Only show for page-type links
+	if ( kind !== 'post-type' || ! id || ! type ) {
+		return null;
+	}
+
+	return (
+		<BlockToolbarLastItem>
+			<ToolbarGroup>
+				<ToolbarButton
+					name="view"
+					title={ __( 'View' ) }
+					onClick={ onViewPage }
+				>
+					{ __( 'View' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockToolbarLastItem>
+	);
+}
+
+/**
+ * Higher-order component that adds the View button to navigation blocks
+ */
+const withNavigationViewButton = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const isSupportedBlock = SUPPORTED_BLOCKS.includes( props.name );
+
+		return (
+			<>
+				<BlockEdit key="edit" { ...props } />
+				{ isSupportedBlock && <NavigationViewButton { ...props } /> }
+			</>
+		);
+	},
+	'withNavigationViewButton'
+);
+
+// Register the filter
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/with-navigation-view-button',
+	withNavigationViewButton
+);