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.
WordPress · Mar 27, 2018 · fca1496 · fca1496
1 parent 845a4af
commit fca1496
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 50 deletions.
diff --git a/blocks/color-context/index.js b/blocks/color-context/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { isEmpty } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withContext } from '@wordpress/components';
+
+export default withContext( 'editor' )(
+	( { colors, disableCustomColors } ) => {
+		return {
+			colors,
+			disableCustomColors,
+			hasColorsToChoose: ! isEmpty( colors ) || ! disableCustomColors,
+		};
+	}
+)( ( { children, ...props } ) => children( props ) );
diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js
@@ -8,15 +8,15 @@ import { map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Dropdown, withContext } from '@wordpress/components';
+import { Dropdown } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 
-export function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
+export default function ColorPalette( { colors, disableCustomColors = false, value, onChange } ) {
 	function applyOrUnset( color ) {
 		return () => onChange( value === color ? undefined : color );
 	}
@@ -77,12 +77,3 @@ export function ColorPalette( { colors, disableCustomColors = false, value, onCh
 		</div>
 	);
 }
-
-export default withContext( 'editor' )(
-	( settings, props ) => ( {
-		colors: props.colors || settings.colors,
-		disableCustomColors: props.disableCustomColors !== undefined ?
-			props.disableCustomColors :
-			settings.disableCustomColors,
-	} )
-)( ColorPalette );
diff --git a/blocks/color-palette/test/index.js b/blocks/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' ];

diff --git a/blocks/index.js b/blocks/index.js
@@ -20,6 +20,7 @@ export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
 export { default as BlockIcon } from './block-icon';
 export { default as ColorPalette } from './color-palette';
+export { default as ColorContext } from './color-context';
 export { default as Editable } from './rich-text/editable';
 export { default as ImagePlaceholder } from './image-placeholder';
 export { default as InnerBlocks } from './inner-blocks';

diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { Dashicon, IconButton, PanelColor, ToggleControl, withFallbackStyles } from '@wordpress/components';
 
 /**
@@ -16,6 +16,7 @@ import BlockControls from '../../block-controls';
 import BlockAlignmentToolbar from '../../block-alignment-toolbar';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import ColorContext from '../../color-context';
 import InspectorControls from '../../inspector-controls';
 
 const { getComputedStyle } = window;
@@ -101,24 +102,36 @@ 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>
-						{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-							node={ this.nodeRef }
-							textColor={ textColor }
-							backgroundColor={ color }
-							isLargeText={ true }
-						/> }
+						<ColorContext>
+							{ ( { colors, disableCustomColors, hasColorsToChoose } ) => hasColorsToChoose &&
+								<Fragment>
+									<PanelColor title={ __( 'Background Color' ) } colorValue={ color }>
+										<ColorPalette
+											colors={ colors }
+											disableCustomColors={ disableCustomColors }
+											onChange={ ( colorValue ) => setAttributes( { color: colorValue } ) }
+											value={ color }
+										/>
+									</PanelColor>
+									<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor }>
+										<ColorPalette
+											colors={ colors }
+											disableCustomColors={ disableCustomColors }
+											onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+											value={ textColor }
+										/>
+									</PanelColor>
+									{ this.nodeRef &&
+										<ContrastCheckerWithFallbackStyles
+											node={ this.nodeRef }
+											textColor={ textColor }
+											backgroundColor={ color }
+											isLargeText={ true }
+										/>
+									}
+								</Fragment>
+							}
+						</ColorContext>
 					</InspectorControls>
 				}
 			</span>,

diff --git a/blocks/library/paragraph/index.js b/blocks/library/paragraph/index.js
@@ -8,7 +8,7 @@ import { findKey, isFinite, map, omit } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { concatChildren, Component, RawHTML } from '@wordpress/element';
+import { concatChildren, Component, Fragment, RawHTML } from '@wordpress/element';
 import {
 	Autocomplete,
 	PanelBody,
@@ -34,6 +34,7 @@ import RichText from '../../rich-text';
 import InspectorControls from '../../inspector-controls';
 import ColorPalette from '../../color-palette';
 import ContrastChecker from '../../contrast-checker';
+import ColorContext from '../../color-context';
 
 const { getComputedStyle } = window;
 
@@ -198,24 +199,36 @@ 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>
-					{ this.nodeRef && <ContrastCheckerWithFallbackStyles
-						node={ this.nodeRef }
-						textColor={ textColor }
-						backgroundColor={ backgroundColor }
-						isLargeText={ fontSize >= 18 }
-					/> }
+					<ColorContext>
+						{ ( { colors, disableCustomColors, hasColorsToChoose } ) => hasColorsToChoose &&
+							<Fragment>
+								<PanelColor title={ __( 'Background Color' ) } colorValue={ backgroundColor } initialOpen={ false }>
+									<ColorPalette
+										colors={ colors }
+										disableCustomColors={ disableCustomColors }
+										onChange={ ( colorValue ) => setAttributes( { backgroundColor: colorValue } ) }
+										value={ backgroundColor }
+									/>
+								</PanelColor>
+								<PanelColor title={ __( 'Text Color' ) } colorValue={ textColor } initialOpen={ false }>
+									<ColorPalette
+										colors={ colors }
+										disableCustomColors={ disableCustomColors }
+										onChange={ ( colorValue ) => setAttributes( { textColor: colorValue } ) }
+										value={ textColor }
+									/>
+								</PanelColor>
+								{ this.nodeRef &&
+									<ContrastCheckerWithFallbackStyles
+										node={ this.nodeRef }
+										textColor={ textColor }
+										backgroundColor={ backgroundColor }
+										isLargeText={ fontSize >= 18 }
+									/>
+								}
+							</Fragment>
+						}
+					</ColorContext>
 					<PanelBody title={ __( 'Block Alignment' ) }>
 						<BlockAlignmentToolbar
 							value={ width }