| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import { store as blockEditorStore } from "@wordpress/block-editor"; |
| 3 |
import { useSelect } from "@wordpress/data"; |
| 4 |
import { useMemo } from "react"; |
| 5 |
|
| 6 |
export interface PaletteColor { |
| 7 |
name: string; |
| 8 |
slug?: string; |
| 9 |
color: string; |
| 10 |
} |
| 11 |
|
| 12 |
export interface PaletteOrigin { |
| 13 |
name: string; |
| 14 |
colors: PaletteColor[]; |
| 15 |
} |
| 16 |
|
| 17 |
/** |
| 18 |
* Every colour origin the editor knows about, as palette groups. |
| 19 |
* |
| 20 |
* `useMultipleOriginColorsAndGradients` drops the Default palette whenever a |
| 21 |
* theme sets `defaultPalette: false`, and these controls have always shown |
| 22 |
* those core swatches. Building the list here keeps them while adding the |
| 23 |
* theme's own Styles palette next to them. |
| 24 |
*/ |
| 25 |
export function useColorPalettes(): PaletteOrigin[] { |
| 26 |
const palette = useSelect(select => { |
| 27 |
const settings = ( |
| 28 |
select(blockEditorStore) as BlockEditorStoreSelectors |
| 29 |
).getSettings(); |
| 30 |
|
| 31 |
return settings?.__experimentalFeatures?.color?.palette; |
| 32 |
}, []); |
| 33 |
|
| 34 |
return useMemo(() => { |
| 35 |
// `custom` is not in the editor's type for the palette, but it is |
| 36 |
// there at runtime once someone saves their own colours. |
| 37 |
const custom = (palette as { custom?: PaletteColor[] } | undefined) |
| 38 |
?.custom; |
| 39 |
|
| 40 |
const origins: Array<[string, PaletteColor[] | undefined]> = [ |
| 41 |
[__("Theme", "tableberg"), palette?.theme], |
| 42 |
[__("Default", "tableberg"), palette?.default], |
| 43 |
[__("Custom", "tableberg"), custom], |
| 44 |
]; |
| 45 |
|
| 46 |
return origins |
| 47 |
.filter(([, colors]) => !!colors?.length) |
| 48 |
.map(([name, colors]) => ({ name, colors: colors as PaletteColor[] })); |
| 49 |
}, [palette]); |
| 50 |
} |
| 51 |
|
