From d700ffea9fb686bf1a2a5438e16225fdeab3dc54 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Fri, 3 Dec 2021 12:19:17 +0100
Subject: [PATCH 01/17] `Navigator`: add basic history support

---
 packages/components/src/navigator/context.ts  |  6 ++-
 .../navigator-provider/component.tsx          | 44 ++++++++++++++++---
 .../navigator/navigator-screen/component.tsx  | 10 ++---
 .../components/src/navigator/stories/index.js | 10 ++---
 packages/components/src/navigator/types.ts    | 21 ++++-----
 .../components/src/navigator/use-navigator.ts |  8 ++--
 6 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/packages/components/src/navigator/context.ts b/packages/components/src/navigator/context.ts
index 17b26fb9c14ad5..cf326f7bc352b9 100644
--- a/packages/components/src/navigator/context.ts
+++ b/packages/components/src/navigator/context.ts
@@ -8,5 +8,9 @@ import { createContext } from '@wordpress/element';
  */
 import type { NavigatorContext as NavigatorContextType } from './types';
 
-const initialContextValue: NavigatorContextType = [ {}, () => {} ];
+const initialContextValue: NavigatorContextType = {
+	location: {},
+	push: () => {},
+	pop: () => {},
+};
 export const NavigatorContext = createContext( initialContextValue );
diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index df17ba55b05591..9f35ad954ce784 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -21,7 +21,11 @@ import {
 import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
-import type { NavigatorProviderProps, NavigatorPath } from '../types';
+import type {
+	NavigatorProviderProps,
+	NavigatorLocation,
+	NavigatorContext as NavigatorContextType,
+} from '../types';
 
 function NavigatorProvider(
 	props: WordPressComponentProps< NavigatorProviderProps, 'div' >,
@@ -34,9 +38,39 @@ function NavigatorProvider(
 		...otherProps
 	} = useContextSystem( props, 'NavigatorProvider' );
 
-	const [ path, setPath ] = useState< NavigatorPath >( {
-		path: initialPath,
-	} );
+	const [ locationHistory, setLocationHistory ] = useState<
+		NavigatorLocation[]
+	>( [
+		{
+			path: initialPath,
+		},
+	] );
+
+	const navigatorContextValue: NavigatorContextType = {
+		location: locationHistory[ locationHistory.length - 1 ],
+		push: ( path, options ) => {
+			setLocationHistory( [
+				...locationHistory,
+				{
+					path,
+					isBack: false,
+					navigationTriggerElement: options?.navigationTriggerElement,
+				},
+			] );
+		},
+		pop: () => {
+			if ( locationHistory.length > 1 ) {
+				setLocationHistory( [
+					...locationHistory.slice( 0, -2 ),
+					// Force the `isBack` flag to `true` when navigating back.
+					{
+						...locationHistory[ locationHistory.length - 2 ],
+						isBack: true,
+					},
+				] );
+			}
+		},
+	};
 
 	const cx = useCx();
 	const classes = useMemo(
@@ -47,7 +81,7 @@ function NavigatorProvider(
 
 	return (
 		<View ref={ forwardedRef } className={ classes } { ...otherProps }>
-			<NavigatorContext.Provider value={ [ path, setPath ] }>
+			<NavigatorContext.Provider value={ navigatorContextValue }>
 				{ children }
 			</NavigatorContext.Provider>
 		</View>
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 85631b0b5227a5..9590cf5711e652 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -46,8 +46,8 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	);
 
 	const prefersReducedMotion = useReducedMotion();
-	const [ currentPath ] = useContext( NavigatorContext );
-	const isMatch = currentPath.path === path;
+	const { location } = useContext( NavigatorContext );
+	const isMatch = location.path === path;
 	const ref = useFocusOnMount();
 
 	const cx = useCx();
@@ -96,8 +96,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	const initial = {
 		opacity: 0,
 		x:
-			( isRTL() && currentPath.isBack ) ||
-			( ! isRTL() && ! currentPath.isBack )
+			( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )
 				? 50
 				: -50,
 	};
@@ -105,8 +104,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 		delay: animationExitDelay,
 		opacity: 0,
 		x:
-			( ! isRTL() && currentPath.isBack ) ||
-			( isRTL() && ! currentPath.isBack )
+			( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )
 				? 50
 				: -50,
 		transition: {
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 97e527216eef38..6e04436804f303 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -20,12 +20,12 @@ export default {
 
 function NavigatorButton( { path, isBack = false, ...props } ) {
 	const navigator = useNavigator();
+
+	const handleOnClick = () =>
+		isBack ? navigator.pop() : navigator.push( path );
+
 	return (
-		<Button
-			variant="secondary"
-			onClick={ () => navigator.push( path, { isBack } ) }
-			{ ...props }
-		/>
+		<Button variant="secondary" onClick={ handleOnClick } { ...props } />
 	);
 }
 
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index acc5aecb840dff..2388e9c68a4b19 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -4,23 +4,24 @@
 // eslint-disable-next-line no-restricted-imports
 import type { ReactNode } from 'react';
 
-type NavigatorPathOptions = {
-	isBack?: boolean;
+type NavigateOptions = {
+	navigationTriggerElement?: unknown;
 };
 
-export type NavigatorPath = NavigatorPathOptions & {
+export type NavigatorLocation = {
+	isBack?: boolean;
 	path?: string;
+	navigationTriggerElement?: unknown;
 };
 
-export type NavigatorContext = [
-	NavigatorPath,
-	( path: NavigatorPath ) => void
-];
+export type NavigatorContext = {
+	location: NavigatorLocation;
+	push: ( path: string, options: NavigateOptions ) => void;
+	pop: () => void;
+};
 
 // Returned by the `useNavigator` hook
-export type Navigator = {
-	push: ( path: string, options: NavigatorPathOptions ) => void;
-};
+export type Navigator = NavigatorContext;
 
 export type NavigatorProviderProps = {
 	/**
diff --git a/packages/components/src/navigator/use-navigator.ts b/packages/components/src/navigator/use-navigator.ts
index 4d39de1fe5ceb4..5a425b695ba9c3 100644
--- a/packages/components/src/navigator/use-navigator.ts
+++ b/packages/components/src/navigator/use-navigator.ts
@@ -13,12 +13,12 @@ import type { Navigator } from './types';
  * Retrieves a `navigator` instance.
  */
 function useNavigator(): Navigator {
-	const [ , setPath ] = useContext( NavigatorContext );
+	const { location, push, pop } = useContext( NavigatorContext );
 
 	return {
-		push( path, options ) {
-			setPath( { path, ...options } );
-		},
+		location,
+		push,
+		pop,
 	};
 }
 

From 96f1d5fe2b1cb7067ea1d2e1bb5be67c966c63a0 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 8 Dec 2021 15:05:23 +0100
Subject: [PATCH 02/17] Update Navigator usage across the repo

---
 .../navigator-provider/component.tsx          | 15 +++++++++--
 .../src/components/preferences-modal/index.js | 25 +++++++------------
 .../components/global-styles/context-menu.js  |  2 +-
 .../src/components/global-styles/header.js    |  8 +++---
 .../global-styles/navigation-button.js        | 25 +++++++++++--------
 .../src/components/global-styles/palette.js   |  2 +-
 .../global-styles/screen-background-color.js  |  2 --
 .../global-styles/screen-block-list.js        |  3 +--
 .../components/global-styles/screen-block.js  |  2 +-
 .../global-styles/screen-color-palette.js     |  2 --
 .../components/global-styles/screen-colors.js |  3 +--
 .../components/global-styles/screen-layout.js |  6 +----
 .../global-styles/screen-link-color.js        |  2 --
 .../components/global-styles/screen-root.js   |  2 +-
 .../global-styles/screen-text-color.js        |  2 --
 .../screen-typography-element.js              |  4 ---
 .../global-styles/screen-typography.js        |  3 +--
 17 files changed, 48 insertions(+), 60 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 9f35ad954ce784..b9d20f757103f5 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -43,18 +43,29 @@ function NavigatorProvider(
 	>( [
 		{
 			path: initialPath,
+			isBack: false,
 		},
 	] );
 
 	const navigatorContextValue: NavigatorContextType = {
 		location: locationHistory[ locationHistory.length - 1 ],
 		push: ( path, options ) => {
+			const { navigationTriggerElement, ...restOptions } = options;
+
+			// The `navigationTriggerElement` needs to be applied on the current
+			// location, while the remaining options need to be applied on the
+			// incoming location
 			setLocationHistory( [
-				...locationHistory,
+				...locationHistory.slice( 0, -1 ),
+				// Force the `isBack` flag to `true` when navigating back.
+				{
+					...locationHistory[ locationHistory.length - 1 ],
+					navigationTriggerElement,
+				},
 				{
 					path,
 					isBack: false,
-					navigationTriggerElement: options?.navigationTriggerElement,
+					...restOptions,
 				},
 			] );
 		},
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index ccd323f3380386..09c36c7bd2875c 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -55,19 +55,14 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( {
-	as: Tag = Button,
-	path,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
-	return (
-		<Tag
-			onClick={ () => navigator.push( path, { isBack } ) }
-			{ ...props }
-		/>
-	);
+function NavigationButton( { as: Tag = Button, path, ...props } ) {
+	const { push } = useNavigator();
+	return <Tag onClick={ () => push( path ) } { ...props } />;
+}
+
+function NavigationBackButton( { as: Tag = Button, ...props } ) {
+	const { pop } = useNavigator();
+	return <Tag onClick={ pop } { ...props } />;
 }
 
 export default function PreferencesModal() {
@@ -376,12 +371,10 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationButton
-										path="/"
+									<NavigationBackButton
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}
-										isBack
 										aria-label={ __(
 											'Navigate to the previous view'
 										) }
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
index 70b33622ba5a4b..afed35c13ff6a7 100644
--- a/packages/edit-site/src/components/global-styles/context-menu.js
+++ b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -12,7 +12,7 @@ import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function ContextMenu( { name, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( name );
diff --git a/packages/edit-site/src/components/global-styles/header.js b/packages/edit-site/src/components/global-styles/header.js
index f380aa76330831..5bc5b539e11c99 100644
--- a/packages/edit-site/src/components/global-styles/header.js
+++ b/packages/edit-site/src/components/global-styles/header.js
@@ -14,15 +14,14 @@ import { chevronRight, chevronLeft, Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import NavigationButton from './navigation-button';
+import { NavigationBackButton } from './navigation-button';
 
-function ScreenHeader( { back, title, description } ) {
+function ScreenHeader( { title, description } ) {
 	return (
 		<VStack spacing={ 2 }>
 			<HStack spacing={ 2 }>
 				<View>
-					<NavigationButton
-						path={ back }
+					<NavigationBackButton
 						icon={
 							<Icon
 								icon={ isRTL() ? chevronRight : chevronLeft }
@@ -30,7 +29,6 @@ function ScreenHeader( { back, title, description } ) {
 							/>
 						}
 						size="small"
-						isBack
 						aria-label={ __( 'Navigate to the previous view' ) }
 					/>
 				</View>
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index c891a79302b4b7..6a92cde264047b 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -9,16 +9,9 @@ import {
 } from '@wordpress/components';
 import { Icon } from '@wordpress/icons';
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
+function GenericNavigationButton( { icon, children, ...props } ) {
 	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+		<Item { ...props }>
 			{ icon && (
 				<HStack justify="flex-start">
 					<FlexItem>
@@ -32,4 +25,16 @@ function NavigationButton( {
 	);
 }
 
-export default NavigationButton;
+function NavigationButton( { path, ...props } ) {
+	const { push } = useNavigator();
+	return (
+		<GenericNavigationButton onClick={ () => push( path ) } { ...props } />
+	);
+}
+
+function NavigationBackButton( { ...props } ) {
+	const { pop } = useNavigator();
+	return <GenericNavigationButton onClick={ pop } { ...props } />;
+}
+
+export { NavigationButton, NavigationBackButton };
diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
index 10fb3cbb048023..5a2385b3289dc9 100644
--- a/packages/edit-site/src/components/global-styles/palette.js
+++ b/packages/edit-site/src/components/global-styles/palette.js
@@ -17,7 +17,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import Subtitle from './subtitle';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useSetting } from './hooks';
 
 const EMPTY_COLORS = [];
diff --git a/packages/edit-site/src/components/global-styles/screen-background-color.js b/packages/edit-site/src/components/global-styles/screen-background-color.js
index d8328a16586d1a..b35b64d03b124e 100644
--- a/packages/edit-site/src/components/global-styles/screen-background-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-background-color.js
@@ -17,7 +17,6 @@ import {
 } from './hooks';
 
 function ScreenBackgroundColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -86,7 +85,6 @@ function ScreenBackgroundColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Background' ) }
 				description={ __(
 					'Set a background color or gradient for the whole site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
index 78267de7d18ab4..4b13f43b1588fc 100644
--- a/packages/edit-site/src/components/global-styles/screen-block-list.js
+++ b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -17,7 +17,7 @@ import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 
 function BlockMenuItem( { block } ) {
 	const hasTypographyPanel = useHasTypographyPanel( block.name );
@@ -48,7 +48,6 @@ function ScreenBlockList() {
 	return (
 		<>
 			<ScreenHeader
-				back="/"
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js
index 9c1200ad1ddae0..10455855d97e58 100644
--- a/packages/edit-site/src/components/global-styles/screen-block.js
+++ b/packages/edit-site/src/components/global-styles/screen-block.js
@@ -14,7 +14,7 @@ function ScreenBlock( { name } ) {
 
 	return (
 		<>
-			<ScreenHeader back="/blocks" title={ blockType.title } />
+			<ScreenHeader title={ blockType.title } />
 			<ContextMenu parentMenu={ '/blocks/' + name } name={ name } />
 		</>
 	);
diff --git a/packages/edit-site/src/components/global-styles/screen-color-palette.js b/packages/edit-site/src/components/global-styles/screen-color-palette.js
index 033d6427b7d2fc..554c16cbb83c14 100644
--- a/packages/edit-site/src/components/global-styles/screen-color-palette.js
+++ b/packages/edit-site/src/components/global-styles/screen-color-palette.js
@@ -17,12 +17,10 @@ import ScreenHeader from './header';
 
 function ScreenColorPalette( { name } ) {
 	const [ currentTab, setCurrentTab ] = useState( 'solid' );
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Palette' ) }
 				description={ __(
 					'Palettes are used to provide default color options for blocks and various design tools. Here you can edit the colors with their labels.'
diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
index 0480664845ae27..77afba1ab514be 100644
--- a/packages/edit-site/src/components/global-styles/screen-colors.js
+++ b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -15,7 +15,7 @@ import {
  */
 import ScreenHeader from './header';
 import Palette from './palette';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
 import Subtitle from './subtitle';
 
@@ -93,7 +93,6 @@ function ScreenColors( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Colors' ) }
 				description={ __(
 					'Manage palettes and the default color of different global elements on the site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js
index 36d9b2444ee67c..74c7ac1851e1ee 100644
--- a/packages/edit-site/src/components/global-styles/screen-layout.js
+++ b/packages/edit-site/src/components/global-styles/screen-layout.js
@@ -11,16 +11,12 @@ import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
 import ScreenHeader from './header';
 
 function ScreenLayout( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 
 	return (
 		<>
-			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
-				title={ __( 'Layout' ) }
-			/>
+			<ScreenHeader title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel name={ name } /> }
 			{ hasBorderPanel && <BorderPanel name={ name } /> }
 		</>
diff --git a/packages/edit-site/src/components/global-styles/screen-link-color.js b/packages/edit-site/src/components/global-styles/screen-link-color.js
index 6d033a77f2ecd6..d939bf000ef9e5 100644
--- a/packages/edit-site/src/components/global-styles/screen-link-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-link-color.js
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenLinkColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -47,7 +46,6 @@ function ScreenLinkColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Links' ) }
 				description={ __(
 					'Set the default color used for links across the site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
index 26fbf29cf9810d..7761407f0363d4 100644
--- a/packages/edit-site/src/components/global-styles/screen-root.js
+++ b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -17,7 +17,7 @@ import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import StylesPreview from './preview';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import ContextMenu from './context-menu';
 
 function ScreenRoot() {
diff --git a/packages/edit-site/src/components/global-styles/screen-text-color.js b/packages/edit-site/src/components/global-styles/screen-text-color.js
index 2ab386641b788d..4c212adfe33475 100644
--- a/packages/edit-site/src/components/global-styles/screen-text-color.js
+++ b/packages/edit-site/src/components/global-styles/screen-text-color.js
@@ -16,7 +16,6 @@ import {
 } from './hooks';
 
 function ScreenTextColor( { name } ) {
-	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ areCustomSolidsEnabled ] = useSetting( 'color.custom', name );
@@ -39,7 +38,6 @@ function ScreenTextColor( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu + '/colors' }
 				title={ __( 'Text' ) }
 				description={ __(
 					'Set the default color used for text across the site.'
diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js
index 65c49255cb13e3..46b53a3a7b3d31 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography-element.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js
@@ -21,13 +21,9 @@ const elements = {
 };
 
 function ScreenTypographyElement( { name, element } ) {
-	const parentMenu =
-		name === undefined ? '/typography' : '/blocks/' + name + '/typography';
-
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu }
 				title={ elements[ element ].title }
 				description={ elements[ element ].description }
 			/>
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index b2fe028c2de54f..f54e8694e34a18 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -13,7 +13,7 @@ import {
  * Internal dependencies
  */
 import ScreenHeader from './header';
-import NavigationButton from './navigation-button';
+import { NavigationButton } from './navigation-button';
 import { useStyle } from './hooks';
 import Subtitle from './subtitle';
 import TypographyPanel from './typography-panel';
@@ -72,7 +72,6 @@ function ScreenTypography( { name } ) {
 	return (
 		<>
 			<ScreenHeader
-				back={ parentMenu ? parentMenu : '/' }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'

From 533e61f6eb1bdf0bd0c64f8e12ec749be543659b Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 8 Dec 2021 16:07:49 +0100
Subject: [PATCH 03/17] Typo

---
 .../edit-site/src/components/global-styles/screen-typography.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index f54e8694e34a18..d3b3cada3c680e 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -100,7 +100,7 @@ function ScreenTypography( { name } ) {
 				</div>
 			) }
 
-			{ /* no typogrpahy elements support yet for blocks */ }
+			{ /* no typography elements support yet for blocks */ }
 			{ !! name && <TypographyPanel name={ name } element="text" /> }
 		</>
 	);

From 092acf5129ec4d73e40c48d427cf81ae4ad038bc Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 8 Dec 2021 16:26:25 +0100
Subject: [PATCH 04/17] Rename `navigationTriggerElement` to
 `focusRestorationSelector`

---
 .../src/navigator/navigator-provider/component.tsx          | 6 +++---
 packages/components/src/navigator/types.ts                  | 5 ++---
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index b9d20f757103f5..f8fb3d3d02337b 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -50,9 +50,9 @@ function NavigatorProvider(
 	const navigatorContextValue: NavigatorContextType = {
 		location: locationHistory[ locationHistory.length - 1 ],
 		push: ( path, options ) => {
-			const { navigationTriggerElement, ...restOptions } = options;
+			const { focusRestorationSelector, ...restOptions } = options;
 
-			// The `navigationTriggerElement` needs to be applied on the current
+			// The `focusRestorationSelector` needs to be applied on the current
 			// location, while the remaining options need to be applied on the
 			// incoming location
 			setLocationHistory( [
@@ -60,7 +60,7 @@ function NavigatorProvider(
 				// Force the `isBack` flag to `true` when navigating back.
 				{
 					...locationHistory[ locationHistory.length - 1 ],
-					navigationTriggerElement,
+					focusRestorationSelector,
 				},
 				{
 					path,
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 2388e9c68a4b19..e8d97146ef5411 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -5,13 +5,12 @@
 import type { ReactNode } from 'react';
 
 type NavigateOptions = {
-	navigationTriggerElement?: unknown;
+	focusRestorationSelector?: string;
 };
 
-export type NavigatorLocation = {
+export type NavigatorLocation = NavigateOptions & {
 	isBack?: boolean;
 	path?: string;
-	navigationTriggerElement?: unknown;
 };
 
 export type NavigatorContext = {

From 7f8339f7187e73495a54db5769c49574aa6c2483 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 9 Dec 2021 16:24:14 +0100
Subject: [PATCH 05/17] Add focus restoration on navigating back

---
 .../navigator-provider/component.tsx          |  1 -
 .../navigator/navigator-screen/component.tsx  | 53 +++++++++++++++----
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index f8fb3d3d02337b..3404de70496a52 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -57,7 +57,6 @@ function NavigatorProvider(
 			// incoming location
 			setLocationHistory( [
 				...locationHistory.slice( 0, -1 ),
-				// Force the `isBack` flag to `true` when navigating back.
 				{
 					...locationHistory[ locationHistory.length - 1 ],
 					focusRestorationSelector,
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 9590cf5711e652..228e2f5e4acc53 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -10,8 +10,15 @@ import { css } from '@emotion/react';
 /**
  * WordPress dependencies
  */
-import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
-import { useReducedMotion, useFocusOnMount } from '@wordpress/compose';
+import { focus } from '@wordpress/dom';
+import {
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+	useRef,
+} from '@wordpress/element';
+import { useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
 /**
@@ -48,7 +55,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	const prefersReducedMotion = useReducedMotion();
 	const { location } = useContext( NavigatorContext );
 	const isMatch = location.path === path;
-	const ref = useFocusOnMount();
+	const wrapperRef = useRef< HTMLDivElement >( null );
 
 	const cx = useCx();
 	const classes = useMemo(
@@ -65,12 +72,40 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 		[ className ]
 	);
 
-	// This flag is used to only apply the focus on mount when the actual path changes.
-	// It avoids the focus to happen on the first render.
-	const [ hasPathChanged, setHasPathChanged ] = useState( false );
+	// Focus restoration
+	const [ isFirstRender, setIsFirstRender ] = useState( true );
 	useEffect( () => {
-		setHasPathChanged( true );
-	}, [ path ] );
+		// Only attempt to restore focus:
+		// - after the first render (to avoid moving focus on page load)
+		// - when the screen becomes visible
+		// - the wrapper ref has been assigned
+		if ( isFirstRender || ! isMatch || ! wrapperRef.current ) {
+			setIsFirstRender( false );
+			return;
+		}
+
+		let elementToFocus: HTMLElement | null = null;
+
+		// When navigating back, if a selector is provided, use it to look for the
+		// target element (assumed to be a node inside the current NavigatorScreen)
+		if ( location.isBack && location.focusRestorationSelector ) {
+			elementToFocus = wrapperRef.current.querySelector(
+				location.focusRestorationSelector
+			);
+		}
+
+		// If the previous query didn't run or find any element to focus, fallback
+		// to the first tabbable element in the screen (or the screen itself).
+		if ( ! elementToFocus ) {
+			const firstTabbable = ( focus.tabbable.find(
+				wrapperRef.current
+			) as HTMLElement[] )[ 0 ];
+
+			elementToFocus = firstTabbable ?? wrapperRef.current;
+		}
+
+		elementToFocus.focus();
+	}, [ isFirstRender, isMatch ] );
 
 	if ( ! isMatch ) {
 		return null;
@@ -121,7 +156,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 	return (
 		<motion.div
-			ref={ hasPathChanged ? ref : undefined }
+			ref={ wrapperRef }
 			className={ classes }
 			{ ...otherProps }
 			{ ...animatedProps }

From 7b8674329dfc214ebe092bc89afed637223464d5 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 9 Dec 2021 16:25:10 +0100
Subject: [PATCH 06/17] Update Navigator stories to work with focus restoration

---
 .../components/src/navigator/stories/index.js | 39 ++++++++++++-------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 6e04436804f303..6a2302b31f6031 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -18,17 +18,34 @@ export default {
 	component: NavigatorProvider,
 };
 
-function NavigatorButton( { path, isBack = false, ...props } ) {
-	const navigator = useNavigator();
+function NavigatorButton( { path, ...props } ) {
+	const { push } = useNavigator();
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
 
-	const handleOnClick = () =>
-		isBack ? navigator.pop() : navigator.push( path );
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const buttonProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
 
 	return (
-		<Button variant="secondary" onClick={ handleOnClick } { ...props } />
+		<Button
+			variant="secondary"
+			onClick={ () =>
+				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+			}
+			{ ...buttonProps }
+		/>
 	);
 }
 
+function NavigatorBackButton( { ...props } ) {
+	const { pop } = useNavigator();
+	return <Button variant="secondary" onClick={ pop } { ...props } />;
+}
+
 const MyNavigation = () => {
 	const cx = useCx();
 	return (
@@ -74,9 +91,7 @@ const MyNavigation = () => {
 				<Card>
 					<CardBody>
 						<p>This is the child screen.</p>
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 					</CardBody>
 				</Card>
 			</NavigatorScreen>
@@ -84,9 +99,7 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/overflow-child">
 				<Card>
 					<CardBody>
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 						<div
 							className={ cx(
 								css( `
@@ -114,9 +127,7 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/stickies">
 				<Card>
 					<Sticky as={ CardHeader } z="2">
-						<NavigatorButton path="/" isBack>
-							Go back
-						</NavigatorButton>
+						<NavigatorBackButton>Go back</NavigatorBackButton>
 					</Sticky>
 					<CardBody>
 						<Sticky top="69px" colors="papayawhip/peachpuff">

From 1a773b9e5e65486494828150e6dd023820183075 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 9 Dec 2021 18:38:18 +0100
Subject: [PATCH 07/17] Add focus restoration support to Preferences Modal and
 GLobal Styles sidebar

---
 .../src/components/preferences-modal/index.js | 20 ++++++++++++++++++-
 .../global-styles/navigation-button.js        | 18 ++++++++++++++++-
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 09c36c7bd2875c..8c06db633ec9b5 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -57,7 +57,25 @@ const PREFERENCES_MENU = 'preferences-menu';
 
 function NavigationButton( { as: Tag = Button, path, ...props } ) {
 	const { push } = useNavigator();
-	return <Tag onClick={ () => push( path ) } { ...props } />;
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const tagProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
+	return (
+		<Tag
+			onClick={ () =>
+				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+			}
+			{ ...tagProps }
+		/>
+	);
 }
 
 function NavigationBackButton( { as: Tag = Button, ...props } ) {
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 6a92cde264047b..f8aae68291119e 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -27,8 +27,24 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 
 function NavigationButton( { path, ...props } ) {
 	const { push } = useNavigator();
+
+	const dataAttrName = 'data-navigator-focusable-id';
+	const dataAttrValue = path;
+
+	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+
+	const buttonProps = {
+		...props,
+		[ dataAttrName ]: dataAttrValue,
+	};
+
 	return (
-		<GenericNavigationButton onClick={ () => push( path ) } { ...props } />
+		<GenericNavigationButton
+			onClick={ () =>
+				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+			}
+			{ ...buttonProps }
+		/>
 	);
 }
 

From c78e792745acc091229914da168065c7194f50b3 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 11:13:50 +0100
Subject: [PATCH 08/17] Add `isInitial` property to the `location` object, use
 it instead of `isFirstRender` in the `NavigatorScreen`

---
 .../navigator-provider/component.tsx          |  3 +++
 .../navigator/navigator-screen/component.tsx  | 20 +++++++------------
 packages/components/src/navigator/types.ts    |  1 +
 3 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 3404de70496a52..4233ed6b6797b6 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -44,6 +44,7 @@ function NavigatorProvider(
 		{
 			path: initialPath,
 			isBack: false,
+			isInitial: true,
 		},
 	] );
 
@@ -59,11 +60,13 @@ function NavigatorProvider(
 				...locationHistory.slice( 0, -1 ),
 				{
 					...locationHistory[ locationHistory.length - 1 ],
+					isBack: false,
 					focusRestorationSelector,
 				},
 				{
 					path,
 					isBack: false,
+					isInitial: false,
 					...restOptions,
 				},
 			] );
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 228e2f5e4acc53..e0b5bfe581723f 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -11,13 +11,7 @@ import { css } from '@emotion/react';
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import {
-	useContext,
-	useEffect,
-	useMemo,
-	useState,
-	useRef,
-} from '@wordpress/element';
+import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
 import { useReducedMotion } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 
@@ -73,14 +67,14 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 	);
 
 	// Focus restoration
-	const [ isFirstRender, setIsFirstRender ] = useState( true );
+	const isInitialLocation = location.isInitial && ! location.isBack;
+
 	useEffect( () => {
 		// Only attempt to restore focus:
-		// - after the first render (to avoid moving focus on page load)
+		// - if the current location is not the initial one (to avoid moving focus on page load)
 		// - when the screen becomes visible
-		// - the wrapper ref has been assigned
-		if ( isFirstRender || ! isMatch || ! wrapperRef.current ) {
-			setIsFirstRender( false );
+		// - if the wrapper ref has been assigned
+		if ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {
 			return;
 		}
 
@@ -105,7 +99,7 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 		}
 
 		elementToFocus.focus();
-	}, [ isFirstRender, isMatch ] );
+	}, [ isInitialLocation, isMatch ] );
 
 	if ( ! isMatch ) {
 		return null;
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index e8d97146ef5411..b2a55e8da7ad7b 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -9,6 +9,7 @@ type NavigateOptions = {
 };
 
 export type NavigatorLocation = NavigateOptions & {
+	isInitial?: boolean;
 	isBack?: boolean;
 	path?: string;
 };

From af8a6dd0cbf3e639bef5edf4002d86292d9bf3c2 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 11:39:47 +0100
Subject: [PATCH 09/17] Wrap `push` and `pop` in `useCallback`

---
 .../navigator-provider/component.tsx          | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 4233ed6b6797b6..93ab861e0ca106 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -48,9 +48,8 @@ function NavigatorProvider(
 		},
 	] );
 
-	const navigatorContextValue: NavigatorContextType = {
-		location: locationHistory[ locationHistory.length - 1 ],
-		push: ( path, options ) => {
+	const push = useCallback(
+		( path, options ) => {
 			const { focusRestorationSelector, ...restOptions } = options;
 
 			// The `focusRestorationSelector` needs to be applied on the current
@@ -71,18 +70,26 @@ function NavigatorProvider(
 				},
 			] );
 		},
-		pop: () => {
-			if ( locationHistory.length > 1 ) {
-				setLocationHistory( [
-					...locationHistory.slice( 0, -2 ),
-					// Force the `isBack` flag to `true` when navigating back.
-					{
-						...locationHistory[ locationHistory.length - 2 ],
-						isBack: true,
-					},
-				] );
-			}
-		},
+		[ locationHistory ]
+	);
+
+	const pop = useCallback( () => {
+		if ( locationHistory.length > 1 ) {
+			setLocationHistory( [
+				...locationHistory.slice( 0, -2 ),
+				// Force the `isBack` flag to `true` when navigating back.
+				{
+					...locationHistory[ locationHistory.length - 2 ],
+					isBack: true,
+				},
+			] );
+		}
+	}, [ locationHistory ] );
+
+	const navigatorContextValue: NavigatorContextType = {
+		location: locationHistory[ locationHistory.length - 1 ],
+		push,
+		pop,
 	};
 
 	const cx = useCx();

From 94eb58cb1ce4767abbebef88c9deda12b3b694c8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 11:42:54 +0100
Subject: [PATCH 10/17] Rename `focusRestorationSelector` to
 `focusTargetSelector`

---
 .../src/navigator/navigator-provider/component.tsx          | 6 +++---
 .../components/src/navigator/navigator-screen/component.tsx | 4 ++--
 packages/components/src/navigator/stories/index.js          | 2 +-
 packages/components/src/navigator/types.ts                  | 2 +-
 .../edit-post/src/components/preferences-modal/index.js     | 2 +-
 .../src/components/global-styles/navigation-button.js       | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 93ab861e0ca106..0d9cc269bf259d 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -50,9 +50,9 @@ function NavigatorProvider(
 
 	const push = useCallback(
 		( path, options ) => {
-			const { focusRestorationSelector, ...restOptions } = options;
+			const { focusTargetSelector, ...restOptions } = options;
 
-			// The `focusRestorationSelector` needs to be applied on the current
+			// The `focusTargetSelector` needs to be applied on the current
 			// location, while the remaining options need to be applied on the
 			// incoming location
 			setLocationHistory( [
@@ -60,7 +60,7 @@ function NavigatorProvider(
 				{
 					...locationHistory[ locationHistory.length - 1 ],
 					isBack: false,
-					focusRestorationSelector,
+					focusTargetSelector,
 				},
 				{
 					path,
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index e0b5bfe581723f..20de630c20cfb6 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -82,9 +82,9 @@ function NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {
 
 		// When navigating back, if a selector is provided, use it to look for the
 		// target element (assumed to be a node inside the current NavigatorScreen)
-		if ( location.isBack && location.focusRestorationSelector ) {
+		if ( location.isBack && location.focusTargetSelector ) {
 			elementToFocus = wrapperRef.current.querySelector(
-				location.focusRestorationSelector
+				location.focusTargetSelector
 			);
 		}
 
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 6a2302b31f6031..899fbf890499bd 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -34,7 +34,7 @@ function NavigatorButton( { path, ...props } ) {
 		<Button
 			variant="secondary"
 			onClick={ () =>
-				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+				push( path, { focusTargetSelector: dataAttrCssSelector } )
 			}
 			{ ...buttonProps }
 		/>
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index b2a55e8da7ad7b..411fe5cc41797b 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -5,7 +5,7 @@
 import type { ReactNode } from 'react';
 
 type NavigateOptions = {
-	focusRestorationSelector?: string;
+	focusTargetSelector?: string;
 };
 
 export type NavigatorLocation = NavigateOptions & {
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 8c06db633ec9b5..22d74c7e0158a1 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -71,7 +71,7 @@ function NavigationButton( { as: Tag = Button, path, ...props } ) {
 	return (
 		<Tag
 			onClick={ () =>
-				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+				push( path, { focusTargetSelector: dataAttrCssSelector } )
 			}
 			{ ...tagProps }
 		/>
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index f8aae68291119e..4d383386840c29 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -41,7 +41,7 @@ function NavigationButton( { path, ...props } ) {
 	return (
 		<GenericNavigationButton
 			onClick={ () =>
-				push( path, { focusRestorationSelector: dataAttrCssSelector } )
+				push( path, { focusTargetSelector: dataAttrCssSelector } )
 			}
 			{ ...buttonProps }
 		/>

From 3af43853704f50508b36cddd63500178a24b856e Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 20:10:26 +0100
Subject: [PATCH 11/17] Make sure that `isInitial` and `isBack` cannot be
 overridden when pushing a new location

---
 .../src/navigator/navigator-provider/component.tsx          | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 0d9cc269bf259d..7a0a994b1c47d0 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -48,7 +48,7 @@ function NavigatorProvider(
 		},
 	] );
 
-	const push = useCallback(
+	const push: NavigatorContextType[ 'push' ] = useCallback(
 		( path, options ) => {
 			const { focusTargetSelector, ...restOptions } = options;
 
@@ -63,17 +63,17 @@ function NavigatorProvider(
 					focusTargetSelector,
 				},
 				{
+					...restOptions,
 					path,
 					isBack: false,
 					isInitial: false,
-					...restOptions,
 				},
 			] );
 		},
 		[ locationHistory ]
 	);
 
-	const pop = useCallback( () => {
+	const pop: NavigatorContextType[ 'pop' ] = useCallback( () => {
 		if ( locationHistory.length > 1 ) {
 			setLocationHistory( [
 				...locationHistory.slice( 0, -2 ),

From ba08a42afea655a768547cff287c659a602dc363 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 22:47:02 +0100
Subject: [PATCH 12/17] Add `NavigatorLink` and `NavigatorBackLink`, replace
 usages across codebase

---
 packages/components/src/index.js              |  2 +
 packages/components/src/navigator/index.ts    |  2 +
 .../navigator/navigator-back-link/README.md   | 19 +++++
 .../navigator-back-link/component.tsx         | 65 +++++++++++++++++
 .../navigator/navigator-back-link/index.ts    |  1 +
 .../src/navigator/navigator-link/README.md    | 19 +++++
 .../navigator/navigator-link/component.tsx    | 72 +++++++++++++++++++
 .../src/navigator/navigator-link/index.ts     |  1 +
 .../components/src/navigator/stories/index.js | 35 +++------
 packages/components/src/navigator/types.ts    | 35 +++++++++
 .../src/components/preferences-modal/index.js | 54 +++++++-------
 .../global-styles/navigation-button.js        | 31 ++------
 12 files changed, 260 insertions(+), 76 deletions(-)
 create mode 100644 packages/components/src/navigator/navigator-back-link/README.md
 create mode 100644 packages/components/src/navigator/navigator-back-link/component.tsx
 create mode 100644 packages/components/src/navigator/navigator-back-link/index.ts
 create mode 100644 packages/components/src/navigator/navigator-link/README.md
 create mode 100644 packages/components/src/navigator/navigator-link/component.tsx
 create mode 100644 packages/components/src/navigator/navigator-link/index.ts

diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 7951653ca10127..c6932a4b5cb08d 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -100,6 +100,8 @@ export { default as __experimentalNavigationMenu } from './navigation/menu';
 export {
 	NavigatorProvider as __experimentalNavigatorProvider,
 	NavigatorScreen as __experimentalNavigatorScreen,
+	NavigatorLink as __experimentalNavigatorLink,
+	NavigatorBackLink as __experimentalNavigatorBackLink,
 	useNavigator as __experimentalUseNavigator,
 } from './navigator';
 export { default as Notice } from './notice';
diff --git a/packages/components/src/navigator/index.ts b/packages/components/src/navigator/index.ts
index b30e5cdf396de8..29e27f7e23c693 100644
--- a/packages/components/src/navigator/index.ts
+++ b/packages/components/src/navigator/index.ts
@@ -1,3 +1,5 @@
 export { default as NavigatorProvider } from './navigator-provider';
 export { default as NavigatorScreen } from './navigator-screen';
+export { default as NavigatorLink } from './navigator-link';
+export { default as NavigatorBackLink } from './navigator-back-link';
 export { default as useNavigator } from './use-navigator';
diff --git a/packages/components/src/navigator/navigator-back-link/README.md b/packages/components/src/navigator/navigator-back-link/README.md
new file mode 100644
index 00000000000000..ca98894f56209a
--- /dev/null
+++ b/packages/components/src/navigator/navigator-back-link/README.md
@@ -0,0 +1,19 @@
+# `NavigatorBackLink`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+**TODO**
+
+The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.
+
+## Usage
+
+**TODO**
+
+## Props
+
+The component accepts the following props:
+
+**TODO**
diff --git a/packages/components/src/navigator/navigator-back-link/component.tsx b/packages/components/src/navigator/navigator-back-link/component.tsx
new file mode 100644
index 00000000000000..7b99077c4c334c
--- /dev/null
+++ b/packages/components/src/navigator/navigator-back-link/component.tsx
@@ -0,0 +1,65 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../../ui/context';
+import { View } from '../../view';
+import useNavigator from '../use-navigator';
+import type { NavigatorBackLinkProps } from '../types';
+
+function NavigatorBackLink(
+	props: WordPressComponentProps< NavigatorBackLinkProps, 'button' >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		children,
+		onClick,
+		as = 'button',
+		...otherProps
+	} = useContextSystem( props, 'NavigatorBackLink' );
+
+	const { pop } = useNavigator();
+	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			pop();
+			onClick?.( e );
+		},
+		[ pop, onClick ]
+	);
+
+	return (
+		<View
+			as={ as }
+			ref={ forwardedRef }
+			onClick={ handleClick }
+			{ ...otherProps }
+		>
+			{ children }
+		</View>
+	);
+}
+
+/**
+ * TODO: add example
+ */
+const ConnectedNavigatorBackLink = contextConnect(
+	NavigatorBackLink,
+	'NavigatorBackLink'
+);
+
+export default ConnectedNavigatorBackLink;
diff --git a/packages/components/src/navigator/navigator-back-link/index.ts b/packages/components/src/navigator/navigator-back-link/index.ts
new file mode 100644
index 00000000000000..b404d7fd44a81a
--- /dev/null
+++ b/packages/components/src/navigator/navigator-back-link/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/packages/components/src/navigator/navigator-link/README.md b/packages/components/src/navigator/navigator-link/README.md
new file mode 100644
index 00000000000000..7c40918859dbe9
--- /dev/null
+++ b/packages/components/src/navigator/navigator-link/README.md
@@ -0,0 +1,19 @@
+# `NavigatorLink`
+
+<div class="callout callout-alert">
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+</div>
+
+**TODO**
+
+The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.
+
+## Usage
+
+**TODO**
+
+## Props
+
+The component accepts the following props:
+
+**TODO**
diff --git a/packages/components/src/navigator/navigator-link/component.tsx b/packages/components/src/navigator/navigator-link/component.tsx
new file mode 100644
index 00000000000000..61b169ca4a6244
--- /dev/null
+++ b/packages/components/src/navigator/navigator-link/component.tsx
@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import type { Ref } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	contextConnect,
+	useContextSystem,
+	WordPressComponentProps,
+} from '../../ui/context';
+import { View } from '../../view';
+import useNavigator from '../use-navigator';
+import type { NavigatorLinkProps } from '../types';
+
+const defaultAttributeName = 'data-navigator-focusable-id';
+const defaultSelectorFactory = ( attrName: string, attrValue: string ) =>
+	`[${ attrName }="${ attrValue }"]`;
+
+function NavigatorLink(
+	props: WordPressComponentProps< NavigatorLinkProps, 'a' >,
+	forwardedRef: Ref< any >
+) {
+	const {
+		path,
+		children,
+		onClick,
+		as = 'button',
+		attributeName = defaultAttributeName,
+		selectorFactory = defaultSelectorFactory,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorLink' );
+
+	const { push } = useNavigator();
+	const focusTargetSelector = selectorFactory( attributeName, path );
+	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			push( path, { focusTargetSelector } );
+			onClick?.( e );
+		},
+		[ push, selectorFactory, onClick ]
+	);
+
+	const linkProps = { [ attributeName ]: path, path, ...otherProps };
+
+	return (
+		<View
+			as={ as }
+			ref={ forwardedRef }
+			onClick={ handleClick }
+			{ ...linkProps }
+		>
+			{ children }
+		</View>
+	);
+}
+
+/**
+ * TODO: add example
+ */
+const ConnectedNavigatorLink = contextConnect( NavigatorLink, 'NavigatorLink' );
+
+export default ConnectedNavigatorLink;
diff --git a/packages/components/src/navigator/navigator-link/index.ts b/packages/components/src/navigator/navigator-link/index.ts
new file mode 100644
index 00000000000000..b404d7fd44a81a
--- /dev/null
+++ b/packages/components/src/navigator/navigator-link/index.ts
@@ -0,0 +1 @@
+export { default } from './component';
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 899fbf890499bd..206a89e7397097 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -11,39 +11,24 @@ import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
 import { Flyout } from '../../flyout';
 import { useCx } from '../../utils/hooks/use-cx';
-import { NavigatorProvider, NavigatorScreen, useNavigator } from '../';
+import {
+	NavigatorProvider,
+	NavigatorScreen,
+	NavigatorLink,
+	NavigatorBackLink,
+} from '../';
 
 export default {
 	title: 'Components (Experimental)/Navigator',
 	component: NavigatorProvider,
 };
 
-function NavigatorButton( { path, ...props } ) {
-	const { push } = useNavigator();
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<Button
-			variant="secondary"
-			onClick={ () =>
-				push( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...buttonProps }
-		/>
-	);
+function NavigatorButton( props ) {
+	return <NavigatorLink as={ Button } variant="secondary" { ...props } />;
 }
 
-function NavigatorBackButton( { ...props } ) {
-	const { pop } = useNavigator();
-	return <Button variant="secondary" onClick={ pop } { ...props } />;
+function NavigatorBackButton( props ) {
+	return <NavigatorBackLink as={ Button } variant="secondary" { ...props } />;
 }
 
 const MyNavigation = () => {
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 411fe5cc41797b..df7fe50a222fbb 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -44,3 +44,38 @@ export type NavigatorScreenProps = {
 	 */
 	children: ReactNode;
 };
+
+export type NavigatorBackLinkProps = {
+	/**
+	 * The children elements.
+	 */
+	children: ReactNode;
+	/**
+	 * The callback called in response to a `click` event.
+	 */
+	onClick?: React.MouseEventHandler< HTMLElement >;
+};
+
+export type NavigatorLinkProps = NavigatorBackLinkProps & {
+	/**
+	 * The path to navigate to.
+	 */
+	path: string;
+	/**
+	 * The HTML attribute used to identify the `NavigatorLink`, which is used
+	 * by `Navigator` to restore focus.
+	 *
+	 * @default 'data-navigator-focusable-id'
+	 */
+	attributeName?: string;
+	/**
+	 * A function that generates the CSS selector used ny `Navigator` when
+	 * restoring focus.
+	 *
+	 * @default ( attrName, attrValue ) => `[${ attrName }="${ attrValue }"]`;
+	 */
+	selectorFactory?: (
+		attributeName: string,
+		attributeValue: string
+	) => string;
+};
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 22d74c7e0158a1..662f417c9cda25 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -9,7 +9,8 @@ import { get } from 'lodash';
 import {
 	__experimentalNavigatorProvider as NavigatorProvider,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
+	__experimentalNavigatorLink as NavigatorLink,
+	__experimentalNavigatorBackLink as NavigatorBackLink,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
@@ -55,33 +56,33 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-function NavigationButton( { as: Tag = Button, path, ...props } ) {
-	const { push } = useNavigator();
+// function NavigationButton( { as: Tag = Button, path, ...props } ) {
+// 	const { push } = useNavigator();
 
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
+// 	const dataAttrName = 'data-navigator-focusable-id';
+// 	const dataAttrValue = path;
 
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
+// 	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
 
-	const tagProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
+// 	const tagProps = {
+// 		...props,
+// 		[ dataAttrName ]: dataAttrValue,
+// 	};
 
-	return (
-		<Tag
-			onClick={ () =>
-				push( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...tagProps }
-		/>
-	);
-}
+// 	return (
+// 		<Tag
+// 			onClick={ () =>
+// 				push( path, { focusTargetSelector: dataAttrCssSelector } )
+// 			}
+// 			{ ...tagProps }
+// 		/>
+// 	);
+// }
 
-function NavigationBackButton( { as: Tag = Button, ...props } ) {
-	const { pop } = useNavigator();
-	return <Tag onClick={ pop } { ...props } />;
-}
+// function NavigationBackButton( { as: Tag = Button, ...props } ) {
+// 	const { pop } = useNavigator();
+// 	return <Tag onClick={ pop } { ...props } />;
+// }
 
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -347,7 +348,7 @@ export default function PreferencesModal() {
 							<ItemGroup>
 								{ tabs.map( ( tab ) => {
 									return (
-										<NavigationButton
+										<NavigatorLink
 											key={ tab.name }
 											path={ tab.name }
 											as={ Item }
@@ -369,7 +370,7 @@ export default function PreferencesModal() {
 													/>
 												</FlexItem>
 											</HStack>
-										</NavigationButton>
+										</NavigatorLink>
 									);
 								} ) }
 							</ItemGroup>
@@ -389,7 +390,8 @@ export default function PreferencesModal() {
 									size="small"
 									gap="6"
 								>
-									<NavigationBackButton
+									<NavigatorBackLink
+										as={ Button }
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}
diff --git a/packages/edit-site/src/components/global-styles/navigation-button.js b/packages/edit-site/src/components/global-styles/navigation-button.js
index 4d383386840c29..b6f1f821cd870e 100644
--- a/packages/edit-site/src/components/global-styles/navigation-button.js
+++ b/packages/edit-site/src/components/global-styles/navigation-button.js
@@ -2,7 +2,8 @@
  * WordPress dependencies
  */
 import {
-	__experimentalUseNavigator as useNavigator,
+	__experimentalNavigatorLink as NavigatorLink,
+	__experimentalNavigatorBackLink as NavigatorBackLink,
 	__experimentalItem as Item,
 	FlexItem,
 	__experimentalHStack as HStack,
@@ -25,32 +26,12 @@ function GenericNavigationButton( { icon, children, ...props } ) {
 	);
 }
 
-function NavigationButton( { path, ...props } ) {
-	const { push } = useNavigator();
-
-	const dataAttrName = 'data-navigator-focusable-id';
-	const dataAttrValue = path;
-
-	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-	const buttonProps = {
-		...props,
-		[ dataAttrName ]: dataAttrValue,
-	};
-
-	return (
-		<GenericNavigationButton
-			onClick={ () =>
-				push( path, { focusTargetSelector: dataAttrCssSelector } )
-			}
-			{ ...buttonProps }
-		/>
-	);
+function NavigationButton( props ) {
+	return <NavigatorLink as={ GenericNavigationButton } { ...props } />;
 }
 
-function NavigationBackButton( { ...props } ) {
-	const { pop } = useNavigator();
-	return <GenericNavigationButton onClick={ pop } { ...props } />;
+function NavigationBackButton( props ) {
+	return <NavigatorBackLink as={ GenericNavigationButton } { ...props } />;
 }
 
 export { NavigationButton, NavigationBackButton };

From 76e88c6782b61c1f37a450f24eb4df4bf03d9635 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 22:54:34 +0100
Subject: [PATCH 13/17] Use `id`  as the attribute to restore focus

---
 packages/components/src/navigator/navigator-link/component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/navigator/navigator-link/component.tsx b/packages/components/src/navigator/navigator-link/component.tsx
index 61b169ca4a6244..e5a21343194725 100644
--- a/packages/components/src/navigator/navigator-link/component.tsx
+++ b/packages/components/src/navigator/navigator-link/component.tsx
@@ -21,7 +21,7 @@ import { View } from '../../view';
 import useNavigator from '../use-navigator';
 import type { NavigatorLinkProps } from '../types';
 
-const defaultAttributeName = 'data-navigator-focusable-id';
+const defaultAttributeName = 'id';
 const defaultSelectorFactory = ( attrName: string, attrValue: string ) =>
 	`[${ attrName }="${ attrValue }"]`;
 

From 8915a7c4ebff58c3919a76cfa40aa5b7ef8e1478 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 14 Dec 2021 22:55:11 +0100
Subject: [PATCH 14/17] Add `NavigatorLink` and `NavigatorBackLink` to docs
 manifest

---
 docs/manifest.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/manifest.json b/docs/manifest.json
index ba65b56b2f5037..354a1d162fb219 100644
--- a/docs/manifest.json
+++ b/docs/manifest.json
@@ -1043,6 +1043,18 @@
 		"markdown_source": "../packages/components/src/navigation/README.md",
 		"parent": "components"
 	},
+	{
+		"title": "NavigatorBackLink",
+		"slug": "navigator-back-link",
+		"markdown_source": "../packages/components/src/navigator/navigator-back-link/README.md",
+		"parent": "components"
+	},
+	{
+		"title": "NavigatorLink",
+		"slug": "navigator-link",
+		"markdown_source": "../packages/components/src/navigator/navigator-link/README.md",
+		"parent": "components"
+	},
 	{
 		"title": "NavigatorProvider",
 		"slug": "navigator-provider",

From 38c4ed2f24fe2017faefa91143181b4639774013 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 15 Dec 2021 18:15:39 +0100
Subject: [PATCH 15/17] Refactor to hooks

---
 .../navigator-back-link/component.tsx         | 41 ++------------
 .../src/navigator/navigator-back-link/hook.ts | 36 +++++++++++++
 .../navigator/navigator-link/component.tsx    | 53 ++-----------------
 .../src/navigator/navigator-link/hook.ts      | 46 ++++++++++++++++
 packages/components/src/navigator/types.ts    |  2 +-
 5 files changed, 92 insertions(+), 86 deletions(-)
 create mode 100644 packages/components/src/navigator/navigator-back-link/hook.ts
 create mode 100644 packages/components/src/navigator/navigator-link/hook.ts

diff --git a/packages/components/src/navigator/navigator-back-link/component.tsx b/packages/components/src/navigator/navigator-back-link/component.tsx
index 7b99077c4c334c..0b1d3b398c068b 100644
--- a/packages/components/src/navigator/navigator-back-link/component.tsx
+++ b/packages/components/src/navigator/navigator-back-link/component.tsx
@@ -4,54 +4,21 @@
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
-import useNavigator from '../use-navigator';
+import { useNavigatorBackLink } from './hook';
 import type { NavigatorBackLinkProps } from '../types';
 
 function NavigatorBackLink(
 	props: WordPressComponentProps< NavigatorBackLinkProps, 'button' >,
 	forwardedRef: Ref< any >
 ) {
-	const {
-		children,
-		onClick,
-		as = 'button',
-		...otherProps
-	} = useContextSystem( props, 'NavigatorBackLink' );
-
-	const { pop } = useNavigator();
-	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
-		( e ) => {
-			e.preventDefault();
-			pop();
-			onClick?.( e );
-		},
-		[ pop, onClick ]
-	);
+	const navigatorBackLinkProps = useNavigatorBackLink( props );
 
-	return (
-		<View
-			as={ as }
-			ref={ forwardedRef }
-			onClick={ handleClick }
-			{ ...otherProps }
-		>
-			{ children }
-		</View>
-	);
+	return <View ref={ forwardedRef } { ...navigatorBackLinkProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-back-link/hook.ts b/packages/components/src/navigator/navigator-back-link/hook.ts
new file mode 100644
index 00000000000000..4095b02fb9237e
--- /dev/null
+++ b/packages/components/src/navigator/navigator-back-link/hook.ts
@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import useNavigator from '../use-navigator';
+import type { NavigatorBackLinkProps } from '../types';
+
+export function useNavigatorBackLink(
+	props: WordPressComponentProps< NavigatorBackLinkProps, 'button' >
+) {
+	const { onClick, as = 'button', ...otherProps } = useContextSystem(
+		props,
+		'NavigatorBackLink'
+	);
+
+	const { pop } = useNavigator();
+	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			pop();
+			onClick?.( e );
+		},
+		[ pop, onClick ]
+	);
+
+	return {
+		as,
+		onClick: handleClick,
+		...otherProps,
+	};
+}
diff --git a/packages/components/src/navigator/navigator-link/component.tsx b/packages/components/src/navigator/navigator-link/component.tsx
index e5a21343194725..6d46135a3a2e6a 100644
--- a/packages/components/src/navigator/navigator-link/component.tsx
+++ b/packages/components/src/navigator/navigator-link/component.tsx
@@ -4,64 +4,21 @@
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
 /**
  * Internal dependencies
  */
-import {
-	contextConnect,
-	useContextSystem,
-	WordPressComponentProps,
-} from '../../ui/context';
+import { contextConnect, WordPressComponentProps } from '../../ui/context';
 import { View } from '../../view';
-import useNavigator from '../use-navigator';
+import { useNavigatorLink } from './hook';
 import type { NavigatorLinkProps } from '../types';
 
-const defaultAttributeName = 'id';
-const defaultSelectorFactory = ( attrName: string, attrValue: string ) =>
-	`[${ attrName }="${ attrValue }"]`;
-
 function NavigatorLink(
-	props: WordPressComponentProps< NavigatorLinkProps, 'a' >,
+	props: WordPressComponentProps< NavigatorLinkProps, 'button' >,
 	forwardedRef: Ref< any >
 ) {
-	const {
-		path,
-		children,
-		onClick,
-		as = 'button',
-		attributeName = defaultAttributeName,
-		selectorFactory = defaultSelectorFactory,
-		...otherProps
-	} = useContextSystem( props, 'NavigatorLink' );
-
-	const { push } = useNavigator();
-	const focusTargetSelector = selectorFactory( attributeName, path );
-	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
-		( e ) => {
-			e.preventDefault();
-			push( path, { focusTargetSelector } );
-			onClick?.( e );
-		},
-		[ push, selectorFactory, onClick ]
-	);
-
-	const linkProps = { [ attributeName ]: path, path, ...otherProps };
+	const navigatorLinkProps = useNavigatorLink( props );
 
-	return (
-		<View
-			as={ as }
-			ref={ forwardedRef }
-			onClick={ handleClick }
-			{ ...linkProps }
-		>
-			{ children }
-		</View>
-	);
+	return <View ref={ forwardedRef } { ...navigatorLinkProps } />;
 }
 
 /**
diff --git a/packages/components/src/navigator/navigator-link/hook.ts b/packages/components/src/navigator/navigator-link/hook.ts
new file mode 100644
index 00000000000000..28f087705320a9
--- /dev/null
+++ b/packages/components/src/navigator/navigator-link/hook.ts
@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import useNavigator from '../use-navigator';
+import type { NavigatorLinkProps } from '../types';
+
+const cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>
+	`[${ attrName }="${ attrValue }"]`;
+
+export function useNavigatorLink(
+	props: WordPressComponentProps< NavigatorLinkProps, 'button' >
+) {
+	const {
+		path,
+		onClick,
+		as = 'button',
+		attributeName = 'id',
+		selectorFactory = cssSelectorForAttribute,
+		...otherProps
+	} = useContextSystem( props, 'NavigatorLink' );
+
+	const { push } = useNavigator();
+	const focusTargetSelector = selectorFactory( attributeName, path );
+	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
+		( e ) => {
+			e.preventDefault();
+			push( path, { focusTargetSelector } );
+			onClick?.( e );
+		},
+		[ push, selectorFactory, onClick ]
+	);
+
+	return {
+		as,
+		onClick: handleClick,
+		path,
+		...otherProps,
+		[ attributeName ]: path,
+	};
+}
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index df7fe50a222fbb..ea2ea19a1bb158 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -65,7 +65,7 @@ export type NavigatorLinkProps = NavigatorBackLinkProps & {
 	 * The HTML attribute used to identify the `NavigatorLink`, which is used
 	 * by `Navigator` to restore focus.
 	 *
-	 * @default 'data-navigator-focusable-id'
+	 * @default 'id'
 	 */
 	attributeName?: string;
 	/**

From df584dea5e378a9e8c325528da6d8f0caa878181 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 15 Dec 2021 18:17:13 +0100
Subject: [PATCH 16/17] Do not expose `selectorFactor` prop

---
 .../components/src/navigator/navigator-link/hook.ts   | 11 +++++++----
 packages/components/src/navigator/types.ts            | 10 ----------
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/navigator/navigator-link/hook.ts b/packages/components/src/navigator/navigator-link/hook.ts
index 28f087705320a9..c984febeb36333 100644
--- a/packages/components/src/navigator/navigator-link/hook.ts
+++ b/packages/components/src/navigator/navigator-link/hook.ts
@@ -21,19 +21,22 @@ export function useNavigatorLink(
 		onClick,
 		as = 'button',
 		attributeName = 'id',
-		selectorFactory = cssSelectorForAttribute,
 		...otherProps
 	} = useContextSystem( props, 'NavigatorLink' );
 
 	const { push } = useNavigator();
-	const focusTargetSelector = selectorFactory( attributeName, path );
 	const handleClick: React.MouseEventHandler< HTMLElement > = useCallback(
 		( e ) => {
 			e.preventDefault();
-			push( path, { focusTargetSelector } );
+			push( path, {
+				focusTargetSelector: cssSelectorForAttribute(
+					attributeName,
+					path
+				),
+			} );
 			onClick?.( e );
 		},
-		[ push, selectorFactory, onClick ]
+		[ push, onClick ]
 	);
 
 	return {
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index ea2ea19a1bb158..87732a85a56512 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -68,14 +68,4 @@ export type NavigatorLinkProps = NavigatorBackLinkProps & {
 	 * @default 'id'
 	 */
 	attributeName?: string;
-	/**
-	 * A function that generates the CSS selector used ny `Navigator` when
-	 * restoring focus.
-	 *
-	 * @default ( attrName, attrValue ) => `[${ attrName }="${ attrValue }"]`;
-	 */
-	selectorFactory?: (
-		attributeName: string,
-		attributeValue: string
-	) => string;
 };

From d219320891d6554e5a09b422a3c171cea5158412 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Wed, 15 Dec 2021 18:22:31 +0100
Subject: [PATCH 17/17] Use `Button` as detault component to render
 `NavigatorLink` and `NavigatorBackLink`

---
 .../src/navigator/navigator-back-link/hook.ts |  3 +-
 .../src/navigator/navigator-link/hook.ts      |  3 +-
 .../components/src/navigator/stories/index.js | 35 ++++++++++---------
 .../src/components/preferences-modal/index.js | 30 ----------------
 4 files changed, 22 insertions(+), 49 deletions(-)

diff --git a/packages/components/src/navigator/navigator-back-link/hook.ts b/packages/components/src/navigator/navigator-back-link/hook.ts
index 4095b02fb9237e..1c8eb9962c287f 100644
--- a/packages/components/src/navigator/navigator-back-link/hook.ts
+++ b/packages/components/src/navigator/navigator-back-link/hook.ts
@@ -7,13 +7,14 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorBackLinkProps } from '../types';
 
 export function useNavigatorBackLink(
 	props: WordPressComponentProps< NavigatorBackLinkProps, 'button' >
 ) {
-	const { onClick, as = 'button', ...otherProps } = useContextSystem(
+	const { onClick, as = Button, ...otherProps } = useContextSystem(
 		props,
 		'NavigatorBackLink'
 	);
diff --git a/packages/components/src/navigator/navigator-link/hook.ts b/packages/components/src/navigator/navigator-link/hook.ts
index c984febeb36333..19a34cbdeede80 100644
--- a/packages/components/src/navigator/navigator-link/hook.ts
+++ b/packages/components/src/navigator/navigator-link/hook.ts
@@ -7,6 +7,7 @@ import { useCallback } from '@wordpress/element';
  * Internal dependencies
  */
 import { useContextSystem, WordPressComponentProps } from '../../ui/context';
+import Button from '../../button';
 import useNavigator from '../use-navigator';
 import type { NavigatorLinkProps } from '../types';
 
@@ -19,7 +20,7 @@ export function useNavigatorLink(
 	const {
 		path,
 		onClick,
-		as = 'button',
+		as = Button,
 		attributeName = 'id',
 		...otherProps
 	} = useContextSystem( props, 'NavigatorLink' );
diff --git a/packages/components/src/navigator/stories/index.js b/packages/components/src/navigator/stories/index.js
index 206a89e7397097..99117926f852d3 100644
--- a/packages/components/src/navigator/stories/index.js
+++ b/packages/components/src/navigator/stories/index.js
@@ -23,14 +23,6 @@ export default {
 	component: NavigatorProvider,
 };
 
-function NavigatorButton( props ) {
-	return <NavigatorLink as={ Button } variant="secondary" { ...props } />;
-}
-
-function NavigatorBackButton( props ) {
-	return <NavigatorBackLink as={ Button } variant="secondary" { ...props } />;
-}
-
 const MyNavigation = () => {
 	const cx = useCx();
 	return (
@@ -44,17 +36,20 @@ const MyNavigation = () => {
 						<p>This is the home screen.</p>
 
 						<HStack justify="flex-start" wrap>
-							<NavigatorButton path="/child">
+							<NavigatorLink variant="secondary" path="/child">
 								Navigate to child screen.
-							</NavigatorButton>
+							</NavigatorLink>
 
-							<NavigatorButton path="/overflow-child">
+							<NavigatorLink
+								variant="secondary"
+								path="/overflow-child"
+							>
 								Navigate to screen with horizontal overflow.
-							</NavigatorButton>
+							</NavigatorLink>
 
-							<NavigatorButton path="/stickies">
+							<NavigatorLink variant="secondary" path="/stickies">
 								Navigate to screen with sticky content.
-							</NavigatorButton>
+							</NavigatorLink>
 
 							<Flyout
 								trigger={
@@ -76,7 +71,9 @@ const MyNavigation = () => {
 				<Card>
 					<CardBody>
 						<p>This is the child screen.</p>
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackLink variant="secondary">
+							Go back
+						</NavigatorBackLink>
 					</CardBody>
 				</Card>
 			</NavigatorScreen>
@@ -84,7 +81,9 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/overflow-child">
 				<Card>
 					<CardBody>
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackLink variant="secondary">
+							Go back
+						</NavigatorBackLink>
 						<div
 							className={ cx(
 								css( `
@@ -112,7 +111,9 @@ const MyNavigation = () => {
 			<NavigatorScreen path="/stickies">
 				<Card>
 					<Sticky as={ CardHeader } z="2">
-						<NavigatorBackButton>Go back</NavigatorBackButton>
+						<NavigatorBackLink variant="secondary">
+							Go back
+						</NavigatorBackLink>
 					</Sticky>
 					<CardBody>
 						<Sticky top="69px" colors="papayawhip/peachpuff">
diff --git a/packages/edit-post/src/components/preferences-modal/index.js b/packages/edit-post/src/components/preferences-modal/index.js
index 662f417c9cda25..a1a8190c4474c5 100644
--- a/packages/edit-post/src/components/preferences-modal/index.js
+++ b/packages/edit-post/src/components/preferences-modal/index.js
@@ -19,7 +19,6 @@ import {
 	FlexItem,
 	Modal,
 	TabPanel,
-	Button,
 	Card,
 	CardHeader,
 	CardBody,
@@ -56,34 +55,6 @@ import BlockManager from '../block-manager';
 const MODAL_NAME = 'edit-post/preferences';
 const PREFERENCES_MENU = 'preferences-menu';
 
-// function NavigationButton( { as: Tag = Button, path, ...props } ) {
-// 	const { push } = useNavigator();
-
-// 	const dataAttrName = 'data-navigator-focusable-id';
-// 	const dataAttrValue = path;
-
-// 	const dataAttrCssSelector = `[${ dataAttrName }="${ dataAttrValue }"]`;
-
-// 	const tagProps = {
-// 		...props,
-// 		[ dataAttrName ]: dataAttrValue,
-// 	};
-
-// 	return (
-// 		<Tag
-// 			onClick={ () =>
-// 				push( path, { focusTargetSelector: dataAttrCssSelector } )
-// 			}
-// 			{ ...tagProps }
-// 		/>
-// 	);
-// }
-
-// function NavigationBackButton( { as: Tag = Button, ...props } ) {
-// 	const { pop } = useNavigator();
-// 	return <Tag onClick={ pop } { ...props } />;
-// }
-
 export default function PreferencesModal() {
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const { closeModal } = useDispatch( editPostStore );
@@ -391,7 +362,6 @@ export default function PreferencesModal() {
 									gap="6"
 								>
 									<NavigatorBackLink
-										as={ Button }
 										icon={
 											isRTL() ? chevronRight : chevronLeft
 										}