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);
