WordPress 6.2新特性:瀏覽模式、樣式手冊、改進的導航選單、新的API,以及更多的內容

WordPress 6.2新特性

WordPress 6.2已經定於2023年3月28日釋出,現在是時候讓我們探索一下2023年的第一個版本會有什麼。

隨著WordPress 6.2的釋出,我們進入了Gutenberg長期發展路線圖第二階段的最後階段,區塊編輯器也正式離開了測試階段

這個版本主要側重於改進介面和簡化編輯體驗。

引入了一種在模板和模板部分之間導航的新方法,以及將小工具匯入區塊主題的能力,一個新的無干擾寫作模式,一個按比例的區塊設定體驗,以及對現有區塊、效能和可用性的大量大小改進。

但是,如果說有什麼在功能和可用性方面的飛躍,那就是導航區塊。自從它首次釋出以來,導航選單已經經歷了幾次迭代,隨著時間的推移,已經大大簡化了編輯過程。隨著WordPress 6.2的釋出,發展仍在繼續,在這篇文章中,我們將向你展示:

  1. 改進的編輯體驗
  2. 擴充套件的區塊功能
  3. 增強的設計工具
  4. 開發人員應該注意的項

改進的編輯體驗

WordPress 6.2帶來了一個改進的編輯體驗,整個網站結構被置於中心位置。你現在可以更容易地管理導航選單,從單個區塊推送樣式變化到全域性樣式,並通過彩色模板部件和可重用區塊毫不費力地在模板和模板部件之間導航。

但還有更多。讓我們詳細探討一下編輯器介面的主要新增內容和變化。

  1. 改良後的網站編輯介面和瀏覽模式
  2. 無干擾模式
  3. 標籤式區塊檢查器
  4. 彩色模板部件和可重複使用的區塊
  5. 改良後的區塊插入器
  6. 區塊插入器中的Openverse整合
  7. 將小工具遷移到區塊主題中
  8. 檔案詳情和列表檢視的結合

改良後的網站編輯介面和瀏覽模式

隨著WordPress 6.2的推出,對編輯器介面的幾項改進也進入了核心。第一個也是最有趣的更新影響了網站編輯器介面。由於有了一個新的瀏覽模式,現在更容易瀏覽模板和模板部分。

WordPress 6.2的網站編輯器介面

WordPress 6.2的網站編輯器介面

新的介面還允許你直接從編輯器的側邊欄新增一個新的模板或模板部分,只需點選位於選單標題右側的加號(+)圖示即可。

WordPress 6.2網站編輯器的模板選單

WordPress 6.2網站編輯器的模板選單

根據Wp核心和文件貢獻者Ryan Welcher的說法,”關於這項功能的工作正在進行,並將隨著新的Gutenberg版本的釋出而繼續改進”。

在WordPress 6.2中新增一個新的模板

在WordPress 6.2中新增一個新的模板

現在的工作流程更順暢、更無縫。要開始編輯當前的模板/模板部分,只需點選左側選單中的編輯按鈕,或點選頁面中間的模板預覽。

點選編輯按鈕或模板預覽來編輯一個模板

點選編輯按鈕或模板預覽來編輯一個模板

無干擾模式

WordPress 6.2引入了一個新的無干擾編輯模式,它從畫布上削減了雜亂無章的內容,使你能夠專注於頁面的內容。

啟用無干擾模式

啟用無干擾模式

你可以通過點選右上角的省略號(三個點)圖示,在顯示的選項面板中啟用這一功能

一旦啟用無干擾模式,無關的側邊欄和工具欄就會消失,螢幕上只留下你正在工作的內容。

標籤式區塊檢查器

WordPress 6.2引入了一個新的區塊檢查器,旨在通過將設定控制劃分為獨立的面板,給側邊欄帶來秩序。

區塊設定現在被劃分為標籤,以將樣式設定與其他區塊設定分開。

如果有的話,Block Inspector的標籤將按以下順序顯示:

  • 列表檢視: 包括管理一個區塊的子項的控制元件,如導航區塊中的子選單和連結。
  • 設定: 包括與區塊的外觀無關的配置設定
  • 外觀: 包括專門與當前區塊的樣式有關的設定,如排版和顏色

WordPress 6.2中按鈕區塊的新標籤式設定側邊欄

WordPress 6.2中按鈕區塊的新標籤式設定側邊欄

這對介面的可用性是一個明顯的改進,特別是對於像組區塊或導航區塊這樣有許多配置選項的高階區塊。

