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中的新功能。

1. 網頁字型API
2. 全域性樣式切換
3. 無處不在的區塊樣板
4. 站點編輯功能
5. 介面和可用性改進
6. 新核心區塊
7. 對現有區塊的改進

網頁字型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字型新增到二〇二二預設設定的fontFamilies。如果您想自己嘗試，請從Google Fonts下載Inter webfont到./assets/fonts資料夾，然後將上面的程式碼新增到二〇二二主題theme.json的settings.typography部分。完成後，儲存檔案並返回站點編輯介面。

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

一個新的字型系列已在二〇二二註冊

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

您可以閱讀更多關於在Webfonts API拉取請求和WordPress 6.0包含的Webfonts API狀態的更多資訊。

全域性樣式切換

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

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

要將樣式變體新增到塊主題，您需要將替代JSON檔案新增到位於主題根目錄中的樣式資料夾中。

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

在WordPress 6.0中瀏覽樣式

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

在WordPress 6.0中單擊即可選擇樣式

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

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

WordPress 6.0中帶有自定義字型的樣式變體

如果您想自己嘗試，請將樣式資料夾新增到塊主題的根目錄，建立一個具有有意義名稱的新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開始，樣板目錄中的區塊樣板進入了我們的WordPress網站，從樣板目錄中動態檢索並載入到區塊插入器中。

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

在Pattern Creator中搜尋影象

並且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 5.9中新增新模板

現在，WordPress 6.0引入了幾種新的模板型別，包括Author、Category、Date、Tag和Taxonomy。

在WordPress 6.0中新增新模板

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

介面和可用性改進

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

1. 列表檢視改進
2. 區塊樣式預覽
3. 段落排版部分
4. 在工具面板下移動的邊框和顏色設定
5. 釋出後面板類別提醒
6. 程式碼編輯器新增到站點編輯器
7. 其他增強功能

列表檢視改進

列表檢視受到大量改進元件可用性的更改的影響。
在選擇時展開列表檢視
當您在編輯器中單擊一個區塊時，現在該區塊會在列表檢視中自動突出顯示。如果塊巢狀在父區塊中，則父區塊會展開以顯示區塊樹中的專案。

選擇區塊時在列表檢視中展開組區塊

列表檢視預設摺疊
在WordPress 6.0之前，當您開啟列表檢視面板時，預設情況下它會展開。

WordPress 5.9中的預設列表檢視

但是由於文章通常包含巢狀塊的複雜結構，因此在開啟列表檢視時讓塊樹摺疊是非常有意義的。

在6.0中，所有編輯器中的列表檢視預設摺疊，使區塊樹一目瞭然。

WordPress 6.0中的預設列表檢視

關注列表檢視按鈕
當您開啟列表檢視面板時，焦點現在正確返回到列表檢視按鈕。這在您從鍵盤瀏覽列表檢視時特別有用，並帶來更流暢和更無縫的編輯體驗。
多區塊選擇和拖放
列表檢視的另一項更改允許您選擇同一級別的多個區塊並將它們拖放到列表中的另一個位置。

區塊樣式預覽

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

WordPress 5.9中的區塊樣式預覽

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

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

WordPress 6.0中的區塊樣式預覽

段落排版部分

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

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

WordPress 5.9與WordPress 6.0中的排版設定

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

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

新的邊框設定面板

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

WordPress 6.0中的顏色面板

釋出後面板類別提醒

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

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

下圖比較了WordPress 5.9和6.0中的釋出釋出面板。

WordPress 5.9與6.0中的釋出面板

程式碼編輯器新增到站點編輯器

從WordPress 6.0開始，程式碼編輯器現在也可以在站點編輯器中使用。與Post Editor一樣，您會在Options選單下找到Code Editor。

WordPress 6.0將程式碼編輯器新增到站點編輯器

其他增強功能

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

跨兩個段落選擇文字

區塊鎖定UI – 更多設定下拉選單中的新鎖定項開啟一個彈出視窗，您可以在其中阻止使用者移動或刪除區塊（或兩者）。

鎖定一組區塊

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

