SuperAPI AI 工具集

wp-block-development

编程与开发

查看项目

更新于 10-15 17:21

技能介绍

用途:开发或更新 WordPress(Gutenberg)区块时使用,包括新建区块、修改 block.json(脚本/样式/supports/attributes/render/viewScriptModule)、修复“区块无效/不保存/属性不持久化”、添加动态渲染(render.php 或 render_callback)、处理区块弃用与迁移,以及区块构建工具配置。

必要输入:仓库根目录与目标(插件、主题或整站);区块名称/命名空间及其位置(已知则给出 block.json 路径);目标 WordPress 版本范围(尤其使用模块或 viewScriptModule 时)。

主要流程:先做项目识别与区块定位,可运行 node skills/wp-project-triage/scripts/detect_wp_project.mjs 与 node skills/wp-block-development/scripts/list_blocks.mjs;新建区块优先用 @wordpress/create-block 脚手架,需要 Interactivity API 时用交互模板;确保 block.json 使用 apiVersion 3(WordPress 6.9+ 强制,6.9 起 apiVersion 2 及更低在 SCRIPT_DEBUG 下会告警,7.0 将强制 iframe 编辑器),迁移通常只需改 apiVersion 字段,但要测试 iframe 编辑器并确保样式句柄写入 block.json;选择静态区块(save)或动态区块(服务端 render)模型;安全更新 block.json,注意 name 视为稳定 API、改动已保存标记需加 deprecated、属性需正确声明 source/序列化;优先用 PHP 元数据注册;编辑/保存/渲染使用 useBlockProps()、useBlockProps.save()、get_block_wrapper_attributes();嵌套区块用 useInnerBlocksProps();修改属性前确认取值位置并避免已弃用的 meta source;改动保存标记或属性时新增 deprecated 条目并提供旧版 save 与可选 migrate。

验证:确认区块出现在插入器、保存并重新加载不报“无效区块”、前端输出符合预期、资源按编辑器/前端分别加载,并运行仓库推荐的 lint/build/test。排查可参考 debugging、attributes-and-serialization、deprecations 文档。

限制:上游行为与版本支持不确定时,应查阅 WordPress 官方开发者资源与 Gutenberg 仓库文档;具体命令以仓库现有脚本为准。