php - 古腾堡 block : registering more than one block with `register_block_type_from_metadata()` throws errors in the console

Question

我正在练习如何创建古腾堡块插件。我使用 @wordpress/create-block 创建一个块插件。
编辑 :我没有像我最初所说的那样使用 wp-cli 脚手架，我想写的是我使用了@wordpress/create-block。
脚手架上只有一个块，因此，如果您想要多个块，则必须修改结构，这并不难，但是，我希望这些块使用 block.json 将块注册为 register_block_type_from_metadata() ，这是我实现的，但问题是，如果我在主插件的 PHP 文件中使用此代码(register_block_type_from_metadata 两次 ):

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' );

要注册块，块被注册并且它们可以正常工作，但 Chrome 控制台显示两个错误。
块“create-block/boilerplate-example”已经注册。
块“create-block/guten-block-example2”已经注册。
如果我只使用 register_block_type_from_metadata() 一次 ，错误就会消失。
关于如何使错误消失的任何想法？

Answer 1

使用 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及相关 Assets 。
如果您然后使用从 wp-cli 创建的原始主要 PHP 文件脚手架(例如 myblockname.php)，它将加载预期的单个构建的 index.js、index.asset.php、index.css 等，并使您能够将多个块捆绑为一个。
我在过去的几个古腾堡项目中使用了这种方法，这些项目始于 wp-cli快速捆绑多个块。我也看了怎么 WordPress Gutenberg加载块库，发现最近更新的 WordPress Block API Documentation有助于解决这个问题。
注:
这种将所有块捆绑到一个 javascript 文件中的方法有一个潜在的缺点——即使不使用它们也会全部加载。在我的项目中，我的块是相互依赖的(innerBlocks)，所以这是有益的。文件大小和加载时间可能是一个问题，具体取决于您捆绑的块数。
对于许多块，更好的方法是让每个块构建自己的 Assets 文件，然后通过 block.json 中的“editorScript”和“script”捆绑这些 Assets 。但仍然使用主 index.js作为切入点。
如果您仍然看到名称已注册的错误，请检查每个“示例”块是否具有唯一的 “姓名”在 block.json