WordPress 5.9 的新功能——完整的站點編輯、全局樣式、塊、模式、API、UI 增強等等

已發表: 2022-01-13

WordPress 5.9 約瑟芬來了！今年的第一個 WordPress 版本最初計劃於 2021 年 12 月 14 日發布。由於幾個未解決的問題和未解決的錯誤，最終發布被推遲，最終於 2022 年 1 月 25 日發布。

如果您想知道 WordPress 5.9 中的新功能，簡短的回答是完整站點編輯(FSE)。

事實上，許多 5.9 功能只有在您使用支持完整站點編輯的主題時才可用，例如全新的默認主題二十二十二。

二十二十二預覽，顯示文字“類別：鳥類”和各種鳥類的圖片。 — 新的 WordPress 默認主題二十二十二的預覽。（圖片來源：WordPress.org）

使用 WordPress 5.9，我們進入了古騰堡路線圖第二階段的核心：定制階段，主要關注全站點編輯、塊模式、塊目錄和基於塊的主題。

隨著下個月發布的 5.9，我們——我會說——在 MVP，即古騰堡這個定制階段的最小可行產品。

Matt Mullenweg 在 2021 State of the Word 中的這些話最能概括新 WordPress 版本的主要功能。

Gutenberg 路線圖，顯示了四個主要改進目標的四個塊：更容易編輯、自定義、協作和多語言。 — 古騰堡路線圖。（圖片來源：Matt Mullenweg：2021 State of the Word）

也就是說，2022 年第一個 WordPress 版本有什麼新功能？

讓我們來了解一下！

全局樣式： theme.json的圖形界面

隨著 2021 年 WordPress 5.8 的發布，操作 theme.json 文件成為主題開發人員自定義編輯器設置和样式的標準方式。

WordPress 5.9 通過引入圖形界面將事情提升到一個新的水平，該界面允許用戶在全局或塊級別為他們的網站自定義樣式預設，而無需編寫任何代碼。

全局樣式機制應該會顯著改變您習慣於自定義網站外觀的方式，因為全局樣式會影響 WordPress 網站設計的多個方面。

首先，全局樣式界面取代了定制器，現在是使用塊主題自定義設置和样式的唯一方法。同樣，將不再需要復雜的主題選項管理頁面。這提供了一種配置主題設置和样式的新標準方法，同時應該簡化主題開發工作流程。

借助全局樣式，WordPress 用戶可以更好地控制其網站的呈現方式，包括全局和每個塊類型，而不是單個頁面或帖子的上下文。

站點編輯器中現在提供了一個新的側邊欄，您將在其頂部找到一個小型預覽面板和四個組件，順序如下：

排版
顏色
佈局
塊

我們可以預期隨著時間的推移會添加新的組件。

全局樣式側邊欄在使用二十二十二主題的 WordPress 頁面上打開，顯示排版選項，例如 — 帶有 Automattic 的 Blockbase 主題的 Global Styles 側邊欄。

讓我們仔細看看新界面。

它在這裡！您需要了解的有關 WordPress 5.9 的所有信息，盡在一篇大型文章中點擊推文
[號召性用語]

樣式預覽

全局樣式側邊欄中的第一個元素是預覽面板。此面板允許您檢查自定義結果，並且當您的更改應用於站點編輯器畫布中不可見的元素時特別有用。

下圖顯示了比較的三種不同樣式組合：

並排顯示三種不同顏色（綠色、黃色和海軍藍）的全局樣式預覽。 — 比較全局樣式預覽。

排版

排版面板是您控製網站排版的地方。當然，此面板中可用的控件取決於您的theme.json設置。

例如，二十一個二十一個街區 (TT1 Blocks) 主題聲明了以下排版屬性：

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

下圖顯示了全局樣式側欄中生成的排版設置：

TT1 Blocks Global Styles 中的排版設置，顯示三個並排的面板，其中包含各種排版選項，例如字體系列、文本大小和顏色。 — TT1 Blocks Global Styles 中的排版設置。

讓我們深入一點，看看 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" } ]

您可以在全局樣式預覽面板中查看這些字體系列：

應用了不同字體系列的相同文本（“Aa”）的六個不同預覽。 — 二十一個街區中可用的字體系列。

顏色

在顏色部分，您可以查看和編輯調色板並自定義多個站點元素的顏色。

通過單擊這些元素，您可以訪問一個新面板，您可以在其中從三個調色板中選擇顏色：核心、主題和自定義調色板（閱讀更多默認顏色、主題顏色和自定義顏色）。

