WordPress区块开发入门

让我们承认，现在为WordPress开发有点奇怪。无论您是WordPress新手还是使用WordPress多年，"全站编辑"（FSE）功能的引入，包括 块编辑器（WordPress 5.0）和 站点编辑器（WordPress 5.9），颠覆了我们构建WordPress主题和插件的传统方式。

尽管我们第一次遇到块编辑器已经五年了，但为其开发仍然很困难，因为文档要么缺失要么过时。这更多地说明了FSE功能发展速度之快， Geoff在最近的一篇文章中表达了这种遗憾。

例如：2018年，一篇关于开始Gutenberg开发的 入门系列文章 发表在CSS-tricks上。从那时起，情况发生了变化，虽然这种开发方式仍然有效，但 不再推荐（此外，它所基于的create-guten-block项目也已停止维护）。

在这篇文章中，我打算帮助您以符合当前方法的方式开始 WordPress块开发。所以，是的，在发布之后，事情很可能会发生变化。但我将尝试以一种希望能捕捉到块开发本质的方式来关注它，因为即使工具可能会随着时间推移而发展，核心思想也可能保持不变。

WordPress块到底是什么？

让我们首先消除对“块”等术语的一些误解。在WordPress 5.0之前，所有这些功能的开发都代号为“Gutenberg”——您知道，活字印刷机的发明者。

从那时起，“Gutenberg”就被用来描述与块相关的所有内容，包括块编辑器和站点编辑器，因此它变得越来越复杂，以至于一些人 讨厌这个名字。更糟糕的是，还有一个 Gutenberg插件 用于测试实验性功能，以供将来可能包含。如果您认为将所有这些称为“全站编辑”可以解决问题， 也有人对此表示担忧。

因此，当我们在本文中提到“块”时，指的是在WordPress块编辑器中创建内容的组件。块插入到页面或帖子中，并为特定类型的内容提供结构。WordPress附带了一些用于常见内容类型的“核心”块，例如段落、列表、图像、视频和音频， 仅举几例。

除了这些核心块之外，我们还可以创建自定义块。这就是WordPress块开发的意义所在（还可以过滤核心块以修改其功能，但您可能暂时不需要）。

块的作用

在深入创建块之前，我们必须首先了解块在内部是如何工作的。这绝对可以帮助我们避免以后遇到很多麻烦。

我喜欢将块视为一个抽象的概念：对我来说，块是一个实体，具有一些属性（称为属性），表示某些内容。我知道这听起来很模糊，但请继续听下去。块基本上以两种方式表现出来：作为块编辑器中的图形界面或作为数据库中的数据块。

当您打开WordPress块编辑器并插入一个块（例如“引用”块）时，会得到一个漂亮的界面。您可以点击该界面并编辑引用的文本。块编辑器UI右侧的“设置”面板提供用于调整文本和设置块外观的选项。

完成创建您的精美引用并点击“发布”后，整个帖子将存储在数据库的wp_posts表中。这并不是因为Gutenberg才出现的新情况。WordPress一直都是这样工作的——将帖子内容存储在数据库中的指定表中。但新出现的是，引用块的表示形式是存储在wp_posts表的post_content字段中的内容的一部分。

这种表示形式是什么样的？请看

<!-- wp:pullquote {"textAlign":"right"} -->
<figure class="wp-block-pullquote has-text-align-right">
  <blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>
</figure>
<!-- /wp:pullquote -->

看起来像是普通的HTML，对吧？！在技术术语中，这称为“序列化”块。请注意HTML注释中的JSON数据，"textAlign": "right"。这是一个属性——与块关联的属性。

假设您关闭块编辑器，然后过一段时间再次打开它。块编辑器会检索相关post_content字段中的内容。然后编辑器解析检索到的内容，并在遇到以下内容时

<!-- wp:pullquote {"textAlign":"right"} -->...<!-- /wp:pullquote -->

……它会自言自语

好吧，这看起来像是一个引用块。嗯……它还有一个属性……我确实有一个JavaScript文件，它告诉我如何根据其属性在编辑器中构建引用块的图形界面。我应该立即执行此操作，以便以其全部荣耀呈现此块。

作为块开发者，您的工作是

