Try/style panel

packages/edit-site/src/components/global-styles/header.js

@@ -12,23 +12,27 @@ import {
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
 
-function ScreenHeader( { title, description, onBack } ) {
+function ScreenHeader( { title, description, onBack, showBack = true } ) {
 	return (
 		<VStack spacing={ 0 }>
 			<View>
 				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
 					<HStack spacing={ 2 }>
-						<NavigatorToParentButton
-							style={
-								// TODO: This style override is also used in ToolsPanelHeader.
-								// It should be supported out-of-the-box by Button.
-								{ minWidth: 24, padding: 0 }
-							}
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							isSmall
-							aria-label={ __( 'Navigate to the previous view' ) }
-							onClick={ onBack }
-						/>
+						{ showBack && (
+							<NavigatorToParentButton
+								style={
+									// TODO: This style override is also used in ToolsPanelHeader.
+									// It should be supported out-of-the-box by Button.
+									{ minWidth: 24, padding: 0 }
+								}
+								icon={ isRTL() ? chevronRight : chevronLeft }
+								isSmall
+								aria-label={ __(
+									'Navigate to the previous view'
+								) }
+								onClick={ onBack }
+							/>
+						) }
 						<Spacer>
 							<Heading
 								className="edit-site-global-styles-header"

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

@@ -1 +1,2 @@
 export { default as GlobalStylesUI } from './ui';
+export { GlobalStylesStyleBook } from './ui';

packages/edit-site/src/components/global-styles/screen-block-list.js

@@ -157,13 +157,14 @@ function BlockList( { filterValue } ) {
 
 const MemoizedBlockList = memo( BlockList );
 
-function ScreenBlockList() {
+function ScreenBlockList( { showBack = true } ) {
 	const [ filterValue, setFilterValue ] = useState( '' );
 	const deferredFilterValue = useDeferredValue( filterValue );
 
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Blocks' ) }
 				description={ __(
 					'Customize the appearance of specific blocks and for the whole site.'

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

@@ -19,7 +19,7 @@ const {
 	ColorPanel: StylesColorPanel,
 } = unlock( blockEditorPrivateApis );
 
-function ScreenColors() {
+function ScreenColors( { showBack = true } ) {
 	const [ style ] = useGlobalStyle( '', undefined, 'user', {
 		shouldDecodeEncode: false,
 	} );
@@ -32,6 +32,7 @@ function ScreenColors() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Colors' ) }
 				description={ __(
 					'Manage palettes and the default color of different global elements on the site.'

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

@@ -15,7 +15,7 @@ const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock(
 	blockEditorPrivateApis
 );
 
-function ScreenCSS() {
+function ScreenCSS( { showBack = true } ) {
 	const description = __(
 		'Add your own CSS to customize the appearance and layout of your site.'
 	);
@@ -29,6 +29,7 @@ function ScreenCSS() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'CSS' ) }
 				description={
 					<>

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

@@ -14,13 +14,13 @@ import { unlock } from '../../lock-unlock';
 const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =
 	unlock( blockEditorPrivateApis );
 
-function ScreenLayout() {
+function ScreenLayout( { showBack = true } ) {
 	const [ rawSettings ] = useGlobalSetting( '' );
 	const settings = useSettingsForBlockElement( rawSettings );
 	const hasDimensionsPanel = useHasDimensionsPanel( settings );
 	return (
 		<>
-			<ScreenHeader title={ __( 'Layout' ) } />
+			<ScreenHeader showBack={ showBack } title={ __( 'Layout' ) } />
 			{ hasDimensionsPanel && <DimensionsPanel /> }
 		</>
 	);

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

@@ -13,7 +13,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import ScreenHeader from './header';
 import StyleVariationsContainer from './style-variations-container';
 
-function ScreenStyleVariations() {
+function ScreenStyleVariations( { showBack = true } ) {
 	const { mode } = useSelect( ( select ) => {
 		return {
 			mode: select( blockEditorStore ).__unstableGetEditorMode(),
@@ -50,6 +50,7 @@ function ScreenStyleVariations() {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				back="/"
 				title={ __( 'Browse styles' ) }
 				description={ __(

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

@@ -11,10 +11,11 @@ import TypographyElements from './typogrphy-elements';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
 
-function ScreenTypography() {
+function ScreenTypography( { showBack = true } ) {
 	return (
 		<>
 			<ScreenHeader
+				showBack={ showBack }
 				title={ __( 'Typography' ) }
 				description={ __(
 					'Manage the typography settings for different elements.'

packages/edit-site/src/components/global-styles/ui.js

@@ -256,32 +256,38 @@ function GlobalStylesEditorCanvasContainerLink() {
 	}, [ editorCanvasContainerView, goTo ] );
 }
 
-function GlobalStylesUI() {
+function GlobalStylesScreens( { initialPath, root = true } ) {
 	const blocks = getBlockTypes();
 	const editorCanvasContainerView = useSelect(
 		( select ) =>
 			unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
 		[]
 	);
+
+	const { goTo } = useNavigator();
+
+	useEffect( () => {
+		goTo( initialPath );
+	}, [ initialPath, goTo ] );
+
 	return (
-		<NavigatorProvider
-			className="edit-site-global-styles-sidebar__navigator-provider"
-			initialPath="/"
-		>
-			<GlobalStylesNavigationScreen path="/">
-				<ScreenRoot />
-			</GlobalStylesNavigationScreen>
+		<>
+			{ root && (
+				<GlobalStylesNavigationScreen path="/">
+					<ScreenRoot />
+				</GlobalStylesNavigationScreen>
+			) }
 
 			<GlobalStylesNavigationScreen path="/variations">
-				<ScreenStyleVariations />
+				<ScreenStyleVariations showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/blocks">
-				<ScreenBlockList />
+				<ScreenBlockList showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/typography">
-				<ScreenTypography />
+				<ScreenTypography showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/typography/text">
@@ -305,19 +311,19 @@ function GlobalStylesUI() {
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/colors">
-				<ScreenColors />
+				<ScreenColors showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/layout">
-				<ScreenLayout />
+				<ScreenLayout showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path="/css">
-				<ScreenCSS />
+				<ScreenCSS showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			<GlobalStylesNavigationScreen path={ '/revisions' }>
-				<ScreenRevisions />
+				<ScreenRevisions showBack={ root } />
 			</GlobalStylesNavigationScreen>
 
 			{ blocks.map( ( block ) => (
@@ -346,8 +352,19 @@ function GlobalStylesUI() {
 			<GlobalStylesActionMenu />
 			<GlobalStylesBlockLink />
 			<GlobalStylesEditorCanvasContainerLink />
+		</>
+	);
+}
+
+function GlobalStylesUI( { initialPath = '/', root = true } ) {
+	return (
+		<NavigatorProvider
+			className="edit-site-global-styles-sidebar__navigator-provider"
+			initialPath={ initialPath }
+		>
+			<GlobalStylesScreens root={ root } initialPath={ initialPath } />
 		</NavigatorProvider>
 	);
 }
-export { GlobalStylesMenuSlot };
+export { GlobalStylesMenuSlot, GlobalStylesStyleBook };
 export default GlobalStylesUI;

packages/edit-site/src/components/layout/style.scss

@@ -172,6 +172,10 @@
 .edit-site-page-pages-preview,
 .edit-site-template-pages-preview {
 	height: 100%;
+	iframe {
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .edit-site-layout__view-mode-toggle.components-button {

packages/edit-site/src/components/page-main/index.js

@@ -11,6 +11,7 @@ import DataviewsPatterns from '../page-patterns/dataviews-patterns';
 import PageTemplateParts from '../page-template-parts';
 import PageTemplates from '../page-templates';
 import PagePages from '../page-pages';
+import PageStyles from '../page-styles';
 import { unlock } from '../../lock-unlock';
 
 const { useLocation } = unlock( routerPrivateApis );
@@ -30,6 +31,9 @@ export default function PageMain() {
 		) : (
 			<PagePatterns />
 		);
+		return <PagePatterns />;
+	} else if ( path === '/wp_global_styles' ) {
+		return <PageStyles />;
 	} else if ( window?.__experimentalAdminViews && path === '/pages' ) {
 		return <PagePages />;
 	}

packages/edit-site/src/components/page-styles/index.js

@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+
+/**
+ * Internal dependencies
+ */
+import Page from '../page';
+import { store as editSiteStore } from '../../store';
+import { useSpecificEditorSettings } from '../block-editor/use-site-editor-settings';
+import { unlock } from '../../lock-unlock';
+import GlobalStylesUI from '../global-styles/ui';
+import useEditedEntityRecord from '../use-edited-entity-record';
+import EditorCanvasContainer from '../editor-canvas-container';
+import { GlobalStylesRenderer } from '../global-styles-renderer';
+
+const { useLocation } = unlock( routerPrivateApis );
+const { ExperimentalEditorProvider: EditorProvider } =
+	unlock( editorPrivateApis );
+
+export default function PageStyles() {
+	const { setEditorCanvasContainerView } = unlock(
+		useDispatch( editSiteStore )
+	);
+	const { record: editedPost } = useEditedEntityRecord();
+	const editorSettings = useSpecificEditorSettings();
+	// Clear the editor canvas container view when accessing the main navigation screen.
+	useEffect( () => {
+		setEditorCanvasContainerView( 'style-book' );
+		return () => {
+			setEditorCanvasContainerView( undefined );
+		};
+	}, [ setEditorCanvasContainerView ] );
+	// TODO: we need to handle properly `data={ data || EMPTY_ARRAY }` for when `isLoading`.
+	const {
+		params: { activeView },
+	} = useLocation();
+
+	return (
+		<>
+			<EditorProvider
+				post={ editedPost }
+				__unstableTemplate={ editedPost }
+				settings={ editorSettings }
+				useSubRegistry={ false }
+			>
+				<GlobalStylesRenderer />
+				{ activeView && (
+					<Page small>
+						<GlobalStylesUI
+							initialPath={ activeView }
+							root={ false }
+						/>
+					</Page>
+				) }
+				<Page>
+					<EditorCanvasContainer.Slot>
+						{ ( [ editorCanvasView ] ) =>
+							editorCanvasView && (
+								<div className="edit-site-visual-editor is-focus-mode">
+									{ editorCanvasView }
+								</div>
+							)
+						}
+					</EditorCanvasContainer.Slot>
+				</Page>
+			</EditorProvider>
+		</>
+	);
+}

packages/edit-site/src/components/page-styles/style.scss

@@ -0,0 +1,3 @@
+.edit-site-page-pages__featured-image {
+	border-radius: $radius-block-ui;
+}

packages/edit-site/src/components/page/index.js

@@ -20,9 +20,12 @@ export default function Page( {
 	actions,
 	children,
 	className,
+	small = false,
 	hideTitleFromUI = false,
 } ) {
-	const classes = classnames( 'edit-site-page', className );
+	const classes = classnames( 'edit-site-page', className, {
+		small,
+	} );
 
 	return (
 		<NavigableRegion className={ classes } ariaLabel={ title }>

packages/edit-site/src/components/page/style.scss

@@ -5,6 +5,9 @@
 	overflow: hidden;
 	margin: 0;
 	margin-top: $header-height;
+	&.small {
+		max-width: 280px;
+	}
 	@include break-medium() {
 		border-radius: 8px;
 		margin: $canvas-padding $canvas-padding $canvas-padding 0;