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;