Update: Make the styles sections a preview of the style book with a l…

…eft edit styles sidebar.
WordPress · Sep 24, 2024 · d4934a5 · d4934a5
1 parent 203880a
commit d4934a5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 67 deletions.
diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -27,6 +27,8 @@ import {
 	TEMPLATE_POST_TYPE,
 } from '../../utils/constants';
 import { PostEdit } from '../post-edit';
+import GlobalStylesUI from '../global-styles/ui';
+import Page from '../page';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
@@ -155,9 +157,17 @@ export default function useLayoutAreas() {
 				sidebar: (
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
 				),
+				content: (
+					<Page className="edit-site-styes" title={ __( 'Styles' ) }>
+						<GlobalStylesUI />
+					</Page>
+				),
 				preview: <Editor />,
 				mobile: hasEditCanvasMode && <Editor />,
 			},
+			widths: {
+				content: 380,
+			},
 		};
 	}
 

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,12 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { edit, seen } from '@wordpress/icons';
 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 editorStore } from '@wordpress/editor';
 import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
@@ -16,12 +14,10 @@ import { store as preferencesStore } from '@wordpress/preferences';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 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';
 import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
-import SidebarNavigationScreenGlobalStylesContent from './content';
 
 export function SidebarNavigationItemGlobalStyles( props ) {
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -60,33 +56,24 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setIsListViewOpened } = useDispatch( editorStore );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { setCanvasMode, setEditorCanvasContainerView } = unlock(
 		useDispatch( editSiteStore )
 	);
-	const { isViewMode, isStyleBookOpened, revisionsCount } = useSelect(
-		( select ) => {
-			const { getCanvasMode, getEditorCanvasContainerView } = unlock(
-				select( editSiteStore )
-			);
-			const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
-				select( coreStore );
-			const globalStylesId = __experimentalGetCurrentGlobalStylesId();
-			const globalStyles = globalStylesId
-				? getEntityRecord( 'root', 'globalStyles', globalStylesId )
-				: undefined;
-			return {
-				isViewMode: 'view' === getCanvasMode(),
-				isStyleBookOpened:
-					'style-book' === getEditorCanvasContainerView(),
-				revisionsCount:
-					globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ??
-					0,
-			};
-		},
-		[]
-	);
+	const { isViewMode, revisionsCount } = useSelect( ( select ) => {
+		const { getCanvasMode } = unlock( select( editSiteStore ) );
+		const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =
+			select( coreStore );
+		const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+		const globalStyles = globalStylesId
+			? getEntityRecord( 'root', 'globalStyles', globalStylesId )
+			: undefined;
+		return {
+			isViewMode: 'view' === getCanvasMode(),
+			revisionsCount:
+				globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0,
+		};
+	}, [] );
 	const { set: setPreference } = useDispatch( preferencesStore );
 
 	const openGlobalStyles = useCallback( async () => {
@@ -97,19 +84,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 		] );
 	}, [ setCanvasMode, openGeneralSidebar, setPreference ] );
 
-	const openStyleBook = useCallback( async () => {
-		await openGlobalStyles();
-		// Open the Style Book once the canvas mode is set to edit,
-		// and the global styles sidebar is open. This ensures that
-		// the Style Book is not prematurely closed.
-		setEditorCanvasContainerView( 'style-book' );
-		setIsListViewOpened( false );
-	}, [
-		openGlobalStyles,
-		setEditorCanvasContainerView,
-		setIsListViewOpened,
-	] );
-
 	const openRevisions = useCallback( async () => {
 		await openGlobalStyles();
 		// Open the global styles revisions once the canvas mode is set to edit,
@@ -133,7 +107,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 					'Choose a different style combination for the theme styles.'
 				) }
 				backPath={ backPath }
-				content={ <SidebarNavigationScreenGlobalStylesContent /> }
 				footer={
 					shouldShowGlobalStylesFooter && (
 						<SidebarNavigationScreenDetailsFooter
@@ -142,36 +115,11 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 						/>
 					)
 				}
-				actions={
-					<>
-						{ ! isMobileViewport && (
-							<SidebarButton
-								icon={ seen }
-								label={ __( 'Style Book' ) }
-								onClick={ () =>
-									setEditorCanvasContainerView(
-										! isStyleBookOpened
-											? 'style-book'
-											: undefined
-									)
-								}
-								isPressed={ isStyleBookOpened }
-							/>
-						) }
-						<SidebarButton
-							icon={ edit }
-							label={ __( 'Edit styles' ) }
-							onClick={ async () => await openGlobalStyles() }
-						/>
-					</>
-				}
 			/>
-			{ isStyleBookOpened && ! isMobileViewport && isViewMode && (
+			{ ! isMobileViewport && isViewMode && (
 				<StyleBook
 					enableResizing={ false }
 					isSelected={ () => false }
-					onClick={ openStyleBook }
-					onSelect={ openStyleBook }
 					showCloseButton={ false }
 					showTabs={ false }
 				/>