如何使用BlockProps()

Question

我正在尝试重建和扩展按钮和按钮的原始 Wordpress 块。

我用 创建了样板npx @wordpress/create-block，复制了原始代码，...

只要我删除该useBlockProps()部分，它就可以工作。例如这里（原始文件）

[...]

    const colorProps = getColorAndStyleProps( attributes, colors, true );
    const blockProps = useBlockProps();

    return (
        <>
            <ColorEdit { ...props } />
            <div { ...blockProps }>
                <RichText
[...]

如果我使用它，我就会Uncaught TypeError: Object(...) is not a function进入控制台。

Answer 1

为了使用 BlockProps，您需要在注册块时在块设置中将 apiVersion 设置为 2。

registerBlockType("my-blocks/my-custom-block", {
    apiVersion: 2,
    title: __("My Custom Block", "my-blocks"),
    attributes: ...
});

这里有更多信息：https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/

尽管那里没有提到，如果您当前正在使用类架构来构建和导出组件，则需要将其迁移到纯函数架构中（当您收到可怕的无效挂钩调用时，您就知道就是这种情况）。

Answer 2

我在扩展列块时遇到了同样的问题。似乎这个功能在 Wordpress 5.5 核心中没有实现。您可以尝试安装 gutenberg 插件来获取最新版本的 Gutenberg 或使用 wp5.5 分支中的模板。https://github.com/WordPress/gutenberg/blob/wp/5.5/packages/block-library/src/button/edit.js