WordPress 5.9 Josephine在一月就悄然到來了！今年的第一個WordPress版本最初計劃於2021年12月14日釋出。由於幾個未解決的問題和未解決的錯誤，最終釋出被推遲，最終於2022年1月25日釋出。
如果您想知道WordPress 5.9中的新功能，簡短的回答是全站編輯(FSE)。
事實上，許多5.9功能只有在您使用支援完整站點編輯的主題時才可用，例如全新的預設主題2022。
新的WordPress預設主題2022的預覽。（圖片來源：WordPress.org）
使用WordPress 5.9，我們進入了古騰堡路線圖第二階段的核心：定製階段，主要關注全站點編輯、區塊樣板、區塊目錄和基於區塊的主題。
隨著下個月釋出的5.9，我們——我會說——在 MVP，即古騰堡這個定製階段的最小可行產品。
Matt Mullenweg在2021 State of the Word中的這些話最能概括新WordPress版本的主要功能。
古騰堡路線圖（圖片來源：Matt Mullenweg：2021 State of the Word）
也就是說，2022年第一個WordPress版本有什麼新功能？
全域性樣式：theme.json的圖形介面
隨著2021年WordPress 5.8的釋出，操作theme.json檔案成為主題開發人員自定義編輯器設定和樣式的標準方式。
WordPress 5.9通過引入圖形介面將事情提升到一個新的水平，該介面允許使用者在全域性或區塊級別自定義其網站的樣式預設，而無需編寫任何程式碼。
全域性樣式機制應該會顯著改變您習慣於自定義網站外觀的方式，因為全域性樣式會影響WordPress網站設計的多個方面。
首先，全域性樣式介面取代了定製器，現在是使用區塊主題自定義設定和樣式的唯一方法。同樣，將不再需要複雜的主題選項管理頁面。這提供了一種配置主題設定和樣式的新標準方法，同時應該簡化主題開發工作流程。
藉助全域性樣式，WordPress使用者可以更好地控制其網站的呈現方式，包括全域性和每個區塊型別，而不是單個頁面或文章的上下文。
站點編輯器中現在提供了一個新的側邊欄，您將在其頂部找到一個小型預覽面板和四個元件，順序如下：
我們可以預期隨著時間的推移會新增新的元件。
Automattic的Blockbase主題的全域性樣式側邊欄
讓我們仔細看看新介面。
樣式預覽
全域性樣式側邊欄中的第一個元素是預覽面板。此面板允許您檢查自定義結果，並且當您的更改應用於站點編輯器畫布中不可見的元素時特別有用。
下圖顯示了比較的三種不同樣式組合：
比較全域性樣式預覽
排版
排版面板是您控制網站排版的地方。當然，此面板中可用的控制元件取決於您的theme.json設定。
例如，2021區塊(TT1 Blocks) 主題宣告瞭以下排版屬性：
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}
下圖顯示了全域性樣式側欄中生成的排版設定：
TT1 Blocks全域性樣式中的排版設定
讓我們深入一點，看看TT1 Blocks主題是如何宣告的fontFamilies：
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"slug": "system-font",
"name": "System Font"
},
{
"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
"slug": "helvetica-arial"
},
{
"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
"slug": "geneva-verdana"
},
{
"fontFamily": "Cambria, Georgia, serif",
"slug": "cambria-georgia"
},
{
"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
"slug": "hoefler-times-new-roman"
}
]
您可以在全域性樣式預覽面板中檢視這些字型系列：
2021主題區塊中可用的字型系列
顏色
在顏色部分，您可以檢視和編輯調色盤並自定義多個站點元素的顏色。
2021主題的顏色面板
通過單擊這些元素，您可以訪問一個新面板，您可以在其中從三個調色盤中選擇顏色：核心、主題和自定義調色盤（閱讀更多預設顏色、主題顏色和自定義顏色）。
2021主題區塊的顏色設定
在此面板中，您將能夠設定和修改當前元素的顏色。
在全域性樣式中自定義連結顏色
佈局
最後一組工具用於佈局自定義。在全域性上下文中，這僅限於站點容器。
2021主題區塊的佈局設定
區塊
隨著全域性樣式機制的實施，現在還可以更改特定區塊的外觀，例如段落（排版和顏色）、按鈕（佈局）和列（顏色和佈局）。
請注意，僅當區塊在相應的block.json檔案中宣告支援特定功能時，才可以從全域性樣式介面自定義區塊樣式。例如，該區塊目前支援以下樣式：core/post-title
"supports": {
"align": [ "wide", "full" ],
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"margin": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true,
"fontAppearance": true,
"textTransform": true
}
}
},
由於core/post-title區塊支援顏色、間距和排版，您將在文章標題區塊的全域性樣式設定中找到相應的條目。
下圖顯示了排版設定，您可以輕鬆地與上面的程式碼進行比較：
自定義文章標題排版設定
值得注意的是，WordPress 5.9僅提供了全域性樣式介面的第一個實現。正如Matias Ventura指出的那樣，我們可以合理地期待新樣式控制功能的進一步發展：
將來，系統中將內建流程，允許您從本地樣式轉移到全域性樣式 – 例如對按鈕區塊進行自定義，並選擇將它們全域性更改應用於該型別的所有按鈕。
因此，我們可能很快就會看到重大改進。下圖只是我們可能期望的一個示例：
將來，您可以控制連結狀態顏色。（圖片來源GitHub）
其他改進可能包括主題提供替代調色盤和多種全域性樣式變化的能力。
上週，我將一些2022主題的顏色 + 字型變體構建成超級簡單的兒童主題。它們真的很輕巧，我喜歡一鍵為人們提供一個截然不同的網站的想法。
— kjellr (@kjellr) 2021年11月15日
開發人員可以在Global Settings & Styles (theme.json)支援文章中深入瞭解全域性樣式機制。
導航區塊
導航區塊被稱為“最具影響力的主題區塊之一”，我們不害怕說我們同意。
區塊已經處於萌芽階段有一段時間了（另請參閱Navigation Block Tracking Issue和Tracking Issue i2）。儘管如此，既然列為WordPress 5.9必備的所有未決問題和阻止程式都已修復，我們終於可以開始使用與WordPress 5.9合併到核心中的最強大的功能之一。
導航區塊介面的快速概覽
剛開始使用新區塊可能會有點混亂，但一旦你掌握了它，你就會體會到它的全部潛力。
導航區塊佔位符
當您第一次新增導航區塊時，區塊佔位符提供三個選項，用於選擇現有的基於區塊的選單、建立包含所有頁面的選單或從空選單重新開始。
選擇現有的導航選單
新的導航選單還允許您匯入通過經典主題可用的外觀選單螢幕建立的選單。
這意味著，如果您從經典主題過渡到區塊主題，則無需重建現有選單。您只需選擇一個當前可用的“經典選單”，它就會自動轉換為基於區塊的導航選單。
選擇經典選單
您可以在頁面的任何位置新增導航區塊。例如，您可能會發現在長篇文章中建立目錄很有用，允許使用者跳轉到特定的內容部分。
將錨連結新增到導航選單
通過單擊右側的加號 ( + ) 圖示，新的導航連結會立即新增到導航區塊中（另請參閱Gutenberg 11.7發行說明），除非其他型別的區塊已新增到選單中。
導航區塊附加程式，顯示導航連結
單擊導航連結區塊工具欄中的編輯按鈕可將選單項轉換為自定義連結。這允許您單獨新增、編輯、重新排序和刪除專案。
將導航選單轉換為單個頁面連結
您還可以通過單擊區塊工具欄中的“轉換”按鈕將連結轉換為區塊。這允許您將特定區塊直接新增到導航選單。
將導航連結轉換為區塊
在嚮導航選單新增區塊時，自定義連結、間隔、站點徽標、主頁連結、社交圖示和搜尋區塊現在會向使用者公開。
在“設定”側邊欄中，您會找到一組全面的選項，用於控制導航選單的多個方面。
佈局面板包括用於對齊、方向和環繞的控制元件。
導航區塊佈局設定
導航區塊還具有改進的顯示設定面板，帶有一個永遠線上的漢堡選單選項。
導航區塊的改進顯示設定面板
您還可以自定義選單和子選單的文字和背景顏色。
導航區塊顏色設定
最近新增到導航區塊的另一個有用的附加功能是區塊間隙支援，它增加了使用者控制選單項之間距離的能力。
導航區塊上的區塊間距控制
Typography面板為字型系列、外觀、行高、裝飾和字母大小寫提供了一組控制元件。當您單擊右側的省略號圖示時，可以從出現的下拉選單中開啟/關閉所有這些控制元件。
導航區塊排版設定
導航區塊：Under the Hood
導航區塊資料使用wp_navigation 專用的文章型別儲存在資料庫中。
為什麼這對WordPress使用者來說很有趣，它是如何工作的？
假設您建立了一個導航選單，其中包含兩個自定義連結和一個搜尋框。安裝2022主題後，選單可能如下圖所示：
導航區塊示例
上面的Navigation區塊以post型別wp_navigation儲存在資料庫中，如下所示：
<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->
將導航區塊內容儲存到資料庫中，使使用者能夠跨不同的區塊主題使用相同的導航選單。如果選單不是立即可見，您只需在選單選擇器中選擇所需的導航選單（另請參見問題#36087和 PR #36178）。
下圖顯示了上面帶有2021區塊主題的選單：
選擇2021主題區塊中的選單
導航區塊經歷了幾次迭代。您可以在Gutenberg 11.7、11.8和11.9發行說明中深入瞭解每個實現。
您還可以在新的導航區塊開發說明和導航區塊支援文章中閱讀有關導航塊的更多資訊。
圖片庫、特色圖片和網站圖示
為了使影象在不同的上下文中表現得更加一致，WordPress 5.9為幾個區塊提供了新功能和改進。相簿區塊已完全修改，而特色影象和站點圖示區塊的各種更改使使用者可以更精細地控制各自的影象。
重構的畫廊區塊
在WordPress 5.8中，自定義畫廊中影象外觀的能力有些受限。無法更改影象樣式或應用雙色調濾鏡。
此外，相簿影象中缺少重要功能，例如將自定義連結新增到相簿中的單個影象。
為了更好地理解單個影象和相簿中的影象的兩個不同上下文中的影象之間的這種不對稱的原因，讓我們看一下WordPress 5.8中程式碼檢視中的相簿區塊：
WordPress 5.8中程式碼檢視中的相簿區塊
請注意，影象詳細資訊僅儲存在相簿區塊分隔符中（另請參閱什麼是古騰堡區塊？）。
檢查WordPress 5.8中的相簿區塊
這使得單個影象的行為與畫廊中的影象不同。
為了使影象在兩種不同的上下文中表現一致，WordPress 5.9引入了一個完全重構的Gallery區塊，它現在的行為就像一個用於容納圖形元素集合的容器，而不是一個無序列的影象列表。
在WordPress 5.9中，相簿影象使用核心innerBlocksAPI巢狀，並且每個影象都儲存自己的一組詳細資訊，就像單個影象一樣。
WordPress 5.9程式碼檢視中的相簿區塊
這是一個很大的增強，因為相簿區塊影象現在支援核心影象塊中可用的相同功能，例如影象尺寸和雙色調過濾器，以及標準區塊功能，例如拖放、複製、複製和刪除功能.
在WordPress 5.9中檢查相簿區塊
使用新的相簿區塊，您將能夠單獨設定影象樣式。這提供了廣泛的定製機會。
下圖顯示了畫廊中的多張圖片，每張圖片都有不同的圓角：
新的Gallery區塊是單個Image區塊的包裝器
您還可以在同一相簿中的不同影象上使用不同的雙色調濾鏡。
將不同的雙色調濾鏡應用於相簿區塊中的不同影象
而且，當然，您可以為每個影象分配一個特定的CSS類，這為您提供了額外的超能力，可以為您的相簿影象新增任何您需要的自定義。
有關新Gallery區塊的詳細檢視，另請參閱Gallery Block Refactor Dev Note、即將到來的Gallery Block改進和Gutenberg 11.4發行說明。
特色影象增強
特色影象區塊也進行了一些改進。
基本尺寸控制
特色影象區塊現在具有一個新的尺寸設定面板，提供高度、寬度和比例控制元件。
特色影象尺寸面板
維度控制也適用於查詢迴圈區塊中的特色影象，如下圖所示：
查詢迴圈區塊中的特色影象尺寸
特色影象上的雙色調濾鏡
我們在上面提到，我們現在可以在新重構的Gallery區塊中包裝的影象中應用雙色調過濾器。
現在，從WordPress 5.9開始，雙色調過濾器也可以在任何上下文中的特色影象區塊中使用，從文章和頁面模板到查詢迴圈區塊。
查詢迴圈區塊中的特色影象上的雙色調過濾器
此功能為整個網站的創意和一致的顏色組合開啟了大門。
網站徽標中的影象裁剪
在WordPress 5.9（和Gutenberg 11.6）之前，徽標影象只能在上傳之前進行編輯。使用WordPress 5.9，您可以直接從區塊工具欄裁剪、縮放和旋轉站點徽標區塊中使用的影象。
編輯站點徽標影象
新的設計工具、模組和UI增強
11個Gutenberg版本與WordPress 5.9合併到核心中，提供瞭如此多的功能、增強功能和錯誤修復，不可能在一篇文章中涵蓋所有這些。
因此，我們挑選了一些我們認為最值得關注的內容。要更深入地瞭解這些功能和改進，您可能還需要檢視Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8, 和 11.9.
話雖如此，本節將涵蓋以下更改：
邊框支援UI
從WordPress 5.9開始，當theme.json宣告border設定並且塊通過Block Supports API宣告邊框支援時，一個新的設定面板將提供對邊框半徑、寬度、樣式、顏色和單位的控制（另見Gutenberg 11.1）。
核心Group區塊是這種有用的UI增強的一個很好的例子。Group區塊的block.json檔案現在包含以下supports宣告：
{
...
"supports": {
"align": [ "wide", "full" ],
"anchor": true,
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"padding": true,
"__experimentalDefaultControls": {
"padding": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
...
},
...
}
此功能允許使用者以最小的努力在他們的網站上建立令人敬畏的圖形效果。您可以通過新的2022主題看到它的實際效果。
在新的文章或頁面中，建立一個新的組區塊並選擇它。您將在區塊設定側欄中看到一個邊框面板。根據需要更改邊框寬度和樣式並享受結果。
具有自定義邊框配置的組區塊與2022主題
如果您是主題開發人員並希望將此功能新增到您的主題中，請開啟您的theme.json檔案並宣告邊框支援，如以下程式碼所示：
{
"version": 1,
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
}
儲存檔案並返回到您的WordPress儀表板。在新的文章或頁面中，建立一個新的組區塊並選擇它。您現在應該在區塊設定側邊欄中看到一個邊框面板（另請參見這個實驗性的theme.json）。
列表檢視改進
在WordPress 5.9中，列表檢視得到了改進，現在具有拖放、可摺疊部分和HTML錨點。
在列表檢視中拖放
如pull request #33320中所述，拖放已在列表檢視中實現，但由於效能問題而被禁用。
從WordPress 5.9開始，重新實現了列表檢視中的拖放功能。您可以再次將區塊和區塊組拖放到列表檢視中的任何位置。這極大地增強了編輯器的可用性，因為它允許您快速輕鬆地在頁面周圍移動區塊和區塊組。它有助於長篇文章和頁面，以及管理巢狀區塊的複雜結構。
在列表檢視中拖放
列表檢視可摺疊部分
列表檢視的另一項重大改進是能夠展開/摺疊巢狀區塊的部分。這使您可以輕鬆導航複雜的區塊結構，擴充套件單個區塊組，同時將所有其餘區塊摺疊起來。
您還可以使用左右箭頭展開和摺疊列表檢視部分。
一組擴充套件的區塊
列表檢視項上的HTML錨點
另一個有用的增強功能是能夠將HTML錨點新增到列表檢視中的區塊並一目瞭然。
列表檢視中的HTML錨點
區塊間隙間距控制
首次在Gutenberg 11.4中引入，現在與WordPress 5.9合併到核心中，新的區塊間距控制元件允許您設定區塊內專案之間的自定義距離。下面，您可以在具有2022預設主題的欄目區塊中看到具有不同區塊間距值的預覽：
控制WordPress 5.9中的欄目區塊間距
Gap Spacing最初可用於特定的區塊，包括按鈕、影象、列、標題和導航，但將來應該將支援擴充套件到更多區塊。
主題應該使用新的外觀工具屬性在theme.json中啟用間隙間距。您可以在我們深入瞭解2022主題的文章中瞭解更多關於外觀工具的資訊。另請參閱pull requests#33991和#34630。
連結控制的豐富URL預覽
通過利用新的REST url-details端點，Link控制元件現在提供了豐富的URL預覽，顯示了連結目標資源的詳細資訊。
文章編輯器中的豐富URL預覽
在其第一個實現中，此功能僅在文章編輯器富文字元件中可用。在撰寫本文時，它還在站點編輯器中可用，但在導航和小部件編輯器中不可用。
從連結彈出建立頁面
WordPress 5.9還具有改進的內聯連結UI，顯示了一個全新的按鈕，可以直接從內聯連結彈出視窗建立新頁面。此功能僅在文章編輯器中可用。
WordPress 5.9具有新的內聯連結UI
搜尋區塊的改進
搜尋區塊現在顯示按鈕和邊框顏色設定。
搜尋區塊顏色設定
搜尋區塊邊框顏色和半徑設定
區塊尺寸的新控制元件
現在，使用者可以使用新的尺寸設定面板來控制頁面上區塊佔用的空間。面板應包括高度、寬度、填充、邊距和可能的對齊控制元件，但並非所有屬性都可用於每個區塊。
WordPress 5.9中組區塊的填充控制元件
Block開發人員會在GitHub上找到該<DimensionControl />元件，但請注意，它仍被標記為實驗性功能，在撰寫本文時可能會發生重大更改。
新增到小部件螢幕的新小部件組區塊
現在，基於區塊的小部件編輯器中提供了一個新的小部件組區塊。最新區塊允許您在小部件中新增一組區塊，並在經典主題的小部件編輯器和定製器中新增標題。
2021主題中的小部件組區塊
您可以在基於區塊的小部件編輯器和定製器中的區塊小部件中閱讀有關小部件編輯器的更多資訊。
Flex佈局和新行區塊
最初作為Gutenberg 11.2的實驗性功能引入，flex佈局已擴充套件到多個區塊，包括社交連結和組區塊。
一些區塊，例如社交連結區塊，現在提供一組工具欄控制元件和側邊欄設定，允許您自定義flex佈局。
社交連結區塊工具欄中的佈局控制元件
導航區塊和Row區塊中提供了相同的功能，這是Gutenberg 11.5引入的Group區塊的新變體。
下圖顯示了設定側欄中帶有佈局控制元件的Row區塊：
具有佈局設定的新行區塊
下面，您可以在前端和Chrome的檢查器工具中看到相同的Row區塊。
Chrome檢查器工具中的Row區塊
區塊樣板增強
區塊樣板首先在WordPress 5.5中引入，它允許WordPress使用者只需單擊幾下即可將複雜的即用型巢狀區塊結構包含到他們的內容中。
現在，WordPress 5.9通過對區塊樣板系統引入了一些增強功能，朝著設計民主化和使用者授權邁出了一大步。
那麼，WordPress 5.9中的區塊樣板有什麼新功能？
樣板目錄中的特色樣板
區塊插入器現在顯示從Pattern Directory動態檢索的特色區塊樣板，為使用者提供一種快速簡便的方法來查詢流行樣板以在其內容中使用。
WordPress 5.9中的按鈕區塊樣板
同樣，隨著樣板直接進入WordPress儀表板，應該鼓勵WordPress開發人員隨著時間的推移建立和釋出越來越多的樣板，從而為使用者提供越來越先進的設計能力。
新的全屏樣板瀏覽器
隨著Pattern Directory中可用的區塊樣板數量不斷增長以及更多主題使用它們，WordPress 5.9引入了一個新的區塊樣板導航介面：Pattern Explorer。
WordPress 5.9中的全屏樣板樣板
一個新的“探索”按鈕現在開啟一個全屏樣板，使用者只需單擊幾下即可瀏覽、搜尋和插入區塊樣板。結果是改善了使用者體驗。
區塊插入器中的特色區塊樣板
在我們深入瞭解WordPress主題2022的過程中，您還可以找到其他註釋和幾個區塊樣板示例。
如果您有興趣並想了解更多資訊，請收聽Josepha Haden Chomphosy的播客16和21集，並觀看Anne McCarthy的Exploring WordPress 5.9 YouTube視訊。
2022主題和WordPress區塊主題
使用WordPress 5.9，您不再需要安裝Gutenberg外掛即可在您的WordPress網站上啟用完整站點編輯。您只需要允許區塊主題利用所有FSE功能。
此外，WordPress 5.9捆綁了一個全新的預設主題，2022，它改變了遊戲規則，因為2022是有史以來第一個預設區塊主題。
2022是一個高度靈活和可定製的主題。從WordPress 5.9開始，它提供了一個完美的沙箱來試用新的模板編輯流程、新區塊、介面增強以及新增到核心的所有站點編輯功能。
2022是新的WordPress預設主題。（圖片來源：WordPress.org）
如上所述，您需要做的就是安裝並啟用一個區塊主題，例如2022。一旦主題處於活動狀態，一個新的編輯器（測試版）選單項將出現在WordPress儀表板管理選單中。
WordPress 5.9中的新外觀選單
站點編輯器介面現在具有改進的站點編輯流程。在編輯介面中，您將能夠直觀地編輯站點的主頁、模板和模板部分，以及訪問全域性樣式介面。
編輯器導航選單
當您啟用區塊主題時，您將找不到Customizer。這是因為定製器不支援僅使用站點編輯器的區塊主題。這也是不能預覽非活動區塊主題的原因。
實時預覽不適用於區塊主題
因此，從WordPress 5.9開始，當區塊主題處於活動狀態時，定製器的訪問點在管理選單中不再可用（除非您使用的是使用它的外掛）。
如果您仍然依賴於傳統主題並且擔心向後相容性，請高枕無憂：您可以繼續使用您的主題。
您目前有四種不同類別的主題可供選擇：
- 區塊主題：為FSE設計的主題
- 通用主題：可與定製器和站點編輯器一起使用的主題
- 混合主題：支援FSE功能的經典主題，如theme.json
- 經典主題：帶有PHP模板、functions.php等的主題。
由於區塊主題可能會對 WordPress 生態系統產生影響，我們有一篇涵蓋2022和WordPress區塊主題的整篇文章。請務必檢視它以獲得更深入的概述。
效能改進
這些改進將影響CMS的多個領域，從區塊編輯器到區塊主題、延遲載入等等。
區塊插入器增強功能
從WordPress 5.9開始，區塊型別、樣板和類別在區塊插入器中延遲呈現。瀏覽器首先載入更高優先順序的內容，為使用者提供更流暢的編輯體驗並提高效能。
區塊編輯器上下文中進一步顯著的效能增強會影響可重用區塊和列表檢視。
載入較少的CSS
至於前端，WordPress 5.9大幅減少了區塊主題載入的CSS數量，從而顯著加快了頁面載入速度。
在這種情況下應該注意的主要改進是引入了theme.json設定和樣式機制，它可以防止主題使用大量樣式表，包括數百個CSS宣告。主題使用的CSS程式碼量現在已減少到任何區塊型別都可以重用的幾個CSS自定義屬性。
延遲載入效能改進
圖片延遲載入最早是在WordPress 5.5中引入的。從WordPress 5.7開始，延遲載入功能被擴充套件到iframe，允許網站所有者構建更快的網站並改善他們的SEO。
無論如何，在對最大內容繪製 (LCP)進行分析之後，結果表明將loading="lazy"屬性分配給頁面上的所有影象和iframe會導致效能輕微下降。
簡單地跳過loading="lazy"屬性不是一個解決方案，因為這樣做會導致失去延遲載入的明顯優勢。
最佳解決方案是僅省略出現在首屏上方的影象的屬性loading="lazy"。但是，由於loading="lazy"屬性是在伺服器端分配的，因此WordPress無法確定哪些影象準確地顯示在首屏上方。這主要取決於活動主題。
現在，作為一種權衡解決方案，從WordPress 5.9開始，loading="lazy"屬性不會應用於第一個內容影象或iframe。對50個流行的WordPress主題進行的分析發現，該解決方案可以顯著提高效能，並且頁面載入速度提高了30%。
Felix Arntz解釋了它是如何工作的：
…為了提高開箱即用的效能，而不需要開發人員自定義行為，WordPress現在將跳過頁面上的第一個“內容影象或iframe”，以免延遲載入。此處的術語“內容影象或iframe”表示在當前主查詢迴圈中的任何文章的內容中找到的任何影象或 iframe，以及此類文章的任何特色影象。這適用於“單一”和“歸檔”內容：在“單一”上下文中，（唯一）文章的第一個影象或 iframe 不是延遲載入的，而在“歸檔”上下文中，第一個影象或iframe的查詢中的第一個文章不是延遲載入的。
主題開發人員現在可以使用新wp_omit_loading_attr_threshold過濾器來更改要從延遲載入中跳過的影象/iframe的數量。
每個區塊多個樣式表
區塊和主題開發人員可以在每個區塊上註冊多個樣式表，並在需要時從其他區塊載入樣式。這可以根據頁面內容載入樣式表，防止主題在每個頁面上載入巨大的樣式表。
根據Ari Stathopoulos的說法：
區塊現在可以註冊多個樣式表，並在需要時從其他區塊載入樣式。主題將能夠在每個區塊的基礎上新增樣式，而不是載入在任何地方強制載入的單一樣式表。這對基於頁面和佈局內容優化樣式表載入的區塊主題有更大的影響，但也可以被經典主題使用。
開發人員的附加功能
除了到目前為止討論的許多功能和UI增強功能外，WordPress 5.9還為開發人員引入了一些功能。
注：如果您不熟悉WordPress區塊開發，請務必檢視我們的權威區塊開發教學
鎖定區塊的新屬性
區塊開發者現在可以通過在區塊設定中新增lock屬性來阻止使用者移動或刪除單個區塊：
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}
啟用此功能後，使用者可以編輯區塊內容，但不能在頁面上移動區塊或將其從編輯器畫布中刪除。下圖顯示了一個帶有一組標準工具欄控制元件的自定義區塊：
帶有常規工具欄的自定義區塊
定義lock屬性，如上面的程式碼所示，隱藏區塊移動器以及區塊工具欄中的移動到和刪除控制元件。下圖顯示了螢幕上的最終結果：
沒有移動和刪除控制元件的自定義區塊
您還可以在區塊樣板中鎖定特定塊。例如，另請參閱WordPress 5.9中的鎖定區塊。
訪問全域性設定和樣式的新API
WordPress 5.9引入了一個新的PHP公共API來從theme.json讀取資料。
從theme.json讀取設定和樣式
有兩個新函式可以從theme.json中宣告的settings和styles部分讀取資料:
wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );
$path是一個陣列，列出了指定設定的路徑$context是為這些資料設定上下文的陣列。開發人員可以從特定的區塊設定部分讀取 – 例如，array( 'block_name' => 'core/paragraph' ).orygin設定為base允許忽略使用者儲存的自定義資料的鍵。
以下示例程式碼將返回contentSize設定值。在2022，它將是650px：
wp_get_global_settings( array( 'layout', 'contentSize' ) );
通過設定上下文，您可以檢索特定區塊的樣式。以下程式碼顯示瞭如何檢索core/button區塊的邊界半徑值：
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button' )
);
}
上面的函式在考慮預設設定、主題設定和使用者資料的同時返回所需的屬性值。如果使用者在全域性樣式介面中配置按鈕邊框半徑，將提供自定義值。
要忽略使用者資料，您將使用以下程式碼：
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button', 'origin' => 'base' )
);
}
獲取生成的樣式表
WordPress 5.9還引入了一個新函式來獲取由預設、主題和自定義樣式生成的樣式表：
wp_get_global_stylesheet( $types = array() );
$types是要生成的樣式列表。
您可以在New API中閱讀有關新API的更多資訊，以訪問全域性設定和樣式。
面向開發人員的更多功能
您可能想了解的針對開發人員的其他WordPress 5.9更改包括：
- 區塊主題，一種在WordPress 5.9中構建主題的新方法
- 設定、樣式和theme.json的更新
- WordPress 5.9中以主題為中心的更改和過濾器
- WordPress 5.9中的新功能查詢
- WordPress 5.9中的其他核心更改
- WordPress 5.9中的其他區塊編輯器更改
- 對內部區塊區域進行更多控制（作為區塊開發人員）
小結
我們將用一個關於WordPress市場份額的快速說明來結束這篇文章。WordPress目前為 65% 以上的內容管理系統已知的網站提供支援，並且佔所有網站的43%。
這些數字令人印象深刻，尤其是與市場份額不到 5% 的最接近的競爭對手（如Shopify）相比。
這也意味著您不能忽視WP CMS的演變。每個新版本的WordPress都會帶來新功能、介面增強、效能改進，WordPress 5.9也不例外。測試新功能所需的只是區塊主題，例如新的2022預設主題，您就可以開始使用了。
評論留言