Edit Site: Enable link viewer template navigation.

packages/block-editor/src/components/url-popover/link-viewer.js

@@ -8,10 +8,14 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import {
+	createSlotFill,
 	ExternalLink,
 	Button,
 } from '@wordpress/components';
 import { safeDecodeURI, filterURLForDisplay } from '@wordpress/url';
+import { useMemo } from '@wordpress/element';
+
+const { Slot, Fill } = createSlotFill( 'BlockEditorURLPopoverLinkViewer' );
 
 function LinkViewerUrl( { url, urlLabel, className } ) {
 	const linkClassName = classnames(
@@ -33,7 +37,7 @@ function LinkViewerUrl( { url, urlLabel, className } ) {
 	);
 }
 
-export default function LinkViewer( {
+function LinkViewer( {
 	className,
 	linkClassName,
 	onEditLinkClick,
@@ -51,6 +55,11 @@ export default function LinkViewer( {
 		>
 			<LinkViewerUrl url={ url } urlLabel={ urlLabel } className={ linkClassName } />
 			{ onEditLinkClick && <Button icon="edit" label={ __( 'Edit' ) } onClick={ onEditLinkClick } /> }
+			<Slot fillProps={ useMemo( () => ( { url } ), [ url ] ) } />
 		</div>
 	);
 }
+
+LinkViewer.Fill = Fill;
+
+export default LinkViewer;

packages/edit-site/src/components/block-editor/index.js

@@ -9,6 +9,7 @@ import { parse, serialize } from '@wordpress/blocks';
 import {
 	BlockEditorProvider,
 	BlockEditorKeyboardShortcuts,
+	URLPopover,
 	BlockInspector,
 	WritingFlow,
 	ObserveTyping,
@@ -20,10 +21,11 @@ import {
  * Internal dependencies
  */
 import { useEditorContext } from '../editor';
+import NavigateToLink from '../navigate-to-link';
 import Sidebar from '../sidebar';
 
 export default function BlockEditor() {
-	const { settings: _settings } = useEditorContext();
+	const { settings: _settings, setSettings } = useEditorContext();
 	const canUserCreateMedia = useSelect( ( select ) => {
 		const _canUserCreateMedia = select( 'core' ).canUser( 'create', 'media' );
 		return _canUserCreateMedia || _canUserCreateMedia !== false;
@@ -66,6 +68,15 @@ export default function BlockEditor() {
 		},
 		[ setBlocks, _setContent ]
 	);
+	const setActiveTemplateId = useCallback(
+		( newTemplateId ) =>
+			setSettings( ( prevSettings ) => ( {
+				...prevSettings,
+				templateId: newTemplateId,
+				templateType: 'wp_template',
+			} ) ),
+		[]
+	);
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -74,6 +85,19 @@ export default function BlockEditor() {
 			onChange={ setContent }
 		>
 			<BlockEditorKeyboardShortcuts />
+			<URLPopover.LinkViewer.Fill>
+				{ useCallback(
+					( fillProps ) => (
+						<NavigateToLink
+							{ ...fillProps }
+							templateIds={ settings.templateIds }
+							activeId={ settings.templateId }
+							onActiveIdChange={ setActiveTemplateId }
+						/>
+					),
+					[ settings.templateIds, settings.templateId, setActiveTemplateId ]
+				) }
+			</URLPopover.LinkViewer.Fill>
 			<Sidebar.InspectorFill>
 				<BlockInspector />
 			</Sidebar.InspectorFill>

packages/edit-site/src/components/navigate-to-link/index.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { select } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Browser dependencies
+ */
+const { fetch } = window;
+
+export default function NavigateToLink( {
+	url,
+	templateIds,
+	activeId,
+	onActiveIdChange,
+} ) {
+	const [ templateId, setTemplateId ] = useState();
+	useEffect( () => {
+		const effect = async () => {
+			try {
+				const { success, data } = await fetch(
+					`${ url }?_wp-find-template`
+				).then( ( res ) => res.json() );
+				if ( success ) {
+					let newTemplateId = data.ID;
+					if ( newTemplateId === null ) {
+						const { getEntityRecord } = select( 'core' );
+						newTemplateId = templateIds
+							.map( ( id ) => getEntityRecord( 'postType', 'wp_template', id ) )
+							.find( ( template ) => template.slug === data.post_name ).id;
+					}
+					setTemplateId( newTemplateId );
+				} else {
+					throw new Error();
+				}
+			} catch ( err ) {
+				setTemplateId( null );
+			}
+		};
+		effect();
+	}, [ url, templateIds ] );
+	const onClick = useMemo( () => {
+		if ( ! templateId || templateId === activeId ) {
+			return null;
+		}
+		return () => onActiveIdChange( templateId );
+	}, [ templateId, activeId, onActiveIdChange ] );
+	return (
+		onClick && (
+			<Button
+				icon="welcome-write-blog"
+				label={ __( 'Edit Page Template' ) }
+				onClick={ onClick }
+			/>
+		)
+	);
+}