Nextora 设计系统 是做什么的?
本套件外观的唯一权威来源。子主题代码、块代码、模板和样式都以此处定义的调色板、排版、令牌、样式变体和切换器为准。在处理任何新的子主题时,请将此技能与 nextora-child-themes 一同加载;在重构或创建新块时,则与 nextora-gutenberg-blocks 一同加载。
首先加载以下参考资料
| 文件 | 阅读目的 |
|---|---|
references/presets-and-switching.md | 规范的预设标识、角色变量、作用域颜色存储和 PHP 解析、两种样式机制、特性门控、子主题的贡献、发现/合并规则、scheme-switcher.json 语义、运行时优先级、新子主题的 :root 角色默认值以及反声明列表。 |
../nextora-ecosystem/references/source-map.md | 出处和根解析词汇。 |
../nextora-ecosystem/references/quality-gates.md | 门控以及共享的下游验收配方(第 §8 节)。 |
参考资料中的值是锚点,非当前数据。在编辑前,请重新读取目标自身的 theme.json、CSS 入口、styles/ 和切换器文件。
有序工作流程
1. 解析目标并识别实时的外观源
确定父主题根目录和活动主题根目录。然后依次读取:theme.json(调色板、渐变、字体系列、大小、间距、styles、customTemplates)、随附的 CSS 入口(父主题为 resources/css/app.css,子主题为自身的入口)、styles/ 目录树以及 scheme-switcher.json。绝不从技能文档、截图或示例子主题中获取调色板值。
2. 决定使用哪种机制
| 需求 | 使用 |
|---|---|
| 作者为块包装器选择颜色/排版/间距 | 核心块 supports + get_block_wrapper_attributes() |
| 块自身表面内的颜色 | 作用域属性,存储为预设别名,输出时解析为预设变量(第 §5 节) |
| 站点范围的备选外观,由所有者选择并保留 | 一个 theme.json 样式变体(styles/*.json、styles/typography/*.json) |
| 面向访问者的预览选择 | 切换器,且只能在门控之后(第 §6 节) |
| 整个子主题的品牌默认值 | 子主题调色板/字体贡献加上 :root 角色默认值(第 §7 节) |
优先使用原生 supports。仅在全局样式无法表达时才添加作用域覆盖,并且切勿在此之外发明第二个外观系统。
3. 以增量方式通过标识符更改预设
添加别名;不要重命名或重定向已继承内容的父主题别名。每个表面都读取 var(--wp--preset--color--<slug>)、var(--wp--preset--gradient--<slug>) 或 var(--wp--preset--font-family--<slug>),因此主题 CSS 中的字面量十六进制会使该表面退出调色板更改和切换器。仅在 CSS 构建消耗它们时镜像 Tailwind @theme 别名,并验证每个别名实际指向什么,而不是从旧指南复制别名块——父主题的 --color-secondary 当前解析为 paragraph 预设。
4. 通过 Nextora 角色路由排版
正文、标题和按钮排版通过 --nextora-font-body、--nextora-font-heading 和 --nextora-font-button 解析。theme.json 使用 var(--nextora-font-body);切换器将这三个属性以具体的字体系列堆栈以内联方式写入 <html>。直接读取预设变量的表面不会跟随访问者的字体更改。在 theme.json 中添加或更改字体系列(如果不是系统堆栈,则附带 fontFace 资源),并在提供为预设选择之前加载它。
5. 将作用域颜色存储为预设,在输出时解析
遵循 blocks/advanced-icon/color-utils.ts(normalizeColorForStorage、colorValueForPicker)及其 PHP 对应项(nextora_icon_resolve_color、nextora_icon_hex_to_preset_slug、nextora_ac_resolve_color)中的现有辅助模式:所选预设存储其别名;与调色板条目匹配的全不透明度十六进制将归一化为该条目的别名;自定义颜色和部分透明的 8 位十六进制保持字面量;渐变以相同方式保持预设标识。输出时,存储的别名变为 var(--wp--preset--color--<slug>),以便调色板更改到达表面,8 位十六进制在 sanitize_hex_color() 之前处理。空值表示“主题默认值”且不输出任何内容。重用真实的签名;不要编写并行的解析器。请记住,颜色控件不是消毒器:存储的 HTML 仍然通过 wp_kses_post()。
6. 尊重切换器门控,贡献数据而非代码
访问者切换器仅在 NEXTORA_COLOR_SCHEME_SWITCHER 严格为 true 时才存在。除此之外,没有负载、没有脚本、没有页面主题 CSS、也没有弹出窗口——并且不应编写任何子主题侧替代品来填补空白。子主题贡献数据:styles/color-scheme/*.json、styles/font-preset/*.json、可选地 styles/*.json 用于捆绑变体,以及可选的 scheme-switcher.json 允许列表。在编写新的子主题时,在其后期加载的 CSS 中的 :root 上设置子主题自身的默认角色(参考文档第 §7 节),而不是固定一个预设字体。切勿将切换器实现添加到子主题中。
7. 在真实表面上验证
使用目标自身的脚本(npm run build:css 或 npm run build)构建——切勿编辑 assets/css/* 输出,切勿声明构建会重新生成 assets/js/scheme-switcher.js,后者是手动维护的且不在构建流水线中。然后应用 ../nextora-ecosystem/references/quality-gates.md 及其第 §8 节设计系统配方,以及 references/presets-and-switching.md 第 §10 节中预设特定的步骤。
硬性限制
- 不要硬编码品牌调色板。值来自目标的活动预设。
- 不要将旧文档中的过时回退十六进制传播到新的主题 CSS。
- 不要重新实现切换器,也不要因为示例子主题看起来正确就声称它有效:示例子主题固定了自己的字体并添加了仅子主题的调色板条目。
- 不要承诺颜色 URL 参数会覆盖已解析的捆绑主题,或者重置会擦除站点编辑器样式。
- 不要从主题样式表重新设置
wp-admin界面的样式;编辑器重置保持在编辑器画布内。 - 不要静默提升声明的 WordPress/PHP 最低版本要求——而是公开该要求。
- 在交付此工作期间,不要修改父主题或示例子主题。
完成检查
- 目标主题已解析;每个预设、字体、渐变和令牌都存在于该主题自身的
theme.json/变体中。 - 遵循了步骤 2 中的机制表;在足够的情况下使用了原生 supports。
- 排版通过
--nextora-font-*角色解析,并在预设更改时随之变化。 - 作用域颜色在颜色与预设匹配时存储预设别名,保持自定义值和部分透明值为字面量,并通过预设变量渲染。
- 切换器门控得到尊重;子主题贡献仅为数据;任何新的子主题默认对都通过角色在
:root上声明。 - 样式变体(持久性)和切换器(运行时预览)被描述和测试为不同的东西。
- 第 §8 节验收步骤已针对计算后样式执行,或者未验证的表面已明确报告。
边界
仅限 Markdown 指令和源支持的参考资料:无运行时脚本、生成器、复制的主题目录、包管理或安装自动化,也无对父主题或子主题源的编辑。下游构建和浏览器验证命令属于目标主题,并列出在 ../nextora-ecosystem/references/quality-gates.md 中。