javascript - 如何从 Wordpress Gutenberg ColorPicker 获取颜色以正确保存？

Question

在 wordpress 中创建古腾堡 block 类型时，我希望将颜色值保存在属性中，并且 ColorPicker 在刷新页面时以该颜色开始，但保存的颜色值似乎没有加载到 ColorPicker在刷新/重新加载页面时。如何让 ColorPicker 从保存的颜色开始？

const { registerBlockType } = wp.blocks;
const { createElement, Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { ColorPicker, PanelBody, PanelRow } = wp.components;
const { __ } = wp.i18n;

registerBlockType( 'test/colorpicker', {
    title: 'ColorPicker',
    category: 'layout',
    description: __( 'Testing the ColorPicker' ),
    icon: 'universal-access-alt',
    attributes: {
        color: {
            type: 'array',
        }
    },
    example: {},
    edit: ( { attributes, setAttributes, className } ) => {
        const { color } = attributes;
        return  ([
                <InspectorControls>
                    <Fragment>
                        <PanelBody
                            title={ __('Color Picker', 'test' ) }
                            initialOpen={ true }
                        >
                            <PanelRow>
                                <ColorPicker 
                                  color={ color }
                                  onChangeComplete={ (value) => setAttributes({color:value}) }
                                />
                            </PanelRow>
                        </PanelBody>
                    </Fragment>
                </InspectorControls>,
                <div
                    className={ className }
                    style={{
                        height: '400px'
                    }}
                >
                </div>
                ])
    },
    //Render in PHP
    save: (props) => { return null }
} );

Answer 1

从 ColorPicker 组件传递的值是对象而不是数组，因此您的编辑功能无法正确接收它。这也让我感到困惑。控制台从 ColorPicker 的 onChangeComplete 函数记录 value 会给你一个提示。

注册 block 时需要更改属性规范，如下所示:

attributes: {
    color: {
        type: 'object' // <== Not 'array'
    }
}

希望这对您有所帮助!