請注意:

  • 新的檢查器只在包含要顯示的元素時顯示一個標籤。
  • 如果設定選項卡只包含高階面板,它就會被移到外觀選項卡上。
  • 如果區塊檢查器只有一個標籤,那麼它就會像WordPress 6.2之前那樣顯示。

檢視開發說明以瞭解新的區塊檢查器的詳細情況。

彩色模板部件和可重複使用的區塊

為了更容易地將它們與組和區塊區分開來,模板部件和可重複使用的區塊現在在列表檢視、區塊插入器、區塊工具條和編輯器畫布中以不同的顏色突出顯示。

列表檢視中的彩色模板部件

列表檢視中的彩色模板部件

這發生在網站編輯器和文章編輯器中,如下圖所示:

文章編輯器中的彩色可重複使用區塊

文章編輯器中的彩色可重複使用區塊

改良後的區塊插入器

區塊插入器受到幾個變化的影響,大大改善了整體編輯體驗。

首先,新的介面設計改善了圖案和媒體類別之間的導航,併為圖案和媒體專案提供更大的預覽

WordPress 6.2中區塊插入器的樣板預覽

WordPress 6.2中區塊插入器的樣板預覽

當網站上存在媒體時,一個媒體選項卡會顯示在區塊插入器中,以簡化內容中的媒體插入。你可以拖放圖片/媒體,或者直接點選你的媒體,將其新增到內容中。

區塊插入器中的新媒體標籤

區塊插入器中的新媒體標籤

在這個標籤裡面,一個開啟媒體庫的按鈕把你帶到WordPress的媒體庫。

區塊插入器中的Openverse整合

Openverse是一個旨在分享公開許可或公共領域作品的工具,供任何人使用。現在,在WordPress 6.2中,Openverse被整合到了Block Inserter中

要訪問這個新功能,點選Block Inserter的Media標籤。這將顯示一個帶有搜尋欄位的面板,以及直接從Openverse資源庫獲取的圖片預覽。

Openverse現在已整合到區塊插入器中

Openverse現在已整合到區塊插入器中

有關技術細節,請參見Openverse整合拉取請求

將小工具遷移到區塊主題中

從WordPress 6.2開始,執行一個使用經典主題的網站的使用者,如果決定切換到一個區塊主題,可以將他們現有的小工具區域遷移到新的主題,將它們轉換為模板部分

讓我們來看看它是如何工作的。

首先,在一個經典主題中建立一個小工具區域。例如,你可以啟用Twenty-Eleven,並在頁尾區域一新增一個日曆。

在Twenty Eleven中新增一個小工具

在Twenty Eleven中新增一個小工具

現在把主題改為Twenty Twenty-Three。開啟網站編輯器,選擇一個模板進行編輯,並新增一個模板部分。

在Twenty Twenty-Three主題的模板中新增模板部分

在Twenty Twenty-Three主題的模板中新增模板部分

在區塊側邊欄,從匯入小部件區域的下拉選單中選擇要匯入的小工具區域

在WordPress 6.2中匯入小工具區域

在WordPress 6.2中匯入小工具區域

而這就是了。現在你可以像其他模板部分一樣管理你以前的小工具區域。

預覽匯入的小工具區域

預覽匯入的小工具區域

檔案詳情和列表檢視的結合

在WordPress 6.2之前,編輯器工具欄上有兩個獨立的按鈕,分別是詳情列表檢視。在下圖中,你可以看到WordPress 6.1中的文件詳情彈出視窗,包括字數、字元數、閱讀時間,以及頁首、段落和區塊的數量,還有文件大綱。

WordPress 6.1中的 "詳細資訊 "彈出視窗

WordPress 6.1中的 “詳細資訊 “彈出視窗

從WordPress 6.2開始,列表檢視和詳情已被移到一個單一的文件大綱面板,分為兩個標籤: 列表檢視大綱

WordPress 6.2中新的文件大綱面板

WordPress 6.2中新的文件大綱面板

這一變化應該為管理該檔案提供一種更容易的方式。

擴充套件的區塊功能

隨著WordPress 6.2的推出,幾個核心區塊型別的功能都得到了擴充套件。這對導航區塊來說尤其如此,它受到了編輯體驗的幾個變化和改進的影響。

讓我們來詳細看看主要的變化。

  1. 基於列表的導航區塊編輯
  2. 鎖定導航
  3. 從區塊工具條上新增/刪除標題
  4. 對頁面列表區塊的改進
  5. 新的組區塊佔位符
  6. 支援固定位置區塊
  7. 對區塊編輯體驗的額外改進

