如何在 WordPress 中使用简单的自定义 gutenberg 块获取唯一 ID？

Question

我正在尝试为每个自定义古腾堡块获取唯一 ID。我被发现 useInstanceId。这种语法可以使用吗？

registerBlockType('custom/block', {
    title: 'Custom',
    
    edit() {
        return (<p>{unqiue-block-id}</p>)
    },
    save() {
        return (<p>{unqiue-block-id}</p>)
    },
});

Answer 1

你可以用 props 中的 clientId 来解决这个问题。不幸的是，它只存在于编辑功能的道具中。因此，您需要将 clientId 作为额外属性提供。 我自己在用 useInstanceId 完成这件事时遇到了太多困难，因为如果我理解正确的话，你需要用 HigherComponent 来完成它。所以我选择了 clientId 解决方案。

我最初的想法来自 here

使用 clientId.

您的代码可能看起来像这样

registerBlockType('custom/block', {
    title: 'Custom',

    attributes: {
        yourId: {
            type: 'string',
        }
    },

    edit: props => {
        const {
            attributes: {
                yourId,
            },
            clientId,
            setAttributes,
        } = props;

        setAttributes({ yourId: clientId });

        return (
            <p>{yourId}</p>
        );
    },

    save: props => {
        const {
            attributes: {
                yourId,
            },
        } = props;

        return (
            <p>{yourId}</p>
        );
    },
});