如何将Gutenberg ColourPicker RGBA存储为元数据(React)

npm install @wordpress/components @wordpress/data @wordpress/api-fetch @wordpress/element

import { ColorPicker } from '@wordpress/components';
import { withState } from '@wordpress/compose';
import { withSelect, withDispatch } from '@wordpress/data';
import { useState } from '@wordpress/element';
import { apiFetch } from '@wordpress/api-fetch';

function MyColorPicker({ rgbaValue, setRgbaValue }) {
  const [color, setColor] = useState(rgbaValue);

  const onChangeColor = (newColor) => {
    setColor(newColor);
    setRgbaValue(newColor);
  };

  return (
    <ColorPicker
      color={color}
      onChangeComplete={onChangeColor}
    />
  );
}

export default withState({
  rgbaValue: 'rgba(0, 0, 0, 1)', // 初始RGBA值
})(MyColorPicker);

export default withState({
  rgbaValue: 'rgba(0, 0, 0, 1)', // 初始RGBA值
})(withSelect((select) => {
  const { getEditedPostAttribute } = select('core/editor');
  const { editPost } = dispatch('core/editor');

  return {
    rgbaValue: getEditedPostAttribute('meta.gutenberg_rgba'),
    setRgbaValue: (newColor) => {
      const newMeta = {
        ...getEditedPostAttribute('meta'),
        gutenberg_rgba: newColor,
      };

      editPost({ meta: newMeta });
    },
  };
})(MyColorPicker));

import MyColorPicker from './MyColorPicker';

function App() {
  return (
    <div>
      <h1>My App</h1>
      <MyColorPicker />
    </div>
  );
}

export default App;