-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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.
- Loading branch information
1 parent
187a643
commit 340789b
Showing
11 changed files
with
221 additions
and
147 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.