深入了解 2222 和 WordPress 塊主題

雖然比原計劃晚了一點，但我們正在獲得一個新的 WordPress 默認主題。 它的名字是二十二十二！

新的 WordPress 默認主題隨即將發布的 WordPress 5.9 版本一起提供。 我們很想了解更多關於新主題的信息，因此我們在運行 WordPress 5.9 的本地開發環境中安裝並測試了 Twenty Twenty-2。

在結束我們的想法之前，我們將向您展示我們的結果，為您帶來對新 WordPress 主題來龍去脈的深入概述。

Twenty Twenty-2 被設計為有史以來最靈活、最輕量級和可自定義的默認主題。 它為測試塊、模式和模板提供了一個很好的遊樂場。

作為一個塊主題，它將幫助您更好地探索全站點編輯、全局樣式、導航塊和新的圖像庫，這些是 WordPress 5.9 中最受期待的功能。

我們必須馬上說二十二十二是第一個默認塊主題！

新主題最雄心勃勃的目標之一是賦予用戶權力。 有了這麼多開箱即用的模式和模板，用戶只需單擊幾下即可構建複雜的佈局。 剩下的只是樣式定制。

從技術的角度來看，寫關於 222 的文章與寫 WordPress 5.9 附帶的最新和最強大的功能沒有太大區別。 但是二十二十二為我們提供了一個放大鏡，可以更好地欣賞新的站點編輯功能並更好地了解平台的未來。

因此，我們在這裡向您介紹新主題。

首先，我們將探索用戶將使用 WordPress 5.9 和 Twenty Twenty-2 體驗到的新站點編輯流程。

之後，我們將深入探討在 2222 中實現的主要塊主題功能。 您將了解全局樣式、塊模式、模板和模板部分。

但是關於二十二十二和 WordPress 塊主題還有很多話要說。 因此，作為附加章節，我們將簡要介紹如何利用theme.json文件來擴展二十二十二的功能。

這是下一個 WordPress 默認主題的初步介紹！ 我很高興能與@jffng 共同領導它，我們都希望你能為它做出貢獻和/或享受使用它！ https://t.co/covjrpgFIO

— kjellr (@kjellr) 2021 年 10 月 6 日

讓我們開始工作並深入了解全新的 2222 WordPress 默認主題。

2222 帶來新的站點編輯流程

幾個完整的站點編輯功能成為 WordPress 5.9 的核心。 使用安裝了二十二十二等塊主題的最新 WordPress 版本的站點所有者將很快能夠：

• 使用更多塊和模式創建和編輯帖子和頁面
• 通過 Global Styles 接口自定義theme.json文件中定義的設置和样式
• 為頁面和帖子創建和編輯模板
• 為頁眉、頁腳和其他模板區域創建和編輯模板部分

隨著所有這些功能合併到核心，WordPress 核心貢獻者一直在討論信息架構的演變，並重新設計了整個站點編輯流程。

激活二十二十二後，您可能會注意到的第一件事是站點編輯器的入口點不再位於 WordPress 儀表板的主菜單中，而是已移至外觀菜單下。

將模板和样式編輯功能放在同一個外觀菜單下應該可以簡化編輯體驗。 它應該使您更容易理解您正在訪問的功能與您的頁面呈現相關。

編輯器菜單項打開站點的主頁模板。 根據您的閱讀設置，這可以是您的最新帖子頁面或靜態頁面。

現在，單擊左上角的 WordPress 圖標會顯示一個新的站點編輯器導航菜單，包括三個菜單項：站點、模板和模板部件。

讓我們仔細看看。

站點選項打開主頁模板（最新的博客文章或靜態主頁）。

從模板菜單項中，您將獲得可用模板的列表。 您可以單擊列表中的任何模板以在編輯器中啟動它。

在撰寫本文時，二十二十二提供了 11 個模板。

單擊右側的省略號 ( ︙ ) 圖標可清除自定義項。

與主題模板不同，自定義模板只能重命名或刪除（但您可以在帖子編輯器中編輯自定義模板）。

Template Parts菜單項列出了您可以在編輯器中打開以進行自定義的可用模板部件。

