1

I try to extend the core/quote block of Gutenberg by a inline SVG (quote symbol) to the html and adding a color panel so the color can be changed.

Any hint how to do this?

<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.5h64q26 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.5h64q26 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>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet adipisci velit</p>
    <cite>Lorem Ipsum</cite>
</blockquote>

This is what I got:

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;

// Enable quote color control on the following blocks
const enableQuoteColorControlOnBlocks = [
    'core/quote',
];


/**
 * Add quote color control attribute to block.
 *
 * @param {object} settings Current block settings.
 * @param {string} name Name of block.
 *
 * @returns {object} Modified block settings.
 */
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);

/**
 * add quoteColor control to inspector controls of block.
 */
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('add a class of', 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.5h64q26 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.5h64q26 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={__('Quote - Niet gebruiken')} initialOpen={true}>
                        <PanelColorSettings title={__('Color Settings')} colorSettings={
                            [
                                {
                                    value: props.attributes.quoteColor.color,
                                    onChange: (color) => props.setAttributes({quoteColor: color}),
                                    label: __('Quote Color'),
                                }
                            ]
                        }/>
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, 'withQuoteColorControl');

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

/**
 * Add Quote to save element of block.
 *
 * @param {object} props Props of save element.
 * @param {Object} blockType Block type information.
 * @param {Object} attributes Attributes of block.
 *
 * @returns {object} Modified props of save element.
 */
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('add a class of', 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.5h64q26 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.5h64q26 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);
0

Do you receive any errors in the browser dev tools while you have the block editor open?

One improvement that I immediately notice is that your call to the block editor should be:

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

not block.editor.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.