我们为 WordPress 主题编写 CSS 的方式正在发生翻天覆地的变化。 我最近分享了一个技巧 在 WordPress 中添加流体类型支持 途经 theme.json, 一个新文件 WordPress一直在努力 成为在支持全站点编辑 (FSE) 功能的 WordPress 主题中定义样式的中心事实来源。

等等，不 style.css 文件？ 我们还有那个。 实际上， style.css is 仍然是必需的文件 在块主题中，尽管它的作用大大降低为用于注册主题的元信息。 话虽如此，事实是 theme.json 仍在积极开发中，这意味着我们处于过渡时期，您可能会在其中找到定义的样式， styles.css 甚至在块级别。

那么，在这些 WordPress FSE 时代，样式实际上是什么样子的？ 这就是我想在本文中介绍的内容。 中缺少样式块主题的文档 WordPress 主题开发者手册，所以我们在这里涵盖的所有内容都是我收集的关于当前情况的信息以及关于 WordPress 主题的未来的讨论。

WordPress风格的演变

中包含的新开发功能 WordPress的6.1 让我们更接近一个完全定义在 theme.json，但在我们完全依赖它之前还有很多工作要做。 我们可以了解未来版本中的内容的一种方法是使用 古腾堡插件. 这是实验性特征经常被试运行的地方。

另一种了解我们所处位置的方法是观察 默认的 WordPress 主题. 迄今为止，支持全站编辑的默认主题有以下三种：

但是不要开始交易 CSS style.css 对于 JSON 属性值对 theme.json 刚刚。 仍然需要支持 CSS 样式规则 theme.json 在我们考虑这样做之前。 目前正在讨论剩余的重要问题，目的是将所有 CSS 样式规则完全移入 theme.json 并整合不同的来源 theme.json 成 用于设置全局样式的 UI 直接在 WordPress 网站编辑器.

这使我们处于相对艰难的境地。 不仅有 没有明确的覆盖主题样式的路径，但不清楚这些样式的来源是从哪里来的——是来自不同层次的 theme.json 文件， style.css，古腾堡插件，或其他地方？

为什么 theme.json 而不是 style.css?

您可能想知道为什么 WordPress 正在转向基于 JSON 的样式定义而不是传统的 CSS 文件。 来自 Gutenberg 开发团队的 Ben Dwyer 雄辩地阐明了为什么 theme.json 方法有利于主题开发者.

Ben 的帖子值得一读，但要点在于这句话：

覆盖 CSS，无论是布局、预设还是块样式，都会对集成和互操作性造成障碍：前端和编辑器之间的视觉对等变得更难维护，块内部的升级可能与覆盖发生冲突。 此外，自定义 CSS 在其他块主题之间的可移植性较差。

通过鼓励主题作者使用 theme.json API 在可能的情况下，可以正确解析“基础 > 主题 > 用户”定义样式的层次结构。

将 CSS 移至 JSON 的主要好处之一是 JSON 是一种机器可读格式，这意味着它可以通过获取 API 在 WordPress 站点编辑器 UI 中公开，从而允许用户修改默认值并自定义站点外观而无需编写任何 CSS。 它还提供了一种使块样式保持一致的方法，同时提供了一种结构来创建特定层，以便用户设置比在 theme.json. 主题级样式之间的相互作用 theme.json 全局样式 UI 中的用户定义样式正是 JSON 方法如此吸引人的原因。

开发人员保持 JSON 的一致性，用户通过无代码自定义获得灵活性。 这是双赢的。

当然还有其他好处，而且 WP Engine 的 Mike McAlister 在此 Twitter 线程中列出了几个. 您可以在此找到更多好处 深入讨论 在 Make WordPress Core 博客上。 一旦你读完了，比较 JSON 方法的好处 在经典主题中定义和覆盖样式的可用方法.

使用 JSON 元素定义样式

就主题的哪些部分而言，我们已经看到了很多进展 theme.json 能够造型。 在 WordPress 6.1 之前，我们真正能做的就是样式标题和链接。 现在，使用 WordPress 6.1， 我们可以添加按钮、标题、引文和标题 混合。