基於列表的導航區塊編輯

隨著WordPress 6.2的釋出,可以從區塊設定側邊欄的列表檢視中改變導航區塊元素的排列。

新的選單標籤顯示導航選單的列表檢視

新的選單標籤顯示導航選單的列表檢視

點選該選單項將使你進入所選頁面連結的設定側欄,在那裡你將能夠編輯連結的細節,包括標籤、URL、描述、連結標題和連結關係。

頁面連結設定側邊欄

頁面連結設定側邊欄

這一變化大大簡化了導航選單的編輯體驗,允許你在選單中新增、安排和刪除專案,甚至建立新的導航選單。

鎖定導航

導航區塊的另一個改進是能夠以更精細的方式鎖定選單編輯。現在你可以限制編輯禁止移動防止刪除,而在WordPress 6.1中,只有限制編輯禁止移動選項可用。

此外,選擇的選項也可以應用於內部區塊(連結和子選單)。

WordPress 6.2中的鎖定導航

WordPress 6.2中的鎖定導航

從區塊工具條上新增/刪除說明文字

一個新的新增/刪除說明文字按鈕允許使用者從區塊工具欄上控制幾個區塊(音訊、視訊、影象)的說明文字

如果你已經設定了一個說明文字,當你把圖片新增到你的內容中時,它將被自動包含。

從區塊工具條上新增/刪除說明文字

從區塊工具條上新增/刪除說明文字

對頁面列表區塊的改進

有兩項改進涉及到頁面列表區塊

首先,頁面列表塊現在可以被展開,以顯示列表檢視面板中的頁面列表

列表檢視中擴充套件的頁面列表區塊

列表檢視中擴充套件的頁面列表區塊

此外,區塊側邊欄的一個新選項現在允許你設定一個起始頁,並在區塊中只顯示從它開始的頁面。

為頁面列表區塊設定一個父頁面

為頁面列表區塊設定一個父頁面

新的組區塊佔位符

現在,當組區塊被新增到頁面內容中時,組區塊佔位符會顯示一個變體選取器

WordPress 6.2中的組區塊佔位符

WordPress 6.2中的組區塊佔位符

支援固定位置區塊

WordPress 6.2引入了一個新的位置區塊支援功能,首先是固定位置

這個新功能目前只適用於組區塊,在預設情況下,它被選擇加入。

主題開發者可以使用theme.json中的 appearanceTools 功能在他們的主題上啟用固定位置。如果你想對外觀工具進行更精細的控制,你也可以將 settings.position.sticky 道具設定為 true

你可以在Inspector控制元件側邊欄的Position面板中啟用固定位置。

在組區塊中設定位置為固定

在組區塊中設定位置為固定

在開啟固定位置的情況下,HTML標籤會得到一個 is-position-sticky 類,一些CSS規則適用於相應的元素:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}
.wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}

使用Twenty Twenty-Three主題的固定位置示例

使用Twenty Twenty-Three主題的固定位置示例

固定位置只對文件根部的組區塊起作用。雖然這可能會防止使用者的混淆和錯誤,但目前你可能會發現內建的固定位置有點棘手(你可能想檢查不同的方法來為你的WordPress網站新增一個置頂header)。然而,根據開發說明、

……在人工測試中,反饋表明,如果沒有額外的UI或UX工作,如果使用者不小心將一個非根區塊設定為固定,或者例如,將一個標題模板部分中的區塊設定為固定,可能會對試圖建立固定header的使用者造成混亂。我們決定在6.2版本中將該功能縮減到只針對根區塊,以便有更多的時間來探索適合巢狀區塊的解決方案。

位置功能只適用於單個區塊,所以你不會在全域性樣式中找到它。

對區塊編輯體驗的額外改進

區塊編輯的其他一些顯著的升級包括以下內容:

增強的設計工具

WordPress 6.2引入的許多新功能和改進都增強了CMS的風格和設計能力。下面是6.2版本中最有趣的與設計有關的功能的列表;我們將進一步詳細介紹每個功能。

  1. 樣式手冊
  2. 全域性樣式中的陰影
  3. 新的最小高度尺寸控制
  4. 樣式面板中的自定義CSS
  5. 在區塊之間複製和貼上樣式
  6. 在全域性範圍內應用區塊變化
  7. 使用間距視覺化器改進設計體驗

