WordPress 6.4新功能:區塊鉤子、改進工作流、新設計工具和預設主題…

WordPress 6.4新功能:區塊鉤子、改進工作流、新設計工具和預設主題…

文章目录

  • 區塊鉤子
  • 通過 block.json 鉤住區塊
  • 使用 hooked_block_types 勾住區塊
  • 增強樣板系統
  • Twenty Twenty-Four 主題
  • 新的設計工具和功能
  • 內容區塊的顏色控制元件
  • 支援背景圖片區塊
  • 影象的燈箱效果
  • 垂直文字方向
  • 腳註區塊的增強功能
  • 導航區塊中允許使用的按鈕
  • 改進使用者介面和工作流
  • 增強的命令面板
  • 改進的列表檢視
  • 捕捉工具欄
  • 針對開發人員的效能改進和其他更改
  • 指令碼載入策略
  • 附件頁面的更改
  • 進度條元件
  • WordPress 6.4 中的載入樣板
  • 減少檔案存在性檢查
  • 新選項函式
  • 針對開發人員的其他更改
  • 小結

WordPress 6.4新功能:區塊鉤子、改進工作流、新設計工具和預設主題…

WordPress 6.4 計劃於 11 月 7 日釋出,現在是時候讓我們探索一下新版 WordPress 最值得關注的功能和改進了。

最值得關注的新增功能包括區塊鉤子(Block Hooks)、改進的模式組織、重新設計和增強的命令調色盤、附件頁面的更改、圖片的燈箱效果,以及寫作工作流程的多項改進。

改進的模板載入、完善的指令碼載入策略和其他效能增強功能將使您的 WordPress 網站執行得更快,而列表檢視增強功能和對管理使用者介面的多項升級將使其更易用、更易訪問。

WordPress 6.4 還帶來了一個新的預設主題,其中包含大量現成可用的模式和模板,可簡化您的編輯流程。

東西還真不少,不是嗎?別再等了,讓我們來看看 WordPress 6.4 有哪些新功能吧。

區塊鉤子

區塊鉤子(原名自動插入區塊)可讓外掛與古騰堡編輯器自動互動。

更確切地說,有了區塊鉤子,當內容中新增了另一個區塊時,該區塊就會被自動放置在特定位置。

區塊鉤子的工作方式應遵循兩個原則:

  • 使用者無需在編輯器中手動插入區塊,而且在前端插入區塊應在提供掛鉤區塊的外掛啟用後立即進行。停用外掛應自動移除區塊。
  • 區塊在編輯器中應是可見的,使用者應能控制自動插入。

為了兼顧這兩項原則並保留程式碼中包含的資訊,掛鉤區塊只適用於未修改的模板和模板部分,以及主題提供的模式、從模式目錄中複製的模式或使用 register_block_pattern 函式註冊的模式。它們無法在文章內容、修改過的模板和模板部分以及使用者生成的模式中使用。

此外,開發說明還警告說

自 WordPress 6.4 起,您不能自動插入具有儲存功能的區塊,否則會出現區塊驗證錯誤。通俗地說,這意味著 Block Hooks 適用於動態區塊,而非靜態區塊。

瞭解更多關於靜態區塊和動態區塊的資訊。

你可以通過兩種方式實現區塊鉤子:使用 block.json 檔案或新的 hooked_block_types 過濾器。

通過 block.json 鉤住區塊

使用 block.json 是掛鉤第三方區塊的快速而簡單的方法,但它並不具有很大的靈活性,這意味著通過 block.json 自動插入的區塊將無條件地附加到目標的所有例項上。

你可以使用新的 blockHooks 屬性新增掛鉤區塊,該屬性接收鍵/值對物件,其中鍵是你要掛鉤的區塊名稱,值則指定其相對於目標區塊的位置。

你可以設定以下位置之一:

  • before 目標區塊
  • after 目標區塊
  • 目標容器區塊的 firstChild (首個子區塊)
  • 目標容器區塊的 lastChild (最後一個子區塊)

例如,您可以使用 blockHooks 將一個區塊鉤住每個 Spacer 區塊:

{
blockHooks: {
'core/spacer': 'after'
}
}

在 block.json 中使用 firstChild 或 lastChild 時,區塊檢查器中會出現一個新的外掛面板,其中列出了計劃自動插入的區塊,並提供了選擇加入/退出自動插入區塊的切換按鈕。

