使用 webpack 构建在插件中注册多个自定义古腾堡块

Posted 2023-02-19

【中文标题】使用 webpack 构建在插件中注册多个自定义古腾堡块

【英文标题】：Registering multiple custom gutenberg blocks in a plugin with webpack build

【发布时间】：2019-09-26 11:47:06

【问题描述】：

我正在开发一个捆绑多个自定义古腾堡块的插件，并且我正在使用 @wordpress/scripts npm 模块来构建 webpack。到目前为止工作得很好，但是在编辑器中工作时检查控制台会给我关于已经注册的块的错误。目前我有 5 个块和 4 个错误，所以我假设在我的插件 php 中的每个注册函数调用中，所有块都尝试再次注册。每个块都有自己的 src-js 文件，并且都捆绑到一个 build-js 中。此外，每个块在 PHP 中都有自己的带有 add_action 的注册函数，但 plugins_url 始终是相同的 build-js。我相信这是我的 PHP 文件如何处理注册的问题，但老实说，我一直坚持如何解决这个问题。我仍在努力应对区块带来的所有变化。也许有人已经这样做了，可以为我指明正确的方向吗？

包含 2 个块的示例 PHP 代码

<?php
/*
Plugin Name: My Blocks Plugin
*/

/* Block 1 */

function register_my_block_1() 
    wp_register_script(
        'foo-my-block-1',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-editor' )
    );

    register_block_type( 'foo/my-block-1', array(
        'editor_script' => 'foo-my-block-1',
    ) );


add_action( 'init', 'register_my_block_1' );

/* Block 2 */

function register_my_block_2() 
    wp_register_script(
        'foo-my-block-2',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n' )
    );

    register_block_type( 'foo/my-block-2', array(
        'editor_script' => 'foo-my-block-2',
    ) );


add_action( 'init', 'register_my_block_2' );

【参考方案1】：

使用wp_register_script() 和所有依赖项定义build-JS 就足够了，然后使用register_block_type() 注册每个块：

function plugin_slug_register_blocks() 

    // Register build.js
    wp_register_script(
      'plugin-slug-blocks',
        plugins_url( 'build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-data' )
    );

    // Register Block 1
    register_block_type( 'plugin-slug/block-name-1', array(
       'editor_script' => 'plugin-slug-blocks',
    ) );

    // Register Block 2
    register_block_type( 'plugin-slug/block-name-2', array(
        'editor_script' => 'plugin-slug-blocks',
    ) );

add_action( 'init', 'plugin_slug_register_blocks' );

除了 editor_script，register_block_type() 还接受 style 和 editor_style 作为 CSS 文件的参数。如果是动态块，也可以用render_callback传递一个render函数。