no styles drill down; disable style books click;

WordPress · Sep 30, 2024 · 3525c68 · 3525c68
1 parent 45d4e97
commit 3525c68
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 37 deletions.
diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js
@@ -247,6 +247,7 @@ export default function Layout( { route } ) {
 													gradientValue ??
 													backgroundColor,
 											} }
+											hasResize={ widths?.hasResize }
 										>
 											{ areas.preview }
 										</ResizableFrame>

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -152,7 +152,7 @@ export default function useLayoutAreas() {
 	// Styles
 	if ( path && path.startsWith( '/wp_global_styles' ) ) {
 		return {
-			key: 'styles',
+			key: 'default',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
@@ -167,6 +167,7 @@ export default function useLayoutAreas() {
 			},
 			widths: {
 				content: 380,
+				hasResize: false,
 			},
 		};
 	}

diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js
@@ -81,6 +81,7 @@ function ResizableFrame( {
 	isOversized,
 	setIsOversized,
 	isReady,
+	hasResize = true,
 	children,
 	/** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */
 	defaultSize,
@@ -254,8 +255,8 @@ function ResizableFrame( {
 				bottom: false,
 				// Resizing will be disabled until the editor content is loaded.
 				...( isRTL()
-					? { right: isReady, left: false }
-					: { left: isReady, right: false } ),
+					? { right: isReady && hasResize, left: false }
+					: { left: isReady && hasResize, right: false } ),
 				topRight: false,
 				bottomRight: false,
 				bottomLeft: false,

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
@@ -23,12 +23,10 @@ import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-d
 import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main';
 import SidebarButton from '../sidebar-button';
 
-const { useHistory } = unlock( routerPrivateApis );
+const { useLocation } = unlock( routerPrivateApis );
 
 export function SidebarNavigationItemGlobalStyles( props ) {
-	const { openGeneralSidebar } = useDispatch( editSiteStore );
-	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-
+	const { params } = useLocation();
 	const hasGlobalStyleVariations = useSelect(
 		( select ) =>
 			!! select(
@@ -42,24 +40,16 @@ export function SidebarNavigationItemGlobalStyles( props ) {
 				{ ...props }
 				params={ { path: '/wp_global_styles' } }
 				uid="global-styles-navigation-item"
+				aria-current={
+					params.path && params.path.startsWith( '/wp_global_styles' )
+				}
 			/>
 		);
 	}
-	return (
-		<SidebarNavigationItem
-			{ ...props }
-			onClick={ () => {
-				// Switch to edit mode.
-				setCanvasMode( 'edit' );
-				// Open global styles sidebar.
-				openGeneralSidebar( 'edit-site/global-styles' );
-			} }
-		/>
-	);
+	return <SidebarNavigationItem { ...props } />;
 }
 
-export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
-	const history = useHistory();
+export default function SidebarNavigationScreenGlobalStyles() {
 	const { revisions, isLoading: isLoadingRevisions } =
 		useGlobalStylesRevisions();
 	const { openGeneralSidebar } = useDispatch( editSiteStore );
@@ -106,15 +96,14 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 	const modifiedDateTime = revisions?.[ 0 ]?.modified;
 	const shouldShowGlobalStylesFooter =
 		hasRevisions && ! isLoadingRevisions && modifiedDateTime;
-
 	return (
 		<>
 			<SidebarNavigationScreen
-				title={ __( 'Styles' ) }
+				title={ __( 'Design' ) }
+				isRoot
 				description={ __(
-					'Change the look and feel of your web site.'
+					'Customize the appearance of your website using the block editor.'
 				) }
-				backPath={ backPath }
 				content={
 					<MainSidebarNavigationContent activeItem="styles-navigation-item" />
 				}
@@ -152,13 +141,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) {
 					isSelected={ () => false }
 					showCloseButton={ false }
 					showTabs={ false }
-					onSelect={ ( blockName ) => {
-						history.push( {
-							path: `/wp_global_styles/blocks/${ encodeURIComponent(
-								blockName
-							) }`,
-						} );
-					} }
+					onClick={ () => {} }
 				/>
 			) }
 		</>

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,15 +21,14 @@ import {
 	PATTERN_TYPES,
 } from '../../utils/constants';
 
-export function MainSidebarNavigationContent( { activeItem } ) {
+export function MainSidebarNavigationContent() {
 	return (
 		<ItemGroup>
 			<SidebarNavigationItem
 				uid="navigation-navigation-item"
 				params={ { postType: NAVIGATION_POST_TYPE } }
 				withChevron
 				icon={ navigation }
-				aria-current={ activeItem === 'navigation-navigation-item' }
 			>
 				{ __( 'Navigation' ) }
 			</SidebarNavigationItem>
@@ -38,7 +37,6 @@ export function MainSidebarNavigationContent( { activeItem } ) {
 				className="is-selected"
 				withChevron
 				icon={ styles }
-				aria-current={ activeItem === 'styles-navigation-item' }
 			>
 				{ __( 'Styles' ) }
 			</SidebarNavigationItemGlobalStyles>
@@ -47,7 +45,6 @@ export function MainSidebarNavigationContent( { activeItem } ) {
 				params={ { postType: 'page' } }
 				withChevron
 				icon={ page }
-				aria-current={ activeItem === 'page-navigation-item' }
 			>
 				{ __( 'Pages' ) }
 			</SidebarNavigationItem>
@@ -56,7 +53,6 @@ export function MainSidebarNavigationContent( { activeItem } ) {
 				params={ { postType: TEMPLATE_POST_TYPE } }
 				withChevron
 				icon={ layout }
-				aria-current={ activeItem === 'template-navigation-item' }
 			>
 				{ __( 'Templates' ) }
 			</SidebarNavigationItem>
@@ -65,7 +61,6 @@ export function MainSidebarNavigationContent( { activeItem } ) {
 				params={ { postType: PATTERN_TYPES.user } }
 				withChevron
 				icon={ symbol }
-				aria-current={ activeItem === 'patterns-navigation-item' }
 			>
 				{ __( 'Patterns' ) }
 			</SidebarNavigationItem>