From 3d10db5269ccab1f7717a60bc65ab7c9fc823767 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 12 Mar 2018 15:39:04 +0000
Subject: [PATCH] Hide color pickers in paragraph and button if no colors are
 available.

If the theme sets the colors palette to empty and disable custom colors, the color picker mechanism did not work correctly. It just showed a non-functional back color to choose from. Now we hide the color picker mechanism as in that case it is not possible to choose colors.
---
 blocks/color-palette/index.js                 | 84 +------------------
 blocks/index.js                               |  1 +
 blocks/library/button/index.js                | 37 ++++----
 blocks/library/paragraph/index.js             | 25 +++---
 blocks/panel-color/index.js                   | 32 +++++++
 blocks/with-color-context/index.js            | 32 +++++++
 components/color-palette/index.js             | 79 +++++++++++++++++
 .../color-palette/style.scss                  | 18 ++--
 .../test/__snapshots__/index.js.snap          | 44 +++++-----
 .../color-palette/test/index.js               |  6 +-
 components/index.js                           |  1 +
 11 files changed, 211 insertions(+), 148 deletions(-)
 create mode 100644 blocks/panel-color/index.js
 create mode 100644 blocks/with-color-context/index.js
 create mode 100644 components/color-palette/index.js
 rename {blocks => components}/color-palette/style.scss (85%)
 rename {blocks => components}/color-palette/test/__snapshots__/index.js.snap (68%)
 rename {blocks => components}/color-palette/test/index.js (93%)

diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js
index 22f6cdc8eabd3..0192c93fe266d 100644
--- a/blocks/color-palette/index.js
+++ b/blocks/color-palette/index.js
@@ -1,89 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Dropdown } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { ColorPalette } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import './style.scss';
-import { withEditorSettings } from '../editor-settings';
-
-export function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
-	function applyOrUnset( color ) {
-		return () => onChange( value === color ? undefined : color );
-	}
-
-	return (
-		<div className="blocks-color-palette">
-			{ map( colors, ( color ) => {
-				const style = { color: color };
-				const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } );
-
-				return (
-					<div key={ color } className="blocks-color-palette__item-wrapper">
-						<button
-							type="button"
-							className={ className }
-							style={ style }
-							onClick={ applyOrUnset( color ) }
-							aria-label={ sprintf( __( 'Color: %s' ), color ) }
-							aria-pressed={ value === color }
-						/>
-					</div>
-				);
-			} ) }
-
-			{ ! disableCustomColors &&
-				<Dropdown
-					className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-					contentClassName="blocks-color-palette__picker "
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<button
-							type="button"
-							aria-expanded={ isOpen }
-							className="blocks-color-palette__item"
-							onClick={ onToggle }
-							aria-label={ __( 'Custom color picker' ) }
-						>
-							<span className="blocks-color-palette__custom-color-gradient" />
-						</button>
-					) }
-					renderContent={ () => (
-						<ChromePicker
-							color={ value }
-							onChangeComplete={ ( color ) => onChange( color.hex ) }
-							style={ { width: '100%' } }
-							disableAlpha
-						/>
-					) }
-				/>
-			}
-
-			<button
-				className="button-link blocks-color-palette__clear"
-				type="button"
-				onClick={ () => onChange( undefined ) }
-			>
-				{ __( 'Clear' ) }
-			</button>
-		</div>
-	);
-}
+import withColorContext from '../with-color-context';
 
-export default withEditorSettings(
-	( settings, props ) => ( {
-		colors: props.colors || settings.colors,
-		disableCustomColors: props.disableCustomColors !== undefined ?
-			props.disableCustomColors :
-			settings.disableCustomColors,
-	} )
-)( ColorPalette );
+export default withColorContext( ColorPalette );
diff --git a/blocks/index.js b/blocks/index.js
index e92c66d0a7281..8f07a31527eea 100644
--- a/blocks/index.js
+++ b/blocks/index.js
@@ -33,3 +33,4 @@ export { default as RichTextProvider } from './rich-text/provider';
 export { default as UrlInput } from './url-input';
 export { default as UrlInputButton } from './url-input/button';
 export { default as EditorSettings, withEditorSettings } from './editor-settings';
+export { default as withColorContext } from './with-color-context';
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
index c35f362b28402..47af7bd66fa34 100644
--- a/blocks/library/button/index.js
+++ b/blocks/library/button/index.js
@@ -7,7 +7,6 @@ import {
 	Dashicon,
 	IconButton,
 	PanelBody,
-	PanelColor,
 	ToggleControl,
 	withFallbackStyles,
 } from '@wordpress/components';
@@ -21,8 +20,8 @@ import RichText from '../../rich-text';
 import UrlInput from '../../url-input';
 import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
