WordPress主題的CSS編寫(xiě)方式正在發(fā)生巨大變化。我最近分享了一種通過(guò)theme.json在WordPress中添加流體字體支持的技術(shù)，這是一個(gè)WordPress大力推廣的新文件，它將成為定義支持全站編輯(FSE)功能的WordPress主題樣式的中心真理來(lái)源。

等等，沒(méi)有style.css文件？我們?nèi)匀挥兴?。事?shí)上，style.css仍然是塊主題中必需的文件，儘管它的作用大大減少，僅用於註冊(cè)主題的元信息。也就是說(shuō)，theme.json仍在積極開(kāi)發(fā)中，這意味著我們正處?kù)兑粋€(gè)過(guò)渡時(shí)期，您可能會(huì)發(fā)現(xiàn)樣式定義在theme.json、styles.css甚至塊級(jí)別。

那麼，在這些WordPress FSE時(shí)代，樣式實(shí)際上是什麼樣的呢？這就是我想在這篇文章中介紹的內(nèi)容。 WordPress主題開(kāi)發(fā)者手冊(cè)中缺乏關(guān)於塊主題樣式的文檔，因此我們?cè)谶@裡介紹的所有內(nèi)容都是我收集到的關(guān)於當(dāng)前情況以及WordPress主題未來(lái)討論的信息。

WordPress樣式的演變

WordPress 6.1中包含的新開(kāi)發(fā)功能使我們更接近於一個(gè)完全在theme.json中定義樣式的系統(tǒng)，但在我們可以完全依賴(lài)它之前，仍有很多工作要做。我們可以通過(guò)使用Gutenberg插件來(lái)了解未來(lái)版本中將出現(xiàn)的內(nèi)容，這是實(shí)驗(yàn)性功能通常進(jìn)行試運(yùn)行的地方。

我們還可以通過(guò)查看默認(rèn)WordPress主題的演變來(lái)了解我們的現(xiàn)狀。迄今為止，有三個(gè)支持全站編輯的默認(rèn)主題：

• Twenty Twenty-One (TT1): 這是第一個(gè)與塊兼容的經(jīng)典默認(rèn)主題版本。還有一個(gè)塊版本(TT1塊)，並且此後一直是塊主題的可靠資源。然而，TT1中所有5900行CSS都在style.css中。沒(méi)有theme.json文件。 TT1塊是我們第一次看到塊編輯器時(shí)代中的樣式，我們可以將其視為預(yù)告片而非模型。
• Twenty Twenty-Two (TT2): 這是第一個(gè)真正的基於塊的默認(rèn)WordPress主題，也是我們第一次遇到theme.json的地方。該文件僅包含373行代碼。其主要開(kāi)發(fā)人員已做出協(xié)調(diào)努力，使其成為無(wú)CSS主題；但是，style.css仍然帶有不到150行代碼，因?yàn)閬K非所有theme.json的問(wèn)題都在發(fā)布前的實(shí)驗(yàn)性Gutenberg插件中得到解決。
• Twenty Twenty-Three (TT3): 這是WordPress 6.1中發(fā)布的，它是第一個(gè)在必需的style.css文件中沒(méi)有任何CSS的主題示例。

但是，不要立即將style.css中的CSS換成theme.json中的JSON屬性-值對(duì)。在考慮這樣做之前，仍然需要在theme.json中支持一些CSS樣式規(guī)則。目前正在討論剩餘的重要問(wèn)題，目標(biāo)是將所有CSS樣式規(guī)則完全移入theme.json，並將theme.json的不同來(lái)源合併到一個(gè)UI中，以便直接在WordPress站點(diǎn)編輯器中設(shè)置全局樣式。

這讓我們處?kù)兑粋€(gè)相對(duì)艱難的境地。不僅沒(méi)有明確的覆蓋主題樣式的路徑，而且還不清楚這些樣式的來(lái)源是什麼——是來(lái)自不同層的theme.json文件、style.css、Gutenberg插件還是其他地方？

