WordPress 6.1 計劃於 2022 年 11 月 1 日釋出，將是繼 5 月 24 日釋出的 WordPress 6.0 Arturo 和 1 月 25 日釋出的 WordPress 5.9 Josephine 之後的第三個主要版本。
與往常一樣，新的 WordPress 版本將最新版本的 Gutenberg 外掛的新功能、改進和錯誤修復帶入核心。WordPress 6.1 也不例外，因為 Gutenberg 外掛的 v11 版本將合併到核心中，從 13.1 到 14.1。
這些是釋出時間表的主要日期：
- Beta 1 和功能封版：2022 年 9 月 20 日——從這一天起，核心貢獻者將專注於測試和修復錯誤
- 候選版本 1：2022 年 10 月 4 日 – 釋出包含開發說明的現場指南
- 試執行：2022 年 10 月 24 日
- WordPress 6.1 通用版本：2022 年 11 月 1 日
在撰寫本文時，開發說明和現場指南尚未釋出，但我們已經可以窺視幕後，並嘗試瞭解我們對 WordPress 的下一個主要版本的期望。
Matias Ventura 為我們提供了 6.1 路線圖的一些見解，他說 6.1 的目標是改進 5.9 和 6.0 引入的體驗，並在我們接近古騰堡路線圖的第 3 階段時修復一些問題。
1. 模板編輯器改進：主要的新功能之一是模板編輯器。WordPress 6.1 應該引入瀏覽、視覺化和編輯網站結構的能力。
2. 模板樣板：目標是讓區塊樣板在模板和頁面建立中發揮核心作用，使它們適應自定義文章型別和塊型別，增強鎖定功能，改進儲存的模式管理等。
3. 全域性樣式和區塊和設計工具：WordPress 6.1 將允許管理網路字型、實現響應式排版並擴充套件區塊可用的工具集。
也就是說，讓我們仔細看看 WordPress 6.1 附帶的一些最強大的功能：
影象自動轉換為 WebP 格式
WebP 首次在 WordPress 5.8 中引入，是一種現代影象格式，可為網路上的影象提供卓越的無損和有失真壓縮。
但是即使您可以使用媒體庫將 WebP 影象上傳到 WordPress ，WordPress 也不支援將影象自動轉換為 WebP 格式。要在您的網站上啟用該功能，您需要使用第三方 WebP 圖片相關的 WordPress 外掛。
現在，從 WordPress 6.1 開始，應該以替代檔案格式自動建立影象子大小。此外，WordPress 6.1 引入了三個新的過濾器，使開發人員能夠控制 WordPress 在前端生成和使用的子大小的 mime 型別。
並且，在 6.1 中，WordPress 將在預設情況下生成和使用 WebP 子大小。
當使用者上傳 JPEG 影象時，WordPress 可以自動生成 WebP 和 JPEG 子尺寸。然後 WordPress 將能夠在前端提供 WebP 影象。JPEG 影象將用於尚不支援 WebP 的環境（例如電子郵件）。
這是預設行為。開發人員將能夠覆蓋預設設定並通過過濾器確定使用哪種影象格式。
當生成新的 mime 型別時，僅保留那些尺寸小於其各自原始影象的影象。預設情況下，僅當您選擇支援時，才會為預設影象大小和自定義大小生成其他 mime 型別。
此更改還引入了三個新的過濾器，可完全控制輔助 mime 型別輸出：
wp_image_sizes_with_additional_mime_type_support允許開發人員根據大小控制影象 mime 型別wp_upload_image_mime_transforms允許開發人員控制給定輸入的影象 mime 型別，甚至覆蓋原始 mime 型別wp_content_image_mimes可用於控制內容影象的 mime 型別輸出順序。在頁面上渲染影象時，將使用第一個可用的 mime 型別。
此更改應使檔案大小平均減少 30%。
在 6.1 最終版本之前，您可以使用WordPress 效能組的效能實驗室外掛測試新功能。
WordPress 6.1 支援 JPEG 影象子尺寸 WebP 和 JPEG
然而，這一變化似乎存在爭議，許多貢獻者繼續報告問題。具體來說，注意到：
上傳圖片時生成圖片的資源會急劇增加，但提供圖片的資源會減少。由於與影象服務相比，影象上傳非常罕見，因此壓縮和儲存影象的額外努力應該是值得的。
並且：
實際上，上傳影象時資源使用量的急劇增加在這裡是一個非常糟糕的副作用。這意味著很多上傳將失敗，並使使用者陷入困境。它還將顯著增加對 WordPress 和託管公司的支援請求。不要認為這是可以接受的。因此，即使 WordPress 中需要影象多 mime 支援，當前的方法似乎也不是一個好的解決方案。
因此，在撰寫本文時，尚不清楚是否會預設啟用在影象子尺寸中使用 WebP 格式，或者站點管理員是否必須選擇在其網站前端提供 WebP 格式. 同時，JPEG 到 WEBP 的自動轉換已暫時禁用。有關正在進行的討論的有意義的總結，請檢視 Sara Gooding 關於 WP Tavern 的文章。
JPEG 自動轉換為 WEBP 已暫時禁用（請參閱變更集 12023）
Fluid 排版
WordPress 6.1通過 calcclamp CSS函式增加了對 Fluid 排版的支援。
表達 Fluid typography 描述了文字適應視口寬度的能力，從最小寬度平滑縮放到最大寬度。
這與您可以通過媒體查詢實現的不同，因為媒體查詢允許主題根據特定視口大小調整文字大小，但在不同值之間不做任何事情。
一些主題已經支援流暢的排版。例如，Twenty Twenty-2 將 CSS 函式 clamp() 用於多種字型大小。例如：
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}
正如您在上面的程式碼中看到的，Fluid 字型大小值用於每個單獨的字型大小。
現在，從 WordPress 6.1 開始，主題可以通過如下宣告新屬性typography.fluid來自動生成 fluid 字型大小：
"styles": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}
使用typography.fluid和typography.fontSizes[].fluid，使用以下公式自動計算每種字型大小的值：
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});
例如：
--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});
請注意，在撰寫本文時，Fluid Typography 是一項實驗性功能。您可以深入瞭解 Block 支援中的技術細節：新增流暢的排版。
Fluid Typography是構建現代#WordPress網站的一項重大改進。我們剛剛更新了@frostwp以包含此功能。這是來自@richard_tabor的精彩讀物，瞭解它是什麼以及它為何重要。https://t.co/Bq5YuHX3wi
——布賴恩·加德納 (@bgardner) 2022 年 8 月 8 日
另請參閱 Rich Tabor 的 How to add Fluid Typography to WordPress Block Themes 和 Carolina Nymark 的 Gutenberg Fluid Typography。
新的和改進的區塊型別
將如此多的 Gutenberg 版本合併到核心中，WordPress 6.1 將帶來一個全新的目錄塊以及對現有塊型別的大量更改和改進。
- 新目錄區塊
- 為欄目區塊新增了邊框支援
- 影象區塊的邊框控制
- 評論區塊改進
- 自定義分類術語的釋出術語區塊變化
- 查詢區塊的新父級過濾器
- 標題欄中的字型系列控制元件
- 相簿區塊中的水平和垂直間距
- 封面圖片中的特色圖片
- 後導航連結的外觀工具
- 一鍵鎖定容器區塊內部
新目錄區塊
首次與 Gutenberg 13.3 一起引入，新的目錄區塊現在可作為實驗塊使用。新增到您的文章或頁面後，目錄區塊將檢測新增到內容中的任何標題區塊，並將它們顯示為有序列表中的錨連結。
新的目錄區塊在有序的專案列表中顯示標題
為欄目塊新增了邊框支援
欄目區塊現在利用新的 BorderBoxControl 元件，該元件使 WordPress 使用者能夠為列指定自定義邊框，還為每個邊框設定完全不同的樣式（另請參閱 Column: Add border support to column blocks）。
在 WordPress 6.1 中自定義列邊框
也可以在 theme.json 檔案中設定單獨的邊框，如下所示：
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}
開發人員可以在元件參考-BorderBoxControl中瞭解更多關於新控制元件的資訊。
影象區塊的邊框控制
Gutenberg 13.8 引入了對影象區塊的所有邊框控制元件的支援。這一變化將在 WordPress 6.1 中新增到核心，為網路創意開啟新的巨大機會之門。
WordPress 6.1 中的影象邊框控制元件
評論塊區改進
WordPress 6.1 還為我們帶來了改進的評論區塊。從 WordPress 的下一版本開始，使用者將能夠在評論區塊上使用更高階的編輯功能。
在下圖中，您可以看到評論區塊設定側邊欄以及應用於評論標題的更改。
WordPress 6.1 帶來了改進的評論區塊
自定義分類術語的文章術語區塊變體
文章術語區塊已通過新的自定義分類變體得到增強。您現在可以註冊一個新的自定義分類法，比如“電影中的演員”文章型別，您將能夠將分類術語列表新增到當前文章或自定義文章型別。
文章術語區塊的自定義分類術語
下圖顯示了電影文章型別中的演員列表。
使用自定義分類術語自定義釋出術語區塊的外觀
查詢區塊的新父級過濾器
查詢區塊現在可以使用新的父級過濾器來顯示具有相同父級的分層文章和頁面。
新的父級過濾器允許在查詢迴圈塊中顯示具有相同父級的文章
標題欄中的字型系列控制元件
標題區塊現在支援字型系列控制元件。
在標題區塊中設定自定義字型系列
相簿區塊中的水平和垂直間距
從 WordPress 6.1 開始，新的軸向間距控制元件允許您為相簿區塊中的影象設定不同的水平和垂直間距。
在建立影象庫的佈局時，此更改會帶來更大的靈活性。
自定義相簿區塊中的水平和垂直間隙
封面圖片中的特色圖片
特色圖片仍然受到很多關注，並且在 WordPress 6.1 中，它們的使用範圍進一步擴大。從 6.1 開始，可以直接從封面區塊佔位符中選擇特色影象，如下圖所示。
在封面區塊佔位符中使用特色圖片
此更改應有助於建立更一致的使用者體驗，使使用者更清楚他們正在定製的內容。
在媒體替換流程中使用特色圖片
後導航連結的外觀工具
appearanceTools設定屬性允許您選擇預設禁用的幾個設定。
從 WordPress 6.1 開始，對於支援appearanceTools設定屬性的主題，您可以在文章導航連結中自定義連結顏色和字型系列。
在文章導航連結中自定義連結顏色
您可以在我們對二十二十二主題的介紹中閱讀有關該appearanceTools屬性的更多資訊。
一鍵鎖定容器區塊內部
現在，一個新的切換使使用者能夠通過單擊將區塊鎖定在區塊容器中。這適用於組、封面和欄目區塊。
鎖定在組區塊內
區塊編輯器的附加功能和改進
雖然它是一個整合版本，但 WordPress 6.1 將帶來如此多的變化和改進，以至於不可能在一篇文章中將它們全部列出。除了新的目錄塊和上面列出的更改之外，我們還將看到：
區塊插入器中的模板部件變化
模板部分變體現在可在區塊插入器中使用，從而更容易將模板部分新增到您的網站。
WordPress 6.1 中的標題模板部分變體
此更改使編輯過程更加直接和快捷，使用者只需單擊幾下即可快速檢視模板部件的所有變體。
視覺化邊距和填充
一個小而有用的改進是在使用者調整它們時突出顯示邊距和填充。這應該更清楚在元素內部或外部新增了多少空間。
邊距和填充突出顯示
設定側邊欄的改進
WordPress 6.1 還將展示對設定側邊欄的一些介面改進。
文章設定側邊欄已略微重新設計。現在文章格式、slug、模板和作者的欄位已對齊並具有相同的寬度。此外，文章定時釋出已被簡化，使體驗更易於理解。模板部分也已移至彈出框以節省空間並清理介面。
WordPress 6.1 將展示一個簡化的設定側邊欄
此外，模板面板已替換為模板連結。單擊時，模板連結會在彈出視窗中顯示預設模板。
WordPress 6.1 中的模板彈出框
釋出彈出框設計更新
釋出彈出視窗中的日期時間選擇器已經過重新設計，現在使用“現有的 WordPress 元件和情感樣式”。
WordPress 6.1 展示了改進的日期時間選擇器
釋出彈出框 (DateTimePicker )的設計更新中提供了更多技術見解。
閱讀資訊面板的時間
頂部工具欄中的資訊面板已得到改進，現在除了單詞、字元、標題、段落和區塊外，還顯示閱讀時間。
資訊面板現在顯示閱讀時間
預計閱讀時間按平均每分鐘 189 個單詞計算。在 @wordpress/editor 中閱讀更多內容：將預計閱讀時間新增到編輯器中的目錄。
新的和改進的構建工具
WordPress 6.1 還將擴充套件 Site Builder 的功能。塊模式將在更多地方提供，更多的模板型別選擇將改善模板編輯器中的編輯體驗。
文章型別的建立樣板
WordPress 6.0 引入了頁面建立樣板，這是一種在使用者每次建立新頁面時提供模式選擇的方法。這樣，您不必從頭開始構建頁面，而是可以從模式中選擇模式並填寫內容，然後您就可以開始了。
要啟用此功能，至少一個塊模式應宣告對core/post-content塊型別的支援。
現在，從 WordPress 6.1 開始，該功能擴充套件到所有文章型別。您需要做的就是在樣板的blockTypes中包含core/post-content，並設定相關的postTypes。
現在讓我們通過一個實際的例子來了解如何利用這個新特性。假設您有一個電影文章型別。
首先，您需要註冊一個塊模式，如此處所述。
或者您可以採用簡單的方法並使用隱式樣板註冊（為簡單起見，在此示例中，我們將使用隱式樣板註冊）。
在主題資料夾的/patterns目錄中為您的塊模式建立一個 PHP 檔案（對於本示例，我們使用了Twenty Twenty-2）。然後新增以下標題：
<?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->
就是這樣。現在，每次建立新的電影文章型別時，螢幕上都會出現選擇樣板模式。
當使用者建立新的文章型別時，螢幕上會顯示一個樣板
如果您希望模式顯示在多種文章型別上，只需新增用逗號分隔的相應 slug：
<?php /** * Title: Pattern with columns * Slug: twentytwentytwo/pattern-with-columns * Block Types: core/post-content * Post Types: movie, book * Categories: text */ ?> <!-- wp:heading --> <h2>Hello there!</h2> <!-- /wp:heading -->
有關建立模式的詳細檢視，請參閱能夠為除 page 之外的其他文章型別使用建立樣板。
站點編輯器中的更多模板型別
使用 WordPress 6.0，站點編輯器中只能建立有限數量的模板：
在 WordPress 6.0 中新增新模板
從 WordPress 6.1 開始，可以為每個單獨的文章型別建立不同的模板。
您還可以新增和編輯核心和自定義分類的模板，甚至是單個類別或標籤。
如果您註冊自定義文章型別或自定義分類，它們將自動列在站點編輯器的模板選擇框中。
WordPress 6.1 中可用的模板型別列表
但不僅如此。選擇模板文章型別後，模式會提示使用者是為該型別的所有文章建立模板，還是為所選文章型別的特定文章建立新模板。
在 WordPress 6.1 中為自定義文章型別新增模板
然後一個新的模型提供該文章型別可用的文章列表。
在 WordPress 6.1 中新增新模板
開發人員的變化
WordPress 6.1 還為開發人員新增了新的 API 和一些改進。
新的首選項永續性 API
WordPress 6.1 引入了一個全新的首選項永續性 API，它將編輯器首選項儲存在 WordPress 資料庫而不是本地儲存中。
這樣，使用者偏好可以儲存在所有瀏覽器和裝置上。
為此，@wordpress/data包中以前的永續性系統已被棄用，並引入了一個新包preferences-persistence。新包通過 Rest API 將資料儲存到使用者元。資料也將儲存在本地儲存中作為備用，以防使用者離線或請求中斷（另請參閱 pull # 39795）。
支援 theme.json 中的按鈕樣式
使用 WordPress 6.1，您可以使用 theme.json 將按鈕樣式新增到您的主題中。這允許主題開發人員跨塊新增按鈕的一致性。一個例子是搜尋塊，但第三方塊也將從這種變化中受益。
為此，將向按鈕元素新增一個新類wp-element-button以共享相同的樣式。
您可以通過在開發環境中將以下程式碼新增到您的 theme.json 來測試此更改：
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}
搜尋區塊變體現在支援查詢變數
WordPress 6.1 將支援基於查詢變數的搜尋區塊變體。這意味著您將能夠為您的使用者提供用於精細搜尋任何型別內容的搜尋框。
在以下示例中，我們正在為movies文章型別註冊一個區塊變體。該示例基於 Carolina Nymar 的關於區塊變體的教程。
在您的（子）主題的函式檔案中，新增以下程式碼：
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );
現在，在您的（子）主題的 assets 資料夾中建立以下 block-variations.js 檔案：
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);
現在重新載入您的 WordPress 儀表盤並在區塊插入器中搜尋電影搜尋區塊變體。
區塊插入器中的自定義搜尋區塊變體
您可以在官方文件中閱讀有關區塊變體的更多資訊。
全域性樣式中的新按鈕元素
WordPress 5.9 引入了全域性樣式介面，使使用者能夠為其網站自定義樣式預設，無論是全域性還是塊級別。
在第一個實現中，您可以自定義背景、文字和連結的顏色。現在，從 WordPress 6.1 開始， “顏色”面板中新增了一個新的 Buttons 元素，使使用者能夠控制整個網站上按鈕的外觀。
在全域性樣式設定中自定義按鈕
這將影響整個站點的所有按鈕樣式，從按鈕塊到搜尋塊和使用按鈕的第三方塊。
如果您想成為 WordPress 開發人員或獲得新的開發技能，請務必檢視我們的 Gutenberg 區塊開發深入指南：
小結
WordPress 6.1 確實有很多新功能，但要對 2022 年最新版本做出最終評估還為時過早。另外，在撰寫本文時，我們還沒有達到功能凍結，因此可能在定於 11 月 1 日的最終釋出之前，仍有待討論的附加功能和更改。
雖然我們已經可以相當確定由於 Gutenberg 的 v11 版本合併到核心中我們將看到的新功能，但我們還不確定如何實現 JPEG 到 WebP 的轉換，並且可能會在上面列出的內容中新增其他更改.
評論留言