-import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import PanelColor from '../../panel-color';
 import InspectorControls from '../../inspector-controls';
 
 const { getComputedStyle } = window;
@@ -109,24 +108,24 @@ class ButtonBlock extends Component {
 								checked={ !! clear }
 								onChange={ this.toggleClear }
 							/>
-							<PanelColor title={ __( 'Background Color' ) } colorValue={ color } >
-								<ColorPalette
-									value={ color }
-									onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
-								/>
-							</PanelColor>
-							<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } >
-								<ColorPalette
-									value={ textColor }
-									onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+							<PanelColor
+								title={ __( 'Background Color' ) }
+								value={ color }
+								onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+							/>
+							<PanelColor
+								title={ __( 'Text Color' ) }
+								onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+								value={ textColor }
+							/>
+							{ this.nodeRef &&
+								<ContrastCheckerWithFallbackStyles
+									node={ this.nodeRef }
+									textColor={ textColor }
+									backgroundColor={ color }
+									isLargeText={ true }
 								/>
-							</PanelColor>
-							{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-								node={ this.nodeRef }
-								textColor={ textColor }
-								backgroundColor={ color }
-								isLargeText={ true }
-							/> }
+							}
 						</PanelBody>
 					</InspectorControls>
 				}
diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
index f776299fda0bd..1ac49362a8c16 100644
--- a/blocks/library/paragraph/index.js
+++ b/blocks/library/paragraph/index.js
@@ -16,7 +16,6 @@ import {
 } from '@wordpress/element';
 import {
 	PanelBody,
-	PanelColor,
 	RangeControl,
 	ToggleControl,
 	Button,
@@ -37,8 +36,8 @@ import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import BlockControls from '../../block-controls';
 import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
-import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import PanelColor from '../../panel-color';
 
 const { getComputedStyle } = window;
 
@@ -198,18 +197,16 @@ class ParagraphBlock extends Component {
 							onChange={ this.toggleDropCap }
 						/>
 					</PanelBody>
-					<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
-						<ColorPalette
-							value={ backgroundColor }
-							onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
-						/>
-					</PanelColor>
-					<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
-						<ColorPalette
-							value={ textColor }
-							onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
-						/>
-					</PanelColor>
+					<PanelColor
+						title={ __( 'Background Color' ) }
+						value={ backgroundColor }
+						onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+					/>
+					<PanelColor
+						title={ __( 'Text Color' ) }
+						onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+						value={ textColor }
+					/>
 					<ContrastChecker
 						{ ...{
 							textColor,
diff --git a/blocks/panel-color/index.js b/blocks/panel-color/index.js
new file mode 100644
index 0000000000000..ccd2bd8da5b70
--- /dev/null
+++ b/blocks/panel-color/index.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { ifCondition, PanelColor as PanelColorComponent } from '@wordpress/components';
+import { compose } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '../color-palette';
+import withColorContext from '../with-color-context';
+
+function PanelColor( { title, value, ...props } ) {
+	return (
+		<PanelColorComponent title={ title } colorValue={ value }>
+			<ColorPalette
+				value={ value }
+				{ ...omit( props, [ 'disableCustomColors', 'colors' ] ) }
+			/>
+		</PanelColorComponent>
+	);
+}
+
+export default compose( [
+	withColorContext,
+	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
+] )( PanelColor );
diff --git a/blocks/with-color-context/index.js b/blocks/with-color-context/index.js
new file mode 100644
index 0000000000000..e7107162d0ba5
--- /dev/null
+++ b/blocks/with-color-context/index.js
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { deprecated } from '@wordpress/utils';
+
+/**
+ * Internal dependencies
+ */
+import { withEditorSettings } from '../editor-settings';
+
+export default withEditorSettings(
+	( settings, ownProps ) => {
+		if ( ownProps.colors || ownProps.disableCustomColors ) {
+			deprecated( 'Passing props "colors" or "disableCustomColors" to @blocks/PanelColor or @blocks/ColorPalette', {
+				version: '2.9',
+				alternative: 'remove the props and rely on the editor settings or use @wordpress/PanelColor and @wordpress/ColorPalette',
+			} );
+		}
+		const colors = ownProps.colors || settings.colors;
+		const disableCustomColors = ownProps.disableCustomColors || settings.disableCustomColors;
+		return {
+			colors,
+			disableCustomColors,
+			hasColorsToChoose: ! isEmpty( colors ) || ! disableCustomColors,
+		};
+	}
+);
diff --git a/components/color-palette/index.js b/components/color-palette/index.js
new file mode 100644
index 0000000000000..67133c980fffb
--- /dev/null
+++ b/components/color-palette/index.js
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dropdown from '../dropdown';
+
+export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
+	function applyOrUnset( color ) {
+		return () => onChange( value === color ? undefined : color );
+	}
+
+	return (
+		<div className="components-color-palette">
+			{ map( colors, ( color ) => {
+				const style = { color: color };
+				const className = classnames( 'components-color-palette__item', { 'is-active': value === color } );
+
+				return (
+					<div key={ color } className="components-color-palette__item-wrapper">
+						<button
+							type="button"
+							className={ className }
+							style={ style }
+							onClick={ applyOrUnset( color ) }
+							aria-label={ sprintf( __( 'Color: %s' ), color ) }
+							aria-pressed={ value === color }
+						/>
+					</div>
+				);
+			} ) }
+
+			{ ! disableCustomColors &&
+				<Dropdown
+					className="components-color-palette__item-wrapper components-color-palette__custom-color"
+					contentClassName="components-color-palette__picker "
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<button
+							type="button"
+							aria-expanded={ isOpen }
+							className="components-color-palette__item"
+							onClick={ onToggle }
+							aria-label={ __( 'Custom color picker' ) }
+						>
+							<span className="components-color-palette__custom-color-gradient" />
+						</button>
+					) }
+					renderContent={ () => (
+						<ChromePicker
+							color={ value }
+							onChangeComplete={ ( color ) => onChange( color.hex ) }
+							style={ { width: '100%' } }
+							disableAlpha
+						/>
+					) }
+				/>
+			}
+
+			<button
+				className="button-link components-color-palette__clear"
+				type="button"
+				onClick={ () => onChange( undefined ) }
+			>
+				{ __( 'Clear' ) }
+			</button>
+		</div>
+	);
+}
diff --git a/blocks/color-palette/style.scss b/components/color-palette/style.scss
similarity index 85%
rename from blocks/color-palette/style.scss
rename to components/color-palette/style.scss
index adaf230671865..d895f7f7d7ec7 100644
--- a/blocks/color-palette/style.scss
+++ b/components/color-palette/style.scss
@@ -1,16 +1,16 @@
 $color-palette-circle-size: 28px;
 $color-palette-circle-spacing: 14px;
 
-.blocks-color-palette {
+.components-color-palette {
 	margin-right: -14px;
 
-	.blocks-color-palette__clear {
+	.components-color-palette__clear {
 		float: right;
 		margin-right: 20px;
 	}
 }
 
-.blocks-color-palette__item-wrapper {
+.components-color-palette__item-wrapper {
 	display: inline-block;
 	height: $color-palette-circle-size;
 	width: $color-palette-circle-size;
@@ -30,7 +30,7 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__item {
+.components-color-palette__item {
 	display: inline-block;
 	vertical-align: top;
 	height: 100%;
@@ -72,12 +72,12 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__clear-color .blocks-color-palette__item {
+.components-color-palette__clear-color .components-color-palette__item {
 	color: $white;
 	background: $white;
 }
 
-.blocks-color-palette__clear-color-line {
+.components-color-palette__clear-color-line {
 	display: block;
 	position: absolute;
 	border: 2px solid $alert-red;
@@ -101,12 +101,12 @@ $color-palette-circle-spacing: 14px;
 	}
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__item {
+.components-color-palette__custom-color .components-color-palette__item {
 	position: relative;
 	box-shadow: none;
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__custom-color-gradient {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient {
 	display: block;
 	width: 100%;
 	height: 100%;
@@ -117,7 +117,7 @@ $color-palette-circle-spacing: 14px;
 	overflow: hidden;
 }
 
-.blocks-color-palette__custom-color .blocks-color-palette__custom-color-gradient:before {
+.components-color-palette__custom-color .components-color-palette__custom-color-gradient:before {
 	box-sizing: border-box;
 	content: '';
 	filter: blur( 6px ) saturate( 0.7 ) brightness( 1.1 );
diff --git a/blocks/color-palette/test/__snapshots__/index.js.snap b/components/color-palette/test/__snapshots__/index.js.snap
similarity index 68%
rename from blocks/color-palette/test/__snapshots__/index.js.snap
rename to components/color-palette/test/__snapshots__/index.js.snap
index 2111c8b5f2f07..871d03c853fa1 100644
--- a/blocks/color-palette/test/__snapshots__/index.js.snap
+++ b/components/color-palette/test/__snapshots__/index.js.snap
@@ -44,20 +44,20 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 <button
   aria-expanded={true}
   aria-label="Custom color picker"
-  className="blocks-color-palette__item"
+  className="components-color-palette__item"
   onClick={[MockFunction]}
   type="button"
 >
   <span
-    className="blocks-color-palette__custom-color-gradient"
+    className="components-color-palette__custom-color-gradient"
   />
 </button>
 `;
 
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
-  className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-  contentClassName="blocks-color-palette__picker "
+  className="components-color-palette__item-wrapper components-color-palette__custom-color"
+  contentClassName="components-color-palette__picker "
   renderContent={[Function]}
   renderToggle={[Function]}
 />
@@ -65,16 +65,16 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
 
 exports[`ColorPalette should allow disabling custom color picker 1`] = `
 <div
-  className="blocks-color-palette"
+  className="components-color-palette"
 >
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="red"
   >
     <button
       aria-label="Color: red"
       aria-pressed={true}
-      className="blocks-color-palette__item is-active"
+      className="components-color-palette__item is-active"
       onClick={[Function]}
       style={
         Object {
@@ -85,13 +85,13 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="white"
   >
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -102,13 +102,13 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="blue"
   >
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -119,7 +119,7 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
     />
   </div>
   <button
-    className="button-link blocks-color-palette__clear"
+    className="button-link components-color-palette__clear"
     onClick={[Function]}
     type="button"
   >
@@ -130,16 +130,16 @@ exports[`ColorPalette should allow disabling custom color picker 1`] = `
 
 exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
 <div
-  className="blocks-color-palette"
+  className="components-color-palette"
 >
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="red"
   >
     <button
       aria-label="Color: red"
       aria-pressed={true}
-      className="blocks-color-palette__item is-active"
+      className="components-color-palette__item is-active"
       onClick={[Function]}
       style={
         Object {
@@ -150,13 +150,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="white"
   >
     <button
       aria-label="Color: white"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -167,13 +167,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </div>
   <div
-    className="blocks-color-palette__item-wrapper"
+    className="components-color-palette__item-wrapper"
     key="blue"
   >
     <button
       aria-label="Color: blue"
       aria-pressed={false}
-      className="blocks-color-palette__item"
+      className="components-color-palette__item"
       onClick={[Function]}
       style={
         Object {
@@ -184,13 +184,13 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
     />
   </div>
   <Dropdown
-    className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-    contentClassName="blocks-color-palette__picker "
+    className="components-color-palette__item-wrapper components-color-palette__custom-color"
+    contentClassName="components-color-palette__picker "
     renderContent={[Function]}
     renderToggle={[Function]}
   />
   <button
-    className="button-link blocks-color-palette__clear"
+    className="button-link components-color-palette__clear"
     onClick={[Function]}
     type="button"
   >
diff --git a/blocks/color-palette/test/index.js b/components/color-palette/test/index.js
similarity index 93%
rename from blocks/color-palette/test/index.js
rename to components/color-palette/test/index.js
index 96ddc339cdf94..1f76dc52c10b3 100644
--- a/blocks/color-palette/test/index.js
+++ b/components/color-palette/test/index.js
@@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
 /**
  * Internal dependencies
  */
-import { ColorPalette } from '../';
+import ColorPalette from '../';
 
 describe( 'ColorPalette', () => {
 	const colors = [ 'red', 'white', 'blue' ];
@@ -14,7 +14,7 @@ describe( 'ColorPalette', () => {
 	const onChange = jest.fn();
 
 	const wrapper = shallow( <ColorPalette colors={ colors } value={ currentColor } onChange={ onChange } /> );
-	const buttons = wrapper.find( '.blocks-color-palette__item-wrapper > button' );
+	const buttons = wrapper.find( '.components-color-palette__item-wrapper > button' );
 
 	beforeEach( () => {
 		onChange.mockClear();
@@ -44,7 +44,7 @@ describe( 'ColorPalette', () => {
 	} );
 
 	test( 'should call onClick with undefined, when the clearButton onClick is triggered', () => {
-		const clearButton = wrapper.find( '.button-link.blocks-color-palette__clear' );
+		const clearButton = wrapper.find( '.button-link.components-color-palette__clear' );
 
 		expect( clearButton ).toHaveLength( 1 );
 
diff --git a/components/index.js b/components/index.js
index 38731f6540128..017ed6c060d4f 100644
--- a/components/index.js
+++ b/components/index.js
@@ -7,6 +7,7 @@ export { default as ButtonGroup } from './button-group';
 export { default as CheckboxControl } from './checkbox-control';
 export { default as ClipboardButton } from './clipboard-button';
 export { default as CodeEditor } from './code-editor';
+export { default as ColorPalette } from './color-palette';
 export { default as Dashicon } from './dashicon';
 export { DateTimePicker, DatePicker, TimePicker } from './date-time';
 export { default as Disabled } from './disabled';