Remove hasGlobalStyleVariations condition to show the Styles menu ite…

…m 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)
WordPress · Dec 4, 2024 · c5ecfff · c5ecfff · github-actions · Dec 4, 2024
1 parent ee87766
commit c5ecfff
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 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
@@ -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
@@ -33,7 +33,7 @@ export function MainSidebarNavigationContent() {
 				{ __( 'Navigation' ) }
 			</SidebarNavigationItem>
 			<SidebarNavigationItemGlobalStyles
-				uid="styles-navigation-item"
+				uid="global-styles-navigation-item"
 				icon={ styles }
 			>
 				{ __( 'Styles' ) }