index.js
126 lines
| 1 | import { __ } from '@wordpress/i18n'; |
| 2 | import { |
| 3 | __experimentalColorGradientControl as ColorGradientControl, |
| 4 | getGradientSlugByValue, |
| 5 | getColorObjectByColorValue, |
| 6 | useSettings, |
| 7 | useSetting, // 6.4 互換 |
| 8 | } from '@wordpress/block-editor'; |
| 9 | import { colorSlugToColorCode } from '@vkblocks/utils/color-slug-to-color-code'; |
| 10 | import { gradientSlugToGradientCode } from '@vkblocks/utils/gradient-slug-to-gradient-code'; |
| 11 | import { select } from '@wordpress/data'; |
| 12 | |
| 13 | export const AdvancedColorGradientControl = (props) => { |
| 14 | const { |
| 15 | colorSchema, |
| 16 | gradientSchema, |
| 17 | setAttributes, |
| 18 | attributes, |
| 19 | enableAlpha = true, |
| 20 | } = props; |
| 21 | const hexColorValue = colorSlugToColorCode(attributes[colorSchema]); |
| 22 | const gradientValue = gradientSlugToGradientCode( |
| 23 | attributes[gradientSchema] |
| 24 | ); |
| 25 | |
| 26 | let defaultGradients; |
| 27 | let themeGradients; |
| 28 | let defaultColors; |
| 29 | let themeColors; |
| 30 | |
| 31 | if (typeof useSettings === 'function') { |
| 32 | defaultGradients = [ |
| 33 | ...(useSettings('color.gradients.default')?.[0] || []), |
| 34 | ]; |
| 35 | themeGradients = [...(useSettings('color.gradients.theme')?.[0] || [])]; |
| 36 | defaultColors = [...(useSettings('color.palette.default')?.[0] || [])]; |
| 37 | themeColors = [...(useSettings('color.palette.theme')?.[0] || [])]; |
| 38 | } else if (typeof useSetting === 'function') { |
| 39 | // 6.4 互換 |
| 40 | defaultGradients = [ |
| 41 | ...(useSetting('color.gradients.default')?.[0] || []), |
| 42 | ]; |
| 43 | themeGradients = [...(useSetting('color.gradients.theme')?.[0] || [])]; |
| 44 | defaultColors = [...(useSetting('color.palette.default')?.[0] || [])]; |
| 45 | themeColors = [...(useSetting('color.palette.theme')?.[0] || [])]; |
| 46 | } |
| 47 | |
| 48 | // Editor settings を一度だけ取得 |
| 49 | const editorSettings = select('core/block-editor')?.getSettings(); |
| 50 | |
| 51 | const gradientsArray = []; |
| 52 | if (themeGradients?.length > 0) { |
| 53 | gradientsArray.push({ |
| 54 | name: __('Theme', 'vk-blocks'), |
| 55 | gradients: themeGradients, |
| 56 | }); |
| 57 | } |
| 58 | if (defaultGradients?.length > 0) { |
| 59 | gradientsArray.push({ |
| 60 | name: __('Default', 'vk-blocks'), |
| 61 | gradients: defaultGradients, |
| 62 | }); |
| 63 | } |
| 64 | |
| 65 | // useSettings で取得したカラー（テーマカラー + 無料版カラー）を� |
| 66 | �列に追加 |
| 67 | const colorsArray = []; |
| 68 | if (themeColors?.length > 0) { |
| 69 | colorsArray.push(...themeColors); |
| 70 | } |
| 71 | if (defaultColors?.length > 0) { |
| 72 | colorsArray.push(...defaultColors); |
| 73 | } |
| 74 | |
| 75 | // ユーザーが新たに追加したカスタムカラーを追加 |
| 76 | const customColors = editorSettings?.colors || []; |
| 77 | if (customColors.length > 0) { |
| 78 | // 既に colorsArray に含まれているものを除外する |
| 79 | customColors.forEach((customColor) => { |
| 80 | const exists = colorsArray.some((c) => c.slug === customColor.slug); |
| 81 | if (!exists) { |
| 82 | colorsArray.push(customColor); |
| 83 | } |
| 84 | }); |
| 85 | } |
| 86 | |
| 87 | return ( |
| 88 | <ColorGradientControl |
| 89 | gradients={gradientsArray} |
| 90 | colors={colorsArray} |
| 91 | colorValue={hexColorValue} |
| 92 | gradientValue={gradientValue ?? undefined} |
| 93 | onColorChange={(value) => { |
| 94 | // カラーパレットの色名・スラッグ・カラーコードを取得 |
| 95 | const colorSet = editorSettings?.colors; |
| 96 | |
| 97 | // 色コードを colorSet から探して色データを取得 |
| 98 | // カスタムカラーの場合 undefined が返る |
| 99 | // パレットのあるカラーの場合 オブジェクトで color / name / slug が返る（ console.dir(ColorValue) ） |
| 100 | const ColorValue = getColorObjectByColorValue(colorSet, value); |
| 101 | |
| 102 | if (ColorValue !== undefined) { |
| 103 | setAttributes({ [colorSchema]: ColorValue.slug }); |
| 104 | } else { |
| 105 | setAttributes({ [colorSchema]: value }); |
| 106 | } |
| 107 | }} |
| 108 | onGradientChange={(value) => { |
| 109 | const gradientSet = editorSettings?.gradients; |
| 110 | |
| 111 | const _gradientValue = getGradientSlugByValue( |
| 112 | gradientSet, |
| 113 | value |
| 114 | ); |
| 115 | |
| 116 | if (_gradientValue !== undefined) { |
| 117 | setAttributes({ [gradientSchema]: _gradientValue }); |
| 118 | } else { |
| 119 | setAttributes({ [gradientSchema]: value }); |
| 120 | } |
| 121 | }} |
| 122 | enableAlpha={enableAlpha} |
| 123 | /> |
| 124 | ); |
| 125 | }; |
| 126 |