WordPress 6.5新功能:字型庫、資料檢視、區塊繫結、互動性API等!

WordPress 6.5新功能:字型庫、資料檢視、區塊繫結、互動性API等!

WordPress 6.5 計劃於 3 月 26 日釋出,我們已經迫不及待地想利用它的精彩功能了。

6.5 引入了新的強大 API,將 WordPress 的開發體驗提升到了一個新的水平。不過,WordPress 6.5 也帶來了大量變化,讓您在網站建設和內容建立方面感到滿意。

有了新的字型庫,您就可以在核心區塊的內容中注入自定義欄位值,並直接從網站編輯器中下載和安裝谷歌字型。新的設計工具和多項使用者介面增強功能將改善整體編輯體驗。

但這些只是 WordPress 6.5 中的幾項更新。新版本收集了如此多的改進和更新,不可能在一篇博文中全部提及。因此,我們在這篇詳細的長文中收集了最具顛覆性和最令人興奮的更新。

讓我們開始探索 WordPress 6.5 的旅程吧。

新的 WordPress 字型庫

首先,WordPress 6.5引入了一項新功能,允許從樣式介面管理字型。

新的 WordPress 字型庫使您能夠以類似於媒體庫中媒體管理的方式來管理字型,但這種方式只適用於字型。

有了字型庫,您可以輕鬆安裝/解除安裝本地字型Google 字型,並選擇要啟用/停用的字型,而無需考慮您的活動主題。

聽起來很棒,不是嗎?現在,我們對每個網站的一個重要方面:排版有了更大的控制權。要在 WordPress 網站中使用自定義字型,你不再需要依賴主題的字型,也不再需要玩弄 CSS。

使用方法非常簡單。在網站編輯器使用者介面中,開啟全域性樣式側邊欄並選擇排版(Typography)

WordPress 6.5 排版面板

WordPress 6.5 中的新排版面板

在這裡,您會看到一個可用字型和元素的列表。點選右側的管理字型(Manage fonts)按鈕,彈出一個包含三個選項卡的視窗。

WordPress 6.5 字型庫

WordPress 6.5 中的字型庫介面

Library 選項卡提供了可用字型的預覽,”上傳” 選項卡包括一個從電腦上傳字型資產的拖放區域,而 “安裝字型(Install Fonts)“選項卡則允許您從 Google Fonts 安裝字型。

WordPress 6.5 連線 Google Fonts

在 “安裝字型” 選項卡中,你可以連線到谷歌字型。

連線到谷歌字型後,同一面板中將顯示所有可用字型的列表。

Google Fonts

Google Fonts

您還可以按名稱搜尋字型。

在 WordPress 6.5 中按名稱搜尋字型

在 WordPress 6.5 中按名稱搜尋字型

選擇您需要的字型變體,點選安裝,就大功告成了。

谷歌字型上的 Ubuntu 字型變體

谷歌字型上的 Ubuntu 字型變體

安裝新字型時,字型庫會將字型族定義新增到已安裝的字型中,並將字型資產下載到 /wp-content/fonts/ 資料夾或 wp-content/uploads/fonts 作為備用位置

