wpnomy Elementor Atomic Expert (V4)
从 wpnomy 路由进入，wpnomy 负责需求接收、设计标准、JSON 交付和交接。此文件仅包含 V4 构建规则。
需要已激活 Atomic Editor 的 Elementor Core 3.29+ 版本，该编辑器在 4.x 版本中默认开启。
在每次构建开始时打开路由器的构建草稿板并保持其更新：需求、计划、决策、构建器绑定异常和验证。
配套技能
elementor-build-page 用于通过 Novamira 构建页面，elementor-convert-to-v4 用于迁移现有的 V3 页面。加载它们以获取具体操作细节；本文件中的约定在它们有分歧时起主导作用。
黑盒门控
在放置任何元素之前执行。完整说明见路由器的 references/black-box-policy.md。
| 允许（基本元素） | Div Block、Flexbox、Heading、Paragraph、Image、Button、SVG、Divider，并可使用全局类和变量 |
|---|---|
| 允许，但受构建器约束 | Atomic Form、原子 Tabs、当 Elementor 提供时的原子手风琴（FAQ 的默认方案）、带封面的 YouTube 或视频、用于动态列表的 Loop Grid、导航菜单、搜索、分页、面包屑导航、组件。仅通过类进行样式控制；每个元素需记录其输出标记 |
| 禁止 | 经典复合小部件（icon box、image box、CTA、pricing、testimonial、counter、progress、countdown、hero、social icons、star rating、author box、post info）、附加组件包小部件、旧的 Section、Column 或 Inner Section、运动和入场效果、每个元素上的悬停效果、用于响应式可见性的显示条件、包含布局标记的 Text Editor |
- 能否描述该元素的确切输出 HTML？2. 能否用我们的类和变量对每个部分进行样式控制？3. 将其作为 HTML 加类复制到另一个构建器后是否仍然有效？任何一项为“否”：跳过它，或将其记录为构建器绑定的异常。
首先检查安装
某些功能以功能标志形式发布，并且在某些安装上默认关闭。在根据它们制定计划之前，请确认每个功能是否可用，并报告任何缺失的功能，而不是默默地围绕它进行设计。
| 功能 | 重要原因 |
|---|---|
| 全局类 | 整个类工作流依赖于此 |
| 变量和变量管理器 | 没有变量管理器，变量可以被使用但无法创建 |
| 组件 | 没有组件就没有可重用的布局原语 |
| V4 Custom CSS | 没有它，每个元素的 CSS 就无法使用，代码将沿升级顺序上移 |
样式原则
这是 Oxygen 和 Bricks 工作流得以延续的地方，因为 V4 具备实现它的原语。
**变量就是令牌。**颜色、排版和尺寸都作为变量存在。首先读取站点现有的变量集并使用它。切勿硬编码一个变量已表达的数值，也切勿因现有名称不明显而创建近乎重复的变量。
类承载样式，以 BEM 方式命名：block、block__element、block--modifier。对类进行样式控制，而不是对元素。此插件创建的任何类都需使用公司加站点前缀 sw-<site>-（详见路由器 Naming 部分）。在元素本地进行的样式控制是一次性的，下一个页面无法复用。
V4 全局类是一个扁平命名空间，不支持后代选择器。BEM 正是为此设计的，因此它很适合，但上下文必须存在于类名中，而不是父选择器中。在不同块内不同的 card__title 需要两个不同的类名，而不是一个嵌套规则。
**设计永远不依附于元素。**排版、间距、颜色、边框、阴影和状态都存在于类和变量中。元素的自身样式控制仅用于处理位置调整之类的特殊情况（详见路由器 styling-and-code.md），任何第二次使用都应当成为一个修饰符类。
Atomic Framework
公司设计系统，作为独立产品维护：包含 72 个令牌，涵盖颜色、排版、间距、布局和效果，采用 OKLCH 色彩空间，使用 clamp() 实现流式排版，并提供深色变体。令牌名称完全按照框架的写法传递。
在安装、扩展或映射任何令牌到 V4 变量之前，请先阅读 references/atomic-framework.md。新的框架版本应通过重新运行 scripts/build_framework.py 来针对新的令牌 JSON 文件生成，切勿手动编辑生成的文件。
即使不阅读其他内容，也有一条规则值得铭记：框架需要 html { font-size: 62.5% }，这样 1rem 才等于 10px。没有它，每个 rem 值都会显得大 1.6 倍，并且没有任何错误提示。
样式和代码放置
路由器的 references/styling-and-code.md 是一个阶梯。根据 V4 的术语：
| 阶梯步骤 | Elementor V4 |
|---|---|
| 令牌 | 变量（以及 V4 无法承载的令牌的框架 CSS 层） |
| 类原生字段 | 全局类的样式选项卡，按断点和状态设置 |
| 类自定义 CSS | 类上的 V4 Custom CSS（复合状态、:focus-visible 环、color-mix()、容器查询、滚动驱动动画） |
| 组件 | 仅暴露可变属性的 Elementor 组件 |
| 元素原生字段（仅限位置调整） | 元素的本地样式控制：顺序、自对齐、网格位置、位置偏移、z-index、宽高比、自身的背景图片 |
| 元素自定义 CSS（简短，仅限位置调整） | 元素上的 V4 Custom CSS，一个简短的规则 |
| FluentSnippets | 工具集、@keyframes、小型原生 JS、PHP 钩子。框架的 :root 层是唯一例外：它保留在 Elementor 的全站 CSS 中，以便编辑器能渲染它 |
显示条件仅用于服务端渲染逻辑（如缺失字段、用户状态），绝不能用于响应式可见性控制，后者应使用工具类。
组件
对于任何重复出现的布局，在编写代码之前优先使用组件。
- 使用原生原子元素构建该部分。
- 从容器创建一个组件。
- 仅暴露每个实例应变化的属性，通常是文本和图片来源。
- 将核心布局和样式控制保留在组件内部进行全局管理。
一个暴露了所有属性的组件就是一个多此一举的模板。暴露最少必要属性。参考：elementor.com/help/components-2/
原子元素及覆盖差距
可用的原子元素包括 Div Block、Flexbox、Heading、Paragraph、Button、Image、SVG、YouTube、Tabs 和 Atomic Form 集合，并支持 CSS Grid。
某些经典小部件目前还没有对应的原子元素，例如手风琴、画廊和轮播。在需要使用它们之前，请遵循策略的决策流程：
- **优先使用原生 HTML。**画廊：使用
figure项的 CSS Grid。轮播：使用scroll-snap行。模态框：使用dialog或popover。如果还没有原子手风琴：使用details和summary（只有在 Elementor 提供后，公司的默认嵌套手风琴才会存在于 V4 中）。在标签控件允许的情况下，使用原子元素构建；否则，使用一个包含由框架类进行样式控制的已编写标记的 HTML 元素，并记录为构建器绑定。 - 在 V4 页面上使用经典的 V3 小部件是最后的手段：它无法应用全局类或变量，因此打破了“一类一系统”的规则。仅在策略第 0 条规则（操作员确认，并记录需要重新审视的触发器）下使用，并在对应的原子元素发布后替换它。
结构
当布局为 flex 上下文时使用 Flexbox，当为普通包装器时使用 Div Block。每个结构元素均应使用语义化的 HTML 标签。确保有效的标题大纲。仅在模式确实需要时才使用嵌套链接，因为锚点内嵌锚点是无效标记。
元素状态和响应式值在样式选项卡中按断点和状态设置。尊重站点自身的断点，切勿引入新的断点。
版本边界
V4 页面就是 V4 页面。请勿将现有的 V3 生产页面转换为 V4，也请勿进行部分迁移。仅在覆盖差距强行要求的情况下，才允许混合页面。