WordPress Gutenberg 区块开发快速入门指南

WordPress Gutenberg 区块开发快速入门指南

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg

前言

作为 WordPress 的核心编辑器，Gutenberg 采用基于区块（Block）的现代化编辑体验。本文将带领开发者快速上手 Gutenberg 区块开发，通过创建一个实用的"版权日期区块"来掌握核心开发流程。

开发环境准备

在开始之前，请确保您的开发环境满足以下要求：

1. Node.js 环境：建议安装最新的 LTS 版本
2. npm 或 yarn：Node.js 包管理工具
3. 本地 WordPress 环境：可以使用 Docker 或其他本地开发环境

创建区块插件

Gutenberg 提供了便捷的脚手架工具 @wordpress/create-block，它能快速生成区块开发所需的基础结构。

执行以下命令创建版权日期区块：

npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template

这个命令会：

• 创建一个名为 copyright-date-block 的插件目录
• 使用官方教程模板初始化项目
• 自动安装所有必要的依赖项

项目结构解析

生成的插件包含以下关键文件和目录：

copyright-date-block/
├── build/            # 编译后的文件
├── src/              # 开发源代码
│   ├── block.json    # 区块元数据
│   ├── edit.js       # 编辑器视图
│   ├── editor.scss   # 编辑器样式
│   ├── index.js      # 主入口文件
│   ├── save.js       # 前端保存视图
│   └── style.scss    # 前端样式
├── package.json      # 项目配置
└── readme.txt        # 插件说明

开发工作流

1. 启动开发服务器

进入项目目录并启动开发模式：

cd copyright-date-block
npm start

此命令会：

• 启动文件监视器
• 自动编译 JSX/ESNext 代码
• 实时更新变更

2. 构建生产版本

完成开发后，运行构建命令：

npm run build

这会：

• 优化代码
• 压缩资源
• 生成生产环境可用的文件

区块功能解析

我们创建的版权日期区块主要实现以下功能：

1. 显示版权符号 (©)
2. 自动显示当前年份
3. 提供基本的样式支持

核心代码逻辑位于 src/edit.js 和 src/save.js 中，分别处理编辑器视图和前端渲染。

测试与部署

本地测试

推荐使用 Docker 配合 wp-env 进行本地测试：

npx wp-env start

访问 http://localhost:8888 即可查看效果。

部署到生产环境

只需将整个插件目录上传到 WordPress 的 wp-content/plugins/ 目录，然后在后台激活即可。

进阶学习建议

掌握了基础开发流程后，可以进一步探索：

1. 区块属性（Attributes）管理
2. 使用 InnerBlocks 创建嵌套区块
3. 实现区块转换功能
4. 添加国际化支持
5. 开发动态区块

常见问题解答

Q: 为什么我的区块在编辑器中不显示？ A: 请检查是否已激活插件，并确保运行了 npm run build 或 npm start。

Q: 如何修改区块的显示名称？ A: 编辑 src/block.json 文件中的 title 属性。

Q: 开发过程中样式不更新怎么办？ A: 尝试重启开发服务器，并检查浏览器缓存。

通过本指南，您已经掌握了 Gutenberg 区块开发的基础流程。接下来可以尝试开发更复杂的自定义区块，为 WordPress 站点添加独特的功能和设计元素。

gutenberg The Block Editor project for WordPress and beyond. Plugin is available from the official repository. 项目地址: https://gitcode.com/gh_mirrors/gu/gutenberg