Community编程与开发github.com

nextora-gutenberg-blocks

构建或修改 Nextora 父主题或子主题中的 Gutenberg 区块——包括 block.json 注册、类型化属性、RichText 与媒体原生可视化编辑、InspectorControls 设置面板、可重复列表编辑器(含模态框项目编辑)、render.php 输出、视图脚本、区块样式变体以及 esbuild 构建流水线。当需求提及区块、block.json、edit.tsx、index.tsx、render.php、ServerSideRender、InnerBlocks、重复器/列表编辑器、模态框项目表单、检查器面板、区块分类或“为 Nextora 添加/重设样式化区块”时使用。

nextora-gutenberg-blocks 是什么?

Nextora Gutenberg 区块技能是用于开发和管理 Nextora 父主题或子主题中自定义 Gutenberg 区块的全面指南。它涵盖了区块的完整生命周期:从元数据注册(block.json)、前端编辑器 UI(edit.tsx)、动态渲染(render.php)、视图脚本(view.ts)到构建产物处理。该技能强调复用现有区块结构,避免不必要的创建,并强制要求在执行任何操作前先读取目标主题的实际文件(如 blocks.php、block.json、构建脚本等)。它支持多种 Gutenberg 原生编辑功能,如 RichText、InnerBlocks、InspectorControls 和可重复列表编辑器(带模态框编辑),并提供了严格的硬限制,例如禁止使用第二个 React 运行时或第二个打包器,要求复用主题的 esbuild 设置。该技能还包含详细的验收检查清单,确保区块的可访问性、国际化、安全性和正确的构建输出。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/miketropi/nextora-skills/tree/main/skills/nextora-gutenberg-blocks

Installed? Explore more 编程与开发 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

Nextora 区块

拥有区块的完整代码契约:元数据、注册、编辑器 UI、动态渲染、视图脚本、构建产物消费。外观规则由 nextora-design-system 掌管;模板和模式由 nextora-site-composition 掌管;子主题脚手架由 nextora-child-themes 掌管。当需求涉及区块的外观时,加载设计系统技能;当区块必须遵循预设值或访客切换器时,同时加载两者。

先加载以下参考文件

仅读取任务所需的内容,以此文件的相对路径为基准:

文件读取目的
references/block-contract.md文件夹布局、block.json 键值、注册器行为、分类强制转换、生成器、esbuild/window.wp shim 及其 14 个句柄依赖列表、save 语义、渲染和视图合约。
references/editor-and-repeaters.md两个真实的列表编辑器(team-section 和子 repeater.tsx)、它们确切的提交/取消语义、富文本和媒体辅助函数。
../nextora-ecosystem/references/source-map.md每条规则的来源以及如何重新检查它;根解析词汇表。
../nextora-ecosystem/references/quality-gates.md数据、对等性、资产、安全性、国际化、可访问性门控以及共享的下游验收配方(§8)。

切勿将参考文件中引用为当前值的值视为最终值:在编辑前重新读取目标主题自身的文件。

有序工作流程

1. 确定目标和区块的主机主题

从实际安装或提供的仓库中识别父主题根目录和活动(子)主题根目录 —— get_template_directory() 和 get_stylesheet_directory(),或 style.css 头部信息。子区块仅当子主题注册它时才存在;父主题注册器仅读取模板目录。没有真实的 Nextora 源代码,切勿声称 Nextora 兼容性。

2. 读取目标自身的证据

按此顺序,优先使用真实值而非本文档中的任何内容:

  1. blocks/blocks.php —— 注册器、其 glob 模式、是否检查可读性、分类过滤器,以及它引入的每个区块级 PHP 文件。
  2. blocks/*/block.json —— 现有名称、分类、supports、资产指针。
  3. 最接近现有区块的 edit.tsx、render.php、可选的 view.ts、save.tsx、register-styles.php/register-editor.php。
  4. scripts/build-blocks.mjs —— 确切的入口 glob 模式和 shim。
  5. package.json + .nvmrc —— 实际存在的命令和 Node 版本。
  6. theme.json —— 区块应引用的调色板、字体、渐变、字号和间距标识符。

3. 在创建之前决定复用

当请求的编辑结构已存在时(另一个标题字段、另一个列表、另一个开关),扩展现有区块。仅当请求的行为或编辑结构无法通过现有区块、核心区块、模式或区块样式变体表达时,才创建新区块。说明你复用了哪个现有区块,或为什么没有适合的区块 —— 并且在交付物中说明,而不仅仅在对话中说明:在区块编辑器入口的文档块中以及在主题的 README 中(列出你拒绝的最接近的候选者以及每个候选者缺少什么)。一个仅阅读仓库的记录者必须能够找到该决策。

4. 首先编写元数据

block.json 使用 apiVersion: 3、命名空间/文本域/分类(父主题中为 nextora + nextora;子主题中为 <child-slug>)、带有真实默认值的类型化属性、用于包装外观的 supports,以及指向已构建文件的资产指针:`editorScript:

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

miketropi/nextora-child-themes

Create, bootstrap or audit a child theme of the Nextora parent block theme — the style.css header with Template nextora, the functions.php load order, the single version constant kept in sync with the header, the front-end and editor-canvas asset pipeline with its parent handle dependencies, the child block registrar and inserter category, PHP/i18n conventions, and the optional feature-file layout. Use when a request names a Nextora child, a new child theme name or slug, a child theme header or version bump, child CSS/JS enqueueing, editor canvas styles, a child block folder or block category, porting Nextsaas conventions into a new child, or asks why child code cannot call the parent at file scope. Pair with nextora-design-system for any child that must follow palette or visitor font/colour switching.

miketropi/nextora-ecosystem

Entry point for work on the Nextora block-theme ecosystem — child themes, Gutenberg blocks, design presets and the visitor colour/font switcher, and template/part/pattern composition. Use when a request mentions Nextora or a Nextora child theme, when the task spans more than one of those areas, or when you need the source map and production quality gates for this ecosystem before writing code. Also use to decide which specialist skill a multi-part request needs.

miketropi/nextora-site-composition

Compose the surfaces of a Nextora or Nextora child block theme — HTML templates and template parts, PHP block patterns and their categories, page templates and the template hierarchy, front-page versus posts-index, filesystem patterns referenced from thin templates, core query/archive/search loops and explicit query context, header and footer ownership, and filesystem-versus-Site-Editor customisation. Use when a request asks for a landing page layout, a page template, an archive or search composition, a reusable pattern or section, a header/footer part, a query loop, or asks why a template file edit shows no change on the front end.

nextora-design-system

Own colours, typography, spacing tokens, style variations and the optional visitor colour/font switcher for the Nextora parent theme and its child themes. Use when a request mentions a palette, colour role, preset slug, font family or font preset, theme.json settings, Tailwind @theme aliases, CSS custom properties, a style variation, "follow the palette", "must switch with the visitor's choice", scoped block colours, or appearance for a new child theme.

相关技能