古腾堡示例并不是一个单一的插件，您可以将其视为一次五个插件，它旨在成为本教程每个部分的工作示例。

您有很多可以遵循的模式，目前，核心块都是在这样的文件夹中定义的，coblock也遵循相同的模式。

block-library/
  - image/
    -- edit.js
    -- index.js
    -- save.js
    -- styles.css
  - quote/
    -- edit.js
    -- index.js
    -- save.js
    -- styles.css
  - index.js (root index)
  - styles.css (root style)

每个index.js 因为块包含对所述文件的引用，以及一些其他设置，如标题和；类别

预制代码块索引。js文件示例（简化）

import edit from \'./edit\';
import save from \'./save\';

export const name = \'core/code\';

export const settings = {
    title: \'Code\',
    description: \'Display code snippets that respect your spacing and tabs.\',
    category: \'formatting\',
    icon: \'image\',
    edit,
    save,
};

根索引。js文件负责调用；注册块，所以它是这样的（简化）

import { registerBlockType } from \'@wordpress/blocks\';

import * as image from \'./image\';
import * as quote from \'./quote\';
import * as code from \'./code\';

const blocks = [
    image,
    quote,
    code
];

function registerBlock( block ) {
    const { name, setting } = block;
    registerBlockType( name, settings );
}

blocks.forEach( registerBlock );

您的插件应该调用该索引，并使用相同的文件注册每个块，只是不同的块名称。

查看如何锁定does it

至于构建过程，您不需要在每个块上使用节点模块，只需要在根索引上运行它。js文件。

对于更简单的方法，您可以使用wp-scripts gutenberg和gutenberg示例都在内部使用它，您可以将其安装在插件的根文件中，并将这些脚本添加到包中。json

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
}