Расширить блок Gutenberg core/quote block

Я пытаюсь расширить блок цитаты в Gutenberg, добавив встроенный SVG (символ цитаты) в HTML и добавив панель цвет настройки, чтобы цвет можно было изменить.

Есть ли подсказки, как это сделать?

<blockquote className="wp-block-quote">

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792">
        <path fill="COLOR-SET-BY-COLOR-PALLETE" d="M836.339 792.95v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q-26 0-45 19t-19 45v128q0 26 19 45t45 19h64q106 0 181-75t75-181v-32q0-40-28-68t-68-28h-224q-80 0-136-56t-56-136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q-26 0-45 19t-19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v-32q0-40-28-68t-68-28h-224q-80 0-136-56t-56-136z"></path>
    </svg>

    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet adipisci velit</p>
    <cite>Lorem Ipsum</cite>
</blockquote>

Вот что у меня есть:

import assign from 'lodash.assign';

const {__} = wp.i18n;
const {createHigherOrderComponent} = wp.compose;
const {Fragment} = wp.element;
const {PanelBody, SelectControl} = wp.components;
const {addFilter} = wp.hooks;
const {
    InspectorControls,
    getColorObjectByColorValue,
} = wp.blockEditor;
const {select} = wp.data;
const {
    getColorClassName,
    PanelColorSettings
} = wp.editor;

// Включить контроль цвета цитаты для следующих блоков
const enableQuoteColorControlOnBlocks = [
    'core/quote',
];

/**
 * Добавить атрибут контроля цвета цитаты в блок.
 *
 * @param {object} settings Текущие настройки блока.
 * @param {string} name Название блока.
 *
 * @returns {object} Измененные настройки блока.
 */
const addQuoteColorControlAttribute = (settings, name) => {

    if (!enableQuoteColorControlOnBlocks.includes(name)) {
        return settings;
    }

    settings.attributes = assign(settings.attributes, {
        quoteColor: {
            type: 'string',
            default: '',
        },
    });

    return settings;
};

addFilter('blocks.registerBlockType', 'extend-block-example/attribute/quoteColor', addQuoteColorControlAttribute);

/**
 * добавьте контроль quoteColor в инспектор контролов блока.
 */
const withQuoteColorControl = createHigherOrderComponent((BlockEdit) => {
    return (props) => {

        if (!enableQuoteColorControlOnBlocks.includes(props.name)) {
            return (
                <BlockEdit {...props} />
            );
        }

        const {quoteColor} = props.attributes;

        if (quoteColor) {
            const settings = select('core/editor').getEditorSettings();
            const colorObject = getColorObjectByColorValue(settings.colors, quoteColor);

            if (colorObject) {
                console.log('добавить класс', getColorClassName('color', colorObject.slug));

                lodash.assign(props.attributes, {
                    className: (props.attributes.className + ' ' + getColorClassName(
                        'quote-color',
                        colorObject.slug
                    )),
                    value: props.attributes.value.replace(/<p>/g, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792">
        <path fill="#{colorObject.color}" d="M836.339 792.95v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z"></path></svg><p>`)
                });
            }
        }

        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody title={__('Цитата - Не использовать')} initialOpen={true}>
                        <PanelColorSettings title={__('Настройки цвета')} colorSettings={
                            [
                                {
                                    value: props.attributes.quoteColor.color,
                                    onChange: (color) => props.setAttributes({quoteColor: color}),
                                    label: __('Цвет цитаты'),
                                }
                            ]
                        }/>
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withQuoteColorControl');

addFilter('editor.BlockEdit', 'extend-block-example/with-quoteColor-control', withQuoteColorControl);

/**
 * Добавить цитату к элементу сохранения блока.
 *
 * @param {object} props Свойства элемента сохранения.
 * @param {Object} blockType Информация о типе блока.
 * @param {Object} attributes Атрибуты блока.
 *
 * @returns {object} Измененные свойства элемента сохранения.
 */
const addQuoteColorExtraProps = (props, blockType, attributes) => {

    if (!enableQuoteColorControlOnBlocks.includes(blockType.name)) {
        return props;
    }

    if (props.quoteColor) {

        const settings = select('core/editor').getEditorSettings();
        const colorObject = getColorObjectByColorValue(settings.colors, props.quoteColor);

        if (colorObject) {
            console.log('добавить класс', getColorClassName('color', colorObject.slug));

            lodash.assign(props.attributes, {
                className: (props.attributes.className + ' ' + getColorClassName(
                    'quote-color',
                    colorObject.slug
                )),
                value: props.attributes.value.replace(/<p>/g, `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792">
        <path fill="#{colorObject.color}" d="M836.339 792.95v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136zm896 0v384q0 80-56 136t-136 56h-384q-80 0-136-56t-56-136v-704q0-104 40.5-198.5t109.5-163.5q69-69 163.5-109.5t198.5-40.5h-64q26 0 45 19t19 45v128q0 26-19 45t-45 19h-64q-106 0-181 75t-75 181v32q0 40 28 68t68 28h224q80 0 136 56t56 136z"></path></svg><p>`)
            });
        }
    }

    return props;
};

addFilter('blocks.getSaveContent.extraProps', 'extend-block-example/get-save-content/extra-props', addQuoteColorExtraProps);

Вы получаете какие-либо ошибки в инструментах разработчика браузера, когда у вас открыт редактор блоков?

Одно улучшение, которое я сразу же замечаю, это то, что ваш вызов к редактору блоков должен быть:

const {
    InspectorControls,
    getColorObjectByColorValue,
} = wp.block-editor; 

а не block.editor.