我们通过定义来做到这一点 JSON 元素. 将元素视为存在于 WordPress 块中的独立组件。 假设我们有一个包含标题、段落和按钮的块。 这些单独的部分是元素，并且有一个 elements 对象在 theme.json 我们定义他们的风格的地方：

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    // etc.
    "elements": {
        "button": { ... },
        "h1": { ... },
        "heading": { ... },
    },
  },
  "templateParts": {}
}

描述 JSON 元素的更好方法是作为主题和块的低级组件，不需要块的复杂性。 它们是 HTML 原语的表示 未在块中定义但可以跨块使用。 WordPress（和 Gutenberg 插件）如何支持它们在 块编辑器手册 这 完整的网站编辑教程 由卡罗莱纳尼马克。

例如，链接的样式在 elements 对象，但它们本身不是块。 但是链接可以在块中使用，它会继承定义在块中的样式 elements.link 对象在 theme.json. 不过，这并没有完全封装元素的定义，因为一些元素也被注册为块，例如标题和按钮块——但这些块仍然可以在其他块中使用。

这是当前可用于样式的元素表 theme.json, 卡罗莱纳州的礼貌:

如您所见，现在还处于早期阶段，还有很多东西需要从 Gutenberg 插件转移到 WordPress Core。 但是您可以看到，在不在 CSS 文件或 DevTools 中寻找选择器的情况下，在全局范围内为主题中的所有标题设置样式之类的操作会多快。

此外，您还可以开始查看 theme.json 某种形式的特殊性层，来自全球元素（例如 headings) 到单个元素（例如 h1) 和块级样式（例如 h1 包含在一个块中）。

有关 JSON 元素的更多信息，请参见 这个 Make WordPress 提案 和 这张开票 在 Gutenberg 插件的 GitHub 仓库中。

JSON 和 CSS 特异性

让我们继续讨论 CSS 特异性。 我之前提到过，JSON 样式方法建立了一个层次结构。 这是真的。 在 JSON 元素上定义的样式 theme.json 被认为是默认主题样式。 用户在全局样式 UI 中设置的任何内容都将覆盖默认值。

换一种说法： 用户样式比默认主题样式更具体. 让我们看一下 Button 块以了解其工作原理。

我正在使用 空主题，一个没有 CSS 样式的空白 WordPress 主题。 我要在新页面上添加一个按钮块。

好的，我们知道 WordPress Core 带有一些轻巧的样式。 现在，我要从 WordPress 3 切换到默认的 TT6.1 主题并激活它。 如果我用按钮刷新我的页面，按钮会改变样式。

你可以准确地看到 这些新风格来自哪里 在TT3的 theme.json 文件。 这告诉我们 JSON 元素样式优先于 WordPress 核心样式。

现在我要修改 TT3，方法是用 theme.json 子主题中的文件，其中 Button 块的默认背景颜色设置为红色。

但请注意最后一张屏幕截图中的搜索按钮。 应该也是红色的吧？ 如果我所做的更改是在全局级别进行的，那一定意味着它在另一个级别设置了样式。 如果我们想改变 都 按钮，我们可以在用户级别使用站点编辑器中的全局样式 UI 来完成。

我们将两个按钮的背景颜色更改为蓝色，并使用全局样式 UI 修改了文本。 请注意，那里的蓝色优先于主题样式！

风格引擎

这是关于如何在 WordPress 块主题中管理 CSS 特异性的一个非常快速但很好的想法。 但这不是完整的图片，因为它仍然不清楚 哪里 生成这些样式。 WordPress 有它自己的来自某处的默认样式，使用其中的数据 theme.json 获取更多样式规则，并覆盖那些在全局样式中设置的任何内容。

这些样式是内联的吗？ 它们在单独的样式表中吗？ 也许他们被注入到页面上 ?

新的就是这样 风格引擎 希望能解决。 样式引擎是 WordPress 6.1 中的一个新 API，旨在使样式生成方式和样式应用位置保持一致。 换句话说，它采用所有可能的样式来源，并单独负责正确生成块样式。 我知道我知道。 在其他抽象之上的另一个抽象只是为了创作一些风格。 但是拥有一个集中的样式 API 可能是最优雅的解决方案，因为样式可以来自许多地方。

