Skip to content

Commit

Permalink
Add option to disable duotone (#32002)
Browse files Browse the repository at this point in the history
  • Loading branch information
ajlende authored May 19, 2021
1 parent 4d0c59d commit a9311d5
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ function DuotonePickerPopover( {
onToggle,
duotonePalette,
colorPalette,
disableCustomColors,
} ) {
return (
<Popover
Expand All @@ -21,6 +22,7 @@ function DuotonePickerPopover( {
<DuotonePicker
colorPalette={ colorPalette }
duotonePalette={ duotonePalette }
disableCustomColors={ disableCustomColors }
value={ value }
onChange={ onChange }
/>
Expand Down
16 changes: 15 additions & 1 deletion packages/block-editor/src/components/duotone-control/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,31 @@ import { DOWN } from '@wordpress/keycodes';
*/
import DuotonePickerPopover from './duotone-picker-popover';

function DuotoneControl( { colorPalette, duotonePalette, value, onChange } ) {
function DuotoneControl( {
colorPalette,
duotonePalette,
disableCustomColors,
value,
onChange,
} ) {
const [ isOpen, setIsOpen ] = useState( false );

if ( ! duotonePalette ) {
return null;
}

const onToggle = () => {
setIsOpen( ( prev ) => ! prev );
};

const openOnArrowDown = ( event ) => {
if ( ! isOpen && event.keyCode === DOWN ) {
event.preventDefault();
event.stopPropagation();
onToggle();
}
};

return (
<>
<ToolbarButton
Expand All @@ -41,6 +54,7 @@ function DuotoneControl( { colorPalette, duotonePalette, value, onChange } ) {
onToggle={ onToggle }
duotonePalette={ duotonePalette }
colorPalette={ colorPalette }
disableCustomColors={ disableCustomColors }
/>
) }
</>
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/hooks/duotone.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,12 +125,14 @@ function DuotonePanel( { attributes, setAttributes } ) {

const duotonePalette = useSetting( 'color.duotone' );
const colorPalette = useSetting( 'color.palette' );
const disableCustomColors = ! useSetting( 'color.custom' );

return (
<BlockControls group="block">
<DuotoneControl
duotonePalette={ duotonePalette }
colorPalette={ colorPalette }
disableCustomColors={ disableCustomColors }
value={ duotone }
onChange={ ( newDuotone ) => {
const newStyle = {
Expand Down
18 changes: 16 additions & 2 deletions packages/components/src/color-list-picker/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,13 @@ import Button from '../button';
import ColorPalette from '../color-palette';
import Swatch from '../swatch';

function ColorOption( { label, value, colors, onChange } ) {
function ColorOption( {
label,
value,
colors,
disableCustomColors,
onChange,
} ) {
const [ isOpen, setIsOpen ] = useState( false );
return (
<>
Expand All @@ -27,13 +33,20 @@ function ColorOption( { label, value, colors, onChange } ) {
value={ value }
clearable={ false }
onChange={ onChange }
disableCustomColors={ disableCustomColors }
/>
) }
</>
);
}

function ColorListPicker( { colors, labels, value = [], onChange } ) {
function ColorListPicker( {
colors,
labels,
value = [],
disableCustomColors,
onChange,
} ) {
return (
<div className="components-color-list-picker">
{ labels.map( ( label, index ) => (
Expand All @@ -42,6 +55,7 @@ function ColorListPicker( { colors, labels, value = [], onChange } ) {
label={ label }
value={ value[ index ] }
colors={ colors }
disableCustomColors={ disableCustomColors }
onChange={ ( newColor ) => {
const newColors = value.slice();
newColors[ index ] = newColor;
Expand Down
47 changes: 29 additions & 18 deletions packages/components/src/duotone-picker/duotone-picker.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,13 @@ import CircularOptionPicker from '../circular-option-picker';
import CustomDuotoneBar from './custom-duotone-bar';
import { getDefaultColors, getGradientFromCSSColors } from './utils';

function DuotonePicker( { colorPalette, duotonePalette, value, onChange } ) {
function DuotonePicker( {
colorPalette,
duotonePalette,
disableCustomColors,
value,
onChange,
} ) {
const [ defaultDark, defaultLight ] = useMemo(
() => getDefaultColors( colorPalette ),
[ colorPalette ]
Expand Down Expand Up @@ -68,23 +74,28 @@ function DuotonePicker( { colorPalette, duotonePalette, value, onChange } ) {
</CircularOptionPicker.ButtonAction>
}
>
<CustomDuotoneBar value={ value } onChange={ onChange } />
<ColorListPicker
labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
colors={ colorPalette }
value={ value }
onChange={ ( newColors ) => {
if ( ! newColors[ 0 ] ) {
newColors[ 0 ] = defaultDark;
}
if ( ! newColors[ 1 ] ) {
newColors[ 1 ] = defaultLight;
}
const newValue =
newColors.length >= 2 ? newColors : undefined;
onChange( newValue );
} }
/>
{ ! disableCustomColors && (
<CustomDuotoneBar value={ value } onChange={ onChange } />
) }
{ colorPalette && (
<ColorListPicker
labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
colors={ colorPalette }
value={ value }
disableCustomColors={ disableCustomColors }
onChange={ ( newColors ) => {
if ( ! newColors[ 0 ] ) {
newColors[ 0 ] = defaultDark;
}
if ( ! newColors[ 1 ] ) {
newColors[ 1 ] = defaultLight;
}
const newValue =
newColors.length >= 2 ? newColors : undefined;
onChange( newValue );
} }
/>
) }
</CircularOptionPicker>
);
}
Expand Down

0 comments on commit a9311d5

Please sign in to comment.