Update: Show all color and gradient origins (core, theme, and user). (#…

…35970)
WordPress · Nov 3, 2021 · fb476b0 · fb476b0
1 parent 40ff1e5
commit fb476b0
Show file tree

Hide file tree

Showing 15 changed files with 615 additions and 304 deletions.
diff --git a/packages/block-editor/src/components/colors-gradients/control.js b/packages/block-editor/src/components/colors-gradients/control.js
@@ -35,6 +35,7 @@ function ColorGradientControlInner( {
 	gradients,
 	disableCustomColors,
 	disableCustomGradients,
+	__experimentalHasMultipleOrigins,
 	className,
 	label,
 	onColorChange,
@@ -104,6 +105,9 @@ function ColorGradientControlInner( {
 									: onColorChange
 							}
 							{ ...{ colors, disableCustomColors } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
 							clearable={ clearable }
 						/>
 					) }
@@ -119,6 +123,9 @@ function ColorGradientControlInner( {
 									: onGradientChange
 							}
 							{ ...{ gradients, disableCustomGradients } }
+							__experimentalHasMultipleOrigins={
+								__experimentalHasMultipleOrigins
+							}
 							clearable={ clearable }
 						/>
 					) }

diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js
@@ -9,6 +9,7 @@ import { every, isEmpty } from 'lodash';
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -90,6 +91,7 @@ export const PanelColorGradientSettingsInner = ( {
 	settings,
 	title,
 	showTitle = true,
+	__experimentalHasMultipleOrigins,
 	...props
 } ) => {
 	if (
@@ -140,6 +142,7 @@ export const PanelColorGradientSettingsInner = ( {
 						gradients,
 						disableCustomColors,
 						disableCustomGradients,
+						__experimentalHasMultipleOrigins,
 						...setting,
 					} }
 				/>
@@ -149,14 +152,77 @@ export const PanelColorGradientSettingsInner = ( {
 	);
 };
 
-const PanelColorGradientSettingsSelect = ( props ) => {
-	const colorGradientSettings = {};
+function useCommonSingleMultipleSelects() {
+	return {
+		disableCustomColors: ! useSetting( 'color.custom' ),
+		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+	};
+}
+
+const PanelColorGradientSettingsSingleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
 	colorGradientSettings.colors = useSetting( 'color.palette' );
 	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
-		'color.customGradient'
+	return (
+		<PanelColorGradientSettingsInner
+			{ ...{ ...colorGradientSettings, ...props } }
+		/>
 	);
+};
+
+const PanelColorGradientSettingsMultipleSelect = ( props ) => {
+	const colorGradientSettings = useCommonSingleMultipleSelects();
+	const userColors = useSetting( 'color.palette.user' );
+	const themeColors = useSetting( 'color.palette.theme' );
+	const coreColors = useSetting( 'color.palette.core' );
+	colorGradientSettings.colors = useMemo( () => {
+		const result = [];
+		if ( coreColors && coreColors.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				colors: coreColors,
+			} );
+		}
+		if ( themeColors && themeColors.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				colors: themeColors,
+			} );
+		}
+		if ( userColors && userColors.length ) {
+			result.push( {
+				name: __( 'User' ),
+				colors: userColors,
+			} );
+		}
+		return result;
+	}, [ coreColors, themeColors, userColors ] );
+
+	const userGradients = useSetting( 'color.gradients.user' );
+	const themeGradients = useSetting( 'color.gradients.theme' );
+	const coreGradients = useSetting( 'color.gradients.core' );
+	colorGradientSettings.gradients = useMemo( () => {
+		const result = [];
+		if ( coreGradients && coreGradients.length ) {
+			result.push( {
+				name: __( 'Core' ),
+				gradients: coreGradients,
+			} );
+		}
+		if ( themeGradients && themeGradients.length ) {
+			result.push( {
+				name: __( 'Theme' ),
+				gradients: themeGradients,
+			} );
+		}
+		if ( userGradients && userGradients.length ) {
+			result.push( {
+				name: __( 'User' ),
+				gradients: userGradients,
+			} );
+		}
+		return result;
+	}, [ userGradients, themeGradients, coreGradients ] );
 	return (
 		<PanelColorGradientSettingsInner
 			{ ...{ ...colorGradientSettings, ...props } }
@@ -170,7 +236,10 @@ const PanelColorGradientSettings = ( props ) => {
 	) {
 		return <PanelColorGradientSettingsInner { ...props } />;
 	}
-	return <PanelColorGradientSettingsSelect { ...props } />;
+	if ( props.__experimentalHasMultipleOrigins ) {
+		return <PanelColorGradientSettingsMultipleSelect { ...props } />;
+	}
+	return <PanelColorGradientSettingsSingleSelect { ...props } />;
 };
 
 export default PanelColorGradientSettings;
diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js
@@ -60,6 +60,7 @@ export default function ColorPanel( {
 				initialOpen={ false }
 				settings={ settings }
 				showTitle={ showTitle }
+				__experimentalHasMultipleOrigins
 			>
 				{ enableContrastChecking && (
 					<ContrastChecker

diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js
@@ -543,6 +543,7 @@ function CoverEdit( {
 					</PanelBody>
 				) }
 				<PanelColorGradientSettings
+					__experimentalHasMultipleOrigins
 					title={ __( 'Overlay' ) }
 					initialOpen={ true }
 					settings={ [

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -392,6 +392,7 @@ function Navigation( {
 					) }
 					{ hasColorSettings && (
 						<PanelColorSettings
+							__experimentalHasMultipleOrigins
 							title={ __( 'Color' ) }
 							initialOpen={ false }
 							colorSettings={ [

diff --git a/packages/block-library/src/separator/separator-settings.js b/packages/block-library/src/separator/separator-settings.js
@@ -7,6 +7,7 @@ import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 const SeparatorSettings = ( { color, setColor } ) => (
 	<InspectorControls>
 		<PanelColorSettings
+			__experimentalHasMultipleOrigins
 			title={ __( 'Color' ) }
 			colorSettings={ [
 				{

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
@@ -166,6 +166,7 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 				<PanelColorSettings
+					__experimentalHasMultipleOrigins
 					title={ __( 'Color' ) }
 					colorSettings={ [
 						{

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -19,19 +19,18 @@ import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
+import { ColorHeading } from './styles';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
-export default function ColorPalette( {
-	clearable = true,
+function SinglePalette( {
 	className,
+	clearColor,
 	colors,
-	disableCustomColors = false,
-	enableAlpha,
 	onChange,
 	value,
+	actions,
 } ) {
-	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const colorOptions = useMemo( () => {
 		return map( colors, ( { color, name } ) => {
 			const colordColor = colord( color );
@@ -70,6 +69,60 @@ export default function ColorPalette( {
 			);
 		} );
 	}, [ colors, value, onChange, clearColor ] );
+	return (
+		<CircularOptionPicker
+			className={ className }
+			options={ colorOptions }
+			actions={ actions }
+		/>
+	);
+}
+
+function MultiplePalettes( {
+	className,
+	clearColor,
+	colors,
+	onChange,
+	value,
+	actions,
+} ) {
+	return (
+		<VStack spacing={ 3 } className={ className }>
+			{ colors.map( ( { name, colors: colorPalette }, index ) => {
+				return (
+					<VStack spacing={ 2 } key={ index }>
+						<ColorHeading>{ name }</ColorHeading>
+						<SinglePalette
+							clearColor={ clearColor }
+							colors={ colorPalette }
+							onChange={ onChange }
+							value={ value }
+							actions={
+								colors.length === index + 1 ? actions : null
+							}
+						/>
+					</VStack>
+				);
+			} ) }
+		</VStack>
+	);
+}
+
+export default function ColorPalette( {
+	clearable = true,
+	className,
+	colors,
+	disableCustomColors = false,
+	enableAlpha,
+	onChange,
+	value,
+	__experimentalHasMultipleOrigins = false,
+} ) {
+	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
+	const Component = __experimentalHasMultipleOrigins
+		? MultiplePalettes
+		: SinglePalette;
+
 	const renderCustomColorPicker = () => (
 		<ColorPicker
 			color={ value }
@@ -97,8 +150,12 @@ export default function ColorPalette( {
 					) }
 				/>
 			) }
-			<CircularOptionPicker
-				options={ colorOptions }
+			<Component
+				clearable={ clearable }
+				clearColor={ clearColor }
+				colors={ colors }
+				onChange={ onChange }
+				value={ value }
 				actions={
 					!! clearable && (
 						<CircularOptionPicker.ButtonAction

diff --git a/packages/components/src/color-palette/styles.js b/packages/components/src/color-palette/styles.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+/**
+ * Internal dependencies
+ */
+import { Heading } from '../heading';
+
+export const ColorHeading = styled( Heading )`
+	text-transform: uppercase;
+	line-height: 24px;
+	font-weight: 500;
+	&&& {
+		font-size: 11px;
+		margin-bottom: 0;
+	}
+`;