TT1 塊顏色設置，顯示三個獨立調色板選項的各種色環：主題、默認和自定義。 — 二十一個街區的顏色設置

在此面板中，您將能夠設置和修改當前元素的顏色。

佈局

最後一組工具用於佈局自定義。在全局上下文中，這僅限於站點容器。

全局樣式面板中的全局填充設置，顯示之前填充像素大小的更改。 — 二十一個街區的佈局設置。

塊

隨著全局樣式機制的實施，現在還可以更改特定塊的外觀，例如段落（排版和顏色）、按鈕（佈局）和列（顏色和佈局）。

請注意，僅當塊在相應的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塊支持顏色、間距和排版，您將在 Post Title 塊的 Global Styles 設置中找到相應的條目。

下圖顯示了排版設置，您可以輕鬆地與上面的代碼進行比較：

WordPress 5.9 中的帖子標題排版設置，顯示了多種選項，包括（其中包括）帖子標題（突出顯示）、帖子作者、表格、網站標題和導航。 — 自定義帖子標題排版設置

值得注意的是，WordPress 5.9 僅提供了 Global Styles 接口的第一個實現。正如 Matias Ventura 所指出的，我們可以合理地期待新風格控制功能的進一步發展：

將來，系統中將內置流程，允許您從本地樣式轉移到全局樣式 - 例如對按鈕塊進行自定義，並選擇將它們全局更改應用於該類型的所有按鈕。

因此，我們可能很快就會看到重大改進。下圖只是我們可能期望的一個示例：

用於更改鏈接狀態顏色的可能未來面板的模型，包括“休息”、“懸停”、“聚焦”和“已選擇”選項。 — 將來，您可以控制鏈接狀態顏色。（圖片來源 GitHub）

其他改進可能包括主題提供替代調色板和多種全局樣式變化的能力。

上週，我將一些 22-22 的顏色 + 字體變體構建成超級簡單的兒童主題。它們真的很輕巧，我喜歡一鍵為人們提供一個截然不同的網站的想法。 https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
— kjellr (@kjellr) 2021 年 11 月 15 日

開發人員可以在 Global Settings & Styles (theme.json) 支持文章中深入了解全局樣式機制。您將在我們對二十二十二默認主題的介紹中找到其他示例。

導航塊

導航塊被稱為“最具影響力的主題塊之一”，我們不害怕說我們同意。

該塊已經處於萌芽階段有一段時間了（另請參閱 Navigation Block Tracking Issue 和 Tracking Issue i2）。儘管如此，既然列為 WordPress 5.9 必備的所有未決問題和阻止程序都已修復，我們終於可以開始使用與 WordPress 5.9 合併到核心中的最強大的功能之一。
[號召性用語]

導航塊界面的快速概覽

剛開始使用新塊可能會有點混亂，但一旦你掌握了它，你就會體會到它的全部潛力。

WordPress 5.9 中的導航塊佔位符，顯示導航面板的選項，包括“選擇菜單”、“添加所有頁面”和“開始為空”。 — 導航塊佔位符

當您第一次添加導航塊時，塊佔位符提供三個選項，用於選擇現有的基於塊的菜單、創建包含所有頁面的菜單或從空菜單重新開始。

新的導航菜單還允許您導入通過經典主題可用的外觀菜單屏幕創建的菜單。

這意味著，如果您從經典主題過渡到塊主題，則無需重建現有菜單。您只需要選擇一個當前可用的“經典菜單”，它就會自動轉換為基於塊的導航菜單。

您可以在頁面的任何位置添加導航塊。例如，您可能會發現在長篇文章中創建目錄很有用，允許用戶跳轉到特定的內容部分。

通過單擊右側的加號 ( + ) 圖標，新的導航鏈接會立即添加到導航塊中（另請參閱 Gutenberg 11.7 發行說明），除非其他類型的塊已添加到菜單中。

單擊導航鏈接塊工具欄中的編輯按鈕可將菜單項轉換為自定義鏈接。這允許您單獨添加、編輯、重新排序和刪除項目。

您還可以通過單擊塊工具欄中的“轉換”按鈕將鏈接轉換為塊。這允許您將特定塊直接添加到導航菜單。

在嚮導航菜單添加塊時，自定義鏈接、間隔、站點徽標、主頁鏈接、社交圖標和搜索塊現在會向用戶公開。

在“設置”側邊欄中，您會找到一組全面的選項，用於控制導航菜單的多個方面。

佈局面板包括用於對齊、方向和環繞的控件。

導航塊還具有改進的顯示設置面板，帶有一個永遠在線的漢堡菜單選項。

