古腾堡块：使用“register_block_type_from_metadata()”注册多个块会在控制台中引发错误

编程问答 2022-12-18

问题描述

我正在练习如何创建古腾堡块插件。我使用 wp-cli scaffold 创建了一个块插件。脚手架上只有一个块，所以，如果你想要多个块，你必须修改结构，这并不难，但是，我希望这些块使用 block.json 来注册块 { {1}}，这是我实现的，但问题是如果我在主插件的 PHP 文件中使用此代码 (register_block_type_from_Metadata twice)：

register_block_type_from_Metadata()

要注册块，块被注册并且它们可以正常工作，但 Chrome 控制台显示两个错误。

块“create-block/boilerplate-example”已经注册。

块“create-block/guten-block-example2”已经注册。

如果我使用 function blocks_boilerplate_block_init() { register_block_type_from_Metadata( __DIR__ . '/src/blocks/example'); register_block_type_from_Metadata( __DIR__ . '/src/blocks/example2'); } add_action( 'init','blocks_boilerplate_block_init' ); 只使用一次，错误就会消失。

关于如何使错误消失的任何想法？

解决方法

使用 wp-cli scaffold 设置您的古腾堡块项目并添加两个新块后，您的项目结构可能类似于：

- myblockname
    > build
    > node_modules
    - src
        - blocks
             - example1
                  - index.js
                  - block.json
             > example2
        index.js
myblockname.php

在使用 block.json 时加载多个块而不会发生冲突的一种方法是通过主 src/index.js 导入每个块，wp-cli 创建例如：

src/index.js：

import './blocks/example1/';
import './blocks/example2/';

您的每个块（example1 和 example2）都应该有一个 index.js 和 block.json 文件来定义块，例如：

src/blocks/example1/index.js:

import { registerBlockType } from '@wordpress/blocks';
import metadata from './block.json';
const { title } = metadata;

registerBlockType(name,{
    title,// required
    edit(){...}
    save(){...}
});

现在，当您构建项目时，每个示例块都被编译成单个 build/index.js 和相关资产。

如果您随后使用从 wp-cli 脚手架创建的原始 PHP 主文件（例如 myblockname.php），它将加载预期的单个构建的 index.js、index.asset.php、index.html。 css 等，并使您能够将多个块捆绑成一个。

我在过去的几个古腾堡项目中使用了这种方法，从 wp-cli 开始快速捆绑多个块。我还研究了 WordPress Gutenberg 如何加载块库，发现最近更新的 WordPress Block API Documentation 有助于解决这种方法。

注意： 这种将所有块捆绑到一个 javascript 文件中的方法有一个潜在的缺点——即使不使用它们也会全部加载。在我的项目中，我的块是相互依赖的（innerBlocks），所以这是有益的。文件大小和加载时间可能是一个问题，具体取决于您捆绑的块数。

对于许多块，更好的方法是让每个块构建自己的资产文件，然后通过 block.json 中的“editorScript”和“script”捆绑这些资产，但仍然使用主 index.js 作为入口点。

如果您仍然看到名称已注册的错误，请检查每个“示例”块在block.json中是否具有唯一的“名称”

gutenberg-blockswordpresswordpresswordpress-gutenberg