Add: Styles section to the browse mode sidebar.

packages/base-styles/_z-index.scss

@@ -187,6 +187,8 @@ $z-layers: (
 	".edit-site-layout__canvas-container": 2,
 	".edit-site-layout__sidebar": 1,
 	".edit-site-layout__canvas-container.is-resizing::after": 100,
+	// Title needs to appear above other UI the section content.
+	".edit-site-sidebar-navigation-screen__title-icon": 1,
 );
 
 @function z-index( $key ) {

packages/edit-site/src/components/global-styles/screen-style-variations.js

@@ -1,143 +1,25 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	useMemo,
-	useContext,
-	useState,
-	useEffect,
-	useRef,
-} from '@wordpress/element';
-import { ENTER } from '@wordpress/keycodes';
-import {
-	__experimentalGrid as Grid,
-	Card,
-	CardBody,
-} from '@wordpress/components';
+import { Card, CardBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	store as blockEditorStore,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { mergeBaseAndUserConfigs } from './global-styles-provider';
-import StylesPreview from './preview';
 import ScreenHeader from './header';
-import { unlock } from '../../private-apis';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-
-function compareVariations( a, b ) {
-	return (
-		fastDeepEqual( a.styles, b.styles ) &&
-		fastDeepEqual( a.settings, b.settings )
-	);
-}
-
-function Variation( { variation } ) {
-	const [ isFocused, setIsFocused ] = useState( false );
-	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
-	const context = useMemo( () => {
-		return {
-			user: {
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			},
-			base,
-			merged: mergeBaseAndUserConfigs( base, variation ),
-			setUserConfig: () => {},
-		};
-	}, [ variation, base ] );
-
-	const selectVariation = () => {
-		setUserConfig( () => {
-			return {
-				settings: variation.settings,
-				styles: variation.styles,
-			};
-		} );
-	};
-
-	const selectOnEnter = ( event ) => {
-		if ( event.keyCode === ENTER ) {
-			event.preventDefault();
-			selectVariation();
-		}
-	};
-
-	const isActive = useMemo( () => {
-		return compareVariations( user, variation );
-	}, [ user, variation ] );
-
-	return (
-		<GlobalStylesContext.Provider value={ context }>
-			<div
-				className={ classnames(
-					'edit-site-global-styles-variations_item',
-					{
-						'is-active': isActive,
-					}
-				) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ variation?.title }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
-			>
-				<div className="edit-site-global-styles-variations_item-preview">
-					<StylesPreview
-						label={ variation?.title }
-						isFocused={ isFocused }
-						withHoverView
-					/>
-				</div>
-			</div>
-		</GlobalStylesContext.Provider>
-	);
-}
+import StyleVariationsContainer from './style-variations-container';
 
 function ScreenStyleVariations() {
-	const { variations, mode } = useSelect( ( select ) => {
+	const { mode } = useSelect( ( select ) => {
 		return {
-			variations:
-				select(
-					coreStore
-				).__experimentalGetCurrentThemeGlobalStylesVariations(),
-
 			mode: select( blockEditorStore ).__unstableGetEditorMode(),
 		};
 	}, [] );
 
-	const withEmptyVariation = useMemo( () => {
-		return [
-			{
-				title: __( 'Default' ),
-				settings: {},
-				styles: {},
-			},
-			...variations.map( ( variation ) => ( {
-				...variation,
-				settings: variation.settings ?? {},
-				styles: variation.styles ?? {},
-			} ) ),
-		];
-	}, [ variations ] );
-
-	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
 	const shouldRevertInitialMode = useRef( null );
 	useEffect( () => {
 		// ignore changes to zoom-out mode as we explictily change to it on mount.
@@ -160,8 +42,11 @@ function ScreenStyleVariations() {
 				}
 			};
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
 	return (
 		<>
 			<ScreenHeader
@@ -178,11 +63,7 @@ function ScreenStyleVariations() {
 				className="edit-site-global-styles-screen-style-variations"
 			>
 				<CardBody>
-					<Grid columns={ 2 }>
-						{ withEmptyVariation?.map( ( variation, index ) => (
-							<Variation key={ index } variation={ variation } />
-						) ) }
-					</Grid>
+					<StyleVariationsContainer />
 				</CardBody>
 			</Card>
 		</>

packages/edit-site/src/components/global-styles/style-variations-container.js

@@ -0,0 +1,136 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import fastDeepEqual from 'fast-deep-equal/es6';
+
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { __experimentalGrid as Grid } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import StylesPreview from './preview';
+import { unlock } from '../../private-apis';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+function compareVariations( a, b ) {
+	return (
+		fastDeepEqual( a.styles, b.styles ) &&
+		fastDeepEqual( a.settings, b.settings )
+	);
+}
+
+function Variation( { variation } ) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
+	const context = useMemo( () => {
+		return {
+			user: {
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			},
+			base,
+			merged: mergeBaseAndUserConfigs( base, variation ),
+			setUserConfig: () => {},
+		};
+	}, [ variation, base ] );
+
+	const selectVariation = () => {
+		setUserConfig( () => {
+			return {
+				settings: variation.settings,
+				styles: variation.styles,
+			};
+		} );
+	};
+
+	const selectOnEnter = ( event ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
+	const isActive = useMemo( () => {
+		return compareVariations( user, variation );
+	}, [ user, variation ] );
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			<div
+				className={ classnames(
+					'edit-site-global-styles-variations_item',
+					{
+						'is-active': isActive,
+					}
+				) }
+				role="button"
+				onClick={ selectVariation }
+				onKeyDown={ selectOnEnter }
+				tabIndex="0"
+				aria-label={ variation?.title }
+				aria-current={ isActive }
+				onFocus={ () => setIsFocused( true ) }
+				onBlur={ () => setIsFocused( false ) }
+			>
+				<div className="edit-site-global-styles-variations_item-preview">
+					<StylesPreview
+						label={ variation?.title }
+						isFocused={ isFocused }
+						withHoverView
+					/>
+				</div>
+			</div>
+		</GlobalStylesContext.Provider>
+	);
+}
+
+export default function StyleVariationsContainer() {
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations:
+				select(
+					coreStore
+				).__experimentalGetCurrentThemeGlobalStylesVariations() || [],
+		};
+	}, [] );
+
+	const withEmptyVariation = useMemo( () => {
+		return [
+			{
+				title: __( 'Default' ),
+				settings: {},
+				styles: {},
+			},
+			...variations.map( ( variation ) => ( {
+				...variation,
+				settings: variation.settings ?? {},
+				styles: variation.styles ?? {},
+			} ) ),
+		];
+	}, [ variations ] );
+
+	return (
+		<>
+			<Grid
+				columns={ 2 }
+				className="edit-site-global-styles-style-variations-container"
+			>
+				{ withEmptyVariation?.map( ( variation, index ) => (
+					<Variation key={ index } variation={ variation } />
+				) ) }
+			</Grid>
+		</>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { edit } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import StyleVariationsContainer from '../global-styles/style-variations-container';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
+
+export default function SidebarNavigationScreenGlobalStyles() {
+	const { openGeneralSidebar } = useDispatch( editSiteStore );
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	return (
+		<SidebarNavigationScreen
+			title={ __( 'Styles' ) }
+			description={ __(
+				'Choose a different style combination for the theme styles.'
+			) }
+			content={ <StyleVariationsContainer /> }
+			actions={
+				<SidebarButton
+					icon={ edit }
+					label={ __( 'Edit styles' ) }
+					onClick={ () => {
+						// switch to edit mode.
+						setCanvasMode( 'edit' );
+						// open global styles sidebar.
+						openGeneralSidebar( 'edit-site/global-styles' );
+					} }
+				/>
+			}
+		/>
+	);
+}

packages/edit-site/src/components/sidebar-navigation-screen-main/index.js

@@ -6,7 +6,7 @@ import {
 	__experimentalNavigatorButton as NavigatorButton,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { layout, symbolFilled, navigation } from '@wordpress/icons';
+import { layout, symbolFilled, navigation, styles } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -56,6 +56,14 @@ export default function SidebarNavigationScreenMain() {
 							{ __( 'Navigation' ) }
 						</NavigatorButton>
 					) }
+					<NavigatorButton
+						as={ SidebarNavigationItem }
+						path="/wp_global_styles"
+						withChevron
+						icon={ styles }
+					>
+						{ __( 'Styles' ) }
+					</NavigatorButton>
 					<NavigatorButton
 						as={ SidebarNavigationItem }
 						path="/wp_template"