您還可以自定義菜單和子菜單的文本和背景顏色。

最近添加到導航塊的另一個有用的附加功能是塊間隙支持，它增加了用戶控制菜單項之間距離的能力。

Typography 面板為字體系列、外觀、行高、裝飾和字母大小寫提供了一組控件。當您單擊右側的省略號圖標時，可以從出現的下拉菜單中打開/關閉所有這些控件。

導航塊：引擎蓋下

導航塊數據使用wp_navigation專用帖子類型存儲在數據庫中。

為什麼這對 WordPress 用戶來說很有趣，它是如何工作的？

假設您創建了一個導航菜單，其中包含兩個自定義鏈接和一個搜索框。安裝二十二十二主題後，菜單可能如下圖所示：

上面的導航塊以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）。

下圖顯示了上面帶有二十一個街區主題的菜單：

導航塊經歷了幾次迭代。您可以深入了解 Gutenberg 11.7、11.8 和 11.9 發行說明中的每個實現。

您還可以在新的導航塊開發說明和導航塊支持文章中閱讀有關導航塊的更多信息。
[號召性用語]

圖片庫、特色圖片和網站圖標

為了使圖像在不同的上下文中表現得更加一致，WordPress 5.9 為幾個塊提供了新功能和改進。圖庫塊已完全修改，而特色圖像和站點圖標塊的各種更改使用戶可以更精細地控制各自的圖像。

重構的畫廊塊

在 WordPress 5.8 中，自定義畫廊中圖像外觀的能力有些受限。無法更改圖像樣式或應用雙色調濾鏡。

此外，圖庫圖像中缺少重要功能，例如將自定義鏈接添加到圖庫中的單個圖像。

為了更好地理解單個圖像和圖庫中的圖像的兩個不同上下文中的圖像之間的這種不對稱的原因，讓我們看一下 WordPress 5.8 中代碼視圖中的圖庫塊：

請注意，圖像詳細信息僅存儲在圖庫塊分隔符中（另請參閱什麼是古騰堡塊？）。

這使得單個圖像的行為與畫廊中的圖像不同。

為了使圖像在兩種不同的上下文中表現一致，WordPress 5.9 引入了一個完全重構的 Gallery 塊，它現在的行為就像一個容器，用於存放圖形元素的集合，而不是圖像的無序列表。

在 WordPress 5.9 中，圖庫圖像使用核心的innerBlocks API 進行嵌套，並且每個圖像都存儲自己的一組詳細信息，就像單個圖像一樣。

WordPress 5.9 中代碼視圖中的圖庫塊。 — WordPress 5.9 代碼視圖中的圖庫塊

這是一個很大的增強，因為圖庫塊圖像現在支持核心圖像塊中可用的相同功能，例如圖像尺寸和雙色調過濾器，以及標準塊功能，例如拖放、複製、複製和刪除功能.

WordPress 5.9 中的圖庫塊。 — 在 WordPress 5.9 中檢查圖庫塊

使用新的圖庫塊，您將能夠單獨設置圖像樣式。這提供了廣泛的定制機會。

下圖顯示了畫廊中的多張圖片，每張圖片都有不同的圓角：

您還可以在同一圖庫中的不同圖像上使用不同的雙色調濾鏡。

雙色調濾鏡應用於圖庫塊中的不同圖像。 — 將不同的雙色調濾鏡應用於圖庫塊中的不同圖像

而且，當然，您可以為每個圖像分配一個特定的 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 } }, ... }, ... }

此功能允許用戶以最小的努力在他們的網站上創建令人敬畏的圖形效果。您可以通過新的二十二十二主題看到它的實際效果。

在新的帖子或頁面中，創建一個新的組塊並選擇它。您將在塊設置側欄中看到一個邊框面板。根據需要更改邊框寬度和样式並享受結果。

如果您是主題開發人員並希望將此功能添加到您的主題中，請打開您的theme.json文件並聲明邊框支持，如以下代碼所示：

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

保存文件並返回到您的 WordPress 儀表板。在新的帖子或頁面中，創建一個新的組塊並選擇它。您現在應該在塊設置側邊欄中看到一個邊框面板（另請參閱這個實驗性的 theme.json）。

列表視圖改進

在 WordPress 5.9 中，列表視圖得到了改進，現在具有拖放、可折疊部分和 HTML 錨點。

在列表視圖中拖放

如拉取請求 #33320 中所述，拖放已在列表視圖中實現，但由於性能問題而被禁用。

