目前網(wǎng)絡(luò)上關(guān)于 WordPress 6.1 的新功能的介紹都是零零散散，今天WordPress大學翻譯整理了 Kinsta 的一篇文章，相對比較系統(tǒng)介紹了 WordPress 6.1 的最新功能和改進，文章很長，感興趣的朋友一起來看看吧！
WordPress 6.1 計劃于2022 年 11 月 1 日發(fā)布，這是今年繼 5.9 和6.0 后的第三個大版本。與往常一樣，新的 WordPress 版本將最新版本的 Gutenberg 插件的新功能、改進和錯誤修復(fù)帶入核心。WordPress 6.1 也不例外，因為 Gutenberg 插件的 11 個版本將合并到核心中，從 13.1 到 14.1。
這些是發(fā)布時間表的主要日期：
- Beta 1 和功能凍結(jié)：2022 年 9 月 20 日——從這一天起，核心貢獻者將專注于測試和修復(fù)錯誤
- 候選版本 1：2022 年 10 月 4 日 – 發(fā)布包含開發(fā)說明的字段指南
- 試運行：2022 年 10 月 24 日
- WordPress 6.1 正式版本：2022 年 11 月 1 日
在撰寫本文時，開發(fā)說明和字段指南尚未發(fā)布，但我們已經(jīng)可以窺視幕后，并嘗試了解我們對 WordPress 的下一個主要版本的期望。
Matias Ventura 為我們提供了 6.1 路線圖的一些見解，他說 6.1 的目標是改進 5.9 和 6.0 引入的體驗，并在我們接近古騰堡路線圖的第 3 階段時修復(fù)一些問題。
1. 模板編輯器改進：主要的新功能之一是模板編輯器。WordPress 6.1 應(yīng)該引入瀏覽、可視化和編輯網(wǎng)站結(jié)構(gòu)的能力。
2. 模板樣板（Template Patterns）：目標是讓塊樣板在模板和頁面創(chuàng)建中發(fā)揮核心作用，使它們適應(yīng)自定義文章類型和塊類型，增強鎖定功能，改進保存的模式管理等。
3. 全局樣式、塊和設(shè)計工具：WordPress 6.1 將允許管理網(wǎng)絡(luò)字體、實現(xiàn)響應(yīng)式排版并擴展塊可用的工具集。
下面，讓我們仔細看看 WordPress 6.1 附帶的一些最強大的功能。
自動圖像轉(zhuǎn)換為 WebP 格式（暫停？）
WebP首次在 WordPress 5.8 中引入，是一種現(xiàn)代圖像格式，可為網(wǎng)絡(luò)上的圖像提供卓越的無損和有損壓縮。
但是即使您可以使用媒體庫將 WebP 圖像上傳到 WordPress ，WordPress 也不支持將圖像自動轉(zhuǎn)換為 WebP 格式。要在您的網(wǎng)站上啟用該功能，您需要使用第三方 WebP WordPress 插件。
現(xiàn)在，從 WordPress 6.1 開始，應(yīng)該以替代文件格式自動創(chuàng)建圖像子尺寸。此外，WordPress 6.1 引入了三個新的過濾器，使開發(fā)人員能夠控制 WordPress 在前端生成和使用的子尺寸的 mime 類型。
并且，在 6.1 中，WordPress 將在默認情況下生成和使用 WebP 子尺寸。
當用戶上傳JPEG 圖像時，WordPress 可以自動生成 WebP 和 JPEG 子尺寸。然后 WordPress 將能夠在前端提供 WebP 圖像。JPEG 圖像將用于尚不支持 WebP 的環(huán)境（例如電子郵件）。
這是默認行為。開發(fā)人員將能夠覆蓋默認設(shè)置并通過過濾器確定使用哪種圖像格式。
當生成新的 mime 類型時，僅保留那些尺寸小于其各自原始圖像的圖像。默認情況下，僅當您選擇支持時，才會為默認圖像大小和自定義大小生成其他 mime 類型。
此更改還引入了三個新的過濾器，可完全控制輔助 mime 類型輸出：
wp_image_sizes_with_additional_mime_type_support允許開發(fā)人員根據(jù)大小控制圖像 mime 類型wp_upload_image_mime_transforms允許開發(fā)人員控制給定輸入的圖像 mime 類型，甚至覆蓋原始 mime 類型wp_content_image_mimes可用于控制內(nèi)容圖像的 mime 類型輸出順序。在頁面上渲染圖像時，將使用第一個可用的 mime 類型。
此更改應(yīng)使文件大小平均減少30%。
在 6.1 最終版本之前，您可以使用WordPress 性能組的性能實驗室插件測試新功能。
然而，這一變化似乎存在爭議，許多貢獻者繼續(xù)報告問題。例如：
上傳圖片時生成圖片的資源會急劇增加，但提供圖片的資源會減少。由于與圖像服務(wù)相比，圖像上傳非常罕見，因此壓縮和存儲圖像的額外努力應(yīng)該是值得的。
并且：
實際上，上傳圖像時資源使用量的急劇增加在這里是一個非常糟糕的副作用。這意味著很多上傳將失敗，并使用戶陷入困境。它還將顯著增加對 WordPress 和托管公司的支持請求。不要認為這是可以接受的。因此，即使 WordPress 中需要圖像多 mime 支持，當前的方法似乎也不是一個好的解決方案。
因此，在撰寫本文時，尚不清楚是否會默認啟用在圖像子尺寸中使用 WebP 格式，或者站點管理員是否必須選擇在其網(wǎng)站前端提供 WebP 格式。同時，JPEG 到 WEBP 的自動轉(zhuǎn)換已暫時禁用。
流體排版
WordPress 6.1通過 CSS 函數(shù) calc / clamp 增加了對流體排版（Fluid Typography）的支持。
流體排版描述了文本適應(yīng)視口寬度的能力，從最小寬度平滑縮放到最大寬度。
這與您可以通過媒體查詢實現(xiàn)的不同，因為媒體查詢允許主題根據(jù)特定視口大小調(diào)整文本大小，但在不同值之間不做任何事情。
一些主題已經(jīng)支持流暢的排版。例如，Twenty Twenty-2 將 CSS函數(shù) 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)"
}
}
}
}正如您在上面的代碼中看到的，流體字體大小值用于每個單獨的字體大小。
現(xiàn)在，從 WordPress 6.1 開始，主題可以通過如下聲明新屬性typography.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 支持中的技術(shù)細節(jié)：添加流暢的排版。
另請參閱Rich Tabor 的How to add Fluid Typography to WordPress Block Themes和Carolina Nymark的 Gutenberg Fluid Typography。
新的和改進的塊類型
將如此多的 Gutenberg 版本合并到核心中，WordPress 6.1 將帶來一個全新的目錄塊以及對現(xiàn)有塊類型的大量更改和改進。
新目錄塊
首次與Gutenberg 13.3一起引入，新的目錄塊現(xiàn)在可作為實驗塊使用。添加到您的帖子或頁面后，目錄塊將檢測添加到內(nèi)容中的任何標題塊，并將它們顯示為有序列表中的錨鏈接。
為欄目 Columns 塊添加了邊框支持
欄目（Columns）塊現(xiàn)在利用新的 BorderBoxControl 組件，該組件使 WordPress 用戶能夠為列指定自定義邊框，還為每個邊框設(shè)置完全不同的樣式（另請參閱Column：向列塊拉取請求添加邊框支持）。
也可以在theme.json文件中設(shè)置單獨的邊框，如下所示：
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}開發(fā)人員可以在組件參考 – BorderBoxControl中閱讀有關(guān)新控件的更多信息。
圖像塊的邊框控制
Gutenberg 13.8引入了對圖像塊的所有邊框控件的支持。這一變化將在WordPress 6.1 中添加到核心。
評論塊改進
WordPress 6.1 還為我們帶來了改進的評論塊。從 WordPress 的下一版本開始，用戶將能夠在評論塊上使用更高級的編輯功能。
在下圖中，您可以看到評論塊設(shè)置側(cè)邊欄以及應(yīng)用于評論標題的更改。
自定義分類術(shù)語的文章術(shù)語塊變化
發(fā)布術(shù)語（Post Terms）塊已通過新的自定義分類變體得到增強。您現(xiàn)在可以注冊一個新的自定義分類法，比如“電影中的演員”文章類型，您將能夠?qū)⒎诸愋g(shù)語列表添加到當前文章或自定義文章類型。
下圖顯示了電影文章類型中的演員列表。
查詢塊的新父級過濾器
查詢塊現(xiàn)在可以使用新的父級過濾器來顯示具有相同父級的分層文章和頁面。
標題欄中的字體系列控件
標題塊現(xiàn)在支持字體系列控件。
圖庫塊中的水平和垂直間距
從 WordPress 6.1 開始，新的軸向間距控件允許您為圖庫塊中的圖像設(shè)置不同的水平和垂直間距。在創(chuàng)建圖像庫的布局時，此更改會帶來更大的靈活性。
封面圖片中的特色圖片
特色圖片仍然受到很多關(guān)注，并且在 WordPress 6.1 中，它們的使用范圍進一步擴大。從 6.1 開始，可以直接從 封面（Cover）塊占位符中選擇特色圖像，如下圖所示。
此更改應(yīng)有助于創(chuàng)建更一致的用戶體驗，使用戶更清楚他們正在定制的內(nèi)容。
此外，在媒體替換流程中添加了特色圖片切換。
文章導(dǎo)航鏈接的外觀工具
設(shè)置appearanceTools屬性允許您選擇默認禁用的幾個設(shè)置。
從 WordPress 6.1 開始，對于支持appearanceTools設(shè)置屬性的主題，您可以在Post Navigation Link中自定義鏈接顏色和字體系列。
一鍵鎖定容器內(nèi)部塊
現(xiàn)在，一個新的切換使用戶能夠通過單擊將塊鎖定在塊容器中。這適用于分組Group、封面Cover和欄目Column塊。
塊編輯器的附加功能和改進
雖然它是一個整合版本，但 WordPress 6.1 將帶來如此多的變化和改進，以至于不可能在一篇文章中將它們?nèi)苛谐觥３诵碌哪夸泬K和上面列出的更改之外，我們還將看到一下改進。
塊插入器中的模板部件變化
模板部分變體現(xiàn)在可在塊插入器中使用，從而更容易將模板部分添加到您的網(wǎng)站。
此更改使編輯過程更加直接和快捷，用戶只需單擊幾下即可快速查看模板部件的所有變體。
可視化邊距和填充
一個小而有用的改進是在用戶調(diào)整它們時突出顯示邊距和填充。這應(yīng)該更清楚在元素內(nèi)部或外部添加了多少空間。
設(shè)置側(cè)邊欄的改進
WordPress 6.1 還將展示對設(shè)置側(cè)邊欄的一些界面改進。
帖子設(shè)置側(cè)邊欄已略微重新設(shè)計。現(xiàn)在帖子格式、slug、模板和作者的字段已對齊并具有相同的寬度。此外，文章定時發(fā)布界面已被簡化，使體驗更易于理解。模板部分也已移至彈出框以節(jié)省空間并清理界面。
此外，模板面板已替換為模板鏈接。單擊時，模板鏈接會在彈出窗口中顯示默認模板。
發(fā)布彈出框設(shè)計更新
發(fā)布彈出窗口中的日期時間選擇器已經(jīng)過重新設(shè)計，現(xiàn)在使用“現(xiàn)有的 WordPress 組件和情感樣式”。
信息面板新增閱讀時間
頂部工具欄中的信息面板已得到改進，現(xiàn)在除了單詞、字符、標題、段落和塊外，還顯示閱讀時間。
預(yù)計閱讀時間按平均每分鐘 189 個單詞計算。在@wordpress/editor 內(nèi)容：將預(yù)計閱讀時間添加到編輯器中的目錄中閱讀更多。
新的和改進的構(gòu)建工具
WordPress 6.1 還將擴展站點構(gòu)建器（Site Builder）的功能。塊樣板（Block Patterns）將在更多地方提供，更多的模板類型選擇將改善模板編輯器中的編輯體驗。
為文章類型創(chuàng)建樣板
WordPress 6.0 引入了頁面創(chuàng)建樣板，這是一種在用戶每次創(chuàng)建新頁面時提供樣板選擇的方法。這樣，您不必從頭開始構(gòu)建頁面，而是可以從樣板中選擇樣板并填寫內(nèi)容，然后您就可以開始了。
要啟用此功能，至少一個塊樣板應(yīng)聲明對core/post-content塊類型的支持。
現(xiàn)在，從 WordPress 6.1 開始，此功能擴展到所有文章類型。您需要做的就是在您的樣板的 blockTypes 中包含core/post-content并設(shè)置相關(guān)的postTypes.
現(xiàn)在讓我們通過一個實際的例子來了解如何利用這個新特性。假設(shè)您有一個電影文章類型。
首先，您需要注冊一個塊模式，如此處所述。
或者您可以采用簡單的方法并使用隱式模式注冊（implicit pattern registration，為簡單起見，在此示例中，我們將使用隱式模式注冊）。
在主題文件夾的/patterns目錄中為您的塊模式創(chuàng)建一個 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 -->就是這樣。現(xiàn)在，每次創(chuàng)建新的電影文章類型時，屏幕上都會出現(xiàn)選擇樣板彈窗。
如果您希望模態(tài)顯示在多種文章類型上，只需添加用逗號分隔的相應(yīng) 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 -->有關(guān)創(chuàng)建模式的詳細視圖，請參閱能夠為頁面之外的其他文章類型使用創(chuàng)建樣板。
站點編輯器中的更多模板類型
使用 WordPress 6.0，站點編輯器中只能創(chuàng)建有限數(shù)量的模板：
從 WordPress 6.1 開始，可以為每個單獨的文章類型創(chuàng)建不同的模板。
您還可以添加和編輯核心和自定義分類的模板，甚至是單個分類或標簽。
如果您注冊自定義文章類型或自定義分類，它們將自動列在站點編輯器的模板選擇框中。
此外，選擇模板文章類型后，彈窗界面會提示用戶是為該類型的所有文章創(chuàng)建模板，還是為所選文章類型的特定文章創(chuàng)建新模板。
然后一個新的彈窗提供該文章類型可用的文章列表。
針對開發(fā)人員的變化
WordPress 6.1 還為開發(fā)人員添加了新的 API 和一些改進。
新的首選項持久性 API
WordPress 6.1 引入了一個全新的首選項持久性 API，它將編輯器首選項保存在 WordPress 數(shù)據(jù)庫而不是本地存儲中。
這樣，用戶偏好可以存儲在所有瀏覽器和設(shè)備上。
為此，@wordpress/data包中以前的持久性系統(tǒng)已被棄用，并引入了一個新包preferences-persistence。新包通過Rest API將數(shù)據(jù)保存到用戶元。數(shù)據(jù)也將保存在本地存儲中作為備用，以防用戶離線或請求中斷（另請參閱 pull # 39795）。
theme.json 支持設(shè)置按鈕樣式
使用 WordPress 6.1，您可以使用theme.json將按鈕樣式添加到您的主題中。這允許主題開發(fā)人員跨塊添加按鈕的一致性。一個例子是搜索塊，但第三方塊也將從這種變化中受益。
為此，wp-element-button將向按鈕元素添加一個新類以共享相同的樣式。
您可以通過在開發(fā)環(huán)境中將以下代碼添加到您的theme.json來測試此更改：
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}搜索塊變體現(xiàn)在支持查詢變量
WordPress 6.1 將支持基于查詢變量的搜索塊變體。這意味著您將能夠為您的用戶提供用于精細搜索任何類型內(nèi)容的搜索框。
在以下示例中，我們正在為帖子類型movies注冊一個塊變體。該示例基于Carolina Nymar 的關(guān)于塊變體的教程。
在您的（子）主題的函數(shù)文件中，添加以下代碼：
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' );現(xiàn)在，在您的（子）主題的assets文件夾中創(chuàng)建以下block-variations.js文件：
wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);現(xiàn)在重新加載您的WordPress 儀表板并在塊插入器中搜索電影搜索塊變體。
您可以在官方文檔中閱讀有關(guān)塊變體的更多信息。
全局樣式中的新按鈕元素
WordPress 5.9引入了全局樣式界面，使用戶能夠為其網(wǎng)站自定義樣式預(yù)設(shè)，無論是全局還是塊級別。
在第一個實現(xiàn)中，您可以自定義背景、文本和鏈接的顏色。現(xiàn)在，從 WordPress 6.1 開始， “顏色”面板中添加了一個新的按鈕元素，使用戶能夠控制整個網(wǎng)站上按鈕的外觀。
這將影響整個站點的所有按鈕樣式，從按鈕塊到搜索塊和使用按鈕的第三方塊。
總結(jié)
WordPress 6.1 確實有很多新功能，但要該版本做出最終評估還為時過早。另外，在撰寫本文時，我們還沒有達到功能凍結(jié)期限，因此可能在11 月 1 日的最終發(fā)布之前，仍舊會有更多新功能和改進。
雖然我們已經(jīng)可以相當確定由于Gutenberg的 11 個版本合并到核心中我們將看到的新功能，但我們還不確定如何實現(xiàn)JPEG到WebP的轉(zhuǎn)換，并且可能會在上面列出的內(nèi)容中添加其他更改。
請繼續(xù)關(guān)注WordPress大學，我們將不斷發(fā)布關(guān)于WordPress 6.1 的最新消息。
