From f5daf49820717c14e3d81edc460f0f0b6f1b1878 Mon Sep 17 00:00:00 2001 From: Jorge Date: Wed, 17 Oct 2018 14:33:37 +0100 Subject: [PATCH] Make possible to overwrite the globally defined colors in PanelColorSettings (#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. --- .../src/components/color-palette/control.js | 15 +- .../test/__snapshots__/control.js.snap | 8 + .../color-palette/with-color-context.js | 9 +- .../components/panel-color-settings/index.js | 133 +++++++++----- .../test/__snapshots__/index.js.snap | 163 +++++++++++++++++- .../panel-color-settings/test/index.js | 107 ++++++++++++ 6 files changed, 386 insertions(+), 49 deletions(-) diff --git a/packages/editor/src/components/color-palette/control.js b/packages/editor/src/components/color-palette/control.js index 76b5c9070f36e..d39bb961362c4 100644 --- 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 } } /> ); } -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 index 0dc3d02690413..0114e273c5a01 100644 --- 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`] = ` > diff --git a/packages/editor/src/components/color-palette/with-color-context.js b/packages/editor/src/components/color-palette/with-color-context.js index 2f20435f68553..7112550219bbf 100644 --- 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 index a93bad1137362..050b45f78791d 100644 --- 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 ( - - ); - } ); + return ( + + ); + } + ); }; // 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 = ( - - { title } - { renderColorIndicators( colorSettings, colors ) } - - ); + const titleElement = ( + + { title } + { renderColorIndicators( colorSettings, colors ) } + + ); - return ( - - { colorSettings.map( ( settings, index ) => ( - - ) ) } + return ( + + { colorSettings.map( ( settings, index ) => ( + + ) ) } - { children } - - ); -} + { children } + + ); + } +); -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 index e1050e34708c3..46f3bb8e1328d 100644 --- 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,6 +1,161 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PanelColorSettings matches the snapshot 1`] = ` + +`; + +exports[`PanelColorSettings matches the snapshot 2`] = ` + + Test Title + + + + } +> + + + +`; + +exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 1`] = ` + +`; + +exports[`PanelColorSettings should render a color panel if at least one setting specifies some colors to choose 2`] = ` + + Test Title + + + + } +> + + + +`; + +exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 1`] = ` + +`; + +exports[`PanelColorSettings should render a color panel if at least one setting supports custom colors 2`] = ` } > - - { ); expect( wrapper ).toMatchSnapshot(); + expect( wrapper.dive() ).toMatchSnapshot(); + } ); + + it( 'should not render anything if there are no colors to choose', () => { + const wrapper = shallow( + + ); + + expect( wrapper.type() ).toBeNull(); + } ); + + it( 'should render a color panel if at least one setting supports custom colors', () => { + const wrapper = shallow( + + ); + expect( wrapper.type() ).not.toBeNull(); + expect( wrapper ).toMatchSnapshot(); + expect( wrapper.dive() ).toMatchSnapshot(); + } ); + + it( 'should render a color panel if at least one setting specifies some colors to choose', () => { + const wrapper = shallow( + + ); + expect( wrapper.type() ).not.toBeNull(); + expect( wrapper ).toMatchSnapshot(); + expect( wrapper.dive() ).toMatchSnapshot(); + } ); + + it( 'should not render anything if none of the setting panels has colors to choose', () => { + const wrapper = shallow( + + ); + expect( wrapper.type() ).toBeNull(); } ); } );