使用create-block给自定义WordPress主题加多区块，Gutenberg编辑器不显示求解决

问题场景 #

我想通过create-block工具给自定义WordPress主题添加多个自定义区块，操作步骤如下：

1. 在主题根目录执行npm init -y初始化package.json，并添加wp-scripts作为开发依赖，最终package.json内容如下：

{
  "name": "<THEME-NAME>",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "@wordpress/scripts": "^28.0.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2. 创建src文件夹并在其中新建blocks目录，进入该目录后执行npx @wordpress/create-block block-name --no-plugin，依次创建了my-first-block、my-second-block、my-third-block三个区块。
3. 在主题的functions.php中编写代码注册这些区块：

function register_custom_blocks() {
    $blocks = [
        'my-first-block',
        'my-second-block',
        'my-third-block'
    ];
    foreach ($blocks as $block) {
        register_block_type(__DIR__ . '/src/blocks/' . $block);
    }
}
add_action('init', 'register_custom_blocks');

但操作完成后，在Gutenberg编辑器里完全看不到这些区块，请问哪里遗漏了？这种在主题内实现多自定义区块的方式是否正确？

遗漏的关键步骤 #

1. 未配置wp-scripts的多入口打包规则 #

默认情况下，wp-scripts只会打包src/index.js这一个入口，但你每个区块都有独立的src/index.js，必须通过自定义Webpack配置来指定所有区块的入口：

• 在主题根目录新建webpack.config.js，添加以下配置：

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    // 配置每个区块的入口文件
    entry: {
        'my-first-block': './src/blocks/my-first-block/src/index.js',
        'my-second-block': './src/blocks/my-second-block/src/index.js',
        'my-third-block': './src/blocks/my-third-block/src/index.js',
    },
    // 指定打包后的输出路径与文件名
    output: {
        ...defaultConfig.output,
        path: __dirname + '/build',
        filename: '[name]/index.js',
    },
};

• 修改package.json中的scripts，让build和start命令使用这个自定义配置：

"scripts": {
    "build": "wp-scripts build --config webpack.config.js",
    "start": "wp-scripts start --config webpack.config.js",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip"
},

2. 区块注册路径指向错误 #

register_block_type需要指向打包后的区块目录（也就是build文件夹下的对应区块文件夹），而非src里的源码目录。修改functions.php中的注册代码：

function register_custom_blocks() {
    $blocks = [
        'my-first-block',
        'my-second-block',
        'my-third-block'
    ];
    foreach ($blocks as $block) {
        register_block_type(get_template_directory() . '/build/' . $block);
    }
}
add_action('init', 'register_custom_blocks');

3. 未检查区块block.json的命名规范 #

每个区块的block.json中，name字段必须是命名空间+区块名的格式（比如my-theme/my-first-block），如果格式错误会导致注册失败。确认每个区块的block.json里的name字段符合要求，示例：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "my-theme/my-first-block",
    "title": "My First Block",
    "category": "widgets",
    "icon": "smiley",
    "description": "A custom block for my theme.",
    "supports": {
        "html": false
    },
    "textdomain": "my-theme",
    "editorScript": "file:./index.js",
    "style": "file:./style-index.css"
}

4. 未执行打包命令 #

完成上述配置后，必须在主题根目录执行npm run build（开发环境用npm start实时编译），将区块源码打包到build目录，否则WordPress找不到编译后的区块资源文件。

这种实现方式是否正确？ #

整体思路是可行的，属于主题内集成多自定义区块的标准方案：

• 使用create-block --no-plugin在主题目录内创建区块，无需单独开发插件，适合主题专属的自定义区块
• 通过自定义Webpack多入口配置管理多个区块的打包流程，是WordPress官方推荐的做法
• 只需调整注册路径、打包配置等细节，就能实现正常显示

内容的提问来源于stack exchange，提问作者chupapimuyanya