您會發現默認情況下將四個模板部分添加到二十二十二。 將光標懸停在修改後的模板上會顯示一個工具提示，讓您知道模板已被自定義。

您可以通過單擊右側的省略號 ( ︙ ) 圖標來清除這些自定義。

編輯模板和模板部件

編輯器提供了自定義模板和模板部分結構的界面。

在這裡，您可以輕鬆添加或編輯塊和模式，您的更改將自動應用於使用該模板的每個頁面。

下圖顯示了編輯器中的 404 頁面模板。 這是一個非常簡單的模板，只包括一個標題、一個段落和一個搜索框。 儘管如此，它還是讓我們很好地理解了 UI 的工作原理。

在這裡，您可以進行編輯和自定義模板以最好地滿足您的需求。 例如，您可能希望添加圖片帖子網格模式以增加訪問者的參與度並邀請他們瀏覽您網站的內容。

模板編輯器頂部的標題下拉列表顯示了可用模板區域的列表。 相同的列表出現在“設置”側邊欄中的“模板”選項卡中。

通過單擊任何模板區域（例如頁眉），您將被直接帶到您要編輯的模板部分。

如果單擊右側的省略號圖標，您將訪問獨立模板部件編輯器。

模板部分編輯器還提供了一對可拖動的手柄，允許您檢查模板在不同屏幕分辨率下的行為。

一旦您對更改感到滿意，請保存您的編輯並返回主模板編輯器以檢查最終結果。

如果您想深入了解新的信息架構，您可能需要查看以下文章：

• 站點編輯 IA 概念：如何顯示和訪問新功能
• 站點編輯 iA 概念 - 第 2 部分

2222 的核心： theme.json的快速概述

為了全面了解二十二十二和塊主題（如 Bricksy）是如何工作的，讓我們看一下基於theme.json文件的新主題配置和样式機制。

這種新機制在 WordPress 5.8 中引入，允許主題開發人員配置編輯器並從中央配置點添加功能支持。

在二十二十二中， theme.json文件的結構如下：

 { "version": 2, "settings": {}, "styles": {}, "customTemplates": {}, "templateParts": {} }

讓我們快速瀏覽一下每個部分。

版本

version字段描述了規範版本，目前是2 。

設置

settings部分定義全局或塊級別的設置。 在頂層定義的設置會影響所有塊，但塊可以單獨覆蓋全局設置。 在二十二十二中，您會發現以下設置：

 { "settings": { "appearanceTools": true, "color": { "duotone": [...], "gradients": [...], "palette": [...] }, "custom": {...}, "spacing": {...}, "typography": { "dropCap": false, "fontFamilies": [...], "fontSizes": [...] }, "layout": {...} } }

設置默認值稱為預設，用於根據特定命名約定生成 CSS 自定義屬性和類名稱：

• CSS 自定義屬性： --wp--preset--{preset-category}--{preset-slug}
• CSS 類名： .has-{preset-slug}-{preset-category}

一旦主題定義了它的預設，相應的 CSS 自定義屬性就可以用於樣式部分中的塊和元素的styles 。

風格

styles部分是主題定義塊和元素默認樣式的地方。 例如，請參閱以下核心 Button 塊的二十二十二樣式：

 { "version": 2, "styles": { "blocks": { "core/button": { "border": { "radius": "0" }, "color": { "background": "var(--wp--preset--color--primary)", "text": "var(--wp--preset--color--background)" }, "typography": { "fontSize": "var(--wp--preset--typography--font-size--normal)" } } } } }

您會注意到屬性聲明中使用的 CSS 自定義屬性。

自定義模板

customTemplates部分是主題聲明其自定義模板的地方。 name和title字段是必需的。 主題還可以通過設置postTypes屬性來聲明可以使用模板的帖子類型。

二十二十二提供了四個自定義模板：

 { "version": 2, "customTemplates": [ { "name": "blank", "title": "Blank", "postTypes": [ "page", "post" ] }, { "name": "page-large-header", "title": "Page (Large Header)", "postTypes": [ "page" ] }, { "name": "single-no-separators", "title": "Single Post (No Separators)", "postTypes": [ "post" ] }, { "name": "page-no-separators", "title": "Page (No Separators)", "postTypes": [ "page" ] } ] }

