WordPress 6.0 中的新功能：新塊、樣式切換、模板編輯、Webfonts API 等等

我們距離 WordPress 6.0 的發布還有一段時間，並且像往常一樣，我們在幕後偷看，讓我們的讀者預覽他們對下一個 WordPress 主要版本的期望。

讓我們馬上說，如果 WordPress 5.9 將我們帶到了古騰堡第二階段的核心，那麼 WordPress 6.0 旨在整合已經可用的定制工具。

但新版本不會只是這樣。 正如 Matias Ventura 在 6.0 的初步路線圖中指出的那樣，站點編輯器的引入標誌著一個重要的里程碑，但也只是旅程的第一步。

事實上，使用 WordPress 6.0，我們可以期待 CMS 的幾個方面（從可用性到性能）有相當大的改進，包括以下內容：

• 改進的信息架構和模板瀏覽體驗
• 改進的模板創建
• 新的導航 UI
• 站點編輯器的新瀏覽模式
• 替代全局樣式
• 增強的導航塊
• 新的設計工具
• 以及更多…

但是等等，這還不是全部。 WordPress 6.0 還帶來了大量的更改、功能和錯誤修復，包括 400 多個更新和 500 個編輯器錯誤修復。 已修復 189 多張票證，其中包括 91 項新功能和增強功能。

是的，有很多話要說。 因此，讓我們不再拖延，了解 WordPress 6.0 中的新功能。

網頁字體 API

新的 Webfonts API 現在提供了一種將 Webfonts 加載到 WordPress 中的標準化方法，以確保性能和用戶隱私。

從 WordPress 6.0 開始，您只能從您的theme.json註冊一個新的網絡字體。

使用theme.json非常簡單。 您需要做的就是在typography部分添加一個新的字體系列。 下面的代碼提供了一個 webfont 註冊的例子：

 "typography": { "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" }, { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] }

使用上面的代碼，我們將Inter字體添加到 Twenty Twenty-2 中的默認fontFamilies集中。 如果您想自己嘗試，請從 Google Fonts 下載 Inter webfont 到./assets/fonts文件夾，然後將上面的代碼添加到 Twenty Twenty-Two 的theme.json的settings.typography部分。 完成後，保存文件並返回站點編輯界面。

下圖顯示了編輯器中的結果。

Webfont API 僅註冊在當前頁面上呈現塊所需的字體，這對於在樣式變體中定義的 webfonts 特別有用。 此外，API 通過按字體系列註冊和排隊字體來優化 HTTP 請求的數量。

您可以在 Webfonts API 拉取請求和 WordPress 6.0 包含的 Webfonts API 狀態中閱讀有關新 API 的更多信息。

全局樣式切換

全局樣式變體是 WordPress 6.0 中最受期待的功能之一。 主題作者現在可以將多組全局樣式與其主題捆綁在一起，使用戶能夠通過單擊在樣式變體之間進行切換。

這很像擁有現成的子主題，每個主題都有一組預定義的樣式。

要將樣式變體添加到塊主題，您需要將替代 JSON 文件添加到位於主題根目錄中的樣式文件夾中。

支持全局樣式變體的主題在全局樣式側邊欄中顯示了一個新的瀏覽樣式項。 這會帶來一個面板，主題用戶可以在其中找到可用樣式的列表。

從列表中選擇一個全局樣式，該樣式會自動應用於您的整個網站。

新功能允許主題開發人員創建無限數量的樣式變化，並與新的 Webfonts API 完美搭配。

下圖顯示了上一個示例中的自定義樣式，標題應用了不同的字體。

