-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
faabea1
commit 3d10db5
Showing
11 changed files
with
211 additions
and
148 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,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 ); |
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
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, value, ...props } ) { | ||
| return ( | ||
| <PanelColorComponent title={ title } colorValue={ value }> | ||
| <ColorPalette | ||
| value={ value } | ||
| { ...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,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, | ||
| }; | ||
| } | ||
| ); |
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,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> | ||
| ); | ||
| } |
Oops, something went wrong.