您將在block-templates文件夾中找到相應的.html文件。

模板零件

templateParts部分包括模板部分定義：

 { "version": 2, "templateParts": [ { "name": "header", "title": "Header", "area": "header" }, { "name": "header-large-dark", "title": "Header (Dark, large)", "area": "header" }, { "name": "header-small-dark", "title": "Header (Dark, small)", "area": "header" }, { "name": "footer", "title": "Footer", "area": "footer" } ] }

name和title字段是必需的。 主題還可以聲明一個area術語，模板部分將在編輯器中呈現。

模板部件.html文件位於template-parts文件夾中。

現在您對二十二十二的theme.json 有了更多的了解，我們可以更深入地探索主題的功能和新的編輯界面。

讓我們深入了解二十二十二的全球風格。

二十二中的全球風格

如果您查看 Twenty Twenty-2' style.css，您可能會驚訝地發現它包含最少數量的 CSS 聲明。 原因是樣式是在基於塊的主題的theme.json文件中聲明的。

WordPress 5.9 將更進一步，引入了一項新功能，該功能使塊主題用戶能夠從稱為全局樣式的用戶界面自定義站點元素的外觀。

可以從位於編輯器右上角的新樣式圖標訪問全局樣式界面（另請參閱全局樣式界面）。

單擊該圖標會顯示一個新的樣式側邊欄，其中包括三個單獨的面板：

• 預覽面板，顯示您的自定義設置的預覽
• 一個全局樣式面板，提供對排版、顏色和佈局的特定控件組的訪問
• 一個Blocks項目，提供對塊級樣式設置的訪問

二十二十二的調色板

顏色面板可以幫助您編輯可用的調色板，並為背景、文本或鏈接分配或更改顏色。

在調色板面板中，您可以自定義主題或默認調色板，甚至可以創建自定義調色板。

您找到生成顏色控件的代碼了嗎？

如果沒有，請在您最喜歡的代碼編輯器中打開 Twenty Twenty-2 的theme.json 。 您會發現以下調色板聲明：

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#000000", "name": "Foreground" }, { "slug": "background", "color": "#ffffff", "name": "Background" }, { "slug": "primary", "color": "#1a4548", "name": "Primary" }, { "slug": "secondary", "color": "#ffe2c7", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F6F6", "name": "Tertiary" } ] } } }

下圖顯示了上面的代碼如何匹配二十二十二的調色板。

現在讓我們假設您要更改特定塊的默認背景顏色。 為塊的背景選擇不同的顏色只會將不同的 CSS 變量分配給元素的background-color屬性。 下圖提供了一個示例：

就這樣！ 您無需向定制器添加一行自定義 CSS 代碼或為此創建子主題。

但是，讓我們通過一些額外的例子繼續探索二十二十二的全球風格。

排版設置

排版面板是您可以在全球範圍內為網站的文本和鏈接元素自定義排版樣式的地方。

每個項目都提供對一組控件的訪問，以便您自定義字體系列、大小和行高。

您想知道生成這些控件的代碼是什麼嗎？

打開二十二十二的theme.json並找到typography部分。 您將看到以下設置：

 { "version": 1, "settings": { "appearanceTools": true, "typography": { "dropCap": false, "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" } ], "fontSizes": [ { "name": "Small", "size": "1rem", "slug": "small" }, { "name": "Normal", "size": "1.125rem", "slug": "normal" }, { "name": "Medium", "size": "1.75rem", "slug": "medium" }, { "name": "Large", "size": "clamp(1.75rem, 3vw, 2.25rem)", "slug": "large" }, { "name": "Huge", "size": "clamp(2.5rem, 4vw, 3rem)", "slug": "huge" } ] }, }

您可能希望從上面的代碼中看到兩個字體系列和五個字體大小。 你猜對了。

以下是上面的代碼如何轉換為全局樣式排版設置：

您可能會猜到是什麼設置生成了Line height控件。 在 Twenty Twenty-2 中，您不會找到特定的設置，因為它是由appearanceTools工具屬性啟用的，這是幾個設置聲明的快捷方式（請參閱下一節）。

佈局和外觀工具

Global Styles 側邊欄中的最後一個元素是Layout 。 在撰寫本文時，它僅包含一個padding控件。

