Show other sidebar items on Styles sidebar

WordPress · Sep 25, 2024 · 9309e34 · 9309e34
1 parent 50ecb63
commit 9309e34
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 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
@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { useViewportMatch } from '@wordpress/compose';
 import { useCallback } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -18,6 +17,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
+import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -56,7 +56,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
@@ -107,6 +106,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 					'Choose a different style combination for the theme styles.'
 				) }
 				backPath={ backPath }
+				content={ <MainSidebarNavigationContent isStylesSelected /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter

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
@@ -21,6 +21,54 @@ import {
 	PATTERN_TYPES,
 } from '../../utils/constants';
 
+export function MainSidebarNavigationContent( { isStylesSelected } ) {
+	return (
+		<ItemGroup>
+			<SidebarNavigationItem
+				uid="navigation-navigation-item"
+				params={ { postType: NAVIGATION_POST_TYPE } }
+				withChevron
+				icon={ navigation }
+			>
+				{ __( 'Navigation' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItemGlobalStyles
+				uid="styles-navigation-item"
+				className="is-selected"
+				withChevron
+				icon={ styles }
+				aria-current={ isStylesSelected }
+			>
+				{ __( 'Styles' ) }
+			</SidebarNavigationItemGlobalStyles>
+			<SidebarNavigationItem
+				uid="page-navigation-item"
+				params={ { postType: 'page' } }
+				withChevron
+				icon={ page }
+			>
+				{ __( 'Pages' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="template-navigation-item"
+				params={ { postType: TEMPLATE_POST_TYPE } }
+				withChevron
+				icon={ layout }
+			>
+				{ __( 'Templates' ) }
+			</SidebarNavigationItem>
+			<SidebarNavigationItem
+				uid="patterns-navigation-item"
+				params={ { postType: PATTERN_TYPES.user } }
+				withChevron
+				icon={ symbol }
+			>
+				{ __( 'Patterns' ) }
+			</SidebarNavigationItem>
+		</ItemGroup>
+	);
+}
+
 export default function SidebarNavigationScreenMain() {
 	const { setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
@@ -38,51 +86,7 @@ export default function SidebarNavigationScreenMain() {
 			description={ __(
 				'Customize the appearance of your website using the block editor.'
 			) }
-			content={
-				<>
-					<ItemGroup>
-						<SidebarNavigationItem
-							uid="navigation-navigation-item"
-							params={ { postType: NAVIGATION_POST_TYPE } }
-							withChevron
-							icon={ navigation }
-						>
-							{ __( 'Navigation' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItemGlobalStyles
-							uid="styles-navigation-item"
-							withChevron
-							icon={ styles }
-						>
-							{ __( 'Styles' ) }
-						</SidebarNavigationItemGlobalStyles>
-						<SidebarNavigationItem
-							uid="page-navigation-item"
-							params={ { postType: 'page' } }
-							withChevron
-							icon={ page }
-						>
-							{ __( 'Pages' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="template-navigation-item"
-							params={ { postType: TEMPLATE_POST_TYPE } }
-							withChevron
-							icon={ layout }
-						>
-							{ __( 'Templates' ) }
-						</SidebarNavigationItem>
-						<SidebarNavigationItem
-							uid="patterns-navigation-item"
-							params={ { postType: PATTERN_TYPES.user } }
-							withChevron
-							icon={ symbol }
-						>
-							{ __( 'Patterns' ) }
-						</SidebarNavigationItem>
-					</ItemGroup>
-				</>
-			}
+			content={ <MainSidebarNavigationContent /> }
 		/>
 	);
 }