SuperAPI AI 工具集

wp-block-development

编程与开发

查看项目

更新于 10-15 23:41

技能介绍

用途:面向 WordPress 6.x+ 区块编辑器(Gutenberg)的区块开发代码审查技能,核心原则是区块采用双架构——编辑器使用 React 组件(edit 函数),前端使用静态 HTML(save 函数)或服务端 PHP(render_callback/渲染文件),block.json 为唯一事实来源。

主要能力:校验 block.json schema(apiVersion 应为 3、name 需为 namespace/block-name 格式、title 与 category 必填、attributes 的 type/source/selector/default、supports、各类资源路径、render 与 $schema 字段);检查 edit 函数(useBlockProps 必须调用并展开、使用 @wordpress/* 导入而非 window.wp.*、InspectorControls/BlockControls、RichText、InnerBlocks、合并 useSelect 调用、国际化);检查 save 函数或渲染回调(静态块需 useBlockProps.save()、RichText.Content、InnerBlocks.Content;动态块需返回 null,若含 InnerBlocks 必须返回 InnerBlocks.Content;save 必须确定性执行,禁止随机值与副作用);渲染文件需含 ABSPATH 检查、get_block_wrapper_attributes()、输出转义,且不得对 InnerBlocks 的 $content 使用 wp_kses_post();检查 register_block_type() 及 init 钩子、弃用数组与 migrate、Interactivity API 指令与前端 store、块上下文、转换、变体、样式、模式、blockHooks 与 @wordpress/scripts 构建配置。

使用方式:按七步流程审查——识别块类型与上下文、校验 block.json、检查 edit、检查 save 或渲染回调、扫描 CRITICAL 模式、检查 WARNING 模式、记录 INFO 改进。报告按实际文件路径混排 PHP 与 JS/JSX,附行号、严重级别(CRITICAL/WARNING/INFO)与 BAD/GOOD 代码对照。仅审查 src/ 文件,build/ 目录缺失或过期需单独标记,不作为代码质量审查对象。资料还给出若干 rg 检测命令用于快速扫描。

适用场景:单块、多块或区块库插件的代码审查、block.json schema 校验、编辑器组件审查、服务端渲染审计、InnerBlocks 模式、弃用检查、Interactivity API 指令审查、属性 schema 验证、构建配置检查与块校验错误排查。

限制:不适用于 theme.json 配置、通用 React 应用审查、WooCommerce 区块扩展、纯安全审计、插件架构审计、纯性能审计。若发现安全问题或插件架构问题,需另行运行专门审查。资料未提供收费、价格、平台或安装命令等信息。