樣式手冊

WordPress 6.2引入了一個新的樣式手冊功能,允許使用者預覽可以在他們的網站上使用的任何區塊,而不必將這些區塊新增到模板/模板部分。你可以通過點選現在顯示在全域性樣式內的樣式header中的開啟樣式手冊按鈕(眼睛圖示)來啟動樣式手冊

這將開啟一個介面,按類別顯示每個核心和第三方區塊的預覽。

樣式手冊介面

樣式手冊介面

新的Style Book介面通過在一個集中的位置提供每一個區塊樣式的預覽,簡化了設計過程。

從技術角度來看,新的介面是由新增到 @wordpress/edit-site 的一個新的 StyleBook 元件產生的,以在一個iframe中顯示每個註冊區塊的預覽(見PR #45960)。

同樣的介面也提供單個區塊的預覽。作為一個例子,下面的圖片顯示了一個定製的日曆小工具的預覽。

定製和預覽日曆區塊

定製和預覽日曆區塊

開發者可以通過兩種方式隱藏一個區塊,使其不被插入和預覽。首先,你可以在block.json中把 supports.inserter 設為 false :

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"supports": {
"inserter": false
}
}
{ "supports": { "inserter": false } }
{
"supports": {
"inserter": false
}
}

另一種隱藏區塊預覽的方法是避開 example 屬性,該屬性用於在檢查器幫助面板中建立區塊的預覽(在此閱讀更多內容)。

全域性樣式中的陰影

在WordPress 6.2中,現在可以使用全域性樣式或theme.json為一些區塊新增和定製陰影(截至本文寫作時,陰影功能只對Button區塊可用)。

首先,在支援該功能的主題中,你可以從全域性樣式介面中新增陰影。

要看到它的作用,啟用Twenty Twenty-Three主題,導航到樣式>區塊>按鈕,然後點選陰影按鈕。

一個陰影彈出視窗允許你從主題預設中選擇一個陰影。

在區塊樣式中設定陰影

在區塊樣式中設定陰影

主題開發者和高階使用者也可以使用theme.json給區塊新增陰影。下面的定義為Button區塊新增了一個4px的黑色陰影:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},
"styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},

你也可以定義預設,讓主題使用者能夠從樣式介面中選擇一個:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}
"settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}

一旦定義好了,你的預設就會出現在Shadow面板的樣式區塊中。

區塊樣式中的自定義陰影預設

區塊樣式中的自定義陰影預設

你也可以挑選一個預設值並將其作為區塊預設值:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}
"styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}

新的最小高度尺寸控制

從WordPress 6.2開始,組和文章內容區塊的區塊設定側邊欄的尺寸面板現在提供了一個新的最小高度控制,在使用 appearanceTools 功能的主題中預設啟用。

組區塊的最小高度控制

組區塊的最小高度控制

這個新的控制元件允許使用者為組和文章內容區塊設定一個最小高度,並且可以用來在頁面底部呈現頁尾,即使內容很少。

與新的垂直對齊工具相結合,它還允許在頁面的頂部/中心/底部垂直對齊內部元素。

開發者可以通過在theme.json中新增 minHeight 設定來為主題增加對最小高度的支援:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"settings": {
dimensions: "minHeight": true
}
}
{ "settings": { dimensions: "minHeight": true } }
{
"settings": {
dimensions: "minHeight": true
}
}

你也可以使用 appearanceTools 屬性:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"settings": {
"appearanceTools": true
}
}
{ "settings": { "appearanceTools": true } }
{
"settings": {
"appearanceTools": true
}
}

新的 minHeight 屬性也可以用來直接在theme.json中設定一個特定的值:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}
{ "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}

區塊的開發者可以在他們的block.json檔案中新增 supports.dimensions.minHeight 屬性,並將其值設定為 true。對於靜態區塊,CSS  min-height 規則將被儲存為內聯樣式,而對於動態區塊,它將被包含在 get_block_wrapper_attributes 返回的樣式屬性中。

樣式面板中的自定義CSS

與主題定製器相比,網站編輯器缺少的一個功能是新增自定義CSS樣式的能力。WordPress 6.2填補了這個空白,現在全域性樣式介面包括一個文字欄位,可以新增自定義的CSS規則,當你更新你的主題時,這些規則不會被覆蓋。

區塊樣式面板中的額外區塊CSS

區塊樣式面板中的額外區塊CSS

你可以在per-block的基礎上新增自定義樣式,從區塊樣式面板,或通過點選樣式工具欄上的更多樣式操作按鈕。這將顯示一個彈出式選單,顯示一個額外的CSS元素。

WordPress 6.2中的額外CSS文字區

WordPress 6.2中的額外CSS文字區

為了支援自定義CSS,一個新的 styles.css 屬性已經被新增到theme.json中。

自定義CSS規則可以完全覆蓋theme.json中設定的任何自定義樣式。如果你不希望發生這種情況,你可能要考慮使用現有的佇列方法包括樣式表。

你也可以使用 styles.blocks.block.css 屬性在theme.json中新增per-block自定義CSS:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}
"styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}

