Extract the three color panels to their own global styles view (#35400)

WordPress · Oct 7, 2021 · d78b271 · d78b271
1 parent 17ca382
commit d78b271
Show file tree

Hide file tree

Showing 12 changed files with 330 additions and 102 deletions.
diff --git a/packages/edit-site/src/components/global-styles/color-utils.js b/packages/edit-site/src/components/global-styles/color-utils.js
@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+
+import { getSupportedGlobalStylesPanels } from './hooks';
+
+export function useHasColorPanel( name ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	return (
+		supports.includes( 'color' ) ||
+		supports.includes( 'backgroundColor' ) ||
+		supports.includes( 'background' ) ||
+		supports.includes( 'linkColor' )
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-panel';
+import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import NavigationButton from './navigation-button';

diff --git a/packages/edit-site/src/components/global-styles/palette.js b/packages/edit-site/src/components/global-styles/palette.js
@@ -26,40 +26,32 @@ function Palette( { name } ) {
 		: '/blocks/' + name + '/colors/palette';
 
 	return (
-		<div className="edit-site-global-style-palette">
-			<VStack spacing={ 1 }>
-				<Subtitle>{ __( 'Palette' ) }</Subtitle>
-				<ItemGroup isBordered isSeparated>
-					<NavigationButton path={ screenPath }>
-						<HStack>
-							<FlexBlock>
-								<ZStack isLayered={ false } offset={ -8 }>
-									{ colors
-										.slice( 0, 5 )
-										.map( ( { color } ) => (
-											<ColorIndicator
-												key={ color }
-												colorValue={ color }
-											/>
-										) ) }
-								</ZStack>
-							</FlexBlock>
-							<FlexItem>
-								{ sprintf(
-									// Translators: %d: Number of palette colors.
-									_n(
-										'%d color',
-										'%d colors',
-										colors.length
-									),
-									colors.length
-								) }
-							</FlexItem>
-						</HStack>
-					</NavigationButton>
-				</ItemGroup>
-			</VStack>
-		</div>
+		<VStack spacing={ 3 }>
+			<Subtitle>{ __( 'Palette' ) }</Subtitle>
+			<ItemGroup isBordered isSeparated>
+				<NavigationButton path={ screenPath }>
+					<HStack>
+						<FlexBlock>
+							<ZStack isLayered={ false } offset={ -8 }>
+								{ colors.slice( 0, 5 ).map( ( { color } ) => (
+									<ColorIndicator
+										key={ color }
+										colorValue={ color }
+									/>
+								) ) }
+							</ZStack>
+						</FlexBlock>
+						<FlexItem>
+							{ sprintf(
+								// Translators: %d: Number of palette colors.
+								_n( '%d color', '%d colors', colors.length ),
+								colors.length
+							) }
+						</FlexItem>
+					</HStack>
+				</NavigationButton>
+			</ItemGroup>
+		</VStack>
 	);
 }
 

diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -18,11 +18,12 @@ const StylesPreview = () => {
 	const [ textColor = 'black' ] = useStyle( 'color.text' );
 	const [ linkColor = 'blue' ] = useStyle( 'elements.link.color.text' );
 	const [ backgroundColor = 'white' ] = useStyle( 'color.background' );
+	const [ gradientValue ] = useStyle( 'color.gradient' );
 
 	return (
 		<Card
 			className="edit-site-global-styles-preview"
-			style={ { background: backgroundColor } }
+			style={ { background: gradientValue ?? backgroundColor } }
 		>
 			<HStack spacing={ 5 }>
 				<div style={ { fontFamily, fontSize: '80px' } }>Aa</div>

diff --git a/...c/components/global-styles/color-panel.js → .../global-styles/screen-background-color.js b/...c/components/global-styles/color-panel.js → .../global-styles/screen-background-color.js
@@ -1,27 +1,17 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
+import { __experimentalPanelColorGradientSettings as PanelColorGradientSettings } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-
+import ScreenHeader from './header';
 import { getSupportedGlobalStylesPanels, useSetting, useStyle } from './hooks';
-import Palette from './palette';
-
-export function useHasColorPanel( name ) {
-	const supports = getSupportedGlobalStylesPanels( name );
-	return (
-		supports.includes( 'color' ) ||
-		supports.includes( 'backgroundColor' ) ||
-		supports.includes( 'background' ) ||
-		supports.includes( 'linkColor' )
-	);
-}
 
-export default function ColorPanel( { name } ) {
+function ScreenBackgroundColor( { name } ) {
+	const parentMenu = name === undefined ? '' : '/blocks/' + name;
 	const supports = getSupportedGlobalStylesPanels( name );
 	const [ solids ] = useSetting( 'color.palette', name );
 	const [ gradients ] = useSetting( 'color.gradients', name );
@@ -31,28 +21,15 @@ export default function ColorPanel( { name } ) {
 		name
 	);
 
-	const [ isLinkEnabled ] = useSetting( 'color.link', name );
-	const [ isTextEnabled ] = useSetting( 'color.text', name );
 	const [ isBackgroundEnabled ] = useSetting( 'color.background', name );
 
-	const hasLinkColor =
-		supports.includes( 'linkColor' ) &&
-		isLinkEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
-	const hasTextColor =
-		supports.includes( 'color' ) &&
-		isTextEnabled &&
-		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasBackgroundColor =
 		supports.includes( 'backgroundColor' ) &&
 		isBackgroundEnabled &&
 		( solids.length > 0 || areCustomSolidsEnabled );
 	const hasGradientColor =
 		supports.includes( 'background' ) &&
 		( gradients.length > 0 || areCustomGradientsEnabled );
-
-	const [ color, setColor ] = useStyle( 'color.text', name );
-	const [ userColor ] = useStyle( 'color.text', name, 'user' );
 	const [ backgroundColor, setBackgroundColor ] = useStyle(
 		'color.background',
 		name
@@ -64,26 +41,12 @@ export default function ColorPanel( { name } ) {
 	);
 	const [ gradient, setGradient ] = useStyle( 'color.gradient', name );
 	const [ userGradient ] = useStyle( 'color.gradient', name, 'user' );
-	const [ linkColor, setLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name
-	);
-	const [ userLinkColor ] = useStyle(
-		'elements.link.color.text',
-		name,
-		'user'
-	);
 
-	const settings = [];
-	if ( hasTextColor ) {
-		settings.push( {
-			colorValue: color,
-			onColorChange: setColor,
-			label: __( 'Text color' ),
-			clearable: color === userColor,
-		} );
+	if ( ! hasBackgroundColor && ! hasGradientColor ) {
+		return null;
 	}
 
+	const settings = [];
 	let backgroundSettings = {};
 	if ( hasBackgroundColor ) {
 		backgroundSettings = {
@@ -107,26 +70,22 @@ export default function ColorPanel( { name } ) {
 		}
 	}
 
-	if ( hasBackgroundColor || hasGradientColor ) {
-		settings.push( {
-			...backgroundSettings,
-			...gradientSettings,
-			label: __( 'Background color' ),
-		} );
-	}
-
-	if ( hasLinkColor ) {
-		settings.push( {
-			colorValue: linkColor,
-			onColorChange: setLinkColor,
-			label: __( 'Link color' ),
-			clearable: linkColor === userLinkColor,
-		} );
-	}
+	settings.push( {
+		...backgroundSettings,
+		...gradientSettings,
+		label: __( 'Background color' ),
+	} );
 
 	return (
 		<>
-			<Palette contextName={ name } />
+			<ScreenHeader
+				back={ parentMenu + '/colors' }
+				title={ __( 'Background' ) }
+				description={ __(
+					'Set the background color choosing from the palette or pick your own'
+				) }
+			/>
+
 			<PanelColorGradientSettings
 				title={ __( 'Color' ) }
 				settings={ settings }
@@ -139,3 +98,5 @@ export default function ColorPanel( { name } ) {
 		</>
 	);
 }
+
+export default ScreenBackgroundColor;
diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js
@@ -8,7 +8,7 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { useHasBorderPanel } from './border-panel';
-import { useHasColorPanel } from './color-panel';
+import { useHasColorPanel } from './color-utils';
 import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasTypographyPanel } from './typography-panel';
 import ScreenHeader from './header';

diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js
@@ -2,12 +2,90 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	FlexItem,
+	ColorIndicator,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import ColorPanel from './color-panel';
 import ScreenHeader from './header';
+import Palette from './palette';
+import NavigationButton from './navigation-button';
+import { getSupportedGlobalStylesPanels, useStyle } from './hooks';
+import Subtitle from './subtitle';
+
+function BackgroundColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport =
+		supports.includes( 'backgroundColor' ) ||
+		supports.includes( 'background' );
+	const [ backgroundColor ] = useStyle( 'color.background', name );
+	const [ gradientValue ] = useStyle( 'color.gradient', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/background' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator
+						colorValue={ gradientValue ?? backgroundColor }
+					/>
+				</FlexItem>
+				<FlexItem>{ __( 'Background' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
+
+function TextColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'color' );
+	const [ color ] = useStyle( 'color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/text' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator colorValue={ color } />
+				</FlexItem>
+				<FlexItem>{ __( 'Text' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
+
+function LinkColorItem( { name, parentMenu } ) {
+	const supports = getSupportedGlobalStylesPanels( name );
+	const hasSupport = supports.includes( 'linkColor' );
+	const [ color ] = useStyle( 'elements.link.color.text', name );
+
+	if ( ! hasSupport ) {
+		return null;
+	}
+
+	return (
+		<NavigationButton path={ parentMenu + '/colors/link' }>
+			<HStack justify="flex-start">
+				<FlexItem>
+					<ColorIndicator colorValue={ color } />
+				</FlexItem>
+				<FlexItem>{ __( 'Links' ) }</FlexItem>
+			</HStack>
+		</NavigationButton>
+	);
+}
 
 function ScreenColors( { name } ) {
 	const parentMenu = name === undefined ? '' : '/blocks/' + name;
@@ -21,7 +99,30 @@ function ScreenColors( { name } ) {
 					'Manage color palettes and how they affect the different elements of the site.'
 				) }
 			/>
-			<ColorPanel name={ name } />
+
+			<div className="edit-site-global-styles-screen-colors">
+				<VStack spacing={ 10 }>
+					<Palette contextName={ name } />
+
+					<VStack spacing={ 3 }>
+						<Subtitle>{ __( 'Elements' ) }</Subtitle>
+						<ItemGroup isBordered isSeparated>
+							<BackgroundColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+							<TextColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+							<LinkColorItem
+								name={ name }
+								parentMenu={ parentMenu }
+							/>
+						</ItemGroup>
+					</VStack>
+				</VStack>
+			</div>
 		</>
 	);
 }