From 3f69854e9baaa5e150f76d8baf6f1635661cc30d Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Fri, 24 Mar 2023 20:03:28 +0200
Subject: [PATCH 1/7] Global Styles: Link to the block type panel when
 selecting a block with Styles open

---
 .../navigator-provider/component.tsx          |  2 ++
 .../navigator/navigator-screen/component.tsx  |  5 +++-
 packages/components/src/navigator/types.ts    |  1 +
 .../global-styles/screen-block-list.js        | 14 +++++----
 .../src/components/global-styles/ui.js        | 30 +++++++++++++++++--
 5 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/navigator/navigator-provider/component.tsx b/packages/components/src/navigator/navigator-provider/component.tsx
index 28e710fa577b2d..4c98db5b1a4d18 100644
--- a/packages/components/src/navigator/navigator-provider/component.tsx
+++ b/packages/components/src/navigator/navigator-provider/component.tsx
@@ -147,6 +147,7 @@ function UnconnectedNavigatorProvider(
 			const {
 				focusTargetSelector,
 				isBack = false,
+				skipFocus = false,
 				...restOptions
 			} = options;
 
@@ -168,6 +169,7 @@ function UnconnectedNavigatorProvider(
 					path,
 					isBack,
 					hasRestoredFocus: false,
+					skipFocus,
 				};
 
 				if ( prevLocationHistory.length < 1 ) {
diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 2d4588d91b14d6..cba000141bdb69 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -100,11 +100,13 @@ function UnconnectedNavigatorScreen(
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
 		// - if focus hasn't already been restored for the current location
+		// - if the `skipFocus` option is set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
 		if (
 			isInitialLocation ||
 			! isMatch ||
 			! wrapperRef.current ||
-			locationRef.current.hasRestoredFocus
+			locationRef.current.hasRestoredFocus ||
+			location.skipFocus
 		) {
 			return;
 		}
@@ -143,6 +145,7 @@ function UnconnectedNavigatorScreen(
 		isMatch,
 		location.isBack,
 		location.focusTargetSelector,
+		location.skipFocus,
 	] );
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index f6d8f5c22b0a5f..057968fa6f4c16 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -13,6 +13,7 @@ export type MatchParams = Record< string, string | string[] >;
 type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
+	skipFocus?: boolean;
 };
 
 export type NavigatorLocation = NavigateOptions & {
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 7c60273beda76c..b929339860b2aa 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
@@ -57,21 +57,25 @@ function useSortedBlockTypes() {
 	return [ ...coreItems, ...nonCoreItems ];
 }
 
-function BlockMenuItem( { block } ) {
-	const [ rawSettings ] = useGlobalSetting( '', block.name );
-	const settings = useSettingsForBlockElement( rawSettings, block.name );
+export function useBlockHasGlobalStyles( blockName ) {
+	const [ rawSettings ] = useGlobalSetting( '', blockName );
+	const settings = useSettingsForBlockElement( rawSettings, blockName );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );
 	const hasBorderPanel = useHasBorderPanel( settings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
-	const hasVariationsPanel = useHasVariationsPanel( block.name );
-	const hasBlockMenuItem =
+	const hasVariationsPanel = useHasVariationsPanel( blockName );
+	const hasGlobalStyles =
 		hasTypographyPanel ||
 		hasColorPanel ||
 		hasLayoutPanel ||
 		hasVariationsPanel;
+	return hasGlobalStyles;
+}
 
+function BlockMenuItem( { block } ) {
+	const hasBlockMenuItem = useBlockHasGlobalStyles( block.name );
 	if ( ! hasBlockMenuItem ) {
 		return null;
 	}
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index b9319df5a4a9f1..786dfe0f3b0f42 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -10,17 +10,24 @@ import {
 } from '@wordpress/components';
 import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import {
+	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import ScreenRoot from './screen-root';
-import ScreenBlockList from './screen-block-list';
+import {
+	useBlockHasGlobalStyles,
+	default as ScreenBlockList,
+} from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
 import ScreenTypographyElement from './screen-typography-element';
@@ -255,6 +262,24 @@ function GlobalStylesStyleBook( { onClose } ) {
 	);
 }
 
+function GlobalStylesBlockLink() {
+	const navigator = useNavigator();
+	const selectedBlockName = useSelect( ( select ) => {
+		const { getSelectedBlockClientId, getBlockName } =
+			select( blockEditorStore );
+		return getBlockName( getSelectedBlockClientId() );
+	}, [] );
+	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
+	useEffect( () => {
+		if ( ! selectedBlockName || ! blockHasGlobalStyles ) {
+			return;
+		}
+		navigator.goTo( '/blocks/' + encodeURIComponent( selectedBlockName ), {
+			skipFocus: true,
+		} );
+	}, [ selectedBlockName, blockHasGlobalStyles ] );
+}
+
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 	const blocks = getBlockTypes();
 
@@ -307,6 +332,7 @@ function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {
 			) }
 
 			<GlobalStylesActionMenu />
+			<GlobalStylesBlockLink />
 		</NavigatorProvider>
 	);
 }

From 1fb9f68c831fc2436d2f4c41e5332c9a35da9e4d Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Tue, 28 Mar 2023 18:06:30 +0300
Subject: [PATCH 2/7] add unit test

---
 .../components/src/navigator/test/index.tsx   | 52 +++++++++++++++++++
 packages/components/src/navigator/types.ts    |  2 +-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigator/test/index.tsx b/packages/components/src/navigator/test/index.tsx
index a27be5475d8028..5a711b8730224a 100644
--- a/packages/components/src/navigator/test/index.tsx
+++ b/packages/components/src/navigator/test/index.tsx
@@ -22,6 +22,7 @@ import {
 	NavigatorToParentButton,
 	useNavigator,
 } from '..';
+import type { NavigateOptions } from '../types';
 
 const INVALID_HTML_ATTRIBUTE = {
 	raw: ' "\'><=invalid_path',
@@ -57,6 +58,7 @@ const BUTTON_TEXT = {
 		'Navigate to screen with an invalid HTML value as a path.',
 	back: 'Go back',
 	backUsingGoTo: 'Go back using goTo',
+	goToWithSkipFocus: 'Go to with skipFocus',
 };
 
 type CustomTestOnClickHandler = (
@@ -64,6 +66,7 @@ type CustomTestOnClickHandler = (
 		| {
 				type: 'goTo';
 				path: string;
+				options?: NavigateOptions;
 		  }
 		| { type: 'goBack' }
 		| { type: 'goToParent' }
@@ -108,6 +111,26 @@ function CustomNavigatorGoToBackButton( {
 	);
 }
 
+function CustomNavigatorGoToSkipFocusButton( {
+	path,
+	onClick,
+	...props
+}: Omit< ComponentPropsWithoutRef< typeof NavigatorButton >, 'onClick' > & {
+	onClick?: CustomTestOnClickHandler;
+} ) {
+	const { goTo } = useNavigator();
+	return (
+		<Button
+			onClick={ () => {
+				goTo( path, { skipFocus: true } );
+				// Used to spy on the values passed to `navigator.goTo`.
+				onClick?.( { type: 'goTo', path } );
+			} }
+			{ ...props }
+		/>
+	);
+}
+
 function CustomNavigatorBackButton( {
 	onClick,
 	...props
@@ -342,6 +365,12 @@ const MyHierarchicalNavigation = ( {
 						{ BUTTON_TEXT.backUsingGoTo }
 					</CustomNavigatorGoToBackButton>
 				</NavigatorScreen>
+				<CustomNavigatorGoToSkipFocusButton
+					path={ PATHS.NESTED }
+					onClick={ onNavigatorButtonClick }
+				>
+					{ BUTTON_TEXT.goToWithSkipFocus }
+				</CustomNavigatorGoToSkipFocusButton>
 			</NavigatorProvider>
 		</>
 	);
@@ -716,6 +745,29 @@ describe( 'Navigator', () => {
 			await user.click( getNavigationButton( 'back' ) );
 			expect( getNavigationButton( 'toChildScreen' ) ).toHaveFocus();
 		} );
+
+		it( 'should skip focus based on location `skipFocus` option', async () => {
+			const user = userEvent.setup();
+			render( <MyHierarchicalNavigation /> );
+
+			// Navigate to child screen with skipFocus.
+			await user.click( getNavigationButton( 'goToWithSkipFocus' ) );
+			expect( queryScreen( 'home' ) ).not.toBeInTheDocument();
+			expect( getScreen( 'nested' ) ).toBeInTheDocument();
+
+			// The clicked button should remain focused.
+			expect( getNavigationButton( 'goToWithSkipFocus' ) ).toHaveFocus();
+
+			// Navigate back to parent screen.
+			await user.click( getNavigationButton( 'back' ) );
+			expect( getScreen( 'child' ) ).toBeInTheDocument();
+			// The first tabbable element receives focus.
+			expect(
+				screen.getByRole( 'button', {
+					name: 'First tabbable child screen button',
+				} )
+			).toHaveFocus();
+		} );
 	} );
 
 	describe( 'animation', () => {
diff --git a/packages/components/src/navigator/types.ts b/packages/components/src/navigator/types.ts
index 057968fa6f4c16..e638084e8376d5 100644
--- a/packages/components/src/navigator/types.ts
+++ b/packages/components/src/navigator/types.ts
@@ -10,7 +10,7 @@ import type { ButtonAsButtonProps } from '../button/types';
 
 export type MatchParams = Record< string, string | string[] >;
 
-type NavigateOptions = {
+export type NavigateOptions = {
 	focusTargetSelector?: string;
 	isBack?: boolean;
 	skipFocus?: boolean;

From 43274ee59f27a5a9564467b87e5c26768a2a5ab1 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 3 Apr 2023 12:41:21 +0300
Subject: [PATCH 3/7] do not navigate on mount

---
 .../src/components/global-styles/ui.js        | 38 +++++++++++++------
 1 file changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index 786dfe0f3b0f42..b2f3da2306a1d0 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { moreVertical } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -264,20 +264,36 @@ function GlobalStylesStyleBook( { onClose } ) {
 
 function GlobalStylesBlockLink() {
 	const navigator = useNavigator();
-	const selectedBlockName = useSelect( ( select ) => {
-		const { getSelectedBlockClientId, getBlockName } =
-			select( blockEditorStore );
-		return getBlockName( getSelectedBlockClientId() );
-	}, [] );
+	const isMounted = useRef();
+	const { selectedBlockName, selectedBlockClientId } = useSelect(
+		( select ) => {
+			const { getSelectedBlockClientId, getBlockName } =
+				select( blockEditorStore );
+			const clientId = getSelectedBlockClientId();
+			return {
+				selectedBlockName: getBlockName( clientId ),
+				selectedBlockClientId: clientId,
+			};
+		},
+		[]
+	);
 	const blockHasGlobalStyles = useBlockHasGlobalStyles( selectedBlockName );
 	useEffect( () => {
-		if ( ! selectedBlockName || ! blockHasGlobalStyles ) {
+		// Avoid navigating to the block screen on mount.
+		if ( ! isMounted.current ) {
+			isMounted.current = true;
 			return;
 		}
-		navigator.goTo( '/blocks/' + encodeURIComponent( selectedBlockName ), {
-			skipFocus: true,
-		} );
-	}, [ selectedBlockName, blockHasGlobalStyles ] );
+		if ( ! selectedBlockClientId || ! blockHasGlobalStyles ) {
+			return;
+		}
+		const path = '/blocks/' + encodeURIComponent( selectedBlockName );
+		// Avoid navigating to the same path. This can happen when selecting
+		// a new block of the same type.
+		if ( path !== navigator.location.path ) {
+			navigator.goTo( path, { skipFocus: true } );
+		}
+	}, [ selectedBlockClientId, selectedBlockName, blockHasGlobalStyles ] );
 }
 
 function GlobalStylesUI( { isStyleBookOpened, onCloseStyleBook } ) {

From d5c5396e02e300aa182c073e9f0dc7a90bb9a9c0 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 3 Apr 2023 12:45:06 +0300
Subject: [PATCH 4/7] fix comment

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

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index cba000141bdb69..35ccd5f8d61803 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -100,7 +100,7 @@ function UnconnectedNavigatorScreen(
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
 		// - if focus hasn't already been restored for the current location
-		// - if the `skipFocus` option is set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
+		// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
 		if (
 			isInitialLocation ||
 			! isMatch ||

From 7a047c05a8df54d378afbc92b835e756ef6f573a Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Mon, 3 Apr 2023 12:48:29 +0300
Subject: [PATCH 5/7] add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index db4f80eb5f7fed..83c7b6eff056df 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -20,6 +20,7 @@
 -   `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)).
 -   `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)).
 -   `ImageSizeControl`: Use large 40px sizes ([#49113](https://github.com/WordPress/gutenberg/pull/49113)).
+-   `Navigator`: Add `skipFocus` property in `NavigateOptions`. ([#49350](https://github.com/WordPress/gutenberg/pull/49350)).
 
 ### Bug Fix
 

From afeebf37d217e97a18139995464253681d1d4a09 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 6 Apr 2023 09:47:43 +0300
Subject: [PATCH 6/7] move changelog entry

---
 packages/components/CHANGELOG.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 83c7b6eff056df..bb5597178f0de9 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,7 +2,10 @@
 
 ## Unreleased
 
+### Enhancements
+
 -   `DropZone`: Smooth animation ([#49517](https://github.com/WordPress/gutenberg/pull/49517)).
+-   `Navigator`: Add `skipFocus` property in `NavigateOptions`. ([#49350](https://github.com/WordPress/gutenberg/pull/49350)).
 
 ## 23.7.0 (2023-03-29)
 
@@ -20,7 +23,6 @@
 -   `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)).
 -   `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)).
 -   `ImageSizeControl`: Use large 40px sizes ([#49113](https://github.com/WordPress/gutenberg/pull/49113)).
--   `Navigator`: Add `skipFocus` property in `NavigateOptions`. ([#49350](https://github.com/WordPress/gutenberg/pull/49350)).
 
 ### Bug Fix
 

From cbf295d706af12217544fdeb8de3a94d475bc4a5 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 6 Apr 2023 10:34:54 +0300
Subject: [PATCH 7/7] add Storybook example

---
 .../navigator/navigator-screen/component.tsx  |  2 +-
 .../src/navigator/stories/index.tsx           | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/navigator/navigator-screen/component.tsx b/packages/components/src/navigator/navigator-screen/component.tsx
index 35ccd5f8d61803..47b37ab65e96df 100644
--- a/packages/components/src/navigator/navigator-screen/component.tsx
+++ b/packages/components/src/navigator/navigator-screen/component.tsx
@@ -43,7 +43,7 @@ const animationExitDelay = 0;
 // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
 type Props = Omit<
 	WordPressComponentProps< NavigatorScreenProps, 'div', false >,
-	keyof MotionProps
+	Exclude< keyof MotionProps, 'style' >
 >;
 
 function UnconnectedNavigatorScreen(
diff --git a/packages/components/src/navigator/stories/index.tsx b/packages/components/src/navigator/stories/index.tsx
index 4c8a968e881f19..fb353a354d5446 100644
--- a/packages/components/src/navigator/stories/index.tsx
+++ b/packages/components/src/navigator/stories/index.tsx
@@ -298,3 +298,71 @@ export const NestedNavigator: ComponentStory< typeof NavigatorProvider > =
 NestedNavigator.args = {
 	initialPath: '/child2/grandchild',
 };
+
+const NavigatorButtonWithSkipFocus = ( {
+	path,
+	onClick,
+	...props
+}: React.ComponentProps< typeof NavigatorButton > ) => {
+	const { goTo } = useNavigator();
+
+	return (
+		<Button
+			{ ...props }
+			onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+				goTo( path, { skipFocus: true } );
+				onClick?.( e );
+			} }
+		/>
+	);
+};
+
+export const SkipFocus: ComponentStory< typeof NavigatorProvider > = (
+	args
+) => {
+	return <NavigatorProvider { ...args } />;
+};
+SkipFocus.args = {
+	initialPath: '/',
+	children: (
+		<>
+			<div
+				style={ {
+					height: 250,
+					border: '1px solid black',
+				} }
+			>
+				<NavigatorScreen
+					path="/"
+					style={ {
+						height: '100%',
+					} }
+				>
+					<h1>Home screen</h1>
+					<NavigatorButton variant="secondary" path="/child">
+						Go to child screen.
+					</NavigatorButton>
+				</NavigatorScreen>
+				<NavigatorScreen
+					path="/child"
+					style={ {
+						height: '100%',
+					} }
+				>
+					<h2>Child screen</h2>
+					<NavigatorToParentButton variant="secondary">
+						Go to parent screen.
+					</NavigatorToParentButton>
+				</NavigatorScreen>
+			</div>
+
+			<NavigatorButtonWithSkipFocus
+				variant="secondary"
+				path="/child"
+				style={ { margin: '1rem 2rem' } }
+			>
+				Go to child screen, but keep focus on this button
+			</NavigatorButtonWithSkipFocus>
+		</>
+	),
+};