Extract the color palette to its own global styles screen

packages/components/src/item-group/styles.ts

@@ -32,7 +32,11 @@ export const itemWrapper = css`
 	display: block;
 `;
 
-export const item = itemWrapper;
+export const item = css`
+	width: 100%;
+	display: block;
+	margin: 0;
+`;
 
 export const bordered = css`
 	border: 1px solid ${ CONFIG.surfaceBorderColor };

packages/components/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-1c3a883-View-large-itemWrapper-spacedAround em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-1c3a883-View-large-itemWrapper-spacedAround em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
-+     class="components-item css-1esf9dc-View-large-itemWrapper em57xhy0"
+-     class="components-item css-4qcpca-View-medium-item em57xhy0"
++     class="components-item css-132y1d5-View-large-item em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -77,6 +77,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px;
   width: 100%;
   display: block;
+  margin: 0;
   border-radius: 2px;
 }
 
@@ -119,8 +120,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-4qcpca-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -146,8 +147,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-1o1qhwe-View-medium-itemWrapper-spacedAround em57xhy0"
-+       class="components-item css-gqguxs-View-medium-itemWrapper em57xhy0"
+-       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-4qcpca-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

packages/edit-site/src/components/sidebar/color-palette-panel.js

@@ -63,16 +63,18 @@ export default function ColorPalettePanel( {
 		[ contextName ]
 	);
 	return (
-		<ColorEdit
-			immutableColorSlugs={ immutableColorSlugs }
-			colors={ colors }
-			onChange={ ( newColors ) => {
-				setSetting( contextName, 'color.palette', newColors );
-			} }
-			emptyUI={ __(
-				'Colors are empty! Add some colors to create your own color palette.'
-			) }
-			canReset={ colors === userColors }
-		/>
+		<div className="edit-site-global-styles-color-palette-panel">
+			<ColorEdit
+				immutableColorSlugs={ immutableColorSlugs }
+				colors={ colors }
+				onChange={ ( newColors ) => {
+					setSetting( contextName, 'color.palette', newColors );
+				} }
+				emptyUI={ __(
+					'Colors are empty! Add some colors to create your own color palette.'
+				) }
+				canReset={ colors === userColors }
+			/>
+		</div>
 	);
 }

packages/edit-site/src/components/sidebar/color-panel.js

@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  */
 
 import { useSetting } from '../editor/utils';
-import ColorPalettePanel from './color-palette-panel';
+import Palette from './global-styles/palette';
 
 export function useHasColorPanel( { supports } ) {
 	return (
@@ -24,8 +24,6 @@ export default function ColorPanel( {
 	context: { supports, name },
 	getStyle,
 	setStyle,
-	getSetting,
-	setSetting,
 } ) {
 	const solids = useSetting( 'color.palette', name );
 	const gradients = useSetting( 'color.gradients', name );
@@ -116,21 +114,17 @@ export default function ColorPanel( {
 	}
 
 	return (
-		<PanelColorGradientSettings
-			title={ __( 'Color' ) }
-			settings={ settings }
-			colors={ solids }
-			gradients={ gradients }
-			disableCustomColors={ ! areCustomSolidsEnabled }
-			disableCustomGradients={ ! areCustomGradientsEnabled }
-			showTitle={ false }
-		>
-			<ColorPalettePanel
-				key={ 'color-palette-panel-' + name }
-				contextName={ name }
-				getSetting={ getSetting }
-				setSetting={ setSetting }
+		<>
+			<Palette contextName={ name } />
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				settings={ settings }
+				colors={ solids }
+				gradients={ gradients }
+				disableCustomColors={ ! areCustomSolidsEnabled }
+				disableCustomGradients={ ! areCustomGradientsEnabled }
+				showTitle={ false }
 			/>
-		</PanelColorGradientSettings>
+		</>
 	);
 }

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

@@ -10,27 +10,12 @@ import {
 	Button,
 	__experimentalNavigator as Navigator,
 	__experimentalNavigatorScreen as NavigatorScreen,
-	__experimentalUseNavigator as useNavigator,
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	FlexItem,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHeading as Heading,
-	__experimentalView as View,
 } from '@wordpress/components';
-import { __, isRTL } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { getBlockType } from '@wordpress/blocks';
-import {
-	Icon,
-	layout,
-	brush,
-	styles,
-	typography,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
+import { layout, brush, styles, typography } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -46,11 +31,14 @@ import {
 } from './typography-panel';
 import { default as BorderPanel, useHasBorderPanel } from './border-panel';
 import { default as ColorPanel, useHasColorPanel } from './color-panel';
+import ColorPalettePanel from './color-palette-panel';
 import {
 	default as DimensionsPanel,
 	useHasDimensionsPanel,
 } from './dimensions-panel';
 import { StylePreview } from './global-styles/preview';
+import NavigationButton from './global-styles/navigation-button';
+import ScreenHeader from './global-styles/screen-header';
 
 function getPanelTitle( blockName ) {
 	const blockType = getBlockType( blockName );
@@ -64,31 +52,6 @@ function getPanelTitle( blockName ) {
 	return blockType.title;
 }
 
-const ScreenHeader = ( { back, title } ) => {
-	return (
-		<VStack spacing={ 5 }>
-			<HStack spacing={ 2 }>
-				<View>
-					<NavigationButton
-						path={ back }
-						icon={
-							<Icon
-								icon={ isRTL() ? chevronRight : chevronLeft }
-								variant="muted"
-							/>
-						}
-						size="small"
-						isBack
-					/>
-				</View>
-				<Spacer>
-					<Heading level={ 5 }>{ title }</Heading>
-				</Spacer>
-			</HStack>
-		</VStack>
-	);
-};
-
 function GlobalStylesLevelMenu( { context, parentMenu = '' } ) {
 	const hasTypographyPanel = useHasTypographyPanel( context );
 	const hasColorPanel = useHasColorPanel( context );
@@ -139,6 +102,7 @@ function GlobalStylesLevelScreens( {
 	const hasBorderPanel = useHasBorderPanel( context );
 	const hasDimensionsPanel = useHasDimensionsPanel( context );
 	const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+
 	return (
 		<>
 			{ hasTypographyPanel && (
@@ -160,11 +124,29 @@ function GlobalStylesLevelScreens( {
 					<ScreenHeader
 						back={ parentMenu ? parentMenu : '/' }
 						title={ __( 'Colors' ) }
+						description={ __(
+							'Manage the color palette and how it applies to the elements of your site'
+						) }
 					/>
 					<ColorPanel
 						context={ context }
 						getStyle={ getStyle }
 						setStyle={ setStyle }
+					/>
+				</NavigatorScreen>
+			) }
+
+			{ hasColorPanel && (
+				<NavigatorScreen path={ parentMenu + '/colors/palette' }>
+					<ScreenHeader
+						back={ parentMenu + '/colors' }
+						title={ __( 'Color Palette' ) }
+						description={ __(
+							'Manage the color palette of your site'
+						) }
+					/>
+					<ColorPalettePanel
+						contextName={ context.name }
 						getSetting={ getSetting }
 						setSetting={ setSetting }
 					/>
@@ -197,28 +179,6 @@ function GlobalStylesLevelScreens( {
 	);
 }
 
-function NavigationButton( {
-	path,
-	icon,
-	children,
-	isBack = false,
-	...props
-} ) {
-	const navigator = useNavigator();
-	return (
-		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
-			<HStack justify="flex-start">
-				{ icon && (
-					<FlexItem>
-						<Icon icon={ icon } size={ 24 } />
-					</FlexItem>
-				) }
-				<FlexItem>{ children }</FlexItem>
-			</HStack>
-		</Item>
-	);
-}
-
 export default function GlobalStylesSidebar() {
 	const {
 		root,

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalUseNavigator as useNavigator,
+	__experimentalItem as Item,
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { Icon } from '@wordpress/icons';
+
+function NavigationButton( {
+	path,
+	icon,
+	children,
+	isBack = false,
+	...props
+} ) {
+	const navigator = useNavigator();
+	return (
+		<Item onClick={ () => navigator.push( path, { isBack } ) } { ...props }>
+			{ icon && (
+				<HStack justify="flex-start">
+					<FlexItem>
+						<Icon icon={ icon } size={ 24 } />
+					</FlexItem>
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
+
+export default NavigationButton;