1. 告诉WordPress您想注册一种特定类型的块，并附带相关详细信息。
2. 为块编辑器提供JavaScript文件，该文件将帮助它在编辑器中呈现块，同时还将其“序列化”以将其保存到数据库中。
3. 提供块正常运行所需的任何其他资源，例如样式和字体。

需要注意的是，所有这些从序列化数据到图形界面的转换——反之亦然——仅在块编辑器中进行。在前端，内容的显示方式与存储方式完全相同。因此，从某种意义上说，块是将数据放入数据库的一种花哨方式。

希望这能让你更清楚块是如何工作的。

块只是插件

块只是插件。好吧，从技术上讲，您可以将块放在主题中，并且可以在插件中放置多个块。但是，通常情况下，如果您想制作一个块，您将要制作一个插件。因此，如果您曾经创建过WordPress插件，那么您已经部分掌握了制作WordPress块的方法。

但让我们假设您从未设置过WordPress插件，更不用说块了。您甚至从哪里开始？

设置块

我们已经介绍了块是什么。让我们开始设置一些东西来制作一个块。

确保您已安装Node

这将使您可以访问npm和npx命令，其中npm安装块的依赖项并帮助编译内容，而npx在不安装软件包的情况下运行软件包上的命令。如果您使用的是macOS，则可能已经安装了Node，并且可以使用 nvm 更新版本。如果您使用的是Windows，则需要 下载并安装Node。

创建项目文件夹

现在，您可能会遇到其他直接跳转到命令行并指示您安装名为 @wordpress/create-block 的软件包的教程。此软件包非常棒，因为它会生成一个完整的项目文件夹，其中包含开始开发所需的所有依赖项和工具。

在设置自己的区块时，我个人会选择这条路线，但请容忍我片刻，因为我想跳过它引入的主观内容，只关注理解基础开发环境所需的必要部分。

以下是我想特别指出的文件。

• readme.txt：这有点像插件目录的正面，通常用于描述插件并提供有关用法和安装的更多详细信息。如果您将您的区块提交到WordPress 插件目录，此文件将帮助填充插件页面。如果您计划为您的区块插件创建一个 GitHub 仓库，那么您可能还需要考虑使用包含相同信息的 README.md 文件，以便它在那里显示得很好。
• package.json：这定义了开发所需的 Node 包。在安装时，我们将打开它。在经典的 WordPress 插件开发中，您可能习惯于使用 Composer 和 composer.json 文件。这是它的等价物。
• plugin.php：这是主插件文件，是的，它是经典的 PHP！我们将把我们的插件头部和元数据放在这里，并用它来注册插件。

除了这些文件之外，还有一个 src 目录，它应该包含我们区块的源代码。

拥有这些文件和 src 目录是您入门所需的一切。在这些文件中，请注意，**从技术上讲，我们只需要一个文件**（plugin.php）来创建插件。其余文件要么提供信息，要么用于管理开发环境。

前面提到的 @wordpress/create-block 包为我们搭建了这些文件（以及更多）。您可以将其视为一种自动化工具，而不是必需品。无论如何，它确实使工作更容易，因此您可以利用它来搭建一个区块，方法是运行

npx @wordpress/create-block

安装区块依赖项

假设您已准备好上一节中提到的三个文件，现在该安装依赖项了。首先，我们需要指定我们将需要的依赖项。我们通过编辑 package.json 来做到这一点。在使用 @wordpress/create-block 工具时，以下内容将为我们生成（添加了注释；JSON 不支持注释，因此如果您要复制代码，请删除注释）

{
  // Defines the name of the project
  "name": "block-example",
  // Sets the project version number using semantic versioning
  "version": "0.1.0",
  // A brief description of the project
  "description": "Example block scaffolded with Create Block tool.",
  // You could replace this with yourself
  "author": "The WordPress Contributors",
  // Standard licensing information
  "license": "GPL-2.0-or-later",
  // Defines the main JavaScript file
  "main": "build/index.js",
  // Everything we need for building and compiling the plugin during development
  "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"
  },
  // Defines which version of the scripts packages are used (24.1.0 at time of writing)
  // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

{
  "name": "block-example",
  "version": "0.1.0",
  "description": "Example block scaffolded with Create Block tool.",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "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"
  },
  "devDependencies": {
    "@wordpress/scripts": "^24.1.0"
  }
}

