时间戳

首页 > 解决方案 > Gutenberg Blocks：使用 `register_block_type_from_metadata()` 注册多个块会在控制台中引发错误

php - Gutenberg Blocks：使用 `register_block_type_from_metadata()` 注册多个块会在控制台中引发错误

问题描述

我正在练习如何创建古腾堡块插件。我使用@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() 只使用一次，错误就会消失。

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

标签： phpwordpresswordpress-gutenberggutenberg-blocks

解决方案

问题是，当你@wordpress/create-block用来创建一个包含块的插件，然后你npm start用来运行所有东西时，webpack 会将所有块 JavaScript 代码编译到一个文件中，这很好，实际上是需要的，那样你就不需要了不必将一堆文件排入队列。block.json 文件包含一行"editorScript": "file:../build/index.js"（或类似的东西）用于将主编译的 JS 文件排入队列，如果您只有一个块，则该行在 block.json 文件中是可以的，但是当您将插件的结构修改为包含更多块，每个块都有自己的 block.json 文件，包括editorScript行，然后块被注册多次，每个 block.json 文件都有一个，所以，作为临时解决方案，我editorScript从所有文件中删除了该行block.json除了一个文件，错误消失了，我不喜欢那个解决方案，因为它破坏了一致性，所以，我将以下代码放在插件主 php 文件中：

function qas_enqueue_blocks_scripts() {
    $asset_file = require plugin_dir_path( __FILE__ ) . 'build/index.asset.php';
    wp_enqueue_script( 'qas-main', plugins_url( '/build/index.js', __FILE__ ), $asset_file['dependencies'], 1.0, false);
}
add_action( 'enqueue_block_editor_assets', 'qas_enqueue_blocks_scripts');

上面的代码将主index.js文件排入块编辑器并获取文件依赖项，/build/index.asset.php当您运行初始命令以创建插件和初始块时，会自动生成文件依赖项。使用该代码，您无需在editorScript任何地方使用该行，因此您可以从所有 block.json 文件中删除它。

解决这个问题的其他方法是修改 webpack 配置，只将特定块的代码编译到主 JS 文件中，然后editorScript在 every中继续使用block.json，但我还没有尝试过。

推荐阅读