在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中文網其他相關文章！