@wordpress/scripts 包是这里的主要依赖项。如您所见，它是一个 devDependency，这意味着它有助于开发。如何做到这一点？它公开了 wp-scripts 二进制文件，我们可以使用它来编译我们的代码，从 src 目录到 build 目录，以及其他操作。

WordPress 为各种目的维护了许多其他包。例如，@wordpress/components 包为 WordPress 区块编辑器提供了几个预制 UI 组件，可用于为您的区块创建一致的用户体验，使其符合 WordPress 设计标准。

即使您想使用这些包，您实际上也**不需要**安装它们。这是因为这些 @wordpress 依赖项不会与您的区块代码捆绑在一起。相反，任何引用实用程序包（如 @wordpress/components）中代码的 import 语句都用于在编译期间构建“assets”文件。此外，这些 import 语句将转换为将导入映射到全局对象属性的语句。例如，import { __ } from "@wordpress/i18n" 将转换为 const __ = window.wp.i18n.__ 的缩小版本。（window.wp.i18n 是一个对象，一旦相应的 i18n 包文件被排队，它保证在全局范围内可用）。

在插件文件中的区块注册过程中，“assets”文件被隐式地用来告诉 WordPress 该区块的包依赖项。这些依赖项将自动排队。所有这些都在后台处理，前提是您正在使用 scripts 包。也就是说，您仍然可以选择在您的 package.json 文件中本地安装依赖项以进行代码补全和参数信息。

// etc.
"devDependencies": {
  "@wordpress/scripts": "^24.1.0"
},
"dependencies": {
  "@wordpress/components": "^19.17.0"
}

现在 package.json 已设置完毕，我们应该能够通过在命令行中导航到项目文件夹并运行 npm install 来安装所有这些依赖项。

添加插件头部

如果您来自经典的 WordPress 插件开发，那么您可能知道所有插件在主插件文件中都有一段信息，帮助 WordPress 识别插件并在 WordPress 管理员的“插件”屏幕上显示有关它的信息。

以下是 @wordpress/create-block 为我生成的，用于一个创造性地命名为“Hello World”的插件

<?php
/**
 * Plugin Name:       Block Example
 * Description:       Example block scaffolded with Create Block tool.
 * Requires at least: 5.9
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            The WordPress Contributors
 * License:           GPL-2.0-or-later
 * License URI:       https://gnu.ac.cn/licenses/gpl-2.0.html
 * Text Domain:       css-tricks
 *
 * @package           create-block
 */

这在主插件文件中，您可以根据需要命名它。您可以将其命名为一些通用的名称，例如 index.php 或 plugin.php。create-block 包会自动将其命名为您在安装时作为项目名称提供的内容。由于我将此示例命名为“Block Example”，因此该包为我们提供了一个 block-example.php 文件，其中包含所有这些内容。

您需要更改一些详细信息，例如将自己设为作者等等。并非所有这些都是必要的。如果我从“头”开始，那么它可能更接近如下所示

<?php
/**
 * Plugin Name:       Block Example
 * Plugin URI:        https://css-tricks.org.cn
 * Description:       An example plugin for learning WordPress block development.
 * Version:           1.0.0
 * Author:            Arjun Singh
 * License:           GPL-2.0-or-later
 * License URI:       https://gnu.ac.cn/licenses/gpl-2.0.html
 * Text Domain:       css-tricks
 */

我不会深入探讨每一行的确切用途，因为这已经是WordPress 插件手册中已建立的模式。

文件结构

我们已经查看了区块所需的文件。但是，如果您使用的是 @wordpress/create-block，您将在项目文件夹中看到许多其他文件。

以下是目前存在的文件

block-example/
├── build
├── node_modules
├── src/
│   ├── block.json
│   ├── edit.js
│   ├── editor.scss
│   ├── index.js
│   ├── save.js
│   └── style.scss
├── .editorconfig
├── .gitignore
├── block-example.php
├── package-lock.json
├── package.json
└── readme.txt

哇，真多！让我们指出新的内容。