為什麼選擇theme.json而不是style.css？

您可能想知道為什麼WordPress轉(zhuǎn)向基於JSON的樣式定義而不是傳統(tǒng)的CSS文件。 Gutenberg開(kāi)發(fā)團(tuán)隊(duì)的Ben Dwyer雄辯地闡述了為什麼theme.json方法對(duì)主題開(kāi)發(fā)者來(lái)說(shuō)是一個(gè)好處。

值得閱讀Ben的帖子，但重點(diǎn)在於這段引用：

無(wú)論是佈局、預(yù)設(shè)還是塊樣式，覆蓋CSS都會(huì)對(duì)集成和互操作性構(gòu)成障礙：前端和編輯器之間的視覺(jué)一致性變得更難以維護(hù)，對(duì)塊內(nèi)部的升級(jí)可能會(huì)與覆蓋衝突。此外，自定義CSS在其他塊主題中的可移植性較差。

通過(guò)鼓勵(lì)主題作者盡可能使用theme.json API，可以正確解決“基礎(chǔ)>主題>用戶(hù)”定義樣式的層次結(jié)構(gòu)。

將CSS移至JSON的主要好處之一是JSON是一種機(jī)器可讀的格式，這意味著它可以通過(guò)獲取API在WordPress站點(diǎn)編輯器UI中公開(kāi)，從而允許用戶(hù)修改默認(rèn)值並自定義站點(diǎn)的外觀(guān)，而無(wú)需編寫(xiě)任何CSS。它還提供了一種一致地設(shè)置塊樣式的方法，同時(shí)提供了一種結(jié)構(gòu)，該結(jié)構(gòu)創(chuàng)建了特異性層，以便用戶(hù)設(shè)置比在theme.json中定義的設(shè)置具有更高的優(yōu)先級(jí)。 theme.json中的主題級(jí)樣式與全局樣式UI中用戶(hù)定義的樣式之間的這種相互作用，使得JSON方法如此吸引人。

開(kāi)發(fā)人員在JSON中保持一致性，用戶(hù)通過(guò)無(wú)代碼自定義獲得靈活性。這是一個(gè)雙贏的局面。

當(dāng)然，還有其他好處，WP Engine的Mike McAlister在這個(gè)Twitter線(xiàn)程中列出了幾個(gè)。您可以在Make WordPress Core博客上的深入討論中找到更多好處。閱讀之後，將JSON方法的優(yōu)點(diǎn)與在經(jīng)典主題中定義和覆蓋樣式的可用方法進(jìn)行比較。

使用JSON元素定義樣式

就theme.json能夠設(shè)置主題的哪些部分而言，我們已經(jīng)看到了很大的進(jìn)步。在WordPress 6.1之前，我們真正能做的只是設(shè)置標(biāo)題和鏈接的樣式?，F(xiàn)在，使用WordPress 6.1，我們可以添加按鈕、標(biāo)題、引用和標(biāo)題。

我們通過(guò)定義JSON元素來(lái)做到這一點(diǎn)?？梢詫⒃匾暈榇嬖陟禬ordPress塊中的單個(gè)組件。假設(shè)我們有一個(gè)塊，其中包含標(biāo)題、段落和按鈕。這些單獨(dú)的部分是元素，theme.json中有一個(gè)elements對(duì)象，我們?cè)谄渲卸x它們的樣式：

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

更好的描述JSON元素的方法是作為主題和塊的低級(jí)組件，它們不需要塊的複雜性。它們是HTML原語(yǔ)的表示，這些原語(yǔ)未在塊中定義，但可以在塊之間使用。它們?cè)赪ordPress（和Gutenberg插件）中的支持方式在塊編輯器手冊(cè)和Carolina Nymark的這個(gè)全站編輯教程中進(jìn)行了描述。

例如，鏈接在elements對(duì)像中設(shè)置樣式，但本身不是塊。但是鏈接可以在塊中使用，它將繼承在theme.json的elements.link對(duì)像中定義的樣式。但這並沒(méi)有完全概括元素的定義，因?yàn)槟承┰匾苍]冊(cè)為塊，例如標(biāo)題和按鈕塊——但是這些塊仍然可以在其他塊中使用。

