diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
index b15ed6c5276f00..06e486739ed74a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
@@ -3,7 +3,9 @@
  */
 import { __ } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,6 +15,39 @@ import StyleVariationsContainer from '../global-styles/style-variations-containe
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
+import SidebarNavigationItem from '../sidebar-navigation-item';
+
+export function SidebarNavigationItemGlobalStyles( props ) {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const hasGlobalStyleVariations = useSelect(
+		( select ) =>
+			!! select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+		[]
+	);
+	if ( hasGlobalStyleVariations ) {
+		return (
+			<NavigatorButton
+				{ ...props }
+				as={ SidebarNavigationItem }
+				path="/wp_global_styles"
+			/>
+		);
+	}
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			onClick={ () => {
+				// switch to edit mode.
+				setCanvasMode( 'edit' );
+				// open global styles sidebar.
+				openGeneralSidebar( 'edit-site/global-styles' );
+			} }
+		/>
+	);
+}
 
 export default function SidebarNavigationScreenGlobalStyles() {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
index a35e07220d52c4..7c9e4b3bf91968 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
@@ -15,35 +15,24 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
+import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 
 export default function SidebarNavigationScreenMain() {
-	const { hasNavigationMenus, hasGlobalStyleVariations } = useSelect(
-		( select ) => {
-			const {
-				getEntityRecords,
-				__experimentalGetCurrentThemeGlobalStylesVariations,
-			} = select( coreStore );
-			// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
-			// to avoid double network calls.
-			const navigationMenus = getEntityRecords(
-				'postType',
-				'wp_navigation',
-				{
-					per_page: 1,
-					status: 'publish',
-					order: 'desc',
-					orderby: 'date',
-				}
-			);
-			return {
-				hasNavigationMenus: !! navigationMenus?.length,
-				hasGlobalStyleVariations:
-					!! __experimentalGetCurrentThemeGlobalStylesVariations()
-						?.length,
-			};
-		},
-		[]
-	);
+	const hasNavigationMenus = useSelect( ( select ) => {
+		// The query needs to be the same as in the "SidebarNavigationScreenNavigationMenus" component,
+		// to avoid double network calls.
+		const navigationMenus = select( coreStore ).getEntityRecords(
+			'postType',
+			'wp_navigation',
+			{
+				per_page: 1,
+				status: 'publish',
+				order: 'desc',
+				orderby: 'date',
+			}
+		);
+		return !! navigationMenus?.length;
+	}, [] );
 	const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN
 		? hasNavigationMenus
 		: false;
@@ -66,17 +55,12 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
-					{ hasGlobalStyleVariations && (
-						<NavigatorButton
-							as={ SidebarNavigationItem }
-							path="/wp_global_styles"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</NavigatorButton>
-					) }
-
+					<SidebarNavigationItemGlobalStyles
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</SidebarNavigationItemGlobalStyles>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/page"