index.js
48 lines
| 1 | // @wordpress/block-editor から� |
| 2 | 要なものをインポート |
| 3 | import { |
| 4 | ColorPalette, |
| 5 | getColorObjectByColorValue, |
| 6 | useSettings, |
| 7 | } from '@wordpress/block-editor'; |
| 8 | import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code'; |
| 9 | import { mergeColors } from '@vkblocks/utils/merge-colors'; |
| 10 | // @wordpress/data から� |
| 11 | 要なものをインポート |
| 12 | import { select } from '@wordpress/data'; |
| 13 | |
| 14 | export const AdvancedColorPalette = (props) => { |
| 15 | const { schema, setAttributes, attributes, enableAlpha = true } = props; |
| 16 | const colorValue = attributes[schema]; |
| 17 | const editorSettings = select('core/block-editor')?.getSettings(); |
| 18 | |
| 19 | const defaultColors = [ |
| 20 | ...(useSettings('color.palette.default')?.[0] || []), |
| 21 | ]; |
| 22 | const themeColors = [...(useSettings('color.palette.theme')?.[0] || [])]; |
| 23 | const customColors = editorSettings?.colors || []; |
| 24 | |
| 25 | const colors = mergeColors(defaultColors, themeColors, customColors); |
| 26 | |
| 27 | const hexColor = colorSlugToColorCode(colorValue); |
| 28 | return ( |
| 29 | <ColorPalette |
| 30 | value={hexColor} |
| 31 | colors={colors} |
| 32 | enableAlpha={enableAlpha} |
| 33 | onChange={(value) => { |
| 34 | // 色コードを colorSet から探して色データを取得 |
| 35 | // カスタムカラーの場合 undefined が返る |
| 36 | // パレットのあるカラーの場合 オブジェクトで color / name / slug が返る（ console.dir(ColorValue) ） |
| 37 | const ColorValue = getColorObjectByColorValue(colors, value); |
| 38 | |
| 39 | if (ColorValue !== undefined) { |
| 40 | setAttributes({ [schema]: ColorValue.slug }); |
| 41 | } else { |
| 42 | setAttributes({ [schema]: value }); |
| 43 | } |
| 44 | }} |
| 45 | /> |
| 46 | ); |
| 47 | }; |
| 48 |