• build/：在处理用于生产用途的文件时，此文件夹接收已编译的资产。
• node_modules：这里包含我们在运行 npm install 时安装的所有开发依赖项。
• src/：此文件夹包含插件的源代码，这些代码将被编译并发送到 build 目录。我们稍后将查看这里面的每个文件。
• .editorconfig：这包含用于使您的代码编辑器适应代码一致性的配置。
• .gitignore：这是一个标准的仓库文件，用于识别应从版本控制跟踪中排除的本地文件。您的 node_modules 绝对应该包含在此文件中。
• package-lock.json：这是一个自动生成的文件，用于跟踪使用 npm install 安装的所需包的更新。

区块元数据

我想和你一起深入探讨 src 目录，但首先只关注其中的一个文件：block.json。如果您使用了 create-block，它已经为您准备好了；如果没有，请继续创建它。WordPress 正在努力将其作为标准的规范方式来注册区块，方法是提供元数据，以便 WordPress 上下文既可以识别区块，又可以在区块编辑器中呈现它。

以下是 @wordpress/create-block 为我生成的内容

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "create-block/block example",
  "version": "0.1.0",
  "title": "Block Example",
  "category": "widgets",
  "icon": "smiley",
  "description": "Example block scaffolded with Create Block tool.",
  "supports": {
    "html": false
  },
  "textdomain": "css-tricks",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

实际上，我们可以在此处包含许多不同的信息，但实际上只需要name 和 title。一个超级精简的版本可能如下所示

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
}

• $schema 定义用于验证文件内容的模式格式。听起来像是必需项，但它完全是可选的，因为它允许支持的代码编辑器验证语法并提供其他附加功能，例如工具提示提示和自动完成。
• apiVersion 指的是插件使用的区块 API 的哪个版本。今天，版本 2 是最新的。
• name 是一个必需的唯一字符串，用于帮助识别插件。请注意，我在前面加了 css-tricks/，我将其用作命名空间以帮助避免与可能具有相同名称的其他插件发生冲突。您可以选择使用您的首字母缩写之类的名称（例如 as/block-example）。
• version 是WordPress 建议使用 的内容，作为发布新版本时的缓存清除机制。
• title 是另一个必需字段，它设置了在任何显示插件的地方使用的名称。
• category 将区块与其他区块分组，并在区块编辑器中一起显示它们。当前现有的类别包括 text、media、design、widgets、theme 和 embed，您甚至可以创建自定义类别。

• icon 允许你从 Dashicons 库 中选择一个图标，以在块编辑器中直观地表示你的块。在这个例子中，我使用了 format-quote 图标，因为我们正在创建我们自己的类似于引用块的东西。能够利用现有的图标而不是创建我们自己的图标是一件好事，尽管这当然也是可能的。
• editorScript 是主 JavaScript 文件 index.js 所在的位置。

注册块

在我们开始编写实际代码之前，还有一件事需要做，那就是注册插件。我们刚刚设置了所有元数据，我们需要一种方法让 WordPress 使用它。这样，WordPress 就会知道在哪里找到所有插件资源，以便它们可以在块编辑器中被加载使用。

注册块是一个双重过程。我们需要在 PHP 和 JavaScript 中都注册它。对于 PHP 方面，打开主插件文件（在本例中为 block-example.php），并在插件头之后添加以下内容

function create_block_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'create_block_block_example_block_init' );

这是 create-block 工具为我生成的，所以函数的命名方式就是这样。我们可以使用不同的名称。关键是避免与其他插件冲突，因此最好在这里使用你的命名空间，使其尽可能唯一。

function css_tricks_block_example_block_init() {
  register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'css_tricks_block_example_block_init' );

如果包含所有块元数据的 block.json 在 src 中，为什么我们要指向 build 目录？这是因为我们的代码仍然需要编译。scripts 包处理来自 src 目录中文件的代码，并将用于生产的编译后的文件放置在 build 目录中，同时还复制block.json文件。

好的，让我们转到注册块的 JavaScript 方面。打开 src/index.js 并确保它看起来像这样

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

我们进入了 React 和 JSX 的领域！这告诉 WordPress 要：

• 从 @wordpress/blocks 包中导入 registerBlockType 模块。
• 从 block.json 中导入元数据。
• 从它们对应的文件中导入 Edit 和 Save 组件。我们稍后会将代码放入这些文件中。
• 注册块，并使用 Edit 和 Save 组件来渲染块并在数据库中保存其内容。

