wordpress gutenberg：添加数据属性 (data-id="") 时，`core/image` 的块验证失败

Question

将 数据属性 （使用 编辑为 HTML）添加到锚标记时出现古腾堡验证错误，当 anchor 标签在 figure 标签内时出现此问题。

当用户添加图像并用 link 包裹该图像时，我们的插件会扫描 post 内容并将数据属性添加到 link，当 refresh/reopen 时] post 编辑页面控制台再次显示古腾堡验证错误。

<figure class="wp-block-image size-large">
   <a href="http://affiliate.local/wp-admin/post.php?post=56662&amp;action=edit" data-lasso-id="123">
     <img src="http://affiliate.local/wp-content/uploads/2019/06/mint_2018_icon-toolbox-640x640.jpg" alt="" class="wp-image-51176"/>
   </a>
</figure>

Answer 1

经过多次尝试和错误，我找到了解决方案。

wp.hooks.addFilter(
    "blocks.registerBlockType",
    "sample-plugin/plugin/attribute/data",
    (settings, name) => {
        if (name == "core/image") {
            settings.attributes = Object.assign( settings.attributes, {
                'data-id': {
                    attribute: "data-id",
                    selector: "figure > a",
                    source: "attribute",
                    type: "string",
                },
            });
        }
        return settings;
    }
);


function applyExtraClass( extraProps, blockType, attributes ) {
    if(blockType.name != 'core/image') {
        return extraProps;
    }

    try {
        let figure_props = extraProps.children.props;
        let first_child = figure_props.children[0];
        if(figure_props.children && first_child && (first_child.type == 'a')) {
            first_child.props['data-id'] = attributes["data-id"];
        }
    } catch (error) {
        console.log(error);
    }
    return extraProps;
}

wp.hooks.addFilter(
    'blocks.getSaveContent.extraProps',
    'sample-plugin/plugin',
    applyExtraClass
);

wordpress gutenberg：添加数据属性 (data-id="") 时，`core/image` 的块验证失败

wordpress gutenberg: Block validation failed for `core/image` when adding data attribute (data-id="")

wordpress

custom-data-attribute

wordpress-gutenberg

gutenberg-blocks