在 Twenty Twenty-2 中，Layout 面板由appearanceTools工具設置屬性啟用，這是一個布爾值，可用於一次啟用多個設置：

 { "settings": { "appearanceTools": true } }

"appearanceTools": true僅替換以下聲明塊：

 { 'settings': { 'border': { 'color': true, 'radius': true, 'style': true, 'width': true }, 'color': { 'link': true }, 'spacing': { 'blockGap': true, 'margin': true, 'padding': true }, 'typography': { 'lineHeight': true } } }

好的——您現在希望了解在theme.json文件中聲明的設置如何匹配相應的全局樣式控件。

要獲得新的 WordPress 默認主題的完整圖片，我們還缺少一塊拼圖：塊模式。

二十二十二塊圖案

可以說二十二十二主要是一組模式的集合——而且確實如此。 在二十二十二中，您會發現大量現成的塊模式，您可以從中進行選擇，為您的網頁構建令人驚嘆且不可預測的嵌套塊結構。

這裡的關鍵詞是用戶授權。 這很合適，因為使用塊模式，您可以構建各種各樣的東西，從吸引人的作品集到單頁促銷網站，即使您對 HTML 或 CSS 一無所知！

WordPress 5.9 通過新的 Pattern Explorer 對模式系統進行了重大改進，該工具允許您以全屏模式瀏覽模式。

新工具還使您能夠直接從模式目錄快速輕鬆地導入塊模式。 這為 WordPress 用戶和開發人員開闢了新的可能性，因此它的使用量在未來可能會大幅增加。

二十二十二包括五個類別的大量模式（超過 65 種）。

這套堅實的模式與模板和模板部分完美搭配，新的默認主題，帶來真正令人驚嘆的編輯體驗。

如果您還沒有機會嘗試塊模式，我們將通過一個簡單的示例向您展示為什麼它們被認為是如此強大的工具。

假設您想從 Index 和 Single Post 模板中刪除默認頁腳，並將其替換為不同的二十二十二塊模式。

從外觀菜單或 WordPress 前端工具欄按鈕啟動站點編輯器以自定義索引模板。

單擊索引按鈕以顯示標題下拉列表，其中顯示頁面上可用的模板區域列表。 單擊頁腳旁邊的省略號按鈕，然後單擊編輯頁腳。

如上所述，這將啟動隔離的模板部件編輯器。

現在打開塊插入器並單擊Patterns 。

啟動新的Pattern Explorer工具，選擇二十二十二頁腳類別，然後選擇您選擇的頁腳。

現在根據您的需要添加和編輯塊。

當您對更改感到滿意時，保存標題並重新檢查您的網站。

下圖比較了具有不同頁眉和頁腳自定義的三個模板（索引、單個帖子和沒有分隔符的單個帖子）：

以兒童為主題擴展 222

為塊主題創建子主題與為經典主題創建子主題完全不同。

但是，一旦您對塊主題的結構有了很好的了解，您就會發現為二十二十二或任何其他塊主題創建子主題並不困難。

因此，讓我們弄清楚如何自定義基於 222 的網站的外觀和感覺。

1. 設置二十二歲兒童主題

在您的/wp-content/themes目錄中，創建一個新文件夾並將其命名為您喜歡的任何名稱（根據主題開發標準）。 在此示例中，我們將子主題文件夾命名為二十二十二子。

現在你需要一個style.css文件。 打開您喜歡的代碼編輯器並創建以下樣式表：

 /* Theme Name: Twenty Twenty-Two Child Theme URI: https://example.com/ Author: Your name Author URI: https://example.com/ Description: A child theme for TT2. Requires at least: 5.8 Tested up to: 5.9 Requires PHP: 5.6 Version: 0.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentytwo-child Template: twentytwentytwo Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments Twenty Twenty-Two Child WordPress Theme, (C) 2021 WordPress.org Twenty Twenty-Two Child is distributed under the terms of the GNU GPL. */

與往常一樣，您可以根據需要編輯字段。

您的子主題現在可供預覽。 您可以在外觀 > 主題管理屏幕中激活它。

2.自定義全局設置

