Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to disable duotone #32002

Merged
merged 5 commits into from
May 19, 2021
Merged

Add option to disable duotone #32002

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
28b5ea8
Disable duotone toolbar when color.duotone is null
ajlende May 19, 2021
a7bb7c5
Disable ColorListPicker when color.palette is null
ajlende May 19, 2021
8076e69
Pass through disableCustomColors to ColorPalette
ajlende May 19, 2021
fc18ecf
Disable CustomDuotoneBar when color.custom is false
ajlende May 19, 2021
1879487
Merge branch 'trunk' into add/option-to-disable-duotone
ajlende May 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/duotone-control/duotone-picker-popover.js
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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' );
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we inverse this? It reads more nicely without the double negative:

const customColors = useSetting( 'color.custom' ); // or enableCustomColors
///...
{ customColors && (
    <CustomDuotoneBar value={ value } onChange={ onChange } />
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was keeping things consistent with how PanelColorGradientSettings works, but keeping that consistency probably doesn't matter that much

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh interesting, this one does personally read a bit awkwardly, but It's non-blocking if we're intentionally following this pattern.


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
View file
Open in desktop
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
View file
Open in desktop
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