我试图通过将内联SVG（引号符号）扩展到html并添加颜色面板来更改颜色，从而扩展Gutenberg的核心/引号块。
有什么提示吗？
<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>
这就是我得到的：
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);