從 WordPress 5.9 開始，帶有theme.json文件的子主題會繼承父主題的設置。 如果孩子的theme.json定義了一組樣式，那麼這些樣式將應用在其父樣式之上。

因此，我們可以創建一個僅包含一小部分自定義設置和样式定義的theme.json文件，而不是重新定義我們所有的原始選擇。

如何聲明自定義調色板

在為二十二十二構建子主題時，最簡單的任務是替換調色板。 您需要做的就是在您孩子的theme.json中定義一個新的調色板，如下所示：

 { "version": 2, "settings": { "color": { "palette": [ { "slug": "foreground", "color": "#FFFFFF", "name": "Foreground" }, { "slug": "background", "color": "#001F29", "name": "Background" }, { "slug": "primary", "color": "#D6FDFF", "name": "Primary" }, { "slug": "secondary", "color": "#FDFCDC", "name": "Secondary" }, { "slug": "tertiary", "color": "#FED9B7", "name": "Tertiary" }, { "slug": "accent", "color": "#E94435", "name": "Accent" } ] } } }

保存您的文件並返回到站點編輯器。 上面定義的調色板應該已經取代了默認的二十二十二的調色板。

顏色將按順序顯示在調色板本身上，它們的名稱應遵循 Github 上討論的最佳實踐和命名約定。

您可以在Carolina Nymark 的深入概述中閱讀更多關於theme.json顏色選項的信息。

如何聲明自定義雙色調濾鏡

您還可以使用自定義過濾器集替換默認的雙色調顏色。

為此，只需將以下代碼添加到與palette屬性相同級別的孩子的theme.json設置中：

 { "version": 2, "settings": { "color": { "palette": [...], "duotone": [ { "colors": [ "#001F29", "#FFFFFF" ], "slug": "default-filter", "name": "Default filter" } ] } } }

保存您的文件並在塊編輯器中檢查結果。 您應該只看到一個雙色調濾鏡。

3.自定義塊樣式

正如我們之前提到的，使用 WordPress 5.9，您現在可以從全局樣式界面自定義theme.json設置和样式。

僅當塊在相應的block.json文件中聲明支持特定功能時，才可以從全局樣式界面自定義塊樣式。 但是您可以覆蓋子主題的theme.json中的默認塊設置。

現在假設您要覆蓋帖子標題和組塊樣式。 您需要做的就是定義要添加或覆蓋的樣式，如下所示：

 { "version": 2, "settings": {...}, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif" }, "color": { "background": "var(--wp--preset--color--tertiary)" }, "spacing": { "padding": "var(--wp--custom--spacing--small)" } }, "core/group": { "spacing": { "margin": { "top": "0", "bottom": "0" } } } } } }

在上面的示例中，我們更改了core/post-title的字體系列、背景顏色和填充值，以及core/group的頂部和底部邊距。

下圖顯示了在公共站點上的結果：

這就是審查！

我們暫時不會深入探討兒童主題，因為它超出了本文的範圍。 同時，您會在 Github 上找到更多關於二十二十二個兒童主題的示例。

概括

在仔細研究新的 WordPress 默認主題二十二十二及其功能（使其成為有史以來最靈活的默認主題）時，我們公佈了 WordPress 5.9 引入的新信息架構。 我們甚至偷看了新的 Global Styles 界面。

許多令人興奮的新功能即將推出，而且隨著時間的推移，新的編輯環境似乎變得更加強大、可靠和實用。

雖然許多新的 WordPress 功能正在開發中，但其他功能正在消失或重要性下降。 許多用戶想知道定制器會發生什麼以及如何最好地保持與現有主題的向後兼容性。

但是，您不應該期望突然從傳統主題跳躍到單一界限中的阻止主題。 我們目前有四種不同類型的主題可供選擇：

• 塊主題：為 FSE 設計的主題
• 通用主題：可與定制器和站點編輯器一起使用的主題
• 混合主題：支持 FSE 功能的經典主題，如theme.json
• 經典主題：帶有 PHP 模板、functions.php 等的主題。

所以，暫時不要擔心——如果您還沒有準備好切換到阻止主題，仍然有很多解決方案可供選擇。

現在由您決定！ 您準備好大躍進並立即開始使用塊主題了嗎？ 在下面的評論中與我們分享您的想法。