This commit makes sure it is possible to overwrite the globally defin…

…ed colors settings (colors arrays and disableCustomColors) in PanelColorSettings. The overwrite can be global for all the color panels of the component or local per each settings panel.
WordPress · Oct 10, 2018 · 1e8731f · 1e8731f
1 parent 49f8f2b
commit 1e8731f
Show file tree

Hide file tree

Showing 6 changed files with 291 additions and 77 deletions.
diff --git a/packages/editor/src/components/color-palette/control.js b/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 );
diff --git a/packages/editor/src/components/color-palette/test/__snapshots__/control.js.snap b/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"
   />

diff --git a/packages/editor/src/components/color-palette/with-color-context.js b/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,

diff --git a/packages/editor/src/components/panel-color-settings/index.js b/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 customColorsDisableForSetting = ( disableCustomColors, colorSetting ) => {
+	if ( colorSetting.disableCustomColors !== undefined ) {
+		return colorSetting.disableCustomColors;
+	}
+	return disableCustomColors;
+};
+
+const hasColorsToChooseInSetting = (
+	colors = [],
+	disableCustomColors,
+	colorSetting ) => {
+	if ( ! customColorsDisableForSetting( 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 );
diff --git a/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap b/packages/editor/src/components/panel-color-settings/test/__snapshots__/index.js.snap
@@ -1,35 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PanelColorSettings matches the snapshot 1`] = `
-<PanelBody
-  className="editor-panel-color-settings"
-  title={
-    <span
-      className="editor-panel-color-settings__panel-title"
-    >
-      Test Title
-      <ColorIndicator
-        aria-label="(border color: #000)"
-        colorValue="#000"
-      />
-      <ColorIndicator
-        aria-label="(background color: #111)"
-        colorValue="#111"
-      />
-    </span>
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
   }
->
-  <WithColorContext(ColorPaletteControl)
-    key="0"
-    label="border color"
-    onChange={[Function]}
-    value="#000"
-  />
-  <WithColorContext(ColorPaletteControl)
-    key="1"
-    label="background color"
-    onChange={[Function]}
-    value="#111"
-  />
-</PanelBody>
+  colors={Array []}
+  title="Test Title"
+/>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 1`] = `
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "colors": Array [
+          Object {
+            "color": "#ff0000",
+            "name": "Red",
+            "slug": "red",
+          },
+        ],
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
+  }
+  colors={Array []}
+  disableCustomColors={true}
+  title="Test Title"
+/>
+`;
+
+exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 1`] = `
+<Component
+  colorSettings={
+    Array [
+      Object {
+        "label": "border color",
+        "onChange": [Function],
+        "value": "#000",
+      },
+      Object {
+        "disableCustomColors": false,
+        "label": "background color",
+        "onChange": [Function],
+        "value": "#111",
+      },
+    ]
+  }
+  colors={Array []}
+  disableCustomColors={true}
+  title="Test Title"
+/>
 `;