如果您想自己嘗試，請將樣式文件夾添加到塊主題的根目錄，創建一個具有有意義名稱的新 JSON 文件，在您喜歡的代碼編輯器中打開它並添加以下代碼：

 { "version": 2, "settings": { "color": { "duotone": [ { "colors": [ "#143F6B", "#EFEFEF" ], "slug": "foreground-and-background", "name": "Foreground and background" }, { "colors": [ "#143F6B", "#FEB139" ], "slug": "foreground-and-secondary", "name": "Foreground and secondary" }, { "colors": [ "#143F6B", "#F6F54D" ], "slug": "foreground-and-tertiary", "name": "Foreground and tertiary" }, { "colors": [ "#F55353", "#EFEFEF" ], "slug": "primary-and-background", "name": "Primary and background" }, { "colors": [ "#F55353", "#FEB139" ], "slug": "primary-and-secondary", "name": "Primary and secondary" }, { "colors": [ "#F55353", "#F6F54D" ], "slug": "primary-and-tertiary", "name": "Primary and tertiary" } ], "palette": [ { "slug": "foreground", "color": "#143F6B", "name": "Foreground" }, { "slug": "background", "color": "#EFEFEF", "name": "Background" }, { "slug": "primary", "color": "#F55353", "name": "Primary" }, { "slug": "secondary", "color": "#FEB139", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F54D", "name": "Tertiary" } ] }, "typography": { "fontFamilies": [ { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] } }, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "core/query-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }, "elements": { "h1": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h2": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h3": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h4": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h5": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h6": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } } }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }

您可以在 GitHub 和 gist 上找到上述示例中使用的完整代碼。

開發人員將在 Global Settings & Styles 和 Theme.json 文檔文章中找到對 Global Styles 和 Theme.json 的深入概述。

您還可以查看最新版本的二十二十二，它現在具有三種新的風格變化。

無處不在的塊模式

可以肯定的是，塊模式在 WordPress 開發的當前階段起著核心作用。 首次引入 WordPress 5.5，塊模式隨著時間的推移定期得到改進。

此外，從 WordPress 5.9 開始，Patterns 目錄中的模式進入了我們的 WordPress 網站，從 Patterns Directory 中動態檢索並加載到塊插入器中。

現在任何人都可以成為模式開發人員，這要歸功於全新的在線工具。 Pattern Creator 允許您構建、編輯並將您的最佳塊模式提交到 Pattern Directory 。 您只需一個 WordPress.org 帳戶即可開始使用。

並且 WordPress 6.0 引入了對塊模式的進一步改進。

首先，塊模式在模板編輯中更容易找到。 現在快速插入器僅在您在模板的頂層訪問它時顯示塊模式，即當您要添加到模板的塊是文檔的直接後代時。

這時滿足以下條件：

• 您正在編輯塊模板
• 快速插入器位於根級別
• 您正在其他塊之間添加一個塊（即，既不是頁面上的第一個塊也不是最新塊）

另一個有用的功能現在使主題開發人員能夠將推薦的模式添加到theme.json 。 嘗試一下，搜索 Patterns 目錄，找到你想推薦給主題用戶的模式，然後從 URL 中獲取模式 slug 並將其添加到你的theme.json中，如下所示：

 "patterns": [ "image-with-angled-overlay-shape-call-to-action-button-and-description", "hero-section-with-overlap-image" ],

用戶將在塊插入器中找到您推薦的模式。

WordPress 6.0 附帶的一個強大的模式相關功能是隱式模式註冊。 主題現在可以通過在主題根目錄下的新/patterns目錄下將它們聲明為 PHP 文件來隱式註冊模式。

這個過程非常簡單：

1. 在主題的根目錄中創建一個新的模式文件夾，
2. 在塊編輯器中建立一個塊組，
3. 將您的 HTML 複製並粘貼到一個新的文本文件中，
4. 前置以下標題，
5. 並將文件作為 PHP 保存在您的模式文件夾中。

 <?php /** * Title: My pattern * Slug: my-theme/my-pattern * Categories: text */ ?>

就是這樣。 您現在有一個新的塊模式可以顯示在塊插入器中。

有關塊模式開發的更全面概述，您可以關注 GitHub 上的跟踪問題。

站點編輯功能

WordPress 5.9 並未結束全站編輯開發。 WordPress 6.0 通過改進視覺主題構建功能和為塊主題提供新的模板選項，使事情更進一步。 更多功能正在開發中。

視覺主題建築

WordPress 6.0 引入了改進的塊主題導出工具，它允許您下載當前主題以及所有更改和自定義。

如果您到目前為止還沒有使用過塊主題導出工具，它是一個強大的站點編輯工具，允許您將樣式和模板作為整個主題導出。

當您對更改感到滿意時，從站點編輯器的界面中，打開“選項”側邊欄並找到“工具”部分。 此處的導出按鈕可讓您下載當前主題以及 zip 文件中的所有樣式和模板自定義。

然後，您可以導出您的主題並將其安裝在任何 WordPress 網站上。

我們在本地 WordPress 安裝上測試了改進的主題導出工具，發現幾乎一切都按我們的預期工作......

無論如何，導出工具仍在開發中，今天我們只能瞥見它的巨大潛力。 考慮從網站的編輯界面創建主題並將它們分發到任意數量的安裝的可能性。 這就是您是否是開發人員...

還有很多未解決的問題需要解決，這讓我們認為我們很快就會看到一些改進。 如果您好奇並想了解更多關於視覺主題構建的信息（就像我們一樣），您可以關注 GitHub 上的跟踪問題。

塊主題中的更多模板選項

在以前的 WordPress 版本中，我們提供的模板類型數量有限。

現在，WordPress 6.0 引入了幾種新的模板類型，包括作者、類別、日期、標籤和分類。

此添加應簡化您的站點編輯工作流程。 要嘗試一下，只需從下拉列表中選擇一個新模板，添加必要的塊，保存您的更改，然後檢查它在前端的外觀。 是的，就這麼簡單。 現在，將其與上面提到的主題導出功能結合起來，您會更好地了解我們對站點編輯的期望。

界面和可用性改進

WordPress 6.0 對 UI 進行了許多更改，其中許多更改旨在在側邊欄中進行排序。 所有這些變化應該會對整體編輯體驗產生相當大的影響。 在這裡我們只會提到其中的幾個，但您可以查看 Gutenberg 發行說明以獲取更全面的更改列表（請參閱 Gutenberg 12.4、12.5、12.6、12.7、12.8、12.9、13.0）。

列表視圖改進

列表視圖受到大量改進組件可用性的更改的影響。

在選擇時展開列表視圖

當您在編輯器中單擊一個塊時，現在該塊會在列表視圖中自動突出顯示。 如果塊嵌套在父塊中，則父塊會展開以顯示塊樹中的項目。

列表視圖默認折疊

在 WordPress 6.0 之前，當您打開列表視圖面板時，默認情況下它會展開。

但是由於帖子通常包含嵌套塊的複雜結構，因此在打開列表視圖時讓塊樹折疊是非常有意義的。

在 6.0 中，列表視圖在所有編輯器中默認折疊，使塊樹一目了然。

關注列表視圖按鈕

當您打開列表視圖面板時，焦點現在正確返回到列表視圖按鈕。 這在您從鍵盤瀏覽列表視圖時特別有用，並帶來更流暢和更無縫的編輯體驗。

多塊選擇和拖放

列表視圖的另一項更改允許您選擇同一級別的多個塊並將它們拖放到列表中的另一個位置。

塊樣式預覽

在 WordPress 6.0 之前，塊樣式預覽被放置在塊側邊欄中，佔據了樣式面板的很大一部分。

在 6.0 中，只有樣式變體的名稱出現在樣式面板中，而當樣式名稱懸停或獲得焦點時，樣式預覽會顯示在側邊欄之外。

此更改減少了側邊欄的尺寸，並且應該使樣式名稱更加明顯。

段落排版部分

為了在塊側邊欄中進行排序，段落塊的首字下沉控件已從其部分移至排版部分。

通過此更改，所有版式設置控件現在都放置在同一部分下，從而帶來更一致的用戶體驗。

在工具面板下移動的邊框和顏色設置

為了在雜亂的設置側邊欄中進行排序，邊框設置和顏色設置控件已移至工具面板中，並且可以在多個上下文中展開和折疊。

此更改應通過多個塊簡化編輯體驗，並為側邊欄帶來更多一致性。

發布後面板類別提醒

當您趕時間或定期發布大量博客文章時，您很容易忘記標籤或類別。 如果您經常遇到這種情況，您會發現“發布”面板中顯示的標籤提醒非常有用。

現在，為了幫助網站管理員和作者確保為他們的帖子分配了必要的類別，WordPress 6.0 提供了一個新的建議：當尚未將類別添加到帖子中時，分配類別面板會出現在帖子發布面板中。

下圖比較了 WordPress 5.9 和 6.0 中的發布發布面板。

代碼編輯器添加到站點編輯器

從 WordPress 6.0 開始，代碼編輯器現在也可以在站點編輯器中使用。 與帖子編輯器一樣，您會在選項菜單下找到代碼編輯器。

其他增強功能

多選——現在可以跨多個塊選擇文本。

塊鎖定 UI – 更多設置下拉列表中的新鎖定項打開一個彈出窗口，您可以在其中阻止用戶移動或刪除塊（或兩者）。

這在模板編輯和可重複使用的塊中特別有用，您還可以在其中限制塊編輯。

樣式保留- 當您轉換塊或創建新按鈕時，現在會保留幾種樣式。

下圖顯示了具有不同樣式的 List 塊。

當您將 List 塊轉換為段落時，新塊將保留與以前的列表項相同的樣式。

相同的增強適用於添加到 Buttons 塊的新按鈕，這些按鈕現在從相鄰按鈕繼承樣式。

新核心塊

核心塊的數量不斷增加。 如果您想知道當前可用的核心塊是什麼，現在有一個手冊頁面提供了 Gutenberg 插件中包含的核心塊的完整列表。 對於每個塊，都提供了名稱、類別、支持和屬性，以及指向塊開發人員會喜歡的源代碼的有用鏈接。

WordPress 6.0 將提供更多塊。 在這裡找到您可能期望即將發布的版本的塊。

評論查詢循環

與查詢循環塊類似，一個新的評論查詢循環塊顯示帖子評論。 它是一個高級塊，包括幾個可以單獨編輯和配置的內部塊。

如下圖所示，您可以選擇 Comment Query Loop 塊中包含的任何塊來自定義其外觀。 您還可以添加更多塊或移動或刪除現有塊（源代碼）。

閱讀更多

一個新的可自定義的閱讀更多塊允許您自定義閱讀更多按鈕的不同方面：邊框、顏色、角落、排版等（源代碼）。

這是一個很好的補充，因為它允許您在摘錄塊的上下文之外添加和自定義閱讀更多鏈接。

查詢循環中沒有結果

No Results塊是一個塊容器，您可以在其中添加任何文本或塊以在查詢沒有結果時顯示。 要將 No Results 塊添加到 Query Loop，只需選擇 Query Loop 並單擊右下角的加號圖標以啟動快速插入器。 然後搜索無結果。 該塊在查詢循環（源代碼）之外不可用。

阿凡達和帖子作者傳記

WordPress 6.0 還引入了新的塊類型，將作者塊拆分為其組件，並在您的內容中單獨使用它們。

Post Author Biography 塊提供作者的描述（源代碼）。

Avatar 塊僅顯示用戶的頭像，允許您在站點作者之間進行選擇（源代碼）。

此塊對於在作者信息塊或評論的上下文之外顯示作者的頭像特別有用。 例如，您可以在專用於所有作者的頁面上使用它，或者在顯示用戶/讀者評論的頁面上使用它。

對現有塊的改進

WordPress 6.0 還對現有塊引入了一些更改和增強功能，這些更改和增強可能會對您的編輯工作流程產生重大影響。 導航塊將受到一些更改的影響，但您還會看到其他塊的改進，包括查詢循環、特色圖像、組和社交圖標。

導航塊改進

在過去的幾個月中，導航塊獲得了多項改進，現在具有更易於使用的界面。

首先，在導航鏈接塊中添加了豐富的預覽。 添加指向可公開訪問資源的鏈接時，單擊塊工具欄中的鏈接按鈕會顯示該資源的預覽圖像。

一些額外的更改會影響整體編輯體驗。

現在，當您添加一個新菜單並且只存在一個導航菜單時，它默認為唯一可用的菜單。 如果您只有一個導航菜單，此更改應該會加快您的編輯工作流程。

導航鏈接已經有一個描述字段，用戶可以在其中輸入描述其導航鏈接的文本。 但是，在以前的 WordPress 版本中，主題不支持此功能。

現在，在 WordPress 6.0 中， <span class="wp-block-navigation-item__description">出現在鏈接標籤之後。

在二十二十二中， .wp-block-navigation-item__description元素通過 CSS 隱藏，但主題可以添加display: block屬性來顯示鏈接描述。

查詢循環過濾器和特色圖像

查詢循環過濾器設置部分現在顯示自定義分類的輸入字段。 這使用戶能夠通過為所選帖子類型註冊的一個或多個自定義分類法過濾當前帖子類型。

現在還可以過濾多個作者的帖子，而在以前的版本中，您只能從下拉列表中選擇一個作者。

此外，您現在還可以在 Query Loop 塊內設置特色圖像尺寸。

響應式組塊中的排版和邊界支持

Group 和 Row 塊現在支持排版設置。 此更改允許用戶一次將相同的排版設置應用於整組塊，在格式化包含多個嵌套塊的組時節省了幾次點擊。

組塊得到了進一步改進，現在您只需單擊一下即可輕鬆地將塊分組到堆棧或行中。

只需選擇要分組的塊，然後選擇塊工具欄中可用的三個控件之一： Group 、 Row 、 Stack 。

將塊分組後，設置側欄中的新面板會顯示組變體描述，使您只需單擊幾下即可切換變體。

WordPress 6.0 還引入了對 Group 塊的邊距支持，使用戶能夠分別控制頂部和底部邊距。

封面中的特色圖片

現在，您可以像使用 WordPress 6.0 一樣在封面塊中使用特色圖像，塊工具欄中添加了使用特色圖像切換。 借助這個新控件，您只需單擊一下即可從當前圖像切換到特色圖像。

在社交圖標中顯示/隱藏標籤

社交圖標塊的一個小但有用的增強現在使用戶能夠打開/關閉圖標鏈接標籤。

啟用此選項時，您可以顯示默認服務名稱或單獨為您的圖標設置自定義標籤。

額外的方塊增強

即將推出的 WordPress 版本還為許多其他塊帶來了大量增強功能。

例如，現在您可以控制 Columns 塊的邊框（Gutenberg 12.7）。

另一個有用的 UX 改進允許您使用簡單的[[鍵盤觸發器插入內部鏈接。

借助新的塊間距控件，現在可以更輕鬆地控製圖庫塊中圖像周圍的空間。

但這些只是您從 WordPress 6.0 開始看到的一些改進。 如需完整列表，請查看 Gutenberg 的發行說明。

概括

如上所述，我們現在可以說我們正處於 Gutenberg 開發的第二階段，即定制階段。

完整站點編輯現在是 WordPress 核心和 6.0 的一部分，以下版本將進一步改進我們已經擁有並可以立即使用的內容。 所有這一切都將對 WordPress 生態系統和整個網絡產生巨大影響，同時考慮到，在撰寫本文時，

我們知道其內容管理系統的所有網站中有 64.2% 使用 WordPress。 這是所有網站的 43.0%。 （來源 W3Techs）

我們暫時停在這裡。 WordPress 6.0 附帶的功能和改進列表無法在一篇文章中窮盡，但希望我們至少強調了將對我們日常使用 WordPress 的方式產生最大影響的新增功能。

現在，我們想向讀者提出一些問題來結束這篇文章！

請在下面的評論部分與社區分享您的想法。