From 8577539576e2e1430e049e26f6dcbe2998f87dfb Mon Sep 17 00:00:00 2001
From: MaggieCabrera <maggie.cabrera@automattic.com>
Date: Wed, 5 Apr 2023 13:32:07 +0200
Subject: [PATCH] show palettes by group

---
 packages/block-editor/src/hooks/duotone.js    |  23 ++--
 .../src/duotone-picker/duotone-picker.tsx     | 114 ++++++++++++++----
 .../components/src/duotone-picker/types.ts    |  40 ++++--
 3 files changed, 140 insertions(+), 37 deletions(-)

diff --git a/packages/block-editor/src/hooks/duotone.js b/packages/block-editor/src/hooks/duotone.js
index 934f1c9dfb7a59..22c0414b9ac61d 100644
--- a/packages/block-editor/src/hooks/duotone.js
+++ b/packages/block-editor/src/hooks/duotone.js
@@ -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 ] );
 }
 
@@ -162,7 +171,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
 				__experimentalShareWithChildBlocks
 			>
 				<DuotoneControl
-					duotonePalette={ duotonePalette }
+					duotonePaletteByOrigin={ duotonePaletteByOrigin }
 					colorPalette={ colorPalette }
 					disableCustomDuotone={ disableCustomDuotone }
 					disableCustomColors={ disableCustomColors }
@@ -186,7 +195,7 @@ function DuotonePanel( { attributes, setAttributes } ) {
 			</InspectorControls>
 			<BlockControls group="block" __experimentalShareWithChildBlocks>
 				<DuotoneControl
-					duotonePaletteByOrigin={ duotonePaletteByOrigin }
+					duotonePalette={ duotonePalette }
 					colorPalette={ colorPalette }
 					disableCustomDuotone={ true }
 					disableCustomColors={ true }
diff --git a/packages/components/src/duotone-picker/duotone-picker.tsx b/packages/components/src/duotone-picker/duotone-picker.tsx
index f850f5a4ff2b64..663ebde0ac3c6c 100644
--- a/packages/components/src/duotone-picker/duotone-picker.tsx
+++ b/packages/components/src/duotone-picker/duotone-picker.tsx
@@ -12,7 +12,7 @@ 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';
@@ -20,23 +20,15 @@ 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',
@@ -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
@@ -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';
@@ -191,10 +258,8 @@ function DuotonePicker( {
 	const paletteCommonProps = {
 		defaultDark,
 		defaultLight,
-		clearable,
 		unsetable,
 		colorPalette,
-		duotonePalette,
 		disableCustomColors,
 		disableCustomDuotone,
 		value,
@@ -205,13 +270,16 @@ function DuotonePicker( {
 	return (
 		<>
 			{ duotonePaletteByOrigin ? (
-				<SinglePalette
-					{ ...paletteCommonProps }
-					duotonePalette={ duotonePaletteByOrigin.theme }
-				/>
+				<>
+					<MultiplePalettes
+						{ ...paletteCommonProps }
+						duotonePaletteByOrigin={ duotonePaletteByOrigin }
+					/>
+				</>
 			) : (
 				<SinglePalette
 					{ ...paletteCommonProps }
+					clearable={ clearable }
 					duotonePalette={ duotonePalette }
 				/>
 			) }
diff --git a/packages/components/src/duotone-picker/types.ts b/packages/components/src/duotone-picker/types.ts
index 57d2878b124ce8..18bb5607a9bcf4 100644
--- a/packages/components/src/duotone-picker/types.ts
+++ b/packages/components/src/duotone-picker/types.ts
@@ -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[];
@@ -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;
 };