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

等等，沒有style.css文件？我們?nèi)匀挥兴?。事實上?code>style.css仍然是塊主題中必需的文件，盡管它的作用大大減少，僅用于注冊主題的元信息。也就是說，theme.json仍在積極開發(fā)中，這意味著我們正處于一個過渡時期，您可能會發(fā)現(xiàn)樣式定義在theme.json、styles.css甚至塊級別。

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

WordPress樣式的演變

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

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

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

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

這讓我們處于一個相對艱難的境地。不僅沒有明確的覆蓋主題樣式的路徑，而且還不清楚這些樣式的來源是什么——是來自不同層的theme.json文件、style.css、Gutenberg插件還是其他地方？

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

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

值得閱讀Ben的帖子，但重點在于這段引用：

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

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

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

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

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

使用JSON元素定義樣式

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

我們通過定義JSON元素來做到這一點?？梢詫⒃匾暈榇嬖谟赪ordPress塊中的單個組件。假設(shè)我們有一個塊，其中包含標(biāo)題、段落和按鈕。這些單獨的部分是元素，theme.json中有一個elements對象，我們在其中定義它們的樣式：

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

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

例如，鏈接在elements對象中設(shè)置樣式，但本身不是塊。但是鏈接可以在塊中使用，它將繼承在theme.json的elements.link對象中定義的樣式。但這并沒有完全概括元素的定義，因為某些元素也注冊為塊，例如標(biāo)題和按鈕塊——但是這些塊仍然可以在其他塊中使用。

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

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

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

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

JSON和CSS特異性

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

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

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

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

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

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

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

我們使用全局樣式UI將兩個按鈕的背景顏色更改為藍色并修改了文本。請注意，那里的藍色優(yōu)先于主題樣式！

樣式引擎

這是一個非常快速但很好的關(guān)于WordPress塊主題中如何管理CSS特異性的想法。但這并不是完整的畫面，因為目前還不清楚這些樣式在哪里生成。WordPress有自己的默認(rèn)樣式，這些樣式來自某個地方，使用theme.json中的數(shù)據(jù)獲取更多樣式規(guī)則，并用全局樣式中設(shè)置的任何內(nèi)容覆蓋這些規(guī)則。

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

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

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

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

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

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

使用JSON元素

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

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

JSON元素的全局樣式

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

<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`）設(shè)置樣式。

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

同樣，所有這些樣式都在全局級別發(fā)生，來自`theme.json`。每當(dāng)我們使用按鈕時，它都將具有相同的背景，因為它們共享相同的選擇器，并且沒有其他樣式規(guī)則覆蓋它。

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

我們可以在`theme.json`中（最好在子主題中，因為我們使用的是默認(rèn)WordPress主題）或在站點編輯器中的全局樣式設(shè)置中覆蓋按鈕的背景顏色（不需要子主題，因為它不需要代碼更改）。

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

#### 元素的塊級樣式

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

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

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

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

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

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

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

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

讓我們用一個例子來鞏固所有這些信息。這次，我們將：

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

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

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

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

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

讓我們將`headings`對象添加到我們的全局樣式并應(yīng)用一些樣式：
</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>
這將所有標(biāo)題的顏色設(shè)置為WordPress中的預(yù)設(shè)基本顏色。讓我們在全局級別更改二級標(biāo)題元素的顏色和字體大?。?</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>
現(xiàn)在，所有二級標(biāo)題元素都設(shè)置為主要預(yù)設(shè)顏色，并具有流體字體大小。但也許我們希望在將二級標(biāo)題元素用于查詢循環(huán)塊時使用固定fontSize：
</code>

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