Как получить цвет из Wordpress Gutenberg ColorPicker для правильного сохранения?

Question

При создании типа блока Гутенберга в WordPress я хочу, чтобы значение цвета сохранялось в атрибуте, а 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, является объектом, а не массивом, поэтому функция редактирования не получает его должным образом. Это сбивает с толку и меня. Запись в консоль value из функции onChangeComplete ColorPicker даст вам подсказку.

Вам необходимо изменить спецификацию атрибутов при регистрации вашего блока, например:

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

Надеюсь, это поможет!