在WordPress块主题中管理CSS样式

WordPress主题的CSS编写方式正在发生巨大变化。我最近分享了一种通过theme.json在WordPress中添加流体字体支持的技术，这是一个WordPress大力推广的新文件，它将成为定义支持全站编辑(FSE)功能的WordPress主题样式的中心真理来源。

等等，没有style.css文件？我们仍然有它。事实上，style.css仍然是块主题中必需的文件，尽管它的作用大大减少，仅用于注册主题的元信息。也就是说，theme.json仍在积极开发中，这意味着我们正处于一个过渡时期，您可能会发现样式定义在theme.json、styles.css甚至块级别。

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

WordPress样式的演变

WordPress 6.1中包含的新开发功能使我们更接近于一个完全在theme.json中定义样式的系统，但在我们可以完全依赖它之前，仍有很多工作要做。我们可以通过使用Gutenberg插件来了解未来版本中将出现的内容，这是实验性功能通常进行试运行的地方。

我们还可以通过查看默认WordPress主题的演变来了解我们的现状。迄今为止，有三个支持全站编辑的默认主题：

• Twenty Twenty-One (TT1): 这是第一个与块兼容的经典默认主题版本。还有一个块版本(TT1块)，并且此后一直是块主题的可靠资源。然而，TT1中所有5900行CSS都在style.css中。没有theme.json文件。TT1块是我们第一次看到块编辑器时代中的样式，我们可以将其视为预告片而非模型。
• Twenty Twenty-Two (TT2): 这是第一个真正的基于块的默认WordPress主题，也是我们第一次遇到theme.json的地方。该文件仅包含373行代码。其主要开发人员已做出协调努力，使其成为无CSS主题；但是，style.css仍然带有不到150行代码，因为并非所有theme.json的问题都在发布前的实验性Gutenberg插件中得到解决。
• Twenty Twenty-Three (TT3): 这是WordPress 6.1中发布的，它是第一个在必需的style.css文件中没有任何CSS的主题示例。

但是，不要立即将style.css中的CSS换成theme.json中的JSON属性-值对。在考虑这样做之前，仍然需要在theme.json中支持一些CSS样式规则。目前正在讨论剩余的重要问题，目标是将所有CSS样式规则完全移入theme.json，并将theme.json的不同来源合并到一个UI中，以便直接在WordPress站点编辑器中设置全局样式。

这让我们处于一个相对艰难的境地。不仅没有明确的覆盖主题样式的路径，而且还不清楚这些样式的来源是什么——是来自不同层的theme.json文件、style.css、Gutenberg插件还是其他地方？

为什么选择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块中的单个组件。假设我们有一个块，其中包含标题、段落和按钮。这些单独的部分是元素，theme.json中有一个elements对象，我们在其中定义它们的样式：

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

更好的描述JSON元素的方法是作为主题和块的低级组件，它们不需要块的复杂性。它们是HTML原语的表示，这些原语未在块中定义，但可以在块之间使用。它们在WordPress（和Gutenberg插件）中的支持方式在块编辑器手册和Carolina Nymark的这个全站编辑教程中进行了描述。

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

以下是Carolina提供的在WordPress 6.1之前的theme.json中当前可用于设置样式的元素表：

如您所见，这还处于早期阶段，仍然有很多东西需要从Gutenberg插件移入WordPress核心。但是您可以看到，在不搜索CSS文件或DevTools中的选择器的情况下，全局设置主题中所有标题的样式将是多么快速。

此外，您还可以开始了解theme.json的结构如何形成特异性层，从全局元素（例如标题）到单个元素（例如h1），以及块级样式（例如包含在块中的h1）。

有关JSON元素的更多信息，请参阅此Make WordPress提案和Gutenberg插件GitHub存储库中的此开放票证。

JSON和CSS特异性

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

换句话说：用户样式比默认主题样式具有更高的特异性。让我们看一下按钮块来了解其工作原理。

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

好的，我们知道WordPress核心附带一些简单的样式。现在，我将切换到WordPress 6.1中的默认TT3主题并激活它。如果我刷新带有按钮的页面，按钮的样式会发生变化。

您可以在TT3的theme.json文件中准确看到这些新样式的来源。这告诉我们，JSON元素样式优先于WordPress核心样式。

现在我将通过在子主题中覆盖它来修改TT3，其中按钮块的默认背景颜色设置为红色。

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

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

样式引擎

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

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

这就是新的样式引擎有望解决的问题。样式引擎是WordPress 6.1中的一个新API，旨在使样式的生成方式和样式的应用位置保持一致。换句话说，它获取所有可能的样式来源，并单独负责正确生成块样式。我知道，我知道。只是为了编写一些样式，又添加了一个抽象层在其他抽象层之上。但是，鉴于样式可以来自多个地方，因此拥有一个集中的样式API可能是最优雅的解决方案。

我们只是第一次看到样式引擎。事实上，根据该票证，到目前为止已经完成了以下工作：

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

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

有关样式引擎的长期和短期目标的更多详细信息，请参阅此Make WordPress Core讨论。您还可以关注跟踪问题和项目板以获取更多更新。

使用JSON元素

我们讨论了theme.json文件中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": {} }

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

{ "version": 2, // ... "styles": { // 全局级别样式 "elements": { }, // 块级别样式 "blocks": { "core/search": { "elements": { "button": { "color": { "background": "var(--wp--preset--color--quaternary)", "text": "var(--wp--preset--color--base)" } } }, // ... } } } }

<code>
所有按钮都在全局级别（`styles.elements.button`）设置样式。

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

同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。

顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。

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

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

#### 元素的块级样式

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

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

{ "version": 2, "styles": { // 全局级别样式 "elements": { }, // 块级别样式 "blocks": { } } }

<code>
看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。

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

我们也可以在DevTools中看到更改。

如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。

### 示例：在每个级别设置标题样式

让我们用一个例子来巩固所有这些信息。这次，我们将：

- 全局设置所有标题的样式
- 设置所有二级标题元素的样式
- 设置查询循环块中二级标题元素的样式

首先，让我们从`theme.json`的基本结构开始：
</code>

{ "version": 2, "styles": { // 全局级别样式 "elements": { "heading": { "color": "var(--wp--preset--color--base)" }, }, // 块级别样式 "blocks": { } } }

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

#### 全局设置所有标题的样式

让我们将`headings`对象添加到我们的全局样式并应用一些样式：
</code>

{ "version": 2, "styles": { // 全局级别样式 "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)" } } }, // 块级别样式 "blocks": { } } }

<code>
这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小：
</code>

{ "version": 2, "styles": { // 全局级别样式 "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)" } } }, // 块级别样式 "blocks": { "core/query": { "elements": { "h2": { "typography": { "fontSize": 3.25rem } } } } } } }

<code>
现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定fontSize：
</code>

以上是在WordPress块主题中管理CSS样式的详细内容。更多信息请关注PHP中文网其他相关文章！