Skip to content

Commit

Permalink
show palettes by group
Browse files Browse the repository at this point in the history
  • Loading branch information
MaggieCabrera committed Apr 5, 2023
1 parent e85536f commit 8577539
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 37 deletions.
23 changes: 16 additions & 7 deletions packages/block-editor/src/hooks/duotone.js
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,20 @@ function useGroupedPresets( { presetSetting, defaultSetting } ) {
useSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;

return useMemo( () => {
return {
user: userPresets,
theme: themePresets,
default: disableDefault ? EMPTY_ARRAY : defaultPresets,
};
return [
{
name: 'User',
palettes: userPresets,
},
{
name: 'Theme',
palettes: themePresets,
},
{
name: 'Default',
palettes: disableDefault ? EMPTY_ARRAY : defaultPresets,
},
];
}, [ disableDefault, userPresets, themePresets, defaultPresets ] );
}

Expand Down Expand Up @@ -162,7 +171,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
__experimentalShareWithChildBlocks
>
<DuotoneControl
duotonePalette={ duotonePalette }
duotonePaletteByOrigin={ duotonePaletteByOrigin }
colorPalette={ colorPalette }
disableCustomDuotone={ disableCustomDuotone }
disableCustomColors={ disableCustomColors }
Expand All @@ -186,7 +195,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
</InspectorControls>
<BlockControls group="block" __experimentalShareWithChildBlocks>
<DuotoneControl
duotonePaletteByOrigin={ duotonePaletteByOrigin }
duotonePalette={ duotonePalette }
colorPalette={ colorPalette }
disableCustomDuotone={ true }
disableCustomColors={ true }
Expand Down
114 changes: 91 additions & 23 deletions packages/components/src/duotone-picker/duotone-picker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,31 +12,23 @@ import { __, sprintf } from '@wordpress/i18n';
/**
* Internal dependencies
*/
//import { ColorHeading } from '../color-palette/styles';
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, SinglePaletteProps } from './types';
import type {
DuotonePickerProps,
SinglePaletteProps,
MultiplePalettesProps,
paletteOptionsProps,
} from './types';

function SinglePalette( {
defaultDark,
defaultLight,
clearable,
unsetable,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
}: SinglePaletteProps ) {
const colorValue = value && value !== 'unset' ? value : undefined;
const options = duotonePalette.map( ( { colors, slug, name } ) => {
function paletteOptions( { palette, value, onChange }: paletteOptionsProps ) {
return palette.map( ( { colors, slug, name } ) => {
const style = {
background: getGradientFromCSSColors( colors, '135deg' ),
color: 'transparent',
Expand Down Expand Up @@ -71,6 +63,27 @@ function SinglePalette( {
/>
);
} );
}

function SinglePalette( {
defaultDark,
defaultLight,
clearable,
unsetable,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
}: SinglePaletteProps ) {
const colorValue = value && value !== 'unset' ? value : undefined;
const options = paletteOptions( {
palette: duotonePalette,
value,
onChange,
} );

return (
<CircularOptionPicker
Expand Down Expand Up @@ -124,6 +137,60 @@ function SinglePalette( {
);
}

function MultiplePalettes( {
defaultDark,
defaultLight,
unsetable,
colorPalette,
duotonePaletteByOrigin,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
}: MultiplePalettesProps ) {
if ( ! duotonePaletteByOrigin ) {
return null;
}

const paletteProps = {
defaultDark,
defaultLight,
clearable: false,
unsetable,
colorPalette,
disableCustomColors,
disableCustomDuotone,
value,
unsetOption,
onChange,
};

return (
<>
{ duotonePaletteByOrigin
.filter( ( { palettes } ) => palettes.length > 0 )
.map( ( { name, palettes }, index, array ) => {
if ( index > 0 ) {
paletteProps.unsetable = false;
}
if ( index === array.length - 1 ) {
paletteProps.clearable = true;
}
return (
<VStack spacing={ 2 } key={ index }>
<ColorHeading level={ 3 }>{ name }</ColorHeading>
<SinglePalette
{ ...paletteProps }
duotonePalette={ palettes }
/>
</VStack>
);
} ) }
</>
);
}

/**
* ```jsx
* import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
Expand Down Expand Up @@ -191,10 +258,8 @@ function DuotonePicker( {
const paletteCommonProps = {
defaultDark,
defaultLight,
clearable,
unsetable,
colorPalette,
duotonePalette,
disableCustomColors,
disableCustomDuotone,
value,
Expand All @@ -205,13 +270,16 @@ function DuotonePicker( {
return (
<>
{ duotonePaletteByOrigin ? (
<SinglePalette
{ ...paletteCommonProps }
duotonePalette={ duotonePaletteByOrigin.theme }
/>
<>
<MultiplePalettes
{ ...paletteCommonProps }
duotonePaletteByOrigin={ duotonePaletteByOrigin }
/>
</>
) : (
<SinglePalette
{ ...paletteCommonProps }
clearable={ clearable }
duotonePalette={ duotonePalette }
/>
) }
Expand Down
40 changes: 33 additions & 7 deletions packages/components/src/duotone-picker/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,11 +51,10 @@ type Color = {
slug: string;
};

type duotonePaletteByOrigin = {
theme: DuotoneColor[];
user: DuotoneColor[];
default: DuotoneColor[];
};
type duotonePaletteByOrigin = Array< {
name: string;
palettes: DuotoneColor[];
} >;

type DuotoneColor = {
colors: string[];
Expand All @@ -70,8 +69,35 @@ export type DuotoneSwatchProps = {
values?: string[] | null;
};

export type SinglePaletteProps = DuotonePickerProps & {
export type SinglePaletteProps = {
defaultDark: string;
defaultLight: string;
unsetable?: boolean;
colorPalette: Color[];
disableCustomColors?: boolean;
disableCustomDuotone?: boolean;
value?: string[] | 'unset';
unsetOption: React.ReactElement;
onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
clearable?: boolean;
duotonePalette: DuotoneColor[];
};

export type MultiplePalettesProps = {
defaultDark: string;
defaultLight: string;
unsetOption: any;
unsetable?: boolean;
colorPalette: Color[];
disableCustomColors?: boolean;
disableCustomDuotone?: boolean;
value?: string[] | 'unset';
unsetOption: React.ReactElement;
onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
duotonePaletteByOrigin: duotonePaletteByOrigin;
};

export type paletteOptionsProps = {
palette: DuotoneColor[];
value?: string[] | 'unset';
onChange: ( value: DuotonePickerProps[ 'value' ] | undefined ) => void;
};

0 comments on commit 8577539

Please sign in to comment.