From 340789b510b081102e465fc0392f85ab78b61a7d Mon Sep 17 00:00:00 2001 From: Jorge 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 | 88 +------------------ blocks/index.js | 2 + blocks/panel-color/index.js | 32 +++++++ blocks/with-color-context/index.js | 36 ++++++++ components/color-palette/index.js | 84 ++++++++++++++++++ .../color-palette/style.scss | 18 ++-- .../test/__snapshots__/index.js.snap | 44 +++++----- .../color-palette/test/index.js | 6 +- components/index.js | 1 + core-blocks/button/index.js | 27 +++--- core-blocks/paragraph/index.js | 30 ++++--- 11 files changed, 221 insertions(+), 147 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 (71%) rename {blocks => components}/color-palette/test/index.js (93%) diff --git a/blocks/color-palette/index.js b/blocks/color-palette/index.js index 025cadd1ce1d7b..0192c93fe266d7 100644 --- a/blocks/color-palette/index.js +++ b/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 ( -
- { map( colors, ( { color, name } ) => { - const style = { color: color }; - const className = classnames( 'blocks-color-palette__item', { 'is-active': value === color } ); - - return ( -
- -
- ); - } ) } - - { ! disableCustomColors && - ( - - - - ) } - renderContent={ () => ( - onChange( color.hex ) } - style={ { width: '100%' } } - disableAlpha - /> - ) } - /> - } - - -
- ); -} +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 182be4f09f99f0..e36deba7e02815 100644 --- a/blocks/index.js +++ b/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'; diff --git a/blocks/panel-color/index.js b/blocks/panel-color/index.js new file mode 100644 index 00000000000000..b24666494b7850 --- /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, colorName, colorValue, initialOpen, ...props } ) { + return ( + + + + ); +} + +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 00000000000000..a867ab3c12cc86 --- /dev/null +++ b/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' +); diff --git a/components/color-palette/index.js b/components/color-palette/index.js new file mode 100644 index 00000000000000..b63db30d6f0147 --- /dev/null +++ b/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 ( +
+ { map( colors, ( { color, name } ) => { + const style = { color: color }; + const className = classnames( 'components-color-palette__item', { 'is-active': value === color } ); + + return ( +
+ +
+ ); + } ) } + + { ! disableCustomColors && + ( + + + + ) } + renderContent={ () => ( + onChange( color.hex ) } + style={ { width: '100%' } } + disableAlpha + /> + ) } + /> + } + + +
+ ); +} 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 adaf230671865e..d895f7f7d7ec77 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 71% rename from blocks/color-palette/test/__snapshots__/index.js.snap rename to components/color-palette/test/__snapshots__/index.js.snap index b72872e1b4e640..74f3cf00b26366 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`] `; exports[`ColorPalette Dropdown should render it correctly 1`] = ` @@ -65,10 +65,10 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = ` exports[`ColorPalette should allow disabling custom color picker 1`] = `