從 WordPress 5.9 開始，重新實現了列表視圖中的拖放功能。您可以再次將塊和塊組拖放到列表視圖中的任何位置。這極大地增強了編輯器的可用性，因為它允許您快速輕鬆地在頁面周圍移動塊和塊組。它有助於長篇文章和頁面，以及管理嵌套塊的複雜結構。

列表視圖可折疊部分

列表視圖的另一個重大改進是能夠展開/折疊嵌套塊的部分。這使您可以輕鬆導航複雜的塊結構，擴展單個塊組，同時將所有其餘塊折疊起來。

您還可以使用左右箭頭展開和折疊列表視圖部分。

列表視圖項上的 HTML 錨點

另一個有用的增強功能是能夠將 HTML 錨點添加到列表視圖中的塊並一目了然。

塊間隙間距控制

首次在 Gutenberg 11.4 中引入，現在與 WordPress 5.9 合併到核心中，新的塊間距控件允許您設置塊內項目之間的自定義距離。下面，您可以在具有二十二十二默認主題的 Columns 塊中看到具有不同塊間距值的預覽：

Gap Spacing 最初可用於特定的塊，包括按鈕、圖像、列、標題和導航，但將來應該將支持擴展到更多塊。

主題應該使用新的外觀工具屬性在theme.json中啟用間隙間距。您可以在我們深入了解二十二十二時了解更多關於外觀工具的信息。另請參閱拉取請求 #33991 和 #34630。

鏈接控制的豐富 URL 預覽

通過利用新的 REST url-details 端點，Link 控件現在提供了豐富的 URL 預覽，顯示了鏈接目標資源的詳細信息。

在其第一個實現中，此功能僅在 Post Editor 富文本組件中可用。在撰寫本文時，它還在站點編輯器中可用，但在導航和小部件編輯器中不可用。

從鏈接彈出創建頁面

WordPress 5.9 還具有改進的內聯鏈接 UI，顯示了一個全新的按鈕，可以直接從內聯鏈接彈出窗口創建新頁面。此功能僅在帖子編輯器中可用。

搜索塊的改進

搜索塊現在顯示按鈕和邊框顏色設置。

您現在還可以自定義背景和文本顏色以及邊框顏色和半徑。

塊尺寸的新控件

現在，用戶可以使用新的尺寸設置面板來控制頁面上塊佔用的空間。面板應包括高度、寬度、填充、邊距和可能的對齊控件，但並非所有屬性都可用於每個塊。

塊開發人員會在 GitHub 上找到<DimensionControl />組件，但請注意，它仍被標記為實驗性功能，在撰寫本文時可能會發生重大變化。

添加到小部件屏幕的新小部件組塊

現在，基於塊的小部件編輯器中提供了一個新的小部件組塊。最新塊允許您在小部件中添加一組塊，並在經典主題的小部件編輯器和定制器中添加標題。

您可以在基於塊的小部件編輯器和定制器中的塊小部件中閱讀有關小部件編輯器的更多信息。

Flex 佈局和新行塊

最初作為 Gutenberg 11.2 的實驗性功能引入，flex 佈局已擴展到多個塊，包括社交鏈接和組塊。

需要為您的 WordPress 網站提供快速、可靠且完全安全的託管服務？ Kinsta 提供所有這些以及來自 WordPress 專家的 24/7 世界級支持。查看我們的計劃

一些塊，例如社交鏈接塊，現在提供一組工具欄控件和側邊欄設置，允許您自定義 flex 佈局。

Navigation 塊和 Row 塊中提供了相同的功能，這是 Gutenberg 11.5 引入的 Group 塊的新變體。

下圖顯示了設置側欄中帶有佈局控件的 Row 塊：

下面，您可以在前端和 Chrome 的檢查器工具中看到相同的 Row 塊。

Chrome 檢查器工具中的行塊。 — Chrome 檢查器工具中的 Row 塊。

塊模式增強

塊模式首先在 WordPress 5.5 中引入，它允許 WordPress 用戶只需單擊幾下即可將復雜的即用型嵌套塊結構包含到他們的內容中。

現在，WordPress 5.9 通過對塊模式系統引入了一些增強功能，朝著設計民主化和用戶授權邁出了一大步。

那麼，WordPress 5.9 中的塊模式有什麼新功能？

模式目錄中的特色模式

塊插入器現在顯示從模式目錄動態檢索的特色塊模式，為用戶提供一種快速簡便的方法來查找流行模式以在其內容中使用。

同樣，隨著模式直接進入 WordPress 儀表板，應該鼓勵 WordPress 開發人員隨著時間的推移創建和發布越來越多的模式，從而為用戶提供越來越先進的設計能力。

新的全屏模式瀏覽器

