| @@ -14,8 +14,10 @@ | ||
| 14 | 14 | Gradient, |
| 15 | 15 | } from "@wordpress/components/build-types/palette-edit/types"; |
| 16 | 16 | import { useRef } from "react"; |
| 17 | 17 | |
| 18 | +import { useColorPalettes, PaletteOrigin } from "./useColorPalettes"; | |
| 19 | + | |
| 18 | 20 | interface ColorSettingsProps { |
| 19 | 21 | label: string; |
| 20 | 22 | value: string | undefined | null; |
| 21 | 23 | gradientValue?: string | null; |
| @@ -56,9 +58,12 @@ | ||
| 56 | 58 | themeGradients: colorSettings.gradients.theme, |
| 57 | 59 | }; |
| 58 | 60 | }, []); |
| 59 | 61 | |
| 60 | - const colorPalette = palette === "theme" ? themeColors : defaultColors; | |
| 62 | + // Colours are offered as origin groups (Theme, Default, Custom) so this | |
| 63 | + // picker matches the border one. `palette` now only picks the gradient | |
| 64 | + // set, which still has no grouped UI. | |
| 65 | + const colorPalette = useColorPalettes(); | |
| 61 | 66 | const gradientPalette = |
| 62 | 67 | palette === "theme" ? themeGradients : defaultGradients; |
| 63 | 68 | |
| 64 | 69 | if (!resetAllFilter) { |
| @@ -68,9 +73,10 @@ | ||
| 68 | 73 | interface Settings { |
| 69 | 74 | clearable?: boolean; |
| 70 | 75 | colorValue?: string | null; |
| 71 | 76 | gradientValue?: string | null; |
| 72 | - colors?: Color[]; | |
| 77 | + // Either a flat palette or origin groups (Theme, Default, Custom). | |
| 78 | + colors?: Color[] | PaletteOrigin[]; | |
| 73 | 79 | gradients?: Gradient[]; |
| 74 | 80 | label: string; |
| 75 | 81 | onColorChange: (newValue: string) => any; |
| 76 | 82 | onGradientChange?: (newValue: string) => any; |