鎖定可重用組區塊

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

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

應用了不同樣式的列表區塊

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

將列表轉換為段落

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

新核心區塊

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

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

1. 評論查詢迴圈
2. 閱讀更多
3. 查詢迴圈中沒有結果
4. Avatar頭像和文章作者資訊

評論查詢迴圈

與查詢迴圈區塊類似，一個新的評論查詢迴圈塊顯示發表評論。它是一個高階區塊，包括幾個可以單獨編輯和配置的內部區塊。

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

配置評論查詢迴圈區塊

閱讀更多

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

這是一個很好的補充，因為它允許您在摘要區塊的上下文之外新增和自定義閱讀更多連結。

新的閱讀更多區塊

查詢迴圈中沒有結果

No Results區塊是一個塊容器，您可以在其中新增任何文字或區塊以在查詢沒有結果時顯示。要將No Results區塊新增到Query Loop，只需選擇Query Loop並單擊右下角的加號圖示以啟動快速插入器。然後搜尋無結果。該區塊在查詢迴圈（原始碼）之外不可用。

將無結果區塊新增到查詢迴圈

Avatar頭像和文章作者資訊

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

Post Author Biography區塊提供作者的描述（原始碼）。

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

WordPress 6.0中的頭像區塊

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

對現有區塊的改進

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

1. 導航區塊改進
2. 查詢迴圈過濾器和特色影象
3. 響應式組區塊中的排版和邊界支援
4. 封面中的特色圖片
5. 在社交圖示中顯示/隱藏標籤
6. 其他的區塊增強

導航區塊改進

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

首先，在導航連結塊中新增了豐富的預覽。新增指向可公開訪問資源的連結時，單擊區塊工具欄中的連結按鈕會顯示該資源的預覽影象。

導航連結的豐富預覽

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

現在，當您新增一個新選單並且只存在一個Navigation Menu時，它預設為唯一可用的menu。如果您只有一個導航選單，此更改應該會加快您的編輯工作流程。

導航連結已經有一個描述欄位，使用者可以在其中輸入描述其導航連結的文字。但是，在以前的WordPress版本中，主題不支援此功能。

現在，在WordPress 6.0中，連結標籤之後會出現一個 <span class="wp-block-navigation-item__description"> 。

導航連結描述出現在連結標籤之後

在二〇二二中，.wp-block-navigation-item__description元素通過CSS隱藏，但主題可以新增一個display: block屬性來顯示連結描述。

WordPress 6.0和二〇二二中的導航連結描述

查詢迴圈過濾器和特色影象

查詢迴圈過濾器設定部分現在顯示自定義分類的輸入欄位。這使使用者能夠通過為所選文章型別註冊的一個或多個自定義分類法過濾當前文章型別。

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

查詢WordPress 6.0中的迴圈過濾器設定

此外，您現在也可以在Query Loop區塊中設定特色影象尺寸。

控制查詢迴圈區塊中的特色影象尺寸

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

Group和Row區塊現在支援Typography設定。此更改允許使用者一次將相同的排版設定應用於整組區塊，在格式化包含多個巢狀區塊的組時節省了幾次點選。

組區塊的排版設定

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

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

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

水平顯示行區塊

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

使用組區塊控制邊距

封面中的特色圖片

現在，您可以像使用WordPress 6.0一樣在封面區塊中使用特色影象，區塊工具欄中新增了使用特色影象切換。藉助這個新控制元件，您只需單擊一下即可從當前影象切換到特色影象。

使用帶有封面區塊的特色圖片

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

社交圖示區塊的一個小而有用的增強現在使使用者能夠開啟/關閉圖示連結標籤。

顯示標籤控制元件允許在社交圖示中開啟/關閉標籤

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

顯示標籤已開啟

其他的區塊增強

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

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

列區塊的邊框控制元件

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

在WordPress 6.0中新增內部連結更容易

藉助新的區塊間距控制元件，現在可以更輕鬆地控制相簿區塊中影象周圍的空間。

沒有區塊間距的影象

具有區塊間距的影象

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

小結

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

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

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

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