你也可以對巢狀元素和偽選擇器使用 & 。

要仔細瞭解新的自定義CSS功能,請參見全域性樣式和每個區塊的自定義CSS

在區塊之間複製和貼上樣式

區塊的工具欄的選項選單中的一個新組現在顯示兩個按鈕,用於複製樣式貼上樣式。在這個新增功能之前,只能複製樣式,但不清楚如何貼上樣式

WordPress 6.2中的複製樣式

WordPress 6.2中的複製樣式

要嘗試這個新功能,請新增一個新的區塊,比如說標題。改變樣式並從區塊選項選單中選擇複製樣式

允許谷歌瀏覽器檢視複製到剪貼簿的文字和影象

允許谷歌瀏覽器檢視複製到剪貼簿的文字和影象

然後選擇另一個區塊,選擇貼上樣式。複製的樣式將被自動應用到第二個區塊。

在WordPress 6.2中貼上樣式

在WordPress 6.2中貼上樣式

注意,這個功能只在支援瀏覽器的安全(https)網站上可用。有關其他細節,請參閱拉取請求

在全域性範圍內應用區塊變化

WordPress 6.2還在高階面板下為單個區塊引入了一個 “全域性應用” 按鈕,允許你將區塊樣式的變化推送到全域性樣式,並在整個網站上應用這些變化。

在WordPress 6.2中全域性應用區塊樣式的按鈕

在WordPress 6.2中全域性應用區塊樣式的按鈕

感謝這個新功能,將區塊的排版、間距、尺寸和顏色樣式應用到該型別的所有區塊上,現在就像按下一個按鈕一樣簡單(也請看這個拉取請求)。

使用間距視覺化器改進設計體驗

間距顯示器允許你預覽應用在一個區塊上的邊距或填充量。在WordPress 6.2中,這一功能得到了加強,增加了一些改進編輯經驗的內容。

首先,現在只要你把滑鼠懸停在margin或padding控制元件上,就可以看到Spacing Visualizer。

第二,現在只要你把滑鼠懸停在間距設定上,間距展示器就會自動隱藏區塊工具條,這樣你就可以在沒有區塊工具條的干擾下預覽新的邊距和填充設定。

沒有區塊工具條的間距顯示器

沒有區塊工具條的間距顯示器

這些變化雖小,但意義重大,影響了相當數量的核心區塊。

開發人員應該注意的項

WordPress 6.2也為開發者帶來了許多新的功能:新的API、錯誤修復、效能改進,以及更多。讓我們深入瞭解最吸引人的新增功能。

  1. 新的HTML API
  2. 樣板API和新的template_types屬性
  3. React v18.0和併發模式
  4. 對開發者的其他變化

新的HTML API

WordPress 6.2引入了HTML標籤處理器,這是一個符合HTML5規範的分析器,它提供了一種安全的方式來尋找特定的HTML標籤,並通過PHP新增、刪除或更新屬性。HTML標籤處理器是一個新的HTML處理API中的第一個元件。

這個新的API使得以前需要使用正規表示式才能完成的複雜任務變得容易。

在下面的例子中,我們只需將 alt 屬性新增到一個 img 標籤中:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();
$html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();

這段程式碼將產生以下 img 標籤:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<img alt="Hello WordPress 6.2" src="/my-image.jpg">
<img alt="Hello WordPress 6.2" src="/my-image.jpg">
<img alt="Hello WordPress 6.2" src="/my-image.jpg">

$p->next_tag() 方法移動到HTML中下一個可用的標籤。它還接受一個標籤名稱、一個CSS類或兩者,以尋找特定的標籤,如上面的例子所示。

要編輯HTML標籤,你首先要選擇目標標籤:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$p->next_tag();
$p->next_tag();
$p->next_tag();