注:只有在安裝字型時才會請求 Google Fonts。一旦您將字型新增到字型庫,就不會再向 Google 傳送請求,因為字型是本地託管的(另請參閱我們的《WordPress 本地字型託管深度指南》。

禁用字型庫

外掛和主題開發人員可以使用新的 fontLibraryEnabled PHP 過濾器禁用字型庫

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function disable_font_library_ui( $editor_settings ) {
$editor_settings['fontLibraryEnabled'] = false;
return $editor_settings;
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );
function disable_font_library_ui( $editor_settings ) { $editor_settings['fontLibraryEnabled'] = false; return $editor_settings; } add_filter( "block_editor_settings_all", "disable_font_library_ui" );
function disable_font_library_ui( $editor_settings ) { 
$editor_settings['fontLibraryEnabled'] = false;
return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

資料檢視

資料檢視(DataViews)是一個允許使用不同型別佈局(如表格、網格、列表等)呈現資料集的元件。

在這次迭代中,用於管理頁面、樣板和模板的新檢視和相關功能進入了核心,我們可能會期待未來的 WordPress 版本有更多改進。

目前,WordPress 6.5 在站點編輯器中引入了以下檢視:

  • 模板 > 管理所有模板:表格和網格佈局。
  • 樣板> 模板部分 > 管理所有模板部分:表格和網格佈局。
  • 樣板: 網格佈局。
  • 頁面 > 管理所有頁面:表格和網格佈局。

為模板設定網格佈局

為模板設定網格佈局

除佈局外,資料檢視還新增了多種視覺化功能,包括篩選器、搜尋、分頁、排序、隱藏和顯示欄位。

為模板檢視設定欄位

為模板檢視設定欄位

批量編輯按鈕允許您根據當前資料集批量執行多個操作。對於頁面,您可以移動到回收站恢復永久刪除

在 WordPress 6.5 中批量編輯頁面

在 WordPress 6.5 中批量編輯頁面

資料檢視還配備了新的主過濾器 API,目的是在資料檢視中新增一種特殊的過濾器 – 在螢幕上始終可見。下圖顯示了模式管理部分的新同步狀態(Sync Status)主過濾器。

同步狀態樣板的主要過濾器

同步狀態樣板的主要過濾器

DataViews API 隨附新的 @wordpress/dataviews npm 軟體包,可讓開發人員嘗試使用資料檢視。

區塊繫結 API

區塊繫結應用程式介面(Block Bindings API)是一種新的應用程式介面,旨在將區塊屬性與來自不同資料來源的值連線起來。這些值可能因上下文而異。一個簡單的例子就是包含作者姓名的標題會隨著 post_author 值的變化而變化。

這是一個了不起的改進,因為它擴充套件了幾個核心塊的功能。藉助新的應用程式介面,您可以將任何來源的動態資料與區塊屬性繫結。

資料來源可以是多種多樣的: 網站資料、自定義欄位、使用者資料、模式、簡碼、其他區塊,甚至是使用 Gutenberg 的外部工具。使用 Gutenberg 的 Drupal 網站就是一個例子。

從技術角度來看,我們可以將塊繫結 API 的工作方式描述為三步流程

  1. 首先,使用 bindings 物件在區塊屬性和資料來源之間建立繫結。
  2. API 從繫結中定義的資料來源獲取值。
  3. 然後,使用從資料來源接收到的值更新區塊的 HTML。

WordPress 6.5 中的第一個區塊繫結 API 實現了區塊屬性和自定義欄位的連線。第二個已公佈的實施方案 “同步樣板重寫(Synced Patterns Overrides)” 已推遲到未來發布

起初,只有有限數量的區塊(如標題、段落、圖片和按鈕)將支援區塊繫結 API。在未來的迭代中,將有更多的區塊,甚至是自定義區塊被新增到列表中。

該 API 的首次實施還能讓外掛開發人員以與 Gutenberg 註冊 core/post-meta 資料來源相同的方式註冊其資料來源。根據 Santos Guillamot 的示例,您可以這樣註冊您的外掛資料來源:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
register_block_bindings_source(
'myplugin/plugin-data',
array(
'label' => _x( 'Plugin Data', 'block bindings source' ),
'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
)
);
register_block_bindings_source( 'myplugin/plugin-data', array( 'label' => _x( 'Plugin Data', 'block bindings source' ), 'get_value_callback' => 'myplugin_block_bindings_post_meta_callback', ) );
register_block_bindings_source(
'myplugin/plugin-data',
array(
'label'              => _x( 'Plugin Data', 'block bindings source' ),
'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
)
);

然後在程式碼區塊中新增繫結物件:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:paragraph
{
"metadata": {
"bindings": {
"content": {
"source": "myplugin/plugin-data",
"args": {
"key":"plugin_key"
}
}
}
}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph { "metadata": { "bindings": { "content": { "source": "myplugin/plugin-data", "args": { "key":"plugin_key" } } } } } --> <p>Paragraph</p> <!-- /wp:paragraph -->
<!-- wp:paragraph 
{
"metadata": {
"bindings": {
"content": {
"source": "myplugin/plugin-data",
"args": {
"key":"plugin_key"
}
}
}
}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

下面是每種屬性的說明:

  • metadata: 區塊後設資料物件。
  • bindings: 包含一個或多個繫結的物件。
  • content: 要繫結到資料來源的塊屬性。在本例中,是段落區塊的 content 屬性。
  • source: 繫結源。
  • args: 要傳遞給塊繫結源的引數物件。

未來的迭代將為塊繫結 API 新增更多功能。此外,我們很快就能在視覺化編輯器中建立繫結,將塊屬性與更多資料來源(如網站資料或分類資料)連線起來,並在更多塊中使用這一功能。

說到這裡,讓我們深入瞭解一下區塊繫結 API 的首批實現。

將自定義欄位連線到區塊

在 WordPress 6.5 之前,沒有辦法將自定義欄位值注入到核心區塊的內容中。開發人員只能建立自定義區塊,以便在前端顯示自定義欄位

從 WordPress 6.5 開始,您可以在核心區塊中顯示儲存在自定義欄位中的資料,包括按鈕、標題、圖片和段落。

如前所述,區塊繫結 API 允許您連線塊屬性和不同的資料來源,包括 “meta_fields” 源。要使用這一功能,首先需要在編輯器中啟用自定義欄位,方法是:選項->首選項->常規->高階(Options -> Preferences -> General -> Advanced)。

文章編輯器中的首選項模組

文章編輯器中的首選項模組

請注意,從 WordPress 6.5 開始,您就沒有將自定義欄位值繫結到塊屬性的使用者介面控制元件了。

因此,一旦新增了自定義欄位鍵和值,就必須切換到程式碼編輯器,在區塊分隔符內新增一個 “繫結” 物件,如下程式碼所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:paragraph
{
"metadata": {
"bindings": {
"content": {
"source":"core/post-meta",
"args": {
"key":"my_custom_field"
}
}
}
}
} -->
<p>Paragraph</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph { "metadata": { "bindings": { "content": { "source":"core/post-meta", "args": { "key":"my_custom_field" } } } } } --> <p>Paragraph</p> <!-- /wp:paragraph -->
<!-- wp:paragraph 
{
"metadata": {
"bindings": {
"content": {
"source":"core/post-meta",
"args": {
"key":"my_custom_field"
}
}
}
}
} -->
<p>Paragraph</p>
<!-- /wp:paragraph -->

在區塊中新增自定義欄位會鎖定相應的控制元件,使區塊內容不可編輯。

現在,讓我們來了解一下如何使用影象區塊。為 altsrc 屬性新增兩個自定義欄位。

儲存 alt 和 src 值的兩個自定義欄位

儲存 alt 和 src 值的兩個自定義欄位

然後新增一個影象區塊,切換到程式碼編輯器,在區塊中新增一個 bindings 物件,如下例所示:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!-- wp:image {
"metadata":{
"bindings":{
"url":{
"source":"core/post-meta",
"args":{
"key":"img_src"
}
},
"alt":{
"source":"core/post-meta",
"args":{
"key":"img_alt"
}
}
}
}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->
<!-- wp:image { "metadata":{ "bindings":{ "url":{ "source":"core/post-meta", "args":{ "key":"img_src" } }, "alt":{ "source":"core/post-meta", "args":{ "key":"img_alt" } } } } } --> <figure class="wp-block-image"><img src="" alt="" /></figure> <!-- /wp:image -->
<!-- wp:image {
"metadata":{
"bindings":{
"url":{
"source":"core/post-meta",
"args":{
"key":"img_src"
}
},
"alt":{
"source":"core/post-meta",
"args":{
"key":"img_alt"
}
}
}
}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

您會發現,您無法使用編輯器的控制元件來替換圖片源。

無媒體控制的影象佔位符

無媒體控制的影象佔位符

第一次迭代中,只有以下區塊屬性可以連線到自定義欄位:

  • Paragraph: content.
  • Heading: content.
  • Image: URL, alt, 和 title.
  • Button: text, URL, linkTarget 和 rel.

有關使用區塊屬性連線自定義欄位的更廣泛概述,請參閱區塊繫結綜合介紹

改進的修訂版本系統

修訂版本系統讓您確信,您可以在任何時候通過恢復網站外觀的早期版本來撤銷任何更改。由於可靠的修訂版本系統在協作網站中的重要性,樣式修訂在現階段的 WordPress 開發中佔據了重要位置。WordPress 6.5 對修訂版本系統進行了多項重大改進

以下是 WordPress 6.5 中的修訂版本功能。

更改說明

在以前的 WordPress 版本中,每次修訂版本只能顯示日期、時間和作者。從 WordPress 6.5 開始,除了這些詳細資訊外,您還將看到該版本的簡短摘要其他詳細資訊

WordPress 6.5 中的修訂摘要

WordPress 6.5 中的修訂摘要

無限修訂版本和分頁

在 6.5 之前,由於 Rest API 的限制,在側邊欄的單個面板中最多隻能檢視 100 個修訂版本。

由於 Gutenberg 17.2 引入了兩個新的選擇器 getRevisionsgetRevision,現在 WordPress 6.5 又將這兩個選擇器合併到了核心中,因此 100 修訂版的限制不復存在。此外,您還可以瀏覽按每頁 10 個專案劃分的所有現有修訂。

修訂樣式手冊整合

另一個變化是修訂版本面板也可與樣式手冊一起使用。這樣您就可以檢查您對當前模板中未包含的樣式和區塊所做的更改。

樣式手冊現在支援修訂版本

樣式手冊現在支援修訂版本

模板和模板部件的修訂版本

模板和模板部件的修訂功能還可以讓你切換到設計專案的上一版本,為你的工作流程增加了一個額外的安全層。

互動式 API

在 WordPress 6.5 之前,要為頁面新增互動性,開發人員應該自己實現他們喜歡的 JavaScript 庫。遺憾的是,這導致前端的JavaScript開發缺乏一致性。

從 WordPress 6.5 開始,新的互動性應用程式介面(Interactivity API)為在WordPress網站前端新增互動性提供了一種現代化和標準化的方式。

如果您想知道這個新的 API 是做什麼用的,我們早在 WordPress 6.4 中就已經體驗過了,因為影象、搜尋、檔案、導航和查詢等核心模組都使用了私有版本的 API 進行了重構。圖片上的燈箱效果就是另一個很好的例子。

動態分頁、即時搜尋和區塊間的實時互動只是使用互動性 API 在網站上實現這些功能的幾個例子:

區塊之間可以共享資料、操作和回撥。這使得區塊之間的通訊更簡單,更不易出錯。例如,點選 “新增到購物車” 區塊可以無縫更新單獨的 “購物車” 區塊。

而且速度快得驚人。只有當頁面上至少有一個互動式區塊時,前端才會載入新增互動性所需的所有指令碼。

互動式 API 採用現代前端開發方法,利用自定義 HTML 屬性的強大功能,減少為頁面新增互動性所需的 JavaScript 數量。

如果您熟悉 HTMX 和 Alpine.js 等前端庫,您會很高興看到同樣的邏輯通過互動式 API 在 WordPress 中實現。那麼,這到底是怎麼回事呢?讓我們深入瞭解一下。

什麼是互動式 API?

互動性 API 是一個新的標準指令系統,用於建立互動式區塊,使開發人員能夠輕鬆地在其區塊的前端新增互動性,這樣網站訪問者就能夠與您的內容進行互動,而無需重新載入頁面。例如即時搜尋、新增評論、新增到購物車以及動態分頁。

新的應用程式介面符合一系列要求,使其成為現代化的開發工具,包括以下內容:

  • 它支援伺服器端渲染client-hydrated HTML
  • 它與 PHP 和當前的塊系統配合良好。
  • 它向後相容 WordPress 鉤子和現有 JavaScript 庫。
  • 它採用宣告式方法,而不是命令式方法。
  • 它具有良好的效能和可擴充套件性。
  • 原子性和可組合性:每個指令只控制 DOM 的一小部分,多個指令可以組合起來建立複雜的應用程式。
  • 它與現有的 WordPress 開發工具相容。

如上所述,互動性 API 基於指令,而指令是一種特殊的 HTML 屬性,可讓您為 DOM 元素附加特定行為。下面是一個互動式區塊的示例:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<div
<?php echo get_block_wrapper_attributes(); ?>
data-wp-interactive='{ "namespace": "create-block" }'
data-wp-context='{ "isOpen": false }'
data-wp-watch="callbacks.logIsOpen"
>
<button
data-wp-on--click="actions.toggle"
data-wp-bind--aria-expanded="context.isOpen"
aria-controls="<?php echo esc_attr( $unique_id ); ?>"
>
<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
</button>
<p
id="<?php echo esc_attr( $unique_id ); ?>"
data-wp-bind--hidden="!context.isOpen"
>
<?php
esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
?>
</p>
</div>
<div <?php echo get_block_wrapper_attributes(); ?> data-wp-interactive='{ "namespace": "create-block" }' data-wp-context='{ "isOpen": false }' data-wp-watch="callbacks.logIsOpen" > <button data-wp-on--click="actions.toggle" data-wp-bind--aria-expanded="context.isOpen" aria-controls="<?php echo esc_attr( $unique_id ); ?>" > <?php esc_html_e( 'Toggle', 'inter-block' ); ?> </button> <p id="<?php echo esc_attr( $unique_id ); ?>" data-wp-bind--hidden="!context.isOpen" > <?php esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' ); ?> </p> </div>
<div
<?php echo get_block_wrapper_attributes(); ?>
data-wp-interactive='{ "namespace": "create-block" }'
data-wp-context='{ "isOpen": false }'
data-wp-watch="callbacks.logIsOpen"
>
<button
data-wp-on--click="actions.toggle"
data-wp-bind--aria-expanded="context.isOpen"
aria-controls="<?php echo esc_attr( $unique_id ); ?>"
>
<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
</button>
<p
id="<?php echo esc_attr( $unique_id ); ?>"
data-wp-bind--hidden="!context.isOpen"
>
<?php
esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
?>
</p>
</div>

WordPress 會在伺服器上處理這些指令,並生成相應的標記。

如何開始使用互動式 API

互動式 API 的實施不會影響區塊建立工作流程。您可以搭建一個外掛,使用 @wordpress/create-block 命令和特定的互動式模板來註冊互動式區塊。

注:如果您是 WordPress 區塊開發的新手,請不要錯過以下指南:

啟動您最喜歡的命令列工具,導航至 plugins 目錄,然後執行以下命令

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template
npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template
npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

這將使用後設資料欄位 viewScriptModule 從模板中生成一個互動式區塊。在前端渲染區塊時, viewScriptModule 中宣告的指令碼模組將被掛起。(另請參閱 viewScriptModule指令碼模組開發說明)。

Visual Studio Code 中的互動式程式碼區專案

Visual Studio Code 中的互動式程式碼區專案

安裝過程完成後,你會在 WordPress 儀表板中發現一個新外掛。啟用它,然後回到命令列,導航到新外掛的目錄,啟動服務:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd my-interactive-block && npm start
cd my-interactive-block && npm start
cd my-interactive-block && npm start

現在,建立一個新的文章或頁面,開啟區塊插入器,向下滾動到小工具部分。在那裡,你會發現一個名為 “My Interactive Block” 的新區塊,你可以用它作為模板,建立新的激動人心的互動作品:

互動式開發區塊

互動式開發區塊

將該區塊新增到內容中,然後儲存文章。帖子預覽將顯示一個隱藏/顯示虛擬文字的切換按鈕。就是這樣。現在,你可以開始建立互動式區塊了。

你可以在 WordPress Core 部落格、GitHub 文件Interactivity API 開發說明中閱讀更多有關如何使用互動式 API 建立互動式區塊的內容。

wpmovies.dev 演示網站就是互動式 API 執行的一個很好的例子。

新的設計工具

WordPress 6.5 還引入了新的設計工具,讓您無需依賴自定義 CSS 程式碼即可進一步自定義設計。

組區塊支援背景圖片大小和重複

組區塊現在支援背景圖片的大小和重複功能。這也允許您將背景圖片的大小設定為封面或包含,並保持相同的長寬比。

控制組區塊的背景圖片大小

控制組區塊的背景圖片大小

此外,當你將背景大小設定為固定時,會出現一個重複切換按鈕,允許你啟用或禁用重複背景。

封面區塊的寬高比支援

封面區塊已獲得寬高比支援。您可以在全域性樣式介面的全域性級別上控制區塊的縱橫比,也可以在內容中單獨調整。

封面區塊的高寬比控制

封面區塊的高寬比控制

為更多區塊提供陰影支援

到目前為止,按鈕區塊是唯一支援陰影的區塊。WordPress 5.6 為列、欄和圖片區塊新增了陰影支援

您可以通過區塊設定中的塊樣式選項卡為這些區塊新增陰影。

影象區塊現在支援陰影

影象區塊現在支援陰影

站點編輯器更新

站點編輯器的多項改進將大大改善您的編輯體驗並簡化您的工作流程。

列表檢視增強

列表檢視是設計工作流程的核心元素,WordPress 6.5 引入了一些增強功能。

首先,您現在可以右鍵單擊列表檢視來訪問區塊設定下拉選單。這是一個小而有用的增強功能,可以簡化建立流程,因為它可以讓您更輕鬆地從列表檢視訪問區塊設定。

第二項增強功能允許你在列表檢視中重新命名幾乎所有區塊,但以下區塊除外:

  • core/block
  • core/template-part
  • core/pattern
  • core/navigation

列表檢視還增加了鍵盤快捷鍵。現在,在 Windows 上點選 CTRL + A,在 Mac 上點選 CMD + A,就可以選擇列表檢視中的所有區塊。這樣,您就可以輕鬆執行批量操作。

複製和重新命名樣板

主題提供的樣板是不可編輯的,因此您無法使用它們來建立自己的樣板或簡單地更改樣板中的某些內容。WordPress 6.5 增加了一個小而實用的功能,允許複製重新命名樣板,使您可以根據需要更改同步設定和修改樣板。

現在可以重新命名和刪除樣板

現在可以重新命名和刪除樣板

此外,還新增了兩個樣板類別:音訊和視訊

wp-65-pattern-categories

WordPress 6.5 中的樣板分類面板

改進的首選項面板

WordPress 6.5 更新了首選項面板,並對現有設定進行了重組。主要變化包括:

  • 新的 “外觀” 和 “輔助功能” 面板。
  • 外觀下新增 “頂部工具欄” 設定。

啟用 “頂部工具欄” 可將所有區塊和文件工具移動到編輯器頂部的一個工具欄中。

啟用 "頂部工具欄" 的改版首選項介面

啟用 “頂部工具欄” 的改版首選項介面

干擾自由模式下的區塊工具欄

在 WordPress 6.5 之前,無法在干擾自由模式下訪問塊工具欄,您只能在任何更改時開啟或關閉它。從 WordPress 6.5 開始,將游標移到編輯器的頂部區域就會顯示區塊工具欄,供您自定義。

干擾自由模式下的區塊工具欄

干擾自由模式下的區塊工具欄

改進的連結控制元件元件

LinkControl 已得到改進,現在新增連結更容易了。下圖顯示了點選要編輯的連結時出現的新面板。

在 WordPress 6.5 中編輯連結

在 WordPress 6.5 中編輯連結

有關 LinkControl 元件更改的完整列表,請參閱 PR #50891

拖放功能改進

在編輯器的多個區域對拖放功能進行了改進。

在列表檢視中:

  • 將圖塊拖放到摺疊區塊時,摺疊區塊會展開。
  • 拖動元素時會出現拖動游標。

在編輯器畫布中:

  • 現在可以將元素拖放到內容的開頭或結尾。
  • 同級容器區塊之間的元素拖放功能也得到了改進。
  • 還可以拖動模板部分中的區塊。
  • 現在,一個新的視覺化提示會告訴你某個區塊是不可拖動的。
  • 你可以將元素拖放到文件的開頭或結尾。
  • 只需將區塊拖放到其他區塊附近,即可建立欄目或畫廊。例如,在另一張圖片旁邊新增一張圖片,就可以將現有的圖片區塊轉換為畫廊區塊。

在影象區塊附近拖放影象

在影象區塊附近拖放影象

現在可以通過拖放影象將影象區塊轉換為畫廊區塊

現在可以通過拖放影象將影象區塊轉換為畫廊區塊

有關拖放改進的更全面列表,請參閱區塊拖放跟蹤問題

其他更改和改進

等等,這還不是全部!WordPress 6.5 還帶來了許多值得一提的其他更改和改進。

  1. 經典主題的外觀工具
  2. AVIF 支援
  3. 外掛依賴性
  4. 更新 HTML API
  5. 統一站點和文章編輯器
  6. 效能提升
  7. 可訪問性改進
  8. 更新區塊鉤子

經典主題的外觀工具

即使不使用 theme.json,經典主題也可以利用站點編輯器中引入的某些設計功能。從 WordPress 6.5 開始,選擇外觀工具主題支援將包括以下設計功能:

  • 邊框
  • 顏色
  • 間距
  • 排版

這可以讓經典主題的使用者預覽站點編輯器的功能,並簡化從經典主題到區塊主題的過渡。

WordPress 6.5 中的外觀工具與 二〇二一 主題

WordPress 6.5 中的外觀工具與 二〇二一 主題

支援 AVIF

WordPress 6.5 還引入了對 AVIF 影象格式的支援,該格式的特點是採用先進的壓縮演算法,能以更高的壓縮比實現卓越的影象質量。因此,與傳統格式(包括 WebP 格式)相比,AVIF 生成的影象檔案更小。

現在,使用者可以通過 WordPress 媒體庫無縫上傳 AVIF 檔案,與其他影象格式類似。不過,請檢查您的託管平臺是否相容 AVIF 檔案格式。

AVIF 影象格式瀏覽器支援

AVIF 影象格式瀏覽器支援(來源:Can I Use

您可以在 WordPress 安裝的 “站點健康” 頁面中,通過單擊 “資訊” 選項卡並展開 “媒體處理” 部分,檢查您的主機是否支援 AVIF 影象格式。

外掛依賴性

有些外掛會在其他外掛的基礎上新增新功能,作為擴充套件/附加元件。要使這些外掛正常工作,您首先需要安裝並啟用它們的依賴項,即它們所依賴的外掛。

自 WordPress 6.5 起,外掛開發人員可以使用新的 “Requires Plugins(需要外掛)”外掛頭。這個標題可以釋放一個強大的功能,簡化安裝和啟用依賴項的過程。它包含一個由逗號分隔的依賴項列表,這些依賴項是依賴外掛工作所必需的。

這將為外掛使用者提供資訊,並提供指向 WordPress.org 外掛庫的連結,以便安裝和啟用依賴項。

此外,依賴外掛還提供了一個 “Required by” 細節,列出了需要它才能工作的依賴外掛。您還會注意到,除非刪除依賴外掛,否則不允許刪除依賴外掛。

WordPress 6.5 中的依賴外掛

WordPress 6.5 中的依賴外掛

WordPress 6.5 還引入了一個新的 wp_plugin_dependencies_slug 過濾器,允許您以程式設計方式過濾依賴項。

有關更深入的討論,請參閱外掛依賴性開發說明

HTML API 的更新

WordPress 6.5 對 HTML API 標記處理器進行了多項改進,現在它可以掃描每一種語法標記,包括標記和非標記標記、註釋、doctype 定義和文字節點。

這樣就可以在不影響文件結構的情況下更改標記邊界內的文字(稱為 modifiable text)。

可修改文字是指文字節點的全部內容、HTML 註釋的內容或特殊元素(如 script 或 style 元素)的開頭和結尾標記之間的內容。

引入了一系列新方法:

  • next_token() – 移動到文件中的下一個標記
  • get_token_type() – 獲取找到的標記型別
  • get_token_name() – 獲取標記的名稱
  • get_modifiable_text() – 返回給定標記的正確解碼文字內容。
  • get_comment_type() – 獲取註釋型別
  • paused_at_incomplete_token() – 如果標記處理器到達標記中間截斷的文件末尾,則返回 true。

如需更詳細的概述,請檢視 6.5 開發說明中的 HTML API 更新

統一站點和帖子編輯器

在 WordPress 6.5 中,編輯器獲得了多項旨在統一使用者介面和行為的更新。

一些側邊欄面板已從 edit-post 包移至 @wordpress/editor 包,以便將相應的功能帶到站點編輯器中:

  • 頁面屬性 (PR #57151)
  • 文章分類法 (PR #57049)
  • 為站點編輯器新增檢視文章型別的連結 (PR #57153)
  • 為支援討論面板的文章型別在站點編輯器側邊欄中新增討論面板 (PR #57150)
  • 新增特色圖片面板 ( (PR #57053)
  • 為站點編輯器新增了修訂面板 (PR #57010)

另一項改動是允許在 “文章編輯器” 中編輯頁面時預覽模板,這在 “站點編輯器” 中已經可以實現,而且可以在 “頁面設定” 側邊欄中切換開啟/關閉模板預覽

效能增強

超過 110 項效能增強功能大大提高了帖子編輯器和網站編輯器的速度和效率。現在,載入時間比 6.4 版快兩倍,輸入處理速度快近四倍。此外,Performant Translations i18 庫的整合有助於減少翻譯網站的記憶體使用和載入時間

可訪問性改進

隨著 WordPress 6.5 的釋出,超過 65 項更新將併入核心,以改善整個管理面板的可訪問性。這些改進包括焦點樣式對比度自定義選單排序等。

區塊鉤子的更新

在 WordPress 6.4 中首次引入的區塊鉤子允許在內容中新增另一個區塊時自動將該區塊放置在特定位置。

區塊鉤子以前適用於模板、模板部分和沒有任何使用者修改的模式。現在,它們也可以用於修改後的佈局。

在 WordPress 6.5 之前,鉤選塊只能新增在導航塊之前或之後。在這次迭代中,掛鉤區塊也可以作為第一個或最後一個子區塊新增到導航區塊中。

此外,本次迭代還引入了新的 hooked_blockhooked_block_{$hooked_block_type} 過濾器。

有關更深入的概述和使用示例,請參閱塊掛鉤更新開發說明

小結

您準備好獲得更高階別的 WordPress 開發體驗了嗎?3 月 26 日釋出的 WordPress 6.5 讓您興奮不已!這個新版本將帶來大量變化,讓您在網站建設和內容建立方面倍感愉悅。

新的 WordPress 字型庫允許您以類似於媒體庫中媒體管理的方式管理字型,讓您對排版有更大的控制權。有了資料檢視(DataViews),您可以使用不同的佈局、過濾器和搜尋選項來呈現資料集,從而改善整體體驗。通過塊繫結 API 和互動性 API,您可以為網站使用者提供更加動態和個性化的體驗。

有了所有這些令人興奮的更新,WordPress 6.5 將改變遊戲規則。

評論留言