-
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
268af89
commit 8626263
Showing
11 changed files
with
177 additions
and
116 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,88 +1,11 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
| import { ChromePicker } from 'react-color'; | ||
| import { map } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Dropdown, withContext } from '@wordpress/components'; | ||
| import { __, sprintf } from '@wordpress/i18n'; | ||
| import { ColorPalette } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import './style.scss'; | ||
|
|
||
| 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 withContext( 'editor' )( | ||
| ( 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,31 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { omit } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { PanelColor } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import ColorPalette from '../color-palette'; | ||
| import withColorContext from '../with-color-context'; | ||
|
|
||
| function ConditionalPanelColor( { title, hasColorsToChoose, value, ...props } ) { | ||
| if ( ! hasColorsToChoose ) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <PanelColor title={ title } colorValue={ value }> | ||
| <ColorPalette | ||
| value={ value } | ||
| { ...omit( props, [ 'disableCustomColors', 'colors' ] ) } | ||
| /> | ||
| </PanelColor> | ||
| ); | ||
| } | ||
|
|
||
| export default withColorContext( ConditionalPanelColor ); |
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,28 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { isEmpty } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { withContext } from '@wordpress/components'; | ||
| import { deprecated } from '@wordpress/utils'; | ||
|
|
||
| export default withContext( 'editor' )( | ||
| ( editor, 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 context or use @wordpress/PanelColor and @wordpress/ColorPalette', | ||
| } ); | ||
| } | ||
| const colors = ownProps.colors || editor.colors; | ||
| const disableCustomColors = ownProps.disableCustomColors || editor.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="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> | ||
| ); | ||
| } |
File renamed without changes.
File renamed without changes.
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