From c5ecfff89f2c32e3369ae690196dc7b6aad46953 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@users.noreply.github.com>
Date: Wed, 4 Dec 2024 21:35:17 +1100
Subject: [PATCH] Remove hasGlobalStyleVariations condition to show the Styles
 menu item in the edit site sidebar. Also, move its uid prop to
 MainSidebarNavigationContent for consistency and convenience. Why? When a
 block theme lacks global style variations, the top-level Styles panel in the
 Site Editor does not open on mobile. The sidebar navigation styles item now
 contains the global styles UI and no longer just the variations so the
 `hasGlobalStyleVariations` causes the bug and is, also, redundant. (#67550)

---
 .../index.js                                  | 30 ++++++-------------
 .../sidebar-navigation-screen-main/index.js   |  2 +-
 2 files changed, 10 insertions(+), 22 deletions(-)

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 72671714479ac0..648b218e4aee70 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
@@ -2,8 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect, useDispatch } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
@@ -23,26 +22,15 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { params } = useLocation();
-	const hasGlobalStyleVariations = useSelect(
-		( select ) =>
-			!! select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-		[]
+	return (
+		<SidebarNavigationItem
+			{ ...props }
+			params={ { path: '/wp_global_styles' } }
+			aria-current={
+				params.path && params.path.startsWith( '/wp_global_styles' )
+			}
+		/>
 	);
-	if ( hasGlobalStyleVariations ) {
-		return (
-			<SidebarNavigationItem
-				{ ...props }
-				params={ { path: '/wp_global_styles' } }
-				uid="global-styles-navigation-item"
-				aria-current={
-					params.path && params.path.startsWith( '/wp_global_styles' )
-				}
-			/>
-		);
-	}
-	return <SidebarNavigationItem { ...props } />;
 }
 
 export default function SidebarNavigationScreenGlobalStyles() {
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 49e60d44047326..55c14bfa7016e3 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
@@ -33,7 +33,7 @@ export function MainSidebarNavigationContent() {
 				{ __( 'Navigation' ) }
 			</SidebarNavigationItem>
 			<SidebarNavigationItemGlobalStyles
-				uid="styles-navigation-item"
+				uid="global-styles-navigation-item"
 				icon={ styles }
 			>
 				{ __( 'Styles' ) }