一旦您選擇了目標標記,您就可以使用API方法來執行若干操作:

  • $p->get_tag()
  • $p->set_attribute()
  • $p->get_attribute()
  • $p->remove_attribute()
  • $p->add_class()
  • $p->remove_class()

你可以設定一個樣式屬性:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();
$html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();

你也可以新增或刪除一個類或一個屬性。在下面的程式碼中,我們為 h1 標籤新增一個自定義類:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();
$html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();

然後你可以使用 $p->get_updated_html() 方法來回聲或返回更新的標籤。

要想更仔細地瞭解新的HTML API,請看WordPress核心提交者Adam Zieliński的這個互動式PHP教程

樣板API和新的 template_types 屬性

樣板API允許WordPress開發者 “建立預先設計好的內容區塊,可以很容易地插入到文章、頁面、自定義文章型別和模板中”。

在WordPress 6.2中,模式API現在包括一個新的 template_types 屬性,允許你指定某個區塊樣板可以在哪些模板中使用。

Jorge Costa強調,這只是一個後臺的更新,目前還沒有相應的使用者體驗功能。然而,我們可以期待在WordPress 6.3中看到這個功能的進化的實現

在為WordPress 6.3考慮的第一個用法是,當使用者開始建立一個模板時,向使用者展示一些在模板上有意義的模式。使用者可以從一個模式開始,而不是從 “空白” 或後退模板開始。

在技術方面, register_block_pattern() 函式已經被修改,包括一個新的 template_types 引數,這是一個字串陣列,包含了區塊樣板所要使用的模板名稱。

REST API也被修改,以返回一個區塊樣板的模板型別,如果至少有一個已經被定義。

React v18.0和併發模式

WordPress 6.2還提供了一個新版本的React庫,現在已經更新到18.0版本。新版本帶有新的API、功能、改進和錯誤修復。React v18.0的主要功能之一是引入了併發模式,”一種新的幕後機制,使React能夠同時準備多個版本的UI”。

React中的併發模式的主要特徵之一是它是可中斷的:

React保證,即使渲染被打斷,使用者介面也會顯示一致。為了做到這一點,它等待執行DOM突變,直到最後,一旦整個樹已經被評估。有了這種能力,React可以在後臺準備新的螢幕而不阻塞主執行緒。這意味著UI可以立即響應使用者的輸入,即使它正處於一個大型的渲染任務中,創造一個流暢的使用者體驗。

主要的好處是,使用者介面可以立即響應使用者的輸入,並與它在後臺執行的工作保持一致。

然而,併發性也帶來了潛在的隱患,開發者應該注意。關於WordPress 6.2中React的併發模式的更深入的概述,請檢視開發說明中提供的例子。

對開發者的其他變化

開發人員應注意的其他值得注意的變化包括以下內容:

  • WordPress 6.2引入了一個新的JavaScript過濾器,可以用來在編輯器在螢幕上呈現之前過濾區塊的設定。新的 blockEditor.useSetting.before 過濾器還允許開發者根據區塊的位置、當前使用者角色、鄰近的區塊等來修改設定。更多資訊和使用例子,請看WordPress 6.2中任何區塊的自定義設定
  • 引入了一個新的 skipBlockSupportAttributes 道具來排除與 ServerSideRender 元件中的區塊支援相關的屬性和樣式。
  • 一個新的theme.json API現在允許從theme.json中對現有的核心區塊變化進行樣式設計
  • 在Twenty Twelve到Twenty Seventeen的捆綁主題中,谷歌字型現在包含在本地,而不是從谷歌地址獲取。

但這還不是全部。WordPress 6.2引入了許多功能、改進和錯誤修復,為了簡潔起見,我們在這裡沒有提及。要獲得更全面的概述,請檢視WordPress 6.2欄位指南

小結

WordPress 6.2讓我們更接近Gutenberg專案第二階段的結束,該階段名為定製化。但是,正如Matias Ventura所指出的,這並不意味著定製化的工作已經完成,在未來的版本中。一如既往,我們可以期待根據社羣的反饋對編輯器進行額外的改進。

在這篇文章中,我們探討了WordPress 6.2的一些主要功能、改進和錯誤修復。但是在6.2中還有更多。隨著Gutenberg外掛的十個版本進入核心–從14.2到15.1–我們將看到一個新的瀏覽模式,一個標籤式的區塊檢查器,Widgets到區塊主題的遷移,新的API,以及大量的改進和錯誤修復。此外,還將對可訪問性國際化進行改進。

評論留言