Gutenberg 区块开发

这一课你将能做到

1. 用官方脚手架 create-block 生成、构建并在编辑器里插入一个自定义区块
2. 读懂 block.json 的关键字段，为区块声明 attributes 并在编辑态读写
3. 把区块改造成「动态区块」，用 render.php 在服务端实时输出内容（如最新文章列表）

为什么要学

WP 6.x 的编辑器整个建立在 Gutenberg 之上：文章、页面、主题模板都是区块的排列组合。会写区块，你就从「用别人插件的人」变成「造组件的人」；而且区块的 edit 组件是 React 写的——本站 java-nav 前端同款技术栈，学习成本直接复用。

人话：区块 = 编辑器里的 React 组件 + 前台的渲染输出。你在一个项目里同时练 React 和 PHP，这笔投资只赚不亏。

先建立图像

一个区块在两个世界里的样子：

编辑器（React 世界）            前台（PHP/HTML 世界）
┌─────────────────────┐        ┌──────────────────────┐
│ edit.js  编辑态 UI    │  保存   │ 静态区块: save.js 生成的│
│ attributes (状态)     │ ─────→ │ HTML 存进 post_content │
└─────────────────────┘        │ 动态区块: render.php    │
                               │ 服务端实时渲染          │
                               └──────────────────────┘
post_content 里的区块长这样：
<!-- wp:qrocmq/course-card {"level":"进阶"} /-->

静态区块把 HTML「焊死」进内容，动态区块只存锚点注释 + 属性，前台每次请求由 PHP 现渲染——要展示会变的数据，选动态。

跟着做

步骤 1：脚手架生成区块

前置：Node.js 20+。在插件开发目录执行：

npx @wordpress/create-block qrocmq-course-card --namespace=qrocmq
cd qrocmq-course-card
npm start        # 开发模式，热更新

启用生成的插件（或 wp plugin activate qrocmq-course-card），新建一篇文章，插入「Course Card」区块，输入文字，保存并预览——第一版已经能跑。

步骤 2：读懂 block.json

打开 src/block.json，核心字段：

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "qrocmq/course-card",
    "version": "1.0.0",
    "title": "Course Card",
    "category": "widgets",
    "icon": "welcome-learn-more",
    "description": "课程卡片：标题 + 难度",
    "attributes": {
        "title":   { "type": "string", "default": "课程标题" },
        "level":   { "type": "string", "default": "入门" }
    },
    "supports": {
        "html": false,
        "align": [ "wide", "full" ],
        "color": { "text": true, "background": true }
    },
    "textdomain": "qrocmq-course-card",
    "editorScript": "file:./index.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

name 规则：命名空间/小写连字符，全局唯一，不可改。

步骤 3：编辑态加一个难度选择

改 src/edit.js，用 RichText 编辑标题、用 Select 切难度：