隨著 Pattern Directory 中可用的塊模式數量不斷增長以及更多主題使用它們，WordPress 5.9 引入了一個新的塊模式導航界面：Pattern Explorer。

一個新的“探索”按鈕現在打開一個全屏模式，用戶只需單擊幾下即可瀏覽、搜索和插入塊模式。結果是改善了用戶體驗。

在我們深入了解 2222 WordPress 主題的過程中，您還可以找到其他註釋和幾個塊模式示例。

如果您有興趣並想了解更多信息，請收聽 Josepha Haden Chomphosy 的播客第 16 和 21 集，並觀看 Anne McCarthy 的 Exploring WordPress 5.9 YouTube 視頻。

二十二十二主題和 WordPress 塊主題

使用 WordPress 5.9，您不再需要安裝 Gutenberg 插件即可在您的 WordPress 網站上啟用完整站點編輯。您只需要允許塊主題利用所有 FSE 功能。

此外，WordPress 5.9 捆綁了一個全新的默認主題，二十二十二，它改變了遊戲規則，因為二十二十二是有史以來第一個默認塊主題。

二十二是一個高度靈活和可定制的主題。從 WordPress 5.9 開始，它提供了一個完美的沙箱來試用新的模板編輯流程、新塊、界面增強以及添加到核心的所有站點編輯功能。

二十二二預覽。 — 二十二十二是新的 WordPress 默認主題。（圖片來源：WordPress.org）

如上所述，您需要做的就是安裝並激活一個塊主題，例如二十二十二。一旦主題處於活動狀態，一個新的編輯器（測試版）菜單項將出現在 WordPress 儀表板管理菜單中。

站點編輯器界面現在具有改進的站點編輯流程。從編輯界面，您將能夠直觀地編輯站點的主頁、模板和模板部分，以及訪問全局樣式界面。

當您激活塊主題時，您將找不到定制器。這是因為定制器不支持僅使用站點編輯器的塊主題。這也是不能預覽非活動區塊主題的原因。

因此，從 WordPress 5.9 開始，當塊主題處於活動狀態時，定制器的訪問點在管理菜單中不再可用（除非您使用的是使用它的插件）。

如果您仍然依賴於傳統主題並且擔心向後兼容性，請高枕無憂：您可以繼續使用您的主題。

您目前有四種不同類別的主題可供選擇：

塊主題：為 FSE 設計的主題
通用主題：可與定制器和站點編輯器一起使用的主題
混合主題：支持 FSE 功能的經典主題，如 theme.json
經典主題：帶有 PHP 模板、functions.php 等的主題。

由於區塊主題可能會對 WordPress 生態系統產生影響，我們有一整篇文章涵蓋了二十二十二和 WordPress 區塊主題。請務必查看它以獲得更深入的概述。

性能改進

在 Kinsta，我們痴迷於網站速度。這就是為什麼我們對 WordPress 5.9 帶來的性能改進感到興奮。

這些改進將影響 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 還為開發人員引入了一些功能。

鎖定塊的新屬性

塊開發者現在可以通過在塊設置中添加lock屬性來阻止用戶移動或刪除單個塊：

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

啟用此功能後，用戶可以編輯塊內容，但不能在頁面上移動塊或將其從編輯器畫布中刪除。下圖顯示了一個帶有一組標準工具欄控件的自定義塊：

定義lock屬性，如上面的代碼所示，隱藏塊移動器以及塊工具欄中的Move to和Remove控件。下圖顯示了屏幕上的最終結果：

您還可以在塊模式中鎖定特定塊。例如，另請參閱 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' ) 。設置為base的orygin鍵允許忽略用戶保存的自定義數據。

以下示例代碼將返回contentSize設置值。在 2222 中，它將是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 5.9 終極指南：從 UI 增強到全局樣式（以及更多！）點擊鳴叫

概括

我們將用一個關於 WordPress 市場份額的快速說明來結束這篇文章。 WordPress 目前為 65% 以上的內容管理系統已知的網站提供支持，並且佔所有網站的 43% 。

這些數字令人印象深刻，尤其是與市場份額不到 5% 的最接近的競爭對手（如 Shopify）相比。

這也意味著您不能忽視 WP CMS 的演變。每個新版本的 WordPress 都會帶來新功能、界面增強、性能改進，WordPress 5.9 也不例外。測試新功能所需的只是塊主題，例如新的二十二十二默認主題，您就可以開始使用了。

現在交給你了！ 您準備好切換到阻止主題和 FSE 了嗎？ 您最喜歡 WordPress 5.9 帶來的哪些變化？