Reorganize global styles menu

Implements the second alternative shown in #40478 to reorganize the Global Styles panel to keep both Blocks and Browse styles links in line with the rest of the menu. Let's iterate over this PR to decide on which of the two options makes more sense.
WordPress · Jun 8, 2022 · 1b85f44 · 1b85f44
1 parent 9abede0
commit 1b85f44
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 65 deletions.
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -2,7 +2,15 @@
  * WordPress dependencies
  */
 import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
-import { typography, color, layout } from '@wordpress/icons';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import {
+	brush,
+	blockDefault,
+	typography,
+	color,
+	layout,
+} from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -20,6 +28,13 @@ function ContextMenu( { name, parentMenu = '' } ) {
 	const hasBorderPanel = useHasBorderPanel( name );
 	const hasDimensionsPanel = useHasDimensionsPanel( name );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+	const { variations } = useSelect( ( select ) => {
+		return {
+			variations: select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations(),
+		};
+	}, [] );
 
 	return (
 		<ItemGroup>
@@ -47,6 +62,14 @@ function ContextMenu( { name, parentMenu = '' } ) {
 					{ __( 'Layout' ) }
 				</NavigationButtonAsItem>
 			) }
+			{ !! variations?.length && (
+				<NavigationButtonAsItem path="/variations" icon={ brush }>
+					{ __( 'Browse styles' ) }
+				</NavigationButtonAsItem>
+			) }
+			<NavigationButtonAsItem path="/blocks" icon={ blockDefault }>
+				{ __( 'Blocks' ) }
+			</NavigationButtonAsItem>
 		</ItemGroup>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js
@@ -2,38 +2,19 @@
  * WordPress dependencies
  */
 import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-	__experimentalSpacer as Spacer,
 	__experimentalVStack as VStack,
-	FlexItem,
 	CardBody,
 	Card,
-	CardDivider,
 	CardMedia,
 } from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { chevronLeft, chevronRight } from '@wordpress/icons';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
  */
-import { IconWithCurrentColor } from './icon-with-current-color';
-import { NavigationButtonAsItem } from './navigation-button';
 import ContextMenu from './context-menu';
 import StylesPreview from './preview';
 
 function ScreenRoot() {
-	const { variations } = useSelect( ( select ) => {
-		return {
-			variations: select(
-				coreStore
-			).__experimentalGetCurrentThemeGlobalStylesVariations(),
-		};
-	}, [] );
-
 	return (
 		<Card size="small">
 			<CardBody>
@@ -43,54 +24,9 @@ function ScreenRoot() {
 							<StylesPreview />
 						</CardMedia>
 					</Card>
-					{ !! variations?.length && (
-						<ItemGroup>
-							<NavigationButtonAsItem path="/variations">
-								<HStack justify="space-between">
-									<FlexItem>
-										{ __( 'Browse styles' ) }
-									</FlexItem>
-									<IconWithCurrentColor
-										icon={
-											isRTL() ? chevronLeft : chevronRight
-										}
-									/>
-								</HStack>
-							</NavigationButtonAsItem>
-						</ItemGroup>
-					) }
 					<ContextMenu />
 				</VStack>
 			</CardBody>
-
-			<CardDivider />
-
-			<CardBody>
-				<Spacer
-					as="p"
-					paddingTop={ 2 }
-					/*
-					 * 13px matches the text inset of the NavigationButton (12px padding, plus the width of the button's border).
-					 * This is an ad hoc override for this particular instance only and should be reconsidered before making into a pattern.
-					 */
-					paddingX="13px"
-					marginBottom={ 4 }
-				>
-					{ __(
-						'Customize the appearance of specific blocks for the whole site.'
-					) }
-				</Spacer>
-				<ItemGroup>
-					<NavigationButtonAsItem path="/blocks">
-						<HStack justify="space-between">
-							<FlexItem>{ __( 'Blocks' ) }</FlexItem>
-							<IconWithCurrentColor
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</CardBody>
 		</Card>
 	);
 }