以下是Carolina提供的在WordPress 6.1之前的theme.json中當(dāng)前可用於設(shè)置樣式的元素表：

如您所見(jiàn)，這還處?kù)对缙陔A段，仍然有很多東西需要從Gutenberg插件移入WordPress核心。但是您可以看到，在不搜索CSS文件或DevTools中的選擇器的情況下，全局設(shè)置主題中所有標(biāo)題的樣式將是多麼快速。

此外，您還可以開(kāi)始了解theme.json的結(jié)構(gòu)如何形成特異性層，從全局元素（例如標(biāo)題）到單個(gè)元素（例如h1），以及塊級(jí)樣式（例如包含在塊中的h1）。

有關(guān)JSON元素的更多信息，請(qǐng)參閱此Make WordPress提案和Gutenberg插件GitHub存儲(chǔ)庫(kù)中的此開(kāi)放票證。

JSON和CSS特異性

讓我們繼續(xù)討論CSS特異性。我前面提到過(guò)，JSON的樣式方法建立了一個(gè)層次結(jié)構(gòu)。這是真的。在theme.json中JSON元素上定義的樣式被認(rèn)為是默認(rèn)主題樣式。全局樣式UI中用戶(hù)設(shè)置的任何內(nèi)容都將覆蓋默認(rèn)值。

換句話(huà)說(shuō)：用戶(hù)樣式比默認(rèn)主題樣式具有更高的特異性。讓我們看一下按鈕塊來(lái)了解其工作原理。

我使用Emptytheme，這是一個(gè)沒(méi)有CSS樣式的空白WordPress主題。我將在新頁(yè)面上添加一個(gè)按鈕塊。

好的，我們知道WordPress核心附帶一些簡(jiǎn)單的樣式?，F(xiàn)在，我將切換到WordPress 6.1中的默認(rèn)TT3主題並激活它。如果我刷新帶有按鈕的頁(yè)面，按鈕的樣式會(huì)發(fā)生變化。

您可以在TT3的theme.json文件中準(zhǔn)確看到這些新樣式的來(lái)源。這告訴我們，JSON元素樣式優(yōu)先於WordPress核心樣式。

現(xiàn)在我將通過(guò)在子主題中覆蓋它來(lái)修改TT3，其中按鈕塊的默認(rèn)背景顏色設(shè)置為紅色。

但是請(qǐng)注意最後一個(gè)屏幕截圖中的搜索按鈕。它也應(yīng)該是紅色的，對(duì)吧？這意味著如果我所做的更改是在全局級(jí)別，那麼它一定是在另一個(gè)級(jí)別設(shè)置樣式的。如果我們想更改兩個(gè)按鈕，我們可以使用站點(diǎn)編輯器中的全局樣式UI在用戶(hù)級(jí)別進(jìn)行更改。

我們使用全局樣式UI將兩個(gè)按鈕的背景顏色更改為藍(lán)色並修改了文本。請(qǐng)注意，那裡的藍(lán)色優(yōu)先於主題樣式！

樣式引擎

這是一個(gè)非?？焖俚芎玫年P(guān)於WordPress塊主題中如何管理CSS特異性的想法。但這並不是完整的畫(huà)面，因?yàn)槟壳斑€不清楚這些樣式在哪裡生成。 WordPress有自己的默認(rèn)樣式，這些樣式來(lái)自某個(gè)地方，使用theme.json中的數(shù)據(jù)獲取更多樣式規(guī)則，並用全局樣式中設(shè)置的任何內(nèi)容覆蓋這些規(guī)則。

這些樣式是內(nèi)聯(lián)的嗎？它們是否在單獨(dú)的樣式表中？也許它們是在頁(yè)面上註入的？