edit 和 save 函数有什么作用？WordPress 块开发的一个细微差别是区分“后端”和“前端”，这些函数用于在这些上下文中渲染块的内容，其中 edit 处理后端渲染，而 save 将块编辑器中的内容写入数据库以在网站的前端渲染内容。

快速测试

我们可以快速操作一下，看看我们的块在块编辑器中是如何工作的，以及它在前端是如何渲染的。让我们再次打开 index.js，并使用 edit 和 save 函数返回一些基本内容，来说明它们是如何工作的。

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

const { name } = metadata;

registerBlockType(name, {
  edit: () => {
    return (
      "Hello from the Block Editor"
    );
  },
  save: () => {
    return (
      "Hello from the front end"
    );
  }
});

这基本上是我们之前代码的简化版本，只是我们直接指向 block.json 中的元数据来获取块名称，并且省略了 Edit 和 Save 组件，因为我们直接从这里运行这些函数。

我们可以通过在命令行中运行 npm run build 来编译它。之后，我们可以在块编辑器中访问一个名为“块示例”的块。

如果我们将块放入内容区域，我们会收到从 edit 函数返回的消息。

如果我们保存并发布帖子，当我们在前端查看它时，应该会收到从 save 函数返回的消息。

创建块

看起来一切都连接上了！现在我们已经确认一切正常，我们可以恢复到测试之前在 index.js 中的内容。

import { registerBlockType } from "@wordpress/blocks";

import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";

const { name } = metadata;

registerBlockType(name, {
  edit: Edit,
  save: Save,
});

请注意，edit 和 save 函数与 src 目录中 @wordpress/create-block 为我们生成的两个现有文件相关联，并且包含每个文件中我们需要的所有其他导入。但更重要的是，这些文件建立了包含块标记的 Edit 和 Save 组件。

后端标记 (src/edit.js)

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Edit() {
  return (
    <p {...useBlockProps()}>
      {__("Hello from the Block Editor", "block-example")}
    </p>
  );
}

看到我们做了什么吗？我们正在从 @wordpress/block-editor 包中导入 props，这允许我们生成稍后可用于样式设置的类。我们还导入了用于处理翻译的 __ 国际化函数。

前端标记 (src/save.js)

这创建了一个 Save 组件，我们将使用与 src/edit.js 几乎相同的东西，只是文本略有不同。

import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";

export default function Save() {
  return (
    <p {...useBlockProps.save()}>
      {__("Hello from the front end", "block-example")}
    </p>
  );
}

同样，我们得到了一个可以在 CSS 中使用的不错的类。

块样式

我们刚刚介绍了如何使用块 props 来创建类。你在一个关于 CSS 的网站上阅读这篇文章，所以我觉得如果我们没有专门讨论如何编写块样式，就会错过一些东西。

区分前端和后端样式

如果你查看 src 目录中的 block.json，你会发现两个与样式相关的字段。

• editorStyle 提供应用于后端的样式的路径。
• style 是应用于前端和后端的共享样式的路径。

Kev Quirk 有一篇详细的文章 展示了他使后端编辑器看起来像前端 UI 的方法。

回想一下，@wordpress/scripts 包在处理 /src 目录中的代码并将编译后的资源放置在 /build 目录中时，会复制 block.json 文件。它是 build/block.json 文件用于注册块。**这意味着我们在 src/block.json 中提供的任何路径都应相对于 build/block.json 编写。**

使用 Sass

我们可以将几个 CSS 文件放到 build 目录中，在 src/block.json 中引用路径，运行构建，然后就完成了。但这并没有利用 @wordpress/scripts 编译过程的全部功能，它能够将 Sass 编译成 CSS。相反，我们将样式文件放在 src 目录中，并在 JavaScript 中导入它们。

在这样做的时候，我们需要注意 @wordpress/scripts 如何处理样式。

• 一个名为 style.css 或 style.scss 或 style.sass 的文件，如果导入到 JavaScript 代码中，将被编译成 style-index.css。
• 所有其他样式文件都会被编译并捆绑到 index.css 中。

