javascript - 古腾堡 block 验证失败(缺少属性)

Question

我为我的插件制作了一个 Gutenberg block ，但它不再按预期工作。它适用于第一个版本的古腾堡，我不明白从那以后发生了什么变化。

我读了一些类似的问题，但没有有用的答案: - Wordpress Gutenberg block - Gutenberg Block validation failed - Gutenberg Block Validation Failed ( not expecting children )

我的问题详情:

当我将 block 添加到我的内容中时，它看起来很完美，如果我保存帖子，我也会按预期看到小部件。

问题是，当我编辑现有文章时， block 被破坏了: https://ibb.co/6vHRcXC

代码看起来不错，我可以在代码编辑器中看到它:https://ibb.co/tDMGnPY

更新小部件仍然在前端工作的文章。

控制台显示此警告后跟几个错误:https://ibb.co/Gk80skq

生成的代码中似乎缺少属性 data-id，但我不明白为什么。

我尝试更改此属性名称(如果 [data-id] 是保留字)但没有任何更改。

我尝试更改此属性的值(我需要它是一个整数，但我尝试添加大写、小写和下划线前缀)但没有任何更改。

一些背景知识:我需要为使用 Gutenberg 创建的每个 block 分配一个唯一的 ID，在整个站点范围内不重复并且我需要将此 ID 带到前端的 JavaScript 函数中>。请告诉我我做错了什么，以及是否有其他方法可以做到这一点。

这是我的古腾堡 block 的完整 JavaScript 源代码:

(function () {

    let iconSvg = wp.element.createElement('svg', {width: 20, height: 20},
        wp.element.createElement('path', {d: "M10,0C4.478,0,0,4.478,0,10c0,5.521,4.478,10,10,10c5.521,0,10-4.479,10-10C20,4.478,15.521,0,10,0zM5.039,9.226c-0.786,0-1.425,0.765-1.425,1.705H2.576c0-1.512,1.104-2.742,2.462-2.742s2.463,1.23,2.463,2.742H6.463C6.463,9.991,5.825,9.226,5.039,9.226z M10,18.049c-3.417,0-6.188-2.41-6.188-5.382h12.375C16.188,15.639,13.418,18.049,10,18.049zM16.387,10.931c0-0.94-0.639-1.705-1.426-1.705c-0.785,0-1.424,0.765-1.424,1.705h-1.039c0-1.512,1.105-2.742,2.463-2.742s2.463,1.23,2.463,2.742H16.387z"})
    );

    wp.blocks.registerBlockType('plugin-name/gutenberg-block', {
        title: 'CustomBlockName',
        icon: iconSvg,
        category: 'widgets',

        edit: (props) => {
            // @TODO: we need a unique ID for each block!
            this.myId = props.attributes.itemId || Math.floor(Math.random() * 8388607); /// Medium int max value is 8388607;

            props.setAttributes(
                {
                    itemId: myId
                }
            );

            return wp.element.createElement(
                'div',
                {},
                [
                    wp.element.createElement(
                        'div',
                        {},
                        [
                            wp.element.createElement(
                                'img',
                                {
                                    src: PluginNameGutenbergBlock.preview_image
                                }
                            )
                        ]
                    )
                ]
            );
        },

        save: (props) => {
            let dataId = props.attributes.itemId;

            return wp.element.createElement(
                'div',
                {},
                [
                    wp.element.createElement(
                        'div',
                        {
                            class: 'plugin-name-outer'
                        },
                        [
                            wp.element.createElement(
                                'div',
                                {
                                    'class': 'plugin-name-container-async gutenberg-block',
                                    'data-id': dataId,
                                    'data-type': PluginNameGutenbergBlock.item_type
                                },
                                wp.element.createElement(
                                    'div',
                                    {
                                        'class': 'plugin-name-' + PluginNameGutenbergBlock.use_template
                                    },         {},
                                    [
                                        wp.element.createElement(
                                            'img',
                                            {
                                                src: PluginNameGutenbergBlock.loader_url
                                            }
                                        )
                                    ]
                                )
                            )
                        ]
                    )
                ]
            );
        }
    });

}());

Answer 1

我明白我的错误，所以我发布这个答案希望能帮助其他人。

当我创建一个新 block 时，我首先为属性 data-id 生成一个随机值:

/// Inside edit function
this.myId = props.attributes.itemId || Math.floor(Math.random() * 8388607); /// Medium int max value is 8388607;

然后我在共享的 props 对象中设置这个值:

/// Inside edit function
props.setAttributes(
    {
        itemId: myId
    }
);

然后当我保存我刚刚创建的 block 时，脚本找到生成的值:

/// Inside save function
let dataId = props.attributes.itemId;

所以 block 创建工作正常，但是当我打开一个现有的帖子时，我的脚本无法找到保存的值，所以 save 中的 dataId 的值函数是 undefined 并且缺少属性 data-id。 这是保存 block 和生成 block 的区别。

缺少的部分是 attributes block ，它从保存的代码中读取值并使它们在 edit 和 save 函数中可用。

这是我的解决方案:

wp.blocks.registerBlockType('plugin-name/gutenberg-block', {
    title: 'CustomBlockName',
    icon: iconSvg,
    category: 'widgets',
    attributes: {                                         /// <--- this block was missing
        myId: {                                           /// <--- this is the name of the property
            type: 'string',                               /// <--- this is the type
            source: 'attribute',                          /// <--- this is where is located the value I want
            default: Math.floor(Math.random() * 8388607), /// <--- this is a default value for new blocks
            selector: 'div.gutenberg-block',              /// <--- this is a selector for an element in saved block
            attribute: 'data-id'                          /// <--- this is the name of the attribute that contains desired value
        },
    },
    edit: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    },
    save: (props) => {
        let dataId = props.attributes.myId; /// <--- this is always defined as the value of data-id attribute or as random number (as string)
        ...
    }
});