這就是新的樣式引擎有望解決的問(wèn)題。樣式引擎是WordPress 6.1中的一個(gè)新API，旨在使樣式的生成方式和樣式的應(yīng)用位置保持一致。換句話(huà)說(shuō)，它獲取所有可能的樣式來(lái)源，並單獨(dú)負(fù)責(zé)正確生成塊樣式。我知道，我知道。只是為了編寫(xiě)一些樣式，又添加了一個(gè)抽象層在其他抽象層之上。但是，鑑於樣式可以來(lái)自多個(gè)地方，因此擁有一個(gè)集中的樣式API可能是最優(yōu)雅的解決方案。

我們只是第一次看到樣式引擎。事實(shí)上，根據(jù)該票證，到目前為止已經(jīng)完成了以下工作：

• 審核和合併後端生成塊支持CSS的代碼位置，以便它們從同一位置（而不是多個(gè)位置）交付。這包括CSS規(guī)則，例如邊距、填充、排版、顏色和邊框。
• 刪除重複的特定於佈局的樣式並生成語(yǔ)義類(lèi)名。
• 減少為塊、佈局和元素支持打印到頁(yè)面的內(nèi)聯(lián)樣式標(biāo)記的數(shù)量。

基本上，這是建立單個(gè)API的基礎(chǔ)，該API包含主題的所有CSS樣式規(guī)則，無(wú)論它們來(lái)自何處。它清理了WordPress在6.1之前註入內(nèi)聯(lián)樣式的方式，並為語(yǔ)義類(lèi)名建立了一個(gè)系統(tǒng)。

有關(guān)樣式引擎的長(zhǎng)期和短期目標(biāo)的更多詳細(xì)信息，請(qǐng)參閱此Make WordPress Core討論。您還可以關(guān)注跟蹤問(wèn)題和項(xiàng)目板以獲取更多更新。

使用JSON元素

我們討論了theme.json文件中JSON元素以及它們基本上是如何定義標(biāo)題、按鈕和鏈接等內(nèi)容的默認(rèn)樣式的HTML原語(yǔ)?，F(xiàn)在，讓我們看看實(shí)際使用JSON元素以及它在各種樣式上下文中的行為。

JSON元素通常有兩種上下文：全局級(jí)別和塊級(jí)別。全局級(jí)別樣式的定義特異性低於塊級(jí)別，以確保塊特定樣式優(yōu)先，以便在使用塊的任何位置保持一致性。

JSON元素的全局樣式

讓我們看一下新的默認(rèn)TT3主題並檢查其按鈕的樣式。以下是TT3 theme.json文件的簡(jiǎn)短複製粘貼（這是完整代碼），顯示全局樣式部分，但您可以在此處找到原始代碼。

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

{ "version": 2, // ... "styles": { // 全局級(jí)別樣式 "elements": { }, // 塊級(jí)別樣式 "blocks": { "core/search": { "elements": { "button": { "color": { "background": "var(--wp--preset--color--quaternary)", "text": "var(--wp--preset--color--base)" } } }, // ... } } } }

<code>
所有按鈕都在全局級(jí)別（`styles.elements.button`）設(shè)置樣式。

我們也可以在DevTools中確認(rèn)這一點(diǎn)。請(qǐng)注意，名為`.wp-element-button`的類(lèi)是選擇器。相同的類(lèi)也用于設(shè)置交互式狀態(tài)。

同樣，所有這些樣式都在全局級(jí)別發(fā)生，來(lái)自`theme.json`。每當(dāng)我們使用按鈕時(shí)，它都將具有相同的背景，因?yàn)樗鼈児蚕硐嗤倪x擇器，并且沒(méi)有其他樣式規(guī)則覆蓋它。

順便說(shuō)一句，WordPress 6.1添加了對(duì)使用`theme.json`中的偽類(lèi)（包括`:hover`、`:focus`和`:active`）或全局樣式UI設(shè)置某些元素（如按鈕和鏈接）的交互式狀態(tài)樣式的支持。Automattic工程師Dave Smith在一個(gè)YouTube視頻中演示了此功能。

