Skip to content

Commit

Permalink
add a prop to show duotone palettes grouped by origin
Browse files Browse the repository at this point in the history
  • Loading branch information
@MaggieCabrera
MaggieCabrera committed Apr 5, 2023
1 parent f5d14fe commit e85536f
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 61 deletions.
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/duotone-control/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Icon, filter } from '@wordpress/icons';
function DuotoneControl( {
colorPalette,
duotonePalette,
duotonePaletteByOrigin,
disableCustomColors,
disableCustomDuotone,
value,
Expand Down Expand Up @@ -67,6 +68,7 @@ function DuotoneControl( {
<DuotonePicker
colorPalette={ colorPalette }
duotonePalette={ duotonePalette }
duotonePaletteByOrigin={ duotonePaletteByOrigin }
disableCustomColors={ disableCustomColors }
disableCustomDuotone={ disableCustomDuotone }
value={ value }
Expand Down
25 changes: 24 additions & 1 deletion packages/block-editor/src/hooks/duotone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
const defaultPresets =
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;

return useMemo(
() => [
...userPresets,
Expand All @@ -82,6 +83,24 @@ function useMultiOriginPresets( { presetSetting, defaultSetting } ) {
);
}

function useGroupedPresets( { presetSetting, defaultSetting } ) {
const disableDefault = ! useSetting( defaultSetting );
const userPresets =
useSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;
const themePresets =
useSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;
const defaultPresets =
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;

return useMemo( () => {
return {
user: userPresets,
theme: themePresets,
default: disableDefault ? EMPTY_ARRAY : defaultPresets,
};
}, [ disableDefault, userPresets, themePresets, defaultPresets ] );
}

export function getColorsFromDuotonePreset( duotone, duotonePalette ) {
if ( ! duotone ) {
return;
Expand Down Expand Up @@ -115,6 +134,10 @@ function DuotonePanel( { attributes, setAttributes } ) {
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone',
} );
const duotonePaletteByOrigin = useGroupedPresets( {
presetSetting: 'color.duotone',
defaultSetting: 'color.defaultDuotone',
} );
const colorPalette = useMultiOriginPresets( {
presetSetting: 'color.palette',
defaultSetting: 'color.defaultPalette',
Expand Down Expand Up @@ -163,7 +186,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
</InspectorControls>
<BlockControls group="block" __experimentalShareWithChildBlocks>
<DuotoneControl
duotonePalette={ duotonePalette }
duotonePaletteByOrigin={ duotonePaletteByOrigin }
colorPalette={ colorPalette }
disableCustomDuotone={ true }
disableCustomColors={ true }
Expand Down
167 changes: 107 additions & 60 deletions packages/components/src/duotone-picker/duotone-picker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,78 +12,30 @@ import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
//import { ColorHeading } from '../color-palette/styles';
import ColorListPicker from './color-list-picker';
import CircularOptionPicker from '../circular-option-picker';
import { VStack } from '../v-stack';

import CustomDuotoneBar from './custom-duotone-bar';
import { getDefaultColors, getGradientFromCSSColors } from './utils';
import { Spacer } from '../spacer';
import type { DuotonePickerProps } from './types';
import type { DuotonePickerProps, SinglePaletteProps } from './types';

/**
* ```jsx
* import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const DUOTONE_PALETTE = [
* { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
* { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
* ];
*
* const COLOR_PALETTE = [
* { color: '#ff4747', name: 'Red', slug: 'red' },
* { color: '#fcff41', name: 'Yellow', slug: 'yellow' },
* { color: '#000097', name: 'Blue', slug: 'blue' },
* { color: '#8c00b7', name: 'Purple', slug: 'purple' },
* ];
*
* const Example = () => {
* const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
* return (
* <>
* <DuotonePicker
* duotonePalette={ DUOTONE_PALETTE }
* colorPalette={ COLOR_PALETTE }
* value={ duotone }
* onChange={ setDuotone }
* />
* <DuotoneSwatch values={ duotone } />
* </>
* );
* };
* ```
*/
function DuotonePicker( {
clearable = true,
unsetable = true,
function SinglePalette( {
defaultDark,
defaultLight,
clearable,
unsetable,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
}: DuotonePickerProps ) {
const [ defaultDark, defaultLight ] = useMemo(
() => getDefaultColors( colorPalette ),
[ colorPalette ]
);

const isUnset = value === 'unset';

const unsetOption = (
<CircularOptionPicker.Option
key="unset"
value="unset"
isSelected={ isUnset }
tooltipText={ __( 'Unset' ) }
className="components-duotone-picker__color-indicator"
onClick={ () => {
onChange( isUnset ? undefined : 'unset' );
} }
/>
);

}: SinglePaletteProps ) {
const colorValue = value && value !== 'unset' ? value : undefined;
const options = duotonePalette.map( ( { colors, slug, name } ) => {
const style = {
background: getGradientFromCSSColors( colors, '135deg' ),
Expand Down Expand Up @@ -137,15 +89,15 @@ function DuotonePicker( {
<VStack spacing={ 3 }>
{ ! disableCustomColors && ! disableCustomDuotone && (
<CustomDuotoneBar
value={ isUnset ? undefined : value }
value={ colorValue }
onChange={ onChange }
/>
) }
{ ! disableCustomDuotone && (
<ColorListPicker
labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
colors={ colorPalette }
value={ isUnset ? undefined : value }
value={ colorValue }
disableCustomColors={ disableCustomColors }
enableAlpha
onChange={ ( newColors ) => {
Expand All @@ -172,4 +124,99 @@ function DuotonePicker( {
);
}

/**
* ```jsx
* import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
* import { useState } from '@wordpress/element';
*
* const DUOTONE_PALETTE = [
* { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
* { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
* ];
*
* const COLOR_PALETTE = [
* { color: '#ff4747', name: 'Red', slug: 'red' },
* { color: '#fcff41', name: 'Yellow', slug: 'yellow' },
* { color: '#000097', name: 'Blue', slug: 'blue' },
* { color: '#8c00b7', name: 'Purple', slug: 'purple' },
* ];
*
* const Example = () => {
* const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
* return (
* <>
* <DuotonePicker
* duotonePalette={ DUOTONE_PALETTE }
* colorPalette={ COLOR_PALETTE }
* value={ duotone }
* onChange={ setDuotone }
* />
* <DuotoneSwatch values={ duotone } />
* </>
* );
* };
* ```
*/
function DuotonePicker( {
clearable = true,
unsetable = true,
colorPalette,
duotonePalette,
duotonePaletteByOrigin,
disableCustomColors,
disableCustomDuotone,
value,
onChange,
}: DuotonePickerProps ) {
const [ defaultDark, defaultLight ] = useMemo(
() => getDefaultColors( colorPalette ),
[ colorPalette ]
);

const isUnset = value === 'unset';

const unsetOption = (
<CircularOptionPicker.Option
key="unset"
value="unset"
isSelected={ isUnset }
tooltipText={ __( 'Unset' ) }
className="components-duotone-picker__color-indicator"
onClick={ () => {
onChange( isUnset ? undefined : 'unset' );
} }
/>
);

const paletteCommonProps = {
defaultDark,
defaultLight,
clearable,
unsetable,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
};

return (
<>
{ duotonePaletteByOrigin ? (
<SinglePalette
{ ...paletteCommonProps }
duotonePalette={ duotonePaletteByOrigin.theme }
/>
) : (
<SinglePalette
{ ...paletteCommonProps }
duotonePalette={ duotonePalette }
/>
) }
</>
);
}

export default DuotonePicker;
16 changes: 16 additions & 0 deletions packages/components/src/duotone-picker/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,10 @@ export type DuotonePickerProps = {
* Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' }`.
*/
duotonePalette: DuotoneColor[];
/**
* Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name: 'Grayscale', slug: 'grayscale' } grouped by origin`.
*/
duotonePaletteByOrigin?: duotonePaletteByOrigin;
/**
* Whether custom colors should be disabled.
*
Expand Down Expand Up @@ -47,6 +51,12 @@ type Color = {
slug: string;
};

type duotonePaletteByOrigin = {
theme: DuotoneColor[];
user: DuotoneColor[];
default: DuotoneColor[];
};

type DuotoneColor = {
colors: string[];
name: string;
Expand All @@ -59,3 +69,9 @@ export type DuotoneSwatchProps = {
*/
values?: string[] | null;
};

export type SinglePaletteProps = DuotonePickerProps & {
defaultDark: string;
defaultLight: string;
unsetOption: any;
};

0 comments on commit e85536f

Please sign in to comment.