结论先说
用官方 @wordpress/create-block 脚手架，几分钟内就能生成一个可插入编辑器的 WordPress 区块；本文带你从 npx 命令一路改到 block.json、edit.js、save.js，并讲清动态与静态渲染的区别。
为什么要自己写区块
区块是 WordPress 现代编辑器的”积木”。比起改主题或塞短代码，区块让功能以标准化、可复用、可拖拽的方式存在。官方脚手架把目录结构、构建配置、注册代码一次生成好，你只需专注业务逻辑。
环境准备
- 代码编辑器（VS Code 等）
- Node.js 开发工具
- 本地 WordPress 环境（推荐 wp-env 或 Local）
第一步：脚手架生成区块
npx @wordpress/create-block@latest copyright-date-block --variant=dynamic
cd copyright-date-block
npm run start
--variant=dynamic 表示生成”动态渲染”区块：前端由 PHP 输出，编辑器里不写死 save.js。生成后到后台插件页启用，新建文章即可插入 “Copyright Date Block”。
开发阶段用
npm run start 看热更新；发布到生产前再跑 npm run build 生成正式构建产物。看清文件结构
| 文件 | 作用 |
|---|---|
| block.json | 区块元数据（名称、图标、 supports 、文本域等） |
| index.js | 入口，调用 registerBlockType 注册区块 |
| edit.js | 编辑器内的交互与控件 |
| render.php | 动态区块的前端渲染 |
| save.js | 静态渲染时写入保存内容（动态区块默认无此文件） |
改 block.json 元数据
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "create-block/copyright-date-block",
"version": "0.1.0",
"title": "Copyright Date Block",
"category": "widgets",
"icon": "calendar",
"description": "显示版权符号与当前年份",
"textdomain": "copyright-date-block",
"editorScript": "file:./index.js"
}
加属性：让用户可以改字号和颜色
在 edit.js 里用 useBlockProps 与 InspectorControls 加控件，把值存进区块属性。属性在 block.json 的 attributes 里声明，编辑器保存时随区块一起写入。
动态 vs 静态渲染
| 维度 | 动态渲染 | 静态渲染 |
|---|---|---|
| 内容来源 | PHP / 数据库实时计算 | 保存时写死进文章 HTML |
| 典型场景 | 当前年份、用户态内容 | 固定版式、文案 |
| 是否有 save.js | 默认无 | 有，定义保存结构 |
| 改逻辑后 | 前端立即生效 | 需重新保存文章 |
加 save 函数做静态渲染
若想静态渲染，新建 save.js 返回要保存的标记即可。动态区块则跳过它，交给 render.php 在服务端渲染。
- 装好 Node + wp-env 本地 WordPress 环境。
- 运行
npx @wordpress/create-block@latest生成区块骨架。 - 改
block.json的标题、图标、描述等元数据。 - 在
edit.js里加交互控件并绑定到 attributes 。 - 运行
npm run build，后台插入区块验证效果。
动态区块和静态区块怎么选？
内容随时间变化（如当前年份、登录用户态）用动态；内容固定用静态，更利于全站编辑与按需修改。
没有 save.js 怎么办？
动态区块默认没有 save.js，前端渲染走 render.php / PHP，无需保存函数。
apiVersion 用几？
当前用
3，跟随 Gutenberg 最新建议，旧版本可能在未来被弃用。区块 slug 能改吗？
能，但改名要同步改
name 命名空间和 textdomain，否则注册会冲突。
评论 (0)