我們可以在`theme.json`中（最好在子主題中，因?yàn)槲覀兪褂玫氖悄J(rèn)WordPress主題）或在站點(diǎn)編輯器中的全局樣式設(shè)置中覆蓋按鈕的背景顏色（不需要子主題，因?yàn)樗恍枰a更改）。

但是，按鈕將同時(shí)更改。如果我們想在按鈕是特定塊的一部分時(shí)覆蓋背景顏色怎么辦？這就是塊級(jí)樣式發(fā)揮作用的地方。

#### 元素的塊級(jí)樣式

為了了解如何在塊級(jí)別使用和自定義樣式，讓我們更改包含在搜索塊中的按鈕的背景顏色。請(qǐng)記住，有一個(gè)按鈕塊，但我們正在做的是在搜索塊的塊級(jí)別覆蓋背景顏色。這樣，我們只在那里應(yīng)用新顏色，而不是將其全局應(yīng)用于所有按鈕。

為此，我們?cè)赻theme.json`的`styles.blocks`對(duì)象上定義樣式。沒(méi)錯(cuò)，如果我們?cè)赻styles.elements`上定義所有按鈕的全局樣式，我們可以在`styles.block`上定義按鈕元素的塊特定樣式，這遵循類(lèi)似的結(jié)構(gòu)：
</code>

{ "version": 2, "styles": { // 全局級(jí)別樣式 "elements": { }, // 塊級(jí)別樣式 "blocks": { } } }

<code>
看到了嗎？我在`styles.blocks.core/search.elements.button`上設(shè)置了背景和文本屬性，并使用了WordPress中預(yù)設(shè)的兩個(gè)CSS變量。

結(jié)果？搜索按鈕現(xiàn)在是紅色的（`--wp--preset--color--quaternary`），默認(rèn)按鈕塊保留其亮綠色背景。

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

如果我們想設(shè)置包含在其他塊中的按鈕的樣式，也是如此。按鈕只是一個(gè)例子，所以讓我們?cè)倏匆粋€(gè)。

### 示例：在每個(gè)級(jí)別設(shè)置標(biāo)題樣式

讓我們用一個(gè)例子來(lái)鞏固所有這些信息。這次，我們將：

- 全局設(shè)置所有標(biāo)題的樣式
- 設(shè)置所有二級(jí)標(biāo)題元素的樣式
- 設(shè)置查詢(xún)循環(huán)塊中二級(jí)標(biāo)題元素的樣式

首先，讓我們從`theme.json`的基本結(jié)構(gòu)開(kāi)始：
</code>

{ "version": 2, "styles": { // 全局級(jí)別樣式 "elements": { "heading": { "color": "var(--wp--preset--color--base)" }, }, // 塊級(jí)別樣式 "blocks": { } } }

<code>
這為我們的全局和塊級(jí)樣式建立了輪廓。

#### 全局設(shè)置所有標(biāo)題的樣式

讓我們將`headings`對(duì)象添加到我們的全局樣式并應(yīng)用一些樣式：
</code>

{ "version": 2, "styles": { // 全局級(jí)別樣式 "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)" } } }, // 塊級(jí)別樣式 "blocks": { } } }

<code>
這將所有標(biāo)題的顏色設(shè)置為WordPress中的預(yù)設(shè)基本顏色。讓我們?cè)谌旨?jí)別更改二級(jí)標(biāo)題元素的顏色和字體大小：
</code>

{ "version": 2, "styles": { // 全局級(jí)別樣式 "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)" } } }, // 塊級(jí)別樣式 "blocks": { "core/query": { "elements": { "h2": { "typography": { "fontSize": 3.25rem } } } } } } }

<code>
現(xiàn)在，所有二級(jí)標(biāo)題元素都設(shè)置為主要預(yù)設(shè)顏色，并具有流體字體大小。但也許我們希望在將二級(jí)標(biāo)題元素用于查詢(xún)循環(huán)塊時(shí)使用固定fontSize：
</code>

以上是在WordPress塊主題中管理CSS樣式的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！