Add View button to navigation link blocks

packages/edit-site/src/components/block-editor/use-navigate-to-entity-record.js

@@ -16,8 +16,17 @@ export default function useNavigateToEntityRecord() {
 
 	const onNavigateToEntityRecord = useCallback(
 		( params ) => {
+			const { focusMode = true, ...navigationParams } = params;
+			const queryParams = [ 'canvas=edit' ];
+
+			if ( focusMode ) {
+				queryParams.push( 'focusMode=true' );
+			}
+
 			history.navigate(
-				`/${ params.postType }/${ params.postId }?canvas=edit&focusMode=true`
+				`/${ navigationParams.postType }/${
+					navigationParams.postId
+				}?${ queryParams.join( '&' ) }`
 			);
 		},
 		[ history ]

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,87 @@
+/**
+ * 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,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+
+// 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 onNavigateToEntityRecord = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getSettings().onNavigateToEntityRecord,
+		[]
+	);
+
+	const onViewPage = useCallback( () => {
+		if ( kind === 'post-type' && type === 'page' && id ) {
+			onNavigateToEntityRecord( {
+				postId: id,
+				postType: type,
+				focusMode: false,
+			} );
+		}
+	}, [ kind, id, type, onNavigateToEntityRecord ] );
+
+	// Only show for page-type links
+	if ( kind !== 'post-type' || type !== 'page' || ! id ) {
+		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 } />
+				{ props.isSelected && isSupportedBlock && (
+					<NavigationViewButton { ...props } />
+				) }
+			</>
+		);
+	},
+	'withNavigationViewButton'
+);
+
+// Register the filter
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/with-navigation-view-button',
+	withNavigationViewButton
+);