我们只是初步了解样式引擎。 事实上，这是到目前为止已经完成的， 根据票:

• 审核和整合代码在后端生成块支持 CSS 的位置，以便它们从同一个地方（而不是多个地方）交付。 这涵盖了 CSS 规则，例如边距、填充、排版、颜色和边框。
• 删除重复的特定于布局的样式并生成语义类名称。
• 减少我们为块、布局和元素支持打印到页面的内联样式标签的数量。

基本上，这是建立单个 API 的基础，该 API 包含主题的所有 CSS 样式规则，无论它们来自何处。 它清理了 WordPress 在 6.1 之前注入内联样式的方式，并建立了语义类名系统。

有关 Style Engine 长期和短期目标的更多详细信息，请参见此处 进行 WordPress 核心讨论. 您也可以按照 跟踪问题 和 项目委员会 了解更多。

使用 JSON 元素

我们在 theme.json 文件以及它们如何基本上是 HTML 基元，用于定义标题、按钮和链接等内容的默认样式。 现在，让我们看看实际上 运用 JSON 元素及其在各种样式上下文中的行为方式。

JSON 元素通常有两个上下文： 全球层面 和 块级. 全局级别样式的定义不如它们在块级别的特异性，以确保块特定样式在使用块的任何地方都优先保证一致性。

JSON 元素的全局样式

让我们看看新的默认 TT3 主题并检查其按钮的样式。 以下是 TT3 的缩写复制粘贴 theme.json 文件（这里是 完整的代码) 显示全局样式部分，但您可以在此处找到原始代码。

{
  "version": 2,
  "settings": {},
    // ...
  "styles": {
    // ...
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--primary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      },
      "h1": {
        "typography": { }
      },
      // ...
      "heading": {
        "typography": {
          "fontWeight": "400",
          "lineHeight": "1.4"
      }
      },
      "link": {
        "color": {
          "text": "var(--wp--preset--color--contrast)"
        },
        ":hover": {
          "typography": {
            "textDecoration": "none"
          }
        },
        ":focus": {
          "typography": {
            "textDecoration": "underline dashed"
          }
        },
        ":active": {
          "color": {
            "text": "var(--wp--preset--color--secondary)"
          },
          "typography": {
            "textDecoration": "none"
          }
        },
        "typography": {
          "textDecoration": "underline"
        }
      }
     },
    // ...
  },
  "templateParts": {}
}

所有按钮都在全局级别设置样式（styles.elements.button).

我们也可以在 DevTools 中确认这一点。 请注意，一个名为 .wp-element-button 是选择器。 同一个类也用于设置交互状态的样式。

同样，这种样式都是在全球范围内发生的，来自 theme.json. 每当我们使用一个按钮时，它都会有相同的背景，因为它们共享相同的选择器并且没有其他样式规则覆盖它。

顺便说一句，WordPress 6.1 添加了 支持样式交互状态 对于某些元素，如按钮和链接，使用伪类 theme.json - 包含 :hover, :focus及 :active — 或全局样式 UI。 自动化工程师 戴夫·史密斯 演示 此功能 在 YouTube 视频中。

我们可以覆盖按钮的背景颜色 theme.json （最好在子主题中，因为我们使用默认的 WordPress 主题）或在站点编辑器的全局样式设置中（不需要子主题，因为它不需要更改代码）。

但随后按钮将立即更改。 如果我们想在按钮是某个块的一部分时覆盖背景颜色怎么办？ 这就是块级样式发挥作用的地方。

元素的块级样式

要了解我们如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。 请记住，有一个 Button 块，但我们正在做的是在 Search 块的块级别覆盖背景颜色。 这样，我们只在那里应用新颜色，而不是将它全局应用到所有按钮。

为此，我们在 styles.blocks 对象在 theme.json. 没错，如果我们为所有按钮定义全局样式 styles.elements，我们可以为按钮元素定义特定于块的样式 styles.block，它遵循类似的结构：

{
  "version": 2,
  // ...
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": {
      "core/search": {
        "elements": {
          "button": {
            "color": {
              "background": "var(--wp--preset--color--quaternary)",
              "text": "var(--wp--preset--color--base)"
            }
          }
        },
        // ...
      }
    }
  }
}

