| @@ -14,8 +14,10 @@ | ||
| 14 | 14 | import { reset as resetIcon } from "@wordpress/icons"; |
| 15 | 15 | import { useRef } from "react"; |
| 16 | 16 | import classNames from "classnames"; |
| 17 | 17 | |
| 18 | +import { useColorPalettes } from "./useColorPalettes"; | |
| 19 | + | |
| 18 | 20 | import "./color-dropdown-style.scss"; |
| 19 | 21 | |
| 20 | 22 | interface ColorDropdownProps { |
| 21 | 23 | label: string; |
| @@ -59,8 +61,11 @@ | ||
| 59 | 61 | allowGradient = false, |
| 60 | 62 | enableAlpha = true, |
| 61 | 63 | }: ColorDropdownProps) { |
| 62 | 64 | const colorGradientSettings = useMultipleOriginColorsAndGradients(); |
| 65 | + // Same grouped origins the border picker shows; the WordPress hook drops | |
| 66 | + // the Default palette when a theme opts out of it. | |
| 67 | + const colorPalettes = useColorPalettes(); | |
| 63 | 68 | const colorButtonRef = useRef<HTMLButtonElement>(null); |
| 64 | 69 | |
| 65 | 70 | const lastColor = useRef(colorValue); |
| 66 | 71 | const lastGradient = useRef(gradientValue); |
| @@ -121,8 +126,9 @@ | ||
| 121 | 126 | <DropdownContentWrapper paddingSize="none"> |
| 122 | 127 | <div className="block-editor-panel-color-gradient-settings__dropdown-content"> |
| 123 | 128 | <ColorGradientControl |
| 124 | 129 | {...colorGradientSettings} |
| 130 | + colors={colorPalettes} | |
| 125 | 131 | enableAlpha={enableAlpha} |
| 126 | 132 | label={label} |
| 127 | 133 | colorValue={colorValue} |
| 128 | 134 | onColorChange={handleColorChange} |