啟用自動插入

啟用自動插入(圖片來源 PR #52969)

使用 hooked_block_types 勾住區塊

使用新的 hooked_block_types 過濾器可以更靈活地將區塊掛鉤到目標。它允許你像使用 block.json 方法一樣無條件地掛鉤區塊,或根據條件掛鉤區塊,例如,根據區塊所在的模板、模板部分或模式,將區塊掛鉤到目標。

hooked_block_types 的回撥函式接受四個引數:

  • $hooked_blocks – 已掛鉤區塊的陣列。
  • $position – 可以是 before, after, first_child, 或 last_child。
  • $anchor_block – 錨點區塊的名稱。
  • $context – 錨點區塊所屬的區塊模板、模板部件或樣板。

有關 Block Hooks 的更多技術資訊,請參閱開發說明。

增強樣板系統

區塊樣板是一種強大的設計工具,可用於內容或模板中,讓您輕鬆構建複雜的區塊結構。您可以使用區塊主題提供的樣板,也可以從樣板目錄中複製更多樣板。

你也可以在網站/文章編輯器介面從頭開始建立你的樣板。如果你擅長編碼,還可以通過 .php 檔案將模式新增到當前主題或子主題中。如今,樣板在 WordPress 中非常重要,因此我們釋出了一份深入指南,介紹有關區塊樣板的一切。

在 WordPress 6.3 中建立樣板

在 WordPress 6.3 中建立樣板

既然如此,讓我們來看看 WordPress 6.4 中的樣板系統有哪些新功能。

首先是樣板分類。在以前的 WordPress 版本中,建立新樣板時只能設定樣板名稱和型別、同步或不同步。

從 WordPress 6.4 開始,您還可以為您的樣板新增一個類別,以便在站點和文章編輯器中更容易地識別。

在 WordPress 6.4 中建立樣板

在 WordPress 6.4 中建立樣板

也可以在編輯樣板時更改類別。

編輯樣板類別

編輯樣板類別

此外,還刪除了區塊插入器的 “Synced patterns(同步樣板)”選項卡,現在您可以從同一個 “Patterns(樣板)”選項卡訪問所有樣板。

WordPress 6.3與WordPress 6.4中的區塊插入器選項卡對比

WordPress 6.3與WordPress 6.4中的區塊插入器選項卡對比

從網站編輯器以 JSON 格式匯入或匯出樣板也更加方便。

從站點編輯器以 JSON 格式匯出樣板

從站點編輯器以 JSON 格式匯出樣板

其他更改提高了樣板與經典主題的相容性,併為未來的實施鋪平了道路。

Twenty Twenty-Four 主題

Twenty Twenty-Four 是 WordPress 6.4 的新預設 WordPress 主題。它是一款多功能而又簡約的 WordPress 主題,專為三種主要使用情況量身定製:小企業主、攝影師和藝術家以及作家和博主。

Twenty Twenty-Four 並不為您的網站新增功能。它更像是一個模板和樣板的集合,將它們組合在一起,您就可以建立各種各樣的網站。

此外,它還提供了大量的預設內容,以及大量真實的頁面結構示例,您可以根據自己的需要進行編輯和定製。

我們有一篇完整的文章介紹了全新的 Twenty Twenty-Four 主題。請點選檢視。

新的設計工具和功能

隨著 WordPress 6.4 的釋出,一些設計工具和功能進入了核心。其中最有趣的包括:

  1. 內容區塊的顏色控制元件
  2. 支援背景圖片區塊
  3. 影象的燈箱效果
  4. 垂直文字方向
  5. 腳註區塊的增強功能
  6. 導航區塊中允許使用的按鈕

內容區塊的顏色控制元件

內容區塊是迴圈查詢區塊的子區塊,在需要自定義迴圈查詢中的內容外觀時特別有用。

內容區塊可在迴圈查詢區塊中使用

內容區塊可在迴圈查詢區塊中使用

當您編輯迴圈查詢時,它可以在文章編輯器中使用;當您建立或編輯模板時,它可以在站點編輯器中使用。

在 WordPress 6.4 中,”內容”區塊得到了增強,現在支援文字、背景和連結的顏色。

內容區塊的顏色設定

內容區塊的顏色設定

支援背景圖片區塊

WordPress 6.4 新增了新的背景圖片區塊支援,預設情況下選擇了組區塊。

WordPress 6.4 中組區塊的背景圖片控制元件

WordPress 6.4 中組區塊的背景圖片控制元件

當主題使用了 theme.json 中的 appearanceTools 功能時,Background 面板會顯示相應的背景圖片控制元件,同時還會顯示背景圖片的預覽。

設定背景圖片時,會在組區塊的 div 元素中新增 background-image 屬性以及 background-size: cover 宣告,以確保圖片覆蓋整個組區塊。

有兩種方法可以在主題中新增背景圖片支援。第一種也是最簡單的方法是選擇使用外觀工具屬性。這樣就可以使用多種設計工具,包括背景圖片。

如果需要對設計工具進行更精細的控制,可以在 theme.json 中使用 backgroundImage 屬性:

{
"settings": {
"background": {
"backgroundImage": true
}
}
}

在圖片區塊設定面板中新增了 “Expand on click” 開關功能,允許您啟用/禁用圖片上的燈箱效果。這是該功能的首次迭代,在今後的版本中還會進一步改進。

點選 "Expand on click" 開關按鈕可啟用影象燈箱檢視

點選 “Expand on click” 開關按鈕可啟用影象燈箱檢視

燈箱效果也可與雙色濾鏡一起使用,但在相簿中使用時會有點混亂。在撰寫本文時,無法在相簿級別啟用燈箱效果,您應該在單張圖片上啟用該功能。

在以前的 WordPress 版本中,要實現這一功能必須使用外掛。現在它是核心的一部分,這意味著您的 WordPress 網站可以減少第三方程式碼。

垂直文字方向

新的文字方向選項允許主題支援豎排文字。如果你的主題支援這一功能,你可以在 Typography(排版)設定中啟用從右到左的豎排文字。

設定垂直方向

設定垂直方向

該功能預設為禁用。主題開發者可以通過在其 theme.json 中新增新的 writingMode 設定來新增對文字方向的支援:

{
settings: {
"typography": {
"writingMode": true
}
}
}

您還可以為特定區塊設定不同的預設行為。下面的示例展示瞭如何為所有段落區塊設定  vertical-rl  方向:

{
"styles": {
"blocks": {
"core/paragraph": {
"typography": {
"writingMode": "vertical-rl"
}
},
}
}
}

腳註區塊的增強功能

WordPress 6.4 還對腳註區塊進行了一些改進。它現在支援連結、背景和文字顏色。它還提供了排版、尺寸和邊框控制。

腳註區塊的顏色、排版、尺寸和邊框設定

腳註區塊的顏色、排版、尺寸和邊框設定

文字和連結顏色控制元件預設為展開狀態。其他控制元件會在頁面載入時摺疊。

導航區塊中允許使用的按鈕

按鈕現已列入導航區塊允許使用的內部元素列表。

在 WordPress 6.4 中將選單項轉換為按鈕

在 WordPress 6.4 中將選單項轉換為按鈕

當您建立一個新選單項時,您可以從區塊工具欄中輕鬆地將其轉換為按鈕。

導航區塊中的按鈕

導航區塊中的按鈕

改進使用者介面和工作流

WordPress 6.4 還對編輯器介面進行了多項改進,增強了編輯體驗並簡化了工作流程。我們最喜歡的變化包括:

  1. 增強的命令面板
  2. 改進的列表檢視
  3. 捕獲工具欄

增強的命令面板

WordPress6.3 首次引入了命令面板,它允許您在網站編輯器介面中執行常用操作。WordPress 6.4 通過更新設計和一些額外的改進,向前邁出了新的一步。

WordPress 6.3 中的命令面板

WordPress 6.3 中的命令面板

wp-64-command-palette

WordPress 6.4 中的命令面板

下面的圖片舉例說明了命令面板在 WordPress 6.3 和 6.4 中的不同行為。

在 WordPress 6.3 中搜尋樣機

在 WordPress 6.3 中搜尋樣機

在 WordPress 6.4 中搜尋樣機

在 WordPress 6.4 中搜尋樣機

該版本還增加了一些新命令,並改進了一致性和命名。新命令包括區塊變換以及複製、拷貝、移除和前後插入選項。

一個小改動是刪除了許多命令開頭的動詞。這提高了一些命令的可搜尋性和清晰度。

在 WordPress 6.3 中搜尋 "開啟" 選項

在 WordPress 6.3 中搜尋 “開啟” 選項

在 WordPress 6.4 中搜尋 "開啟" 選項

在 WordPress 6.4 中搜尋 “開啟” 選項

新版本還增加了區塊選擇命令。要檢視其實際效果,請在網站編輯器中選擇幾個區塊,然後按 cmd + k (MacOS) 或 ctrl + k (Windows),並輸入搜尋關鍵字,如 “transform”。你會看到以下建議:

區塊選擇命令

區塊選擇命令

您可以對選擇的區塊執行多種命令。例如,您可以對幾個區塊進行分組:

從選區建立區塊組合

從選區建立區塊組合

當然你也可以取消組合。

取消組合區塊的命令

取消組合區塊的命令

在撰寫本文時,區塊選擇命令包括新增到之前、新增到之後、刪除、複製、移動到、分組、取消分組和轉換至。

改進的列表檢視

通過列表檢視,您可以瀏覽頁面內容,並對區塊、組和模式執行若干操作。這些操作包括複製、重複、分組等。這對巢狀區塊的複雜結構尤其有用,因為它允許你展開和摺疊專案組,並對單個區塊、組和樣板執行多項操作。

WordPress 6.3 中的列表檢視

WordPress 6.3 中的列表檢視

WordPress 6.4 中的列表檢視

WordPress 6.4 中的列表檢視

從 WordPress 6.4 開始,您還可以使用 cmd + shift + d 快捷鍵(Windows 下為 ctrl + shift + d )重新命名一組區區塊、預覽相簿和圖片區塊的影象、複製區塊。

從列表檢視重新命名組區塊

從列表檢視重新命名組區塊

捕捉工具欄

在編輯有多個子區塊的區塊時,使用內部區塊可能會比較麻煩。當涉及到導航區塊時尤其如此。

在 WordPress 6.4 之前,當選擇內部區塊時,區塊工具欄會移動到螢幕上的不同位置。這種行為導致導航和列表等區塊的使用者體驗不佳。

自 WordPress 6.4 起,子區塊工具欄被附加到父區塊的位置。這樣,當您在同級塊之間切換選擇時,工具欄會固定在父區塊的相同位置。

列表區塊工具欄

列表區塊工具欄

列表專案區塊工具欄

列表專案區塊工具欄

捕捉工具欄目前在導航、列表和引用區塊中使用。

針對開發人員的效能改進和其他更改

100 多項效能更新已併入核心,同時還為主題開發人員帶來了一些變化。讓我們一起來探討幾個有趣的變化。

  1. 指令碼載入策略
  2. 附件頁面的更改
  3. 進度條元件
  4. WordPress 6.4 中的載入樣板
  5. 減少檔案存在性檢查
  6. 新選項函式
  7. 針對開發人員的其他更改

指令碼載入策略

指令碼載入策略是在 WordPress 6.3 中引入的,它提供了一種使用 async 和 defer 屬性防止指令碼在指令碼依賴樹中以意外順序載入的方法。

在 WordPress 6.4 中,核心主題和捆綁主題中的前端指令碼都採用了指令碼載入策略。

此外,從 WordPress 6.4 開始,”使用 defer 屬性載入的指令碼已從頁尾移至頁首,以便在載入文件時更早地發現它們,並在載入文件後更快地執行”。

“其他更改還提高了核心安全性和可維護性。有關指令碼載入的更多技術概述,請檢視 WP 6.4 開發說明。

附件頁面的更改

從 WordPress 6.4 開始,新安裝的WordPress附件頁面將完全禁用。

在 WordPress 6.4 之前,WordPress會為每個上傳的多媒體檔案自動建立附件頁面。但這在許多網站上是不合理的。這些頁面會被搜尋引擎收錄,可能會給使用者帶來不好的體驗。

從 WordPress 6.4 開始,一個 wp_attachment_pages_enabled 資料庫選項可以控制附件頁面的行為。

從 WordPress 6.4 開始,該選項對現有網站設定為 1 (啟用附件頁面),對新網站設定為0(禁用附件頁面)。

網站管理員可以通過 WP CLI 更改該值:

wp option set wp_attachment_pages_enabled 0|1

或者訪問網站上的 wp-admin/options.php,更改 wp_attachment_pages_enabled 選項的值。

更改啟用附件頁面的選項

更改啟用附件頁面的選項

進度條元件

引入了一個基本的水平 ProgressBar 元件,以取代之前在站點編輯器中載入內容時使用的 Spinner 元件。

站點編輯器中的新進度條元件

站點編輯器中的新進度條元件

WordPress 6.4 中的載入樣板

在 WordPress 6.4 之前, _register_theme_block_patterns() 函式用於在其 patterns 目錄下注冊活動主題可能提供的任何樣板。由於該函式需要進行大量的檔案操作,因此使用該函式會導致資源開銷問題,尤其是在提供大量樣板的主題(如 Twenty Twenty-Four)中更為明顯。

為了解決這個問題,WordPress 6.4 引入了一個新的 _wp_get_block_patterns() 函式,將樣板儲存在臨時快取中。有了這個新函式,後續請求就不需要查詢檔案,從而顯著提高了效能。

開發人員可以通過啟用主題的開發模式、更新主題的版本號、切換主題或呼叫 WP_Theme::delete_caches() 方法來繞過樣板快取。

減少檔案存在性檢查

以前,主題 API 中的一些函式在返回父主題之前,會對子主題中是否存在檔案執行多次檢查。

這不是最佳做法,因為這些函式沒有考慮當前主題是否為子主題。

為了防止無用的檔案存在性檢查,更新了主題 API 中的多個函式和方法,現在,在進行檔案存在性檢查之前,我們會檢查當前主題的樣式表目錄是否與模板目錄一致。

這將大大提高效能,尤其是在使用非子主題時。

其他效能改進還包括 get_block_theme_folders() 和 the_header_image_tag() 函式。

新選項函式

預設情況下,選項會自動載入。如果網站的選項過多,可能會導致伺服器響應時間變慢和出現錯誤。為防止出現這種情況,外掛開發人員現在可以利用幾個新函式來管理選項、提高效能並設定不同的預設行為。

有兩個函式允許通過一次資料庫查詢獲取多個選項。

  • prime_options() 可以通過一次資料庫查詢獲取多個選項。選項值會儲存在快取中,因此後續的 get_option() 呼叫不需要額外的資料庫查詢。
  • prime_options() 接收一個選項名稱陣列,不返回任何選項值,因為它唯一的職責是更新相關快取。
  • prime_options_by_group() 與 prime_options() 的工作原理類似,但針對的是特定的選項組。

另外兩個函式允許設定選項自動載入值。

  • wp_set_option_autoload_values() 用於設定單個選項的自動載入值。
  • wp_set_options_autoload_values() 可用於設定多個選項的自動載入值。

針對開發人員的其他更改

針對開發人員的其他更改包括!

  • 用 wp_add_inline_style() 代替硬編碼樣式標籤(參見開發說明)
  • 在 theme.json 中配置流體排版的最小和最大視口值(參見開發說明)
  • 在 theme.json 中禁用佈局控制元件(參見開發說明)
  • 使用新的 useBlockEditingMode 鉤子設定區塊編輯模式(參見開發說明)
  • 增強了 wp_get_loading_optimization_attributes() 函式,並引入了新的過濾器來控制載入優化屬性(參見開發說明)
  • 新的 registerInserterMediaCategory API 允許外掛開發人員註冊自定義外掛媒體類別,併為使用者提供更多選擇。該 API 只允許新增自定義插入式媒體類別,但不提供對核心類別的控制,Openverse 類別除外(參見開發說明)
  • 兩個新的 wp_get_admin_notice() 和 wp_admin_notice() 函式 “減輕了維護負擔,促進了一致性,併為所有管理員通知啟用了引數和資訊過濾功能”(請參閱開發說明)
  • 改進了 WP_Query 和 WP_Term_Query 快取系統,減少了資料庫查詢並提高了整體效率(參見開發說明)
  • 改進了登入和註冊頁面的標記,以優化其結構併為開發人員提供更靈活的自定義功能(參見開發說明)

小結

WordPress 2023 第三個版本帶來了大量新功能、新設計工具、使用者介面改進、錯誤修復和其他小改動。

它還引入了一個新的輕量級多功能預設主題,其中包含大量模式和模板,您可以根據具體使用情況進行定製。

您最喜歡 6.4 中的哪些功能?請在下面的評論中分享您的想法。

評論留言