Hide color pickers in paragraph and button if no colors are available.

blocks/color-palette/index.js

@@ -1,93 +1,11 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { ChromePicker } from 'react-color';
-import { map } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import { Dropdown, Tooltip } 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 );
-	}
-	const customColorPickerLabel = __( 'Custom color picker' );
-	return (
-		<div className="blocks-color-palette">
-			{ map( colors, ( { color, name } ) => {
-				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">
-						<Tooltip text={ name || sprintf( __( 'Color code: %s' ), color ) }>
-							<button
-								type="button"
-								className={ className }
-								style={ style }
-								onClick={ applyOrUnset( color ) }
-								aria-label={ name ? sprintf( __( 'Color: %s' ), name ) : sprintf( __( 'Color code: %s' ), color ) }
-								aria-pressed={ value === color }
-							/>
-						</Tooltip>
-					</div>
-				);
-			} ) }
-
-			{ ! disableCustomColors &&
-				<Dropdown
-					className="blocks-color-palette__item-wrapper blocks-color-palette__custom-color"
-					contentClassName="blocks-color-palette__picker "
-					renderToggle={ ( { isOpen, onToggle } ) => (
-						<Tooltip text={ customColorPickerLabel }>
-							<button
-								type="button"
-								aria-expanded={ isOpen }
-								className="blocks-color-palette__item"
-								onClick={ onToggle }
-								aria-label={ customColorPickerLabel }
-							>
-								<span className="blocks-color-palette__custom-color-gradient" />
-							</button>
-						</Tooltip>
-					) }
-					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 );

blocks/index.js

@@ -37,3 +37,5 @@ 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 PanelColor } from './panel-color';
+export { default as withColorContext } from './with-color-context';

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, colorName, colorValue, initialOpen, ...props } ) {
+	return (
+		<PanelColorComponent { ...{ title, colorName, colorValue, initialOpen } } >
+			<ColorPalette
+				value={ colorValue }
+				{ ...omit( props, [ 'disableCustomColors', 'colors' ] ) }
+			/>
+		</PanelColorComponent>
+	);
+}
+
+export default compose( [
+	withColorContext,
+	ifCondition( ( { hasColorsToChoose } ) => hasColorsToChoose ),
+] )( PanelColor );

blocks/with-color-context/index.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { deprecated } from '@wordpress/utils';
+import { createHigherOrderComponent } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { withEditorSettings } from '../editor-settings';
+
+export default createHigherOrderComponent(
+	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,
+			};
+		}
+	),
+	'withColorContext'
+);

components/color-palette/index.js

@@ -0,0 +1,84 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { ChromePicker } from 'react-color';
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import Dropdown from '../dropdown';
+import Tooltip from '../tooltip';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
+	function applyOrUnset( color ) {
+		return () => onChange( value === color ? undefined : color );
+	}
+	const customColorPickerLabel = __( 'Custom color picker' );
+	return (
+		<div className="components-color-palette">
+			{ map( colors, ( { color, name } ) => {
+				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">
+						<Tooltip text={ name || sprintf( __( 'Color code: %s' ), color ) }>
+							<button
+								type="button"
+								className={ className }
+								style={ style }
+								onClick={ applyOrUnset( color ) }
+								aria-label={ name ? sprintf( __( 'Color: %s' ), name ) : sprintf( __( 'Color code: %s' ), color ) }
+								aria-pressed={ value === color }
+							/>
+						</Tooltip>
+					</div>
+				);
+			} ) }
+
+			{ ! disableCustomColors &&
+				<Dropdown
+					className="components-color-palette__item-wrapper components-color-palette__custom-color"
+					contentClassName="components-color-palette__picker "
+					renderToggle={ ( { isOpen, onToggle } ) => (
+						<Tooltip text={ customColorPickerLabel }>
+							<button
+								type="button"
+								aria-expanded={ isOpen }
+								className="components-color-palette__item"
+								onClick={ onToggle }
+								aria-label={ customColorPickerLabel }
+							>
+								<span className="components-color-palette__custom-color-gradient" />
+							</button>
+						</Tooltip>
+					) }
+					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>
+	);
+}

blocks/color-palette/style.scss → 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 );