@wordpress/scripts 包使用 webpack 进行捆绑，并且 @wordpress/scripts 使用 PostCSS 插件 来处理样式。PostCSS 可以扩展其他插件。scripts 包使用 Sass、SCSS 和 Autoprefixer 的插件，所有这些插件都可以在不安装其他包的情况下使用。

事实上，当你使用 @wordpress/create-block 创建初始块时，你会得到一个很好的开始，可以使用 SCSS 文件来快速上手。

• editor.scss 包含应用于后端编辑器的所有样式。
• style.scss 包含前端和后端共享的所有样式。

现在让我们通过编写一些我们将编译到块的 CSS 中的 Sass 来看看这种方法的实际应用。即使示例不会非常 Sass 化，我仍然将它们写入 SCSS 文件以演示编译过程。

前端和后端样式

好的，让我们从应用于前端和后端的样式开始。首先，我们需要创建 `src/style.scss`（如果您使用的是 `@wordpress/create-block`，它已经存在了）并确保我们导入了它，我们可以在 `index.js` 中进行导入。

import "./style.scss";

打开 `src/style.scss`，并使用从块属性生成的类在其中添加一些基本样式。

.wp-block-css-tricks-block-example {
  background-color: rebeccapurple;
  border-radius: 4px;
  color: white;
  font-size: 24px;
}

目前就这些了！当我们运行构建时，这将编译成 `build/style.css`，并被块编辑器和前端引用。

后端样式

您可能需要编写特定于块编辑器的样式。为此，请创建 `src/editor.scss`（同样，`@wordpress/create-block` 会为您完成此操作），并在其中添加一些样式。

.wp-block-css-tricks-block-example {
  background-color: tomato;
  color: black;
}

然后在 `edit.js` 中导入它，`edit.js` 是包含我们的 `Edit` 组件的文件（我们可以在任何我们想要的地方导入它，但由于这些样式是为编辑器准备的，因此在组件中导入它更符合逻辑）。

import "./editor.scss";

现在，当我们运行 `npm run build` 时，样式将应用于两种上下文中的块。

在 `block.json` 中引用样式

我们在 `edit.js` 和 `index.js` 中导入了样式文件，但请记住，编译步骤会在 `build` 目录中为我们生成两个 CSS 文件：`index.css` 和 `style-index.css`。我们需要在块元数据中引用这些生成的样式文件。

让我们在 `block.json` 元数据中添加几个语句。

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 2,
  "name": "css-tricks/block-example",
  "version": "1.0.0",
  "title": "Block Example",
  "category": "text",
  "icon": "format-quote",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css"
}

再次运行 `npm run build`，在您的 WordPress 网站上安装并激活插件，您就可以开始使用了！

您可以使用 `npm run start` 以监视模式运行您的构建，每次您更改代码并保存时，都会自动编译您的代码。

我们只是触及了表面

实际的块会利用块编辑器的设置侧边栏以及 WordPress 提供的其他功能来创建丰富的用户体验。此外，我们的块实际上有两个版本——`edit` 和 `save`——您还需要考虑如何组织您的代码以避免代码重复。

但希望这有助于揭开创建 WordPress 块的一般过程的神秘面纱。这确实是 WordPress 开发的一个新时代。学习新的做事方式很困难，但我期待着看到它的发展。像 `@wordpress/create-block` 这样的工具很有帮助，但即使如此，了解它到底在做什么以及为什么这样做也很好。

我们这里讨论的内容会发生变化吗？很可能！但至少您有一个基线可以作为参考，因为我们继续关注 WordPress 块的成熟，包括创建块的最佳实践。

参考文献

再说一次，我的目标是在这个发展迅速且 WordPress 文档有点难以跟上的时期，为开始块开发制定一条高效的路径。以下是我用来整理这些内容的一些资源。

• 关键概念（WordPress 块编辑器手册）
• 创建块教程（WordPress 块编辑器手册）
• `block.json` 中的元数据（WordPress 块编辑器手册）
• 核心块的源代码（WordPress GitHub）
• `@wordpress/scripts` 包中使用的 webpack 配置（WordPress GitHub）
• 后端工程师学习构建块编辑器块，第一部分（Tom McFarlin）
• Ryan Welcher 的 Twitch 直播（Ryan 是 Automattic 的开发者布道师）