[Site editor]: Lower emphasis on style variations in navigation sidebar

WordPress · Jun 27, 2023 · a3ceb0d · a3ceb0d
1 parent 2d1d0fa
commit a3ceb0d
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 104 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-browse-global-styles/index.js
@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { BlockEditorProvider } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as editSiteStore } from '../../store';
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+
+const noop = () => {};
+
+export default function SidebarNavigationScreenBrowseGlobalStyles() {
+	const { storedSettings } = useSelect( ( select ) => {
+		const { getSettings } = unlock( select( editSiteStore ) );
+
+		return {
+			storedSettings: getSettings( false ),
+		};
+	}, [] );
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Browse styles' ) }
+			description={ __(
+				'Choose a different style combination for the theme styles.'
+			) }
+			content={
+				// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
+				// loaded. This is necessary because the Iframe component waits until
+				// the block editor store's `__internalIsInitialized` is true before
+				// rendering the iframe. Without this, the iframe previews will not render
+				// in mobile viewport sizes, where the editor canvas is hidden.
+				<BlockEditorProvider
+					settings={ storedSettings }
+					onChange={ noop }
+					onInput={ noop }
+				>
+					<StyleVariationsContainer />
+				</BlockEditorProvider>
+			}
+		/>
+	);
+}
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,103 +2,31 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { backup, edit, seen } from '@wordpress/icons';
+import { backup, styles, seen, brush } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import {
 	Icon,
-	__experimentalNavigatorButton as NavigatorButton,
+	__experimentalItemGroup as ItemGroup,
 	__experimentalVStack as HStack,
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
-import { BlockEditorProvider } from '@wordpress/block-editor';
 import { humanTimeDiff } from '@wordpress/date';
 import { useCallback } from '@wordpress/element';
-import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
-import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { useLink } from '../routes/link';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 import SidebarButton from '../sidebar-button';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import StyleBook from '../style-book';
 import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
 
-const noop = () => {};
-
-export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar, toggleFeature } = useDispatch( editSiteStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const { createNotice } = useDispatch( noticesStore );
-	const hasGlobalStyleVariations = useSelect(
-		( select ) =>
-			!! select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
-		[]
-	);
-	if ( hasGlobalStyleVariations ) {
-		return (
-			<NavigatorButton
-				{ ...props }
-				as={ SidebarNavigationItem }
-				path="/wp_global_styles"
-			/>
-		);
-	}
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			onClick={ () => {
-				// Disable distraction free mode.
-				toggleFeature( 'distractionFree', false );
-				createNotice(
-					'info',
-					__( 'Distraction free mode turned off' ),
-					{
-						isDismissible: true,
-						type: 'snackbar',
-					}
-				);
-				// Switch to edit mode.
-				setCanvasMode( 'edit' );
-				// Open global styles sidebar.
-				openGeneralSidebar( 'edit-site/global-styles' );
-			} }
-		/>
-	);
-}
-
-function SidebarNavigationScreenGlobalStylesContent() {
-	const { storedSettings } = useSelect( ( select ) => {
-		const { getSettings } = unlock( select( editSiteStore ) );
-
-		return {
-			storedSettings: getSettings( false ),
-		};
-	}, [] );
-
-	// Wrap in a BlockEditorProvider to ensure that the Iframe's dependencies are
-	// loaded. This is necessary because the Iframe component waits until
-	// the block editor store's `__internalIsInitialized` is true before
-	// rendering the iframe. Without this, the iframe previews will not render
-	// in mobile viewport sizes, where the editor canvas is hidden.
-	return (
-		<BlockEditorProvider
-			settings={ storedSettings }
-			onChange={ noop }
-			onInput={ noop }
-		>
-			<StyleVariationsContainer />
-		</BlockEditorProvider>
-	);
-}
-
 function SidebarNavigationScreenGlobalStylesFooter( { onClickRevisions } ) {
 	const { revisions, isLoading } = useGlobalStylesRevisions();
 	const { revisionsCount } = useSelect( ( select ) => {
@@ -159,11 +87,21 @@ export default function SidebarNavigationScreenGlobalStyles() {
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-
-	const isStyleBookOpened = useSelect(
-		( select ) =>
-			'style-book' ===
-			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
+	const browseStylesLink = useLink( {
+		path: '/wp_global_styles/browseStyles',
+	} );
+	const { isStyleBookOpened, hasGlobalStyleVariations } = useSelect(
+		( select ) => ( {
+			isStyleBookOpened:
+				'style-book' ===
+				unlock(
+					select( editSiteStore )
+				).getEditorCanvasContainerView(),
+			hasGlobalStyleVariations:
+				!! select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
+		} ),
 		[]
 	);
 
@@ -203,36 +141,47 @@ export default function SidebarNavigationScreenGlobalStyles() {
 			<SidebarNavigationScreen
 				title={ __( 'Styles' ) }
 				description={ __(
-					'Choose a different style combination for the theme styles.'
+					'Customize the visual styles of your entire website.'
 				) }
-				content={ <SidebarNavigationScreenGlobalStylesContent /> }
+				content={
+					<ItemGroup>
+						{ hasGlobalStyleVariations && (
+							<SidebarNavigationItem
+								icon={ brush }
+								withChevron
+								{ ...browseStylesLink }
+							>
+								{ __( 'Browse styles' ) }
+							</SidebarNavigationItem>
+						) }
+						<SidebarNavigationItem
+							icon={ styles }
+							onClick={ async () => await openGlobalStyles() }
+						>
+							{ __( 'Open styles' ) }
+						</SidebarNavigationItem>
+					</ItemGroup>
+				}
 				footer={
 					<SidebarNavigationScreenGlobalStylesFooter
 						onClickRevisions={ openRevisions }
 					/>
 				}
 				actions={
-					<>
-						{ ! isMobileViewport && (
-							<SidebarButton
-								icon={ seen }
-								label={ __( 'Style Book' ) }
-								onClick={ () =>
-									setEditorCanvasContainerView(
-										! isStyleBookOpened
-											? 'style-book'
-											: undefined
-									)
-								}
-								isPressed={ isStyleBookOpened }
-							/>
-						) }
+					! isMobileViewport && (
 						<SidebarButton
-							icon={ edit }
-							label={ __( 'Edit styles' ) }
-							onClick={ async () => await openGlobalStyles() }
+							icon={ seen }
+							label={ __( 'Style Book' ) }
+							onClick={ () =>
+								setEditorCanvasContainerView(
+									! isStyleBookOpened
+										? 'style-book'
+										: undefined
+								)
+							}
+							isPressed={ isStyleBookOpened }
 						/>
-					</>
+					)
 				}
 			/>
 			{ isStyleBookOpened && ! isMobileViewport && (

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
@@ -17,7 +17,6 @@ import { useEffect } from '@wordpress/element';
  */
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import SidebarNavigationItem from '../sidebar-navigation-item';
-import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
 import { unlock } from '../../lock-unlock';
 import { store as editSiteStore } from '../../store';
 
@@ -51,12 +50,14 @@ export default function SidebarNavigationScreenMain() {
 					>
 						{ __( 'Navigation' ) }
 					</NavigatorButton>
-					<SidebarNavigationItemGlobalStyles
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_global_styles"
 						withChevron
 						icon={ styles }
 					>
 						{ __( 'Styles' ) }
-					</SidebarNavigationItemGlobalStyles>
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/page"

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -23,6 +23,7 @@ import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen
 import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
 import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
+import SidebarNavigationScreenBrowseGlobalStyles from '../sidebar-navigation-screen-browse-global-styles';
 import SaveHub from '../save-hub';
 import { unlock } from '../../lock-unlock';
 import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
@@ -47,6 +48,9 @@ function SidebarScreens() {
 			<NavigatorScreen path="/wp_global_styles">
 				<SidebarNavigationScreenGlobalStyles />
 			</NavigatorScreen>
+			<NavigatorScreen path="/wp_global_styles/browseStyles">
+				<SidebarNavigationScreenBrowseGlobalStyles />
+			</NavigatorScreen>
 			<NavigatorScreen path="/page">
 				<SidebarNavigationScreenPages />
 			</NavigatorScreen>