針對 JSON 文件和塊主題的 WordPress 主題作者開放調查

WordPress 5.8 為主題引入了一個可選系統，用於配置塊設置、樣式、模板等。 它是通過一個新的theme.json文件完成的，作者可以將其放在主題文件夾的根目錄中。 FSE Outreach Program 的負責人 Anne McCarthy 今天早些時候宣布了一項調查，以獲取開發人員對此功能的反饋。

“由於這種新機制是 WordPress 未來向全面風格系統邁出的早期一步，因此重要的是聽取當前使用theme.json的每個人的意見，以了解人們如何使用此工具以及包含哪些內容可能有意義在核心繼續前進，”她在公告中寫道。

該調查對所有使用theme.json的主題作者開放，讓他們有機會提供一些早期反饋並幫助引導船舶向前發展。

因為在過去的幾個月裡我與這個系統進行了廣泛的合作，所以我有幾件事要說。 另外，我只是喜歡參加與 WordPress 相關的調查。 我還決定這是一個機會，從開發的角度分享我對theme.json當前狀態的一些未經過濾的想法。

以下是我對調查問題的回答——嗯，整理後的版本。

注意：這是一篇以開發人員為中心的帖子，可能不會普遍吸引我們所有的讀者。 我試圖用用戶友好的術語來解釋一些事情，但可能需要一些主題開發的先決知識。

經驗

調查的第一個問題非常簡單。 它詢問您對構建塊主題或使用theme.json的體驗。 它提供了四種選擇（和一個“其他”選項）：

• 我已經建立並啟動了塊主題。
• 我已經嘗試過構建塊主題。
• 我已經探索過將theme.json與經典主題一起使用。
• 我使用了一個塊主題，但我還沒有建立一個。

我選擇了第一個選項，因為我已經為家人和朋友構建了兩個塊主題。 這些是我已經免費維護的簡單個人網站——老實說，我需要開始收費了。 我也在研究一個我希望公開發布的主題。

它是如何開始的以及進展如何

第二個問題詢問如何開始使用塊主題和theme.json 。 選擇是分叉現有主題、使用空主題或從頭開始。

同樣，這是我在每個方向上都做過的實驗之一，但我不記得確切的起點。 我的大部分工作來自於我上次在 2019 年工作的主題。

我計劃在某個時候將其作為新主題免費發布。 我主要在等待以下內容：

• 導航塊開發落戶
• 將 Post Author 塊拆分為更小的塊
• 一組強大的評論相關塊
• 發布特色圖像塊以具有大小選項

如果這些項目得到解決，我認為我今天可以實際發布我的主題的使用自擔風險測試版。

模板和模板部件

調查詢問了哪些模板和模板部分主題總是包含在他們的基於塊的主題中。 有一個自由形式的評論字段——在肥皂盒上的步驟…

我現在對塊模板有愛/恨的關係。 HTML 模板的靜態特性讓我想起了主題開發不那麼複雜的簡單時代。 然而，這在動態系統中也存在問題。

我不記得上一次使用多個頂級模板構建基於 PHP 的傳統主題是什麼時候了： index.php 。 動態部分一直是事物的核心，它們是模板部分。 使用 PHP，很容易設置一些變量或使用函數調用來根據上下文加載訪問者當前在站點上查看的任何頁面所需的模板部分。

塊模板系統不是這樣工作的。 它實質上迫使開發人員打破不要重複自己 (DRY) 原則。

例如，如果設計師想要為頁面和帖子顯示不同的標題模板部分，他們只需要在傳統主題中創建一個header-page.php或header-post.php模板。 但是，由於塊模板系統不同，他們現在必須創建兩個頂級模板， single.html (post) 和page.html來完成相同的事情。

這是一件“壞事”，因為主題作者必須複製每個頂級模板中的所有其他代碼。 無法根據上下文加載不同的模板部分。

回答這個問題：出於必要，我使用了幾乎所有可能的頂級模板。

我還回答了問題的第二部分，並列出了我最常用的模板部分（按層次結構分解）：

