Make possible to overwrite the globally defined colors in PanelColorS…

…ettings (#10457) This commit makes it possible to overwrite the globally defined colors (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. This commit makes sure that we offer all the functionality that the combination of wp.editor.PanelColor and wp.components.PanelColor had. Making it possible to deprecate these components and unify the color UI components.
WordPress · Oct 17, 2018 · f5daf49 · f5daf49
1 parent f2a5f1f
commit f5daf49
Show file tree

Hide file tree

Showing 6 changed files with 386 additions and 49 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 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 );