打造古腾堡插件提升区块编辑器功能

多年来，我们对古腾堡编辑器进行了全方位的深入研究。我们不仅深入剖析了其核心功能，还将其与各类页面构建工具进行了细致比较，并成功构建了静态与动态的自定义区块。随着最新版 WordPress 的发布，一系列创新功能进一步丰富和强化了区块编辑器的性能，让用户能够更轻松地创建复杂布局，而无需再依赖自定义区块。区块样板和开发者工具（如区块绑定 API）的引入，显著减少了自定义区块的应用场景。如今，您可以直接在编辑器中构建复杂的区块结构，轻松注入元数据值，并在无需离开界面的情况下自动完成大部分工作流程。简而言之，WordPress 再次让复杂网站的建设变得触手可及，只需简单几步即可实现。

打造古腾堡插件提升区块编辑器功能

在编辑器中集成自定义控件和工具，能够大幅提升内容创作的流畅度。例如，您可能需要在文章侧边栏中添加功能面板，或创建自定义侧边栏来管理多个元字段。那么，在不开发自定义区块的情况下，如何高效创建区块编辑器插件呢？WordPress 提供了一个便捷的命令行工具，可一键搭建本地 Node.js 开发环境，包含所有创建自定义区块所需的文件和依赖项。只需在命令行中输入 npx @wordpress/create-block，稍等片刻即可完成设置。当然，若您仅需添加侧边栏或简单设置面板，则无需繁琐的脚手架搭建。这种情况下，创建古腾堡插件更为合适。尽管 WordPress 没有提供自动生成 Gutenberg 插件的工具，但整个过程其实相当简单，我们将为您逐步解析。

打造古腾堡插件提升区块编辑器功能

### 开发前的准备工作

打造古腾堡插件提升区块编辑器功能

首先，建议您在本地搭建开发环境。虽然远程开发也是可行的，但本地环境能提供更便捷的调试体验。您可以选择任何基于 PHP 和 MySQL 的环境，其中 MAMP 因其功能全面且操作简单而备受推荐。完成开发网站配置后，即可着手创建 Gutenberg 区块编辑器插件。

打造古腾堡插件提升区块编辑器功能

### 安装 Node.js 和 npm

打造古腾堡插件提升区块编辑器功能

接下来，请从 nodejs.org 下载并安装 Node.js，这将同时安装 Node 软件包管理器 npm。安装完成后，在命令行中运行 node -v 和 npm -v，确认版本信息显示正常。这一步是确保后续开发流程顺畅的关键。

打造古腾堡插件提升区块编辑器功能

### 创建插件文件夹

打造古腾堡插件提升区块编辑器功能

在 wp-content/plugins 目录下新建一个文件夹，命名为 my-sidebar-plugin 或其他您喜欢的名称。这个名称将作为您插件的标识。打开终端，导航至该文件夹，并执行 npm init -y 命令，快速生成 package.json 文件。这一步为插件项目奠定了基础。

打造古腾堡插件提升区块编辑器功能

### 安装核心依赖

打造古腾堡插件提升区块编辑器功能

在命令行中输入以下命令，安装 WordPress 插件模块和开发脚本集合：npm install @wordpress/plugins @wordpress/scripts –save-dev。安装完成后，检查 node_modules 文件夹是否已生成。随后，更新 package.json 中的 scripts 部分，确保包含以下内容：{ “name”: “my-sidebar-plugin”, “version”: “1.0.0”, “main”: “index.js”, “scripts”: { “build”: “wp-scripts build”, “start”: “wp-scripts start” }, “keywords”: [], “author”: “”, “license”: “ISC”, “description”: “”, “devDependencies”: { “@wordpress/plugins”: “^7.14.0”, “@wordpress/scripts”: “^30.7.0” } }。至此，您的插件项目已准备就绪。

打造古腾堡插件提升区块编辑器功能