我已经扩展了Gutenberg块的核心/图像,使其具有一个允许我包含alightbox的开关。
相关代码包装了元素-
const addLightboxAttribute = ( element, block, attributes ) => {
// Do nothing if it's another block than our defined ones.
if ( ! enableLightboxOnBlocks.includes( block.name ) ) {
return element;
}
if ( ! attributes.enableLightbox ) {
return element;
}
let newElement = cloneElement(
element,
{ className: element.props.className + ' ' + attributes.alignClass },
element.props.children
);
return (
<a href={ attributes.url} data-caption={attributes.lbCaption}>
{newElement}
</a>
);
}
addFilter( 'blocks.getSaveElement', 'uikit3/image', addLightboxAttribute );
除了我在“高级”区域中添加自定义类外,此块均按预期工作。然后我得到以下错误:
Block validation: Block validation failed for `core/image`. Content generated by `save` function:
抱怨的与有所不同。测试是我添加的自定义CSS。
我可以通过在php端通过过滤器render_block修改输出来解决,但是我会尽快在Gutenberg中进行。
建议?