Gutenberg 自定义区块构建器

要解决的问题

手写一个 Gutenberg 自定义区块并不只是“写一段 JSX”。你通常要先决定目录结构、block.json 的 metadata、edit/save 两个入口，再补上 @wordpress/scripts 的构建配置；如果要做面板配置、富文本或嵌套内容，还得分别处理 InspectorControls、RichText 和 InnerBlocks。真正消耗时间的往往是重复搭建，而不是区块业务本身。

技能如何工作

这个技能围绕两条主线：先用 @wordpress/create-block 生成区块脚手架，再用 Block API 的 registerBlockType() 注册区块。它会产出可直接修改的 edit 与 save 组件，并覆盖常见扩展点：

• 用 InspectorControls 添加编辑器侧边配置；
• 用 RichText 处理可编辑文本；
• 用 InnerBlocks 支持嵌套区块。

适用边界与注意点

它适合在 WordPress 与 Node.js 环境下做标准静态区块、内容模板和编辑器内可预览的区块。save 输出需要与数据库中的序列化结果保持一致，改动时要注意差异校验。动态渲染、复杂 SSR、跨站点迁移等场景仍需要额外的 REST/PHP 回调或构建配置。