Make possible to overwrite the globally defined colors in PanelColorSettings

packages/editor/src/components/color-palette/control.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { BaseControl, ColorIndicator } from '@wordpress/components';
+import { ifCondition, compose } from '@wordpress/compose';
 import { Fragment } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
 
@@ -15,7 +16,13 @@ import { getColorObjectByColorValue } from '../colors';
 // translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(current %s: %s)' );
 
-export function ColorPaletteControl( { label, value, onChange, colors } ) {
+export function ColorPaletteControl( {
+	colors,
+	disableCustomColors,
+	label,
+	onChange,
+	value,
+} ) {
 	const colorObject = getColorObjectByColorValue( colors, value );
 	const colorName = colorObject && colorObject.name;
 	const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
@@ -40,9 +47,13 @@ export function ColorPaletteControl( { label, value, onChange, colors } ) {
 				className="editor-color-palette-control__color-palette"
 				value={ value }
 				onChange={ onChange }
+				{ ... { colors, disableCustomColors } }
 			/>
 		</BaseControl>
 	);
 }
 
-export default withColorContext( ColorPaletteControl );
+export default compose( [
+	withColorContext,
+	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
+] )( ColorPaletteControl );

packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -15,6 +15,14 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
 >
   <WithColorContext(ColorPalette)
     className="editor-color-palette-control__color-palette"
+    colors={
+      Array [
+        Object {
+          "color": "#f00",
+          "name": "red",
+        },
+      ]
+    }
     onChange={[Function]}
     value="#f00"
   />

packages/editor/src/components/color-palette/with-color-context.js

@@ -12,10 +12,13 @@ import { withSelect } from '@wordpress/data';
 
 export default createHigherOrderComponent(
 	withSelect(
-		( select ) => {
+		( select, ownProps ) => {
 			const settings = select( 'core/editor' ).getEditorSettings();
-			const colors = settings.colors;
-			const disableCustomColors = settings.disableCustomColors;
+			const colors = ownProps.colors === undefined ?
+				settings.colors : ownProps.colors;
+
+			const disableCustomColors = ownProps.disableCustomColors === undefined ?
+				settings.disableCustomColors : ownProps.disableCustomColors;
 			return {
 				colors,
 				disableCustomColors,

packages/editor/src/components/panel-color-settings/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { omit } from 'lodash';
+import { some } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { PanelBody, ColorIndicator } from '@wordpress/components';
-import { ifCondition, compose } from '@wordpress/compose';
+import { ifCondition } from '@wordpress/compose';
 import { sprintf, __ } from '@wordpress/i18n';
 
 /**
@@ -17,58 +17,107 @@ import ColorPaletteControl from '../color-palette/control';
 import withColorContext from '../color-palette/with-color-context';
 import { getColorObjectByColorValue } from '../colors';
 
+const hasCustomColorsDisabledForSetting = ( disableCustomColors, colorSetting ) => {
+	if ( colorSetting.disableCustomColors !== undefined ) {
+		return colorSetting.disableCustomColors;
+	}
+	return disableCustomColors;
+};
+
+const hasColorsToChooseInSetting = (
+	colors = [],
+	disableCustomColors,
+	colorSetting ) => {
+	if ( ! hasCustomColorsDisabledForSetting( disableCustomColors, colorSetting ) ) {
+		return true;
+	}
+	return ( colorSetting.colors || colors ).length > 0;
+};
+
+const hasColorsToChoose = ( { colors, disableCustomColors, colorSettings } ) => {
+	return some( colorSettings, ( colorSetting ) => {
+		return hasColorsToChooseInSetting(
+			colors,
+			disableCustomColors,
+			colorSetting
+		);
+	} );
+};
+
 // translators: first %s: The type of color (e.g. background color), second %s: the color name or value (e.g. red or #ff0000)
 const colorIndicatorAriaLabel = __( '(%s: %s)' );
 
 const renderColorIndicators = ( colorSettings, colors ) => {
-	return colorSettings.map( ( { value, label }, index ) => {
-		if ( ! value ) {
-			return null;
-		}
+	return colorSettings.map(
+		( { value, label, colors: availableColors }, index ) => {
+			if ( ! value ) {
+				return null;
+			}
 
-		const colorObject = getColorObjectByColorValue( colors, value );
-		const colorName = colorObject && colorObject.name;
-		const ariaLabel = sprintf( colorIndicatorAriaLabel, label.toLowerCase(), colorName || value );
+			const colorObject = getColorObjectByColorValue(
+				availableColors || colors,
+				value
+			);
+			const colorName = colorObject && colorObject.name;
+			const ariaLabel = sprintf(
+				colorIndicatorAriaLabel,
+				label.toLowerCase(),
+				colorName || value
+			);
 
-		return (
-			<ColorIndicator
-				key={ index }
-				colorValue={ value }
-				aria-label={ ariaLabel }
-			/>
-		);
-	} );
+			return (
+				<ColorIndicator
+					key={ index }
+					colorValue={ value }
+					aria-label={ ariaLabel }
+				/>
+			);
+		}
+	);
 };
 
 // colorSettings is passed as an array of props so that it can be used for
 // mapping both ColorIndicator and ColorPaletteControl components. Passing
 // an array of components/nodes here wouldn't be feasible.
-export function PanelColorSettings( { title, colorSettings, colors, children, ...props } ) {
-	const className = 'editor-panel-color-settings';
+export const PanelColorSettings = ifCondition( hasColorsToChoose )(
+	( {
+		children,
+		colors,
+		colorSettings,
+		disableCustomColors,
+		title,
+		...props
+	} ) => {
+		const className = 'editor-panel-color-settings';
 
-	const titleElement = (
-		<span className={ `${ className }__panel-title` }>
-			{ title }
-			{ renderColorIndicators( colorSettings, colors ) }
-		</span>
-	);
+		const titleElement = (
+			<span className={ `${ className }__panel-title` }>
+				{ title }
+				{ renderColorIndicators( colorSettings, colors ) }
+			</span>
+		);
 
-	return (
-		<PanelBody
-			className={ className }
-			title={ titleElement }
-			{ ...omit( props, 'colors' ) }
-		>
-			{ colorSettings.map( ( settings, index ) => (
-				<ColorPaletteControl key={ index } { ...settings } />
-			) ) }
+		return (
+			<PanelBody
+				className={ className }
+				title={ titleElement }
+				{ ...props }
+			>
+				{ colorSettings.map( ( settings, index ) => (
+					<ColorPaletteControl
+						key={ index }
+						{ ...{
+							colors,
+							disableCustomColors,
+							...settings,
+						} }
+					/>
+				) ) }
 
-			{ children }
-		</PanelBody>
-	);
-}
+				{ children }
+			</PanelBody>
+		);
+	}
+);
 
-export default compose( [
-	withColorContext,
-	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
-] )( PanelColorSettings );
+export default withColorContext( PanelColorSettings );