• 標題
• 內容
  - 環形
  – 側邊欄
• 頁腳

content-*.html和loop-*.html模板部分是變化最多的部分。

定義顏色

調查的下一部分詢問主題作者如何在theme.json中定義他們的調色板。 信不信由你，命名顏色可能是多年來主題世界中最具爭議的話題。 通常同意的唯一兩件事是“背景”和“前景”顏色。

Morten Rand-Hendriksen 在 2018 年為主題顏色命名方案的標準化開張了票。 這不是第一次討論，也不是最後一次。 它旨在解決的問題是系統中的顏色問題，這就是主題如何定義其調色板。 一旦用戶使用了預設顏色，slug 就會被硬編碼到他們的內容中。 切換到具有不同 slug 的另一個主題，舊顏色會消失並且不會自動更改為新主題的顏色。

我使用的語義名稱與 Tailwind CSS 框架的著色系統非常相似。 例如，我將使用primary-500 （語義）而不是red-medium （描述性）。 語義方法將允許主題作者定義一組在用戶每次切換主題時更新的顏色。

當然，還有其他的思想流派，即使是喜歡語義命名的每個人也不同意同一個系統。 我在最近的 GitHub 票證中更詳細地描述了我的方法，並為可能想要嘗試它的其他人提供了一個theme.json Gist。

其他主題 JSON 設置

除了顏色和排版，調查還詢問了主題作者使用的其他設置。 這是另一種我通常使用所有東西的場景——如果有一個選項，我正在定義它。

WordPress 目前沒有預設的一個用例是全局間距。 大多數主題作者對大多數垂直邊距（塊和元素之間的空白）使用單個值。 它也經常用於默認的垂直和水平填充。

我不確定是否需要預設，因為我不知道 WordPress 將如何使用它。 這是其他人所要求的，並且幾乎無處不在。 圍繞它定義一個完整的系統可能會讓人頭疼，但我仍然希望看到一些關於實現至少一個標準全局間距預設的討論。

每塊設置和样式

這個調查部分是一個是/否的問題，只是詢問主題作者是否在他們的theme.json文件中包含了每個塊的設置或樣式。 當然，我稍後在可選評論部分留下了一些額外的評論。

在設置方面，我對系統感到滿意，它允許用戶定義全局或按塊啟用哪些功能。 但是，我不喜歡通過theme.json添加樣式。

用 JSON 編寫 CSS，本質上就是我們所說的，在很多層面上都感覺不對。 目前，它僅限於一些可配置的樣式，因此除此之外的任何內容都需要深入研究實際的 CSS 文件。 這是有問題的，因為主題的一半 CSS 代碼在theme.json和單獨的 CSS 文件之間劃分。 從開發的角度來看，它使代碼庫更難維護。

最初，我開始從theme.json配置每個塊和元素樣式的路徑。 然而，我已經將我的樣式移回 CSS 文件。 感覺更自然，而且我還擁有我習慣的所有工具的額外好處。 現在，我無法想像我會搬回去的場景。

除了節省幾個字節的代碼之外，我還沒有看到通過 JSON 為大多數事物添加樣式的好處。 也許將來會改變，我將成為一名皈依者。 目前，我主要堅持使用 CSS。

其他反饋：PHP 層

我以前說過，但值得重複。 我們需要這個theme.json配置系統的 PHP 層。 目前有一張公開票可以解決這個問題。

這樣的系統有兩個主要好處。 擁有一個用於拼湊配置的 PHP API 對於傳統主題開發人員來說會感覺更加自然。 我把它看作是一個橄欖枝，表明核心/古騰堡開發人員認識到許多主題作者將更容易通過熟悉的編程語言輕鬆融入 FSE 功能。

第二個優點是，如果有一種簡單的方法可以連接到主題 JSON 系統並覆蓋內容，那麼就有無數的插件想法可以擴展全局樣式、站點編輯等等。 一個簡單的過濾器鉤子可以讓這個過程變得輕鬆。