看到了吗？ 我设置了 background 和 text 属性 styles.blocks.core/search.elements.button 带有两个在 WordPress 中预设的 CSS 变量。

结果？ 搜索按钮现在是红色的（--wp--preset--color--quaternary)，默认的 Button 块保留其亮绿色背景。

我们也可以在 DevTools 中看到变化。

如果我们想要为包含在其他块中的按钮设置样式，情况也是如此。 按钮只是一个例子，让我们看看另一个。

示例：每个级别的样式标题

让我们通过一个例子来深入了解所有这些信息。 这一次，我们将：

• 全局设置所有标题的样式
• 设置所有标题 2 元素的样式
• 查询循环块中的样式标题 2 元素

首先，让我们从基本结构开始 theme.json:

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": { },
    // Block-level styles
    "blocks": { }
  }
}

这为我们的全局和块级样式建立了轮廓。

全局设置所有标题的样式

让我们添加 headings 反对我们的全局样式并应用一些样式：

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
    },
    // Block-level styles
    "blocks": { }
  }
}

这会将所有标题的颜色设置为 WordPress 中的预设基色。 让我们在全局级别也更改标题 2 元素的颜色和字体大小：

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": { }
  }
}

现在，所有标题 2 元素都设置为主要预设颜色，带有 流体字体大小. 但也许我们想要一个固定的 fontSize 对于在查询查找块中使用的标题 2 元素：

{
  "version": 2,
  "styles": {
    // Global-level syles
    "elements": {
      "heading": {
        "color": "var(--wp--preset--color--base)"
      },
      "h2": {
        "color": "var(--wp--preset--color--primary)",
        "typography": {
          "fontSize": "clamp(2.625rem, calc(2.625rem + ((1vw - 0.48rem) * 8.4135)), 3.25rem)"
        }
      }
    },
    // Block-level styles
    "blocks": {
      "core/query": {
        "elements": {
          "h2": {
            "typography": {
              "fontSize": 3.25rem
            }
          }
        }
      }
    }
  }
}

现在我们为标题 2 元素设置了三个级别的样式：所有标题、所有标题 2 元素和在查询循环块中使用的标题 2 元素。

现有主题示例

虽然我们在本文中只查看了按钮和标题的样式示例，但 WordPress 6.1 支持对其他元素进行样式设置。 有一张表格概述了它们 “使用 JSON 元素定义样式” 部分。

您可能想知道哪些 JSON 元素支持哪些 CSS 属性，更不用说您将如何声明这些属性了。 在我们等待官方文件的同时，我们拥有的最好的资源将是 theme.json 现有主题的文件。 我将根据主题自定义的元素提供主题链接，并指出自定义的属性。

一定要给每一个 theme.json 文件看起来不错，因为这些主题包括块级样式的优秀示例 styles.blocks 目的。

结束了

全站编辑器的频繁变更正成为一种 许多人的主要刺激源，包括 精通技术的古腾堡用户. 即使是非常简单的 CSS 规则，它适用于经典主题，但似乎不适用于块主题，因为 新的特异性层 我们之前介绍过。

关于一个 GitHub 提案 在新的浏览器模式下重新设计站点编辑器， Sara Gooding 在 WP Tavern 帖子中写道:

除非您日夜在该工具中工作，否则在尝试绕过站点编辑器时很容易迷路。 导航是跳跃和混乱的，尤其是从模板浏览到模板编辑再到修改单个块时。

即使作为 Gutenberg 块编辑器和 block-eye 主题世界的热心早期骑手，我也确实有很多挫折感。 不过，我很乐观，并预计站点编辑器一旦完成，将成为用户和精通技术的主题开发人员等的革命性工具。 这个 充满希望的推文 已经证实了这一点。 与此同时，我们似乎应该为更多的变化做好准备，甚至可能是一段颠簸的旅程。

参考资料

我列出了我在为本文研究信息时使用的所有资源。

JSON 元素

全球风格

风格引擎

谢谢阅读！ 我很想听听您对使用块主题以及如何管理 CSS 的看法。