技能介绍

手动构建 Gutenberg 区块的痛点

手动创建自定义 Gutenberg 区块时，开发者需分别编写 edit.js（前端编辑逻辑）、save.js（持久化逻辑）、block.json（区块元数据）和 render.php（服务端渲染），还要处理 InnerBlocks（嵌套区块支持）和 viewScriptModule（异步脚本注入）等特性。这种多文件分散开发模式易导致结构不一致、配置遗漏或 API 使用错误——尤其对新手而言，理解 Block API v3 的 schema 与文件间依赖关系需较高学习成本，手动调整还可能破坏区块的兼容性与稳定性。

技能核心能力与工作步骤

该技能通过封装 @wordpress/create-block 工具链与 Block API v3 schema，自动生成标准化区块脚手架。核心能力包括：

基于区块类型（静态/动态）生成符合规范的 block.json 元数据（含 apiVersion、title、category 等字段）；
生成适配 InnerBlocks 组件的编辑与保存逻辑，支持嵌套区块插槽配置；
集成 viewScriptModule，通过 wp_enqueue_script_module 按需注入前端模块，避免脚本冲突；
生成服务端渲染模板 render.php，确保前端展示与保存逻辑一致。

使用流程分三步：输入区块基本参数（名称、描述、分类）后，技能调用 @wordpress/create-block 生成初始文件结构；自动验证 block.json 中 viewScriptModule 配置与 edit.js 的 InnerBlocks 导入是否匹配；最后生成可直接集成到主题/插件的代码包（含必要注释与示例）。

适用边界与注意点

适用于需快速启动 Gutenberg 区块开发的场景，尤其适合熟悉 JavaScript/PHP 基础但需节省脚手架搭建时间的开发者。需注意：

依赖 Node.js 开发环境，未配置 npm 或 webpack 时无法直接运行；
生成代码需配合 @wordpress/block-editor、@wordpress/blocks 等包使用，需手动执行 npm install；
高级场景（如自定义 deprecation 逻辑、复杂动态渲染）仍需参考 Block Editor Handbook 手动调整，技能仅提供基础脚手架而非完整解决方案。