WordPress 6.7 釋出在即,此前我們也先對 WP 6.7 的新功能進行了簡單的預覽,是時候回顧一下新版本為我們帶來的新功能、新變化和新改進了。
該版本包括 87 項核心增強功能、功能請求和 200 多個錯誤修復。
WordPress 6.7 的核心包含從 18.6 到 19.3 的八個 Gutenberg 版本。區塊編輯器獲得了 445 項改進、464 項錯誤修復和 55 項可訪問性改進。
核心為開發人員提供了新的強大 API。編輯器介面有了多項新增和改進,包括以前只能使用程式碼訪問的工具。可用性改進和新的設計工具將簡化設計流程。
WordPress 6.7 還展示了一個新的預設主題–Twenty Twenty-Five,它受益於新版本的最新功能。
在 WordPress 6.7 帶來的眾多新功能和新變化中,我們挑選了一些開發者和使用者最感興趣的內容。要說的還有很多,請直接進入新功能。
縮放模式
WordPress 6.7 具有新的“縮放”模式,可幫助您建立和編輯內容,重點關注樣板而不是單個區塊。這讓您可以在更高的層次上工作,並提供正在構建的頁面的整體檢視。
下面的圖片展示了新功能的實際效果。在頂部工具欄中新增的“切換縮放”按鈕可讓你切換“縮小”檢視的開和關,使你可以在樣板或單個區塊上交替工作。
在 WordPress 6.7 中切換縮放
在 WordPress 6.7 中切換“縮放”模式
啟用縮小模式後,您可以對所選圖案執行多種操作。圖塊工具欄提供拖拽、上移/下移和重新排列等控制。列表檢視提供了執行多種操作的連結,如編輯、複製和刪除所選圖案。
列表檢視中的區塊樣板
啟用“縮放”後,區塊插入器預設為“樣板”選項卡。列表檢視也會反映編輯模式,並顯示樣板而不是區塊。
有關“縮放”模式相關功能和更改的更全面列表,請參閱“縮放”模式迭代問題和WordPress 6.7 中“縮放”的開發人員說明。
文章編輯器中的Meta元框
在 6.7 之前的版本中,元方框會阻止文章編輯器畫布在 iframe 中載入。這樣就無法獲得一些好處,例如從編輯器使用者介面中隔離塊和主題 CSS,以及媒體查詢和視口的相對 CSS 單位的準確性。簡而言之,這個問題排除了在編輯器和前端檢視中使用相同 CSS 的可能性。
從 WordPress 6.7 開始,編輯器內容和元框可以在編輯器介面中共存。由於採用了新的分割檢視,即使當前文章/頁面有一個或多個元方框,也能在 iframe 中載入文章編輯器畫布。根據開發說明
這一更改確保了編輯器和前端檢視之間一致的所見即所得體驗。此外,它還讓元框比以前更易於使用。它允許在處理任何後設資料框時直觀地參考文章內容的任何部分,反之亦然。
WordPress 6.7 中帶有元框的框架畫布
該實現使用 flex
使內容檢視和元框區域可滾動。
該增強功能還為“文章”編輯器介面帶來了一些變化:
- 元方框區域的高度預設限制為 50%,以防止佔用過多空間。
- 元方框區域可根據視口高度摺疊或調整大小。
- 調整後的高度狀態和開啟/關閉狀態將在使用者偏好設定中保持不變。
WordPress 6.7 中可調整大小的元框區域
檢視開發說明,瞭解面向開發人員的更深入概述。
改進區塊繫結 API
區塊繫結應用程式介面(Block Bindings API)是在 WordPress 6.5 中首次引入的,它允許您將區塊的屬性繫結到外部資料來源。區塊繫結應用程式介面的首次迭代使自定義欄位值與標題、段落、按鈕和圖片區塊的屬性繫結成為可能。WordPress 6.6 在區塊繫結API的基礎上為一項新的強大功能開啟了大門: 樣板重寫(Pattern Overrides)。
WordPress6.7 為我們帶來了通過塊繫結API實現的新功能和改進,以及管理文章元源的新預設介面。
新的塊繫結使用者介面
本次迭代提供了一個新介面,可使用內建的文章元塊繫結源從設定側邊欄管理標題、段落、按鈕和圖片區塊的區塊繫結。
一旦註冊了自定義欄位並選擇了其中一個受支援的區塊,一個新的屬性面板就會出現在區塊設定側邊欄中。新增一個或多個自定義文章欄位後,“屬性”面板就會變成互動式的,讓您可以將區塊屬性連線到自定義欄位。
WordPress 6.7 中的新屬性面板
這可以幫助您建立繫結,而無需在程式碼編輯器中手動新增程式碼。
預設情況下,只有管理員可以建立和修改繫結。開發人員可以使用 block_editor_settings_all
或 map_meta_cap
過濾器覆蓋預設行為。
開發說明警告了與新屬性介面相關的兩個限制。
- 此版本還無法將塊屬性連線到自定義源。這一增強功能應在未來的版本中實現。
- 第二個限制與“屬性”面板中顯示的自定義欄位型別有關。目前,只支援字串或富文字型別的欄位。同樣,我們可以期待在未來的迭代中逐步支援其他型別的自定義欄位。
有關增強的區塊繫結 API 與自定義帖子模板的有趣用例,請參閱開發說明。
新的文章元標籤屬性
新增了一個 label
屬性,允許外掛開發人員在註冊時為文章元欄位新增自定義標籤。現在您可以使用以下程式碼註冊帶有標籤的自定義欄位:
register_post_meta( 'post', 'book_title', array( 'show_in_rest' => true, 'type' => 'string', 'single' => true, 'sanitize_callback' => 'sanitize_text_field', 'label' => __('Book title') ) );
如果設定了標籤,則標籤將代替元鍵顯示在區塊繫結使用者介面中。下圖顯示了帶有自定義標籤的屬性面板:
帶有自定義欄位標籤的屬性面板
編輯塊繫結功能
除了新的區塊繫結介面外,還可使用新的 canUpdateBlockBindings
編輯器設定來確定新介面是否可與使用者互動。這預設為新的 edit_block_binding
功能,管理員設定為 true
,其他使用者設定為 false
。
您可以使用 block_editor_settings_all
過濾器更改預設行為。
面向開發人員的新應用程式介面和功能
WordPress 6.7 為開發人員在編輯器中使用塊繫結帶來了新功能。
新的編輯器 API 允許您使用引導值註冊伺服器上定義的自定義源。簡而言之,您可以使用伺服器 API 註冊外部源並在使用者介面中呈現它們。
新的預設主題 Twenty Twenty-Five 提供了一個使用版權模式進行源引導的好例子。在主題的 functions.php
檔案中,你可以找到以下程式碼:
// Registers block binding sources. if ( ! function_exists( 'twentytwentyfive_register_block_bindings' ) ) : /** * Registers the copyright block binding source. * * @since Twenty Twenty-Five 1.0 * * @return void */ function twentytwentyfive_register_block_bindings() { register_block_bindings_source( 'twentytwentyfive/copyright', array( 'label' => _x( '© YEAR', 'Label for the copyright placeholder in the editor', 'twentytwentyfive' ), 'get_value_callback' => 'twentytwentyfive_copyright_binding', ) ); } endif; // Registers block binding callback function for the copyright. if ( ! function_exists( 'twentytwentyfive_copyright_binding' ) ) : /** * Callback function for the copyright block binding source. * * @since Twenty Twenty-Five 1.0 * * @return string Copyright text. */ function twentytwentyfive_copyright_binding() { $copyright_text = sprintf( /* translators: 1: Copyright symbol or word, 2: Year */ esc_html__( '%1$s %2$s', 'twentytwentyfive' ), '©', wp_date( 'Y' ) ); return $copyright_text; } endif; add_action( 'init', 'twentytwentyfive_register_block_bindings' );
預設情況下,該程式碼會在使用者介面中顯示© YEAR,如下圖所示。
帶有引導值的自定義源
請注意,區塊畫布中的段落不是動態的,只顯示原始碼標籤。
要檢查該程式碼塊的標記,您需要建立一個 Twenty Twenty-Five 版權模式的副本,並在程式碼編輯器中開啟您的副本:
<!-- wp:paragraph { "metadata":{ "bindings":{ "content":{ "source":"twentytwentyfive/copyright" } } }, "className":"copyright", "textColor":"primary", "fontSize":"small" } --> <p class="copyright has-primary-color has-text-color has-small-font-size"></p> <!-- /wp:paragraph -->
您可以在 6.7 開發說明中的塊繫結中閱讀有關區塊繫結新功能的更多資訊。
資料檢視新增功能
資料檢視是用於模板、樣板、頁面等集合的改進使用者介面。它也是一個元件和一個 API,允許您在站點編輯器中使用不同型別的佈局(如表格、網格、列表等)呈現資料集。
WordPress 6.7 中的佈局列表
資料檢視在 WordPress 6.5 中首次引入,並在WordPress 6.6中得到改進。現在,WordPress 6.7 增加了新特性和增強功能,使它們變得更加靈活和實用。
從 WordPress 6.7 開始,網格檢視的右上角會顯示一個齒輪圖示。點選該圖示後,外觀面板會顯示一系列檢視選項。在這裡,你可以對檢視中的元素進行排序,調整網格密度,設定每頁的元素數量,以及選擇要在預覽中顯示的元素屬性。
小檢視預覽
中檢視預覽
切換按鈕允許使用者顯示/隱藏檢視篩選器,從而改善在窄螢幕上的使用體驗。
在資料檢視中顯示/隱藏篩選器的切換按鈕
在 WordPress 6.7 中隱藏資料檢視中的篩選器
當您設定一個或多個篩選器時,切換篩選器按鈕會顯示活動篩選器的數量。
WordPress 6.7 中的切換過濾器顯示
資料檢視的其他更改包括可配置的長寬比、選單中的資料檢視選項等。
改進的查詢迴圈區塊
查詢迴圈區塊是功能最強大、最複雜的程式塊之一。它必須提供最大的功能和自定義可能性,同時保持直觀和易於使用。在 WordPress 6.7 中,查詢迴圈塊得到了多項改進和新增功能,使其功能更多,使用更方便。
以前的“從模板中繼承查詢”設定控制元件已經更改,現在應該更加直觀和簡單。
編輯模板時,查詢迴圈設定面板會顯示查詢型別控制元件。以下圖片顯示了兩種不同查詢型別的設定選項:預設和自定義。
WordPress 6.7 中的查詢型別控制元件
WordPress 6.7 中的查詢型別控制元件
上下文檢測也得到了改進。查詢塊有一個預設設定為true
的 inherit
設定。在單個頁面上,這對查詢結果沒有影響,相應的控制元件已在 WordPress 6.7 中刪除。
WordPress 6.7 中單個頁面的查詢迴圈設定
另一方面,在歸檔或索引模板中,查詢塊的內容取決於請求型別。這意味著特定類別的存檔頁面預設顯示分配給該類別的內容,而與使用者明確設定的其他設定(如文章數量)無關。
您可以在此處找到涉及查詢迴圈塊問題的綜合列表。
媒體管理新增功能
在 WordPress 6.7 中,媒體管理變得更加實用和高效。從自動調整懶載入圖片的大小到廣泛支援背景圖片,以下是 6.7 中對媒體管理的一些改進。
懶載入影象的自動尺寸
為 sizes
設定預設值可讓瀏覽器從srcset
屬性的值中識別要使用的影象檔案。這樣,瀏覽器就能在知道頁面佈局之前預先知道影象的寬度。
HTML 規範允許圖片省略 sizes
屬性,或明確將其設定為 auto
或以 auto
開頭的字串:
關鍵字 auto 是在解析 sizes 屬性時計算出的寬度。如果存在,它必須是第一個條目,而整個 <source-size-list>
值必須是字串 auto
(ASCII 大小寫不敏感)或以字串 auto
, 開頭(ASCII 大小寫不敏感)。
在 WordPress 6.7 中,auto
屬性會自動新增到任何懶載入圖片的 sizes
屬性開頭。這將提高頁面載入的效能。
在 WordPress 6.7 中自動調整懶載入圖片的尺寸
開發人員可以使用新的 wp_img_tag_add_auto_sizes()
函式修正 sizes
屬性的值。
字型庫增強功能
WordPress 6.7 還對字型庫進行了一些有用的改進。首先,字型現在按來源(主題和自定義)分組,這樣就更容易一目瞭然地瞭解每種字型的來源。
WordPress 6.7 中按來源分組的字型:主題字型
WordPress 6.7 中按來源分組的字型:自定義字型
當您在 Google Fonts 上搜尋字型時,一個新的“全選”選項按鈕可為您節省幾次點選。
在 WordPress 6.7 中選擇所有字型變體
其他更改包括:在字型不可用時提供新的“未安裝字型”訊息;在字型已安裝但未啟用時提供改進的“未安裝字型”狀態。
支援 HEIC 格式
HEIC 格式(高效影象容器)是 HEIF(高效影象格式)的更新變體,被蘋果公司用於所有執行 iOS 11 或更高版本的 iPhone 和 iPad。這種格式可確保 iOS 使用者充分利用 4k 攝像機並獲得更小的檔案大小。
在 WordPress 6.7 中,HEIC 影象上傳會盡可能在伺服器上自動轉換為 JPEG 格式。這一新增功能允許使用者在媒體庫中檢視 HEIC 影象,即使瀏覽器不支援 HEIC,也能在文章和頁面中使用它們。
瀏覽器支援 HEIF/HEIC 影象格式(來源:Caniuse)
新的增強型設計工具
有了 WordPress 6.7,設計人員可以使用新的強大設計工具,包括擴充套件塊支援、字型大小預設等。
詩句、引言和文章內容區塊的背景圖片支援使用者介面
WordPress 6.7 帶來了新的使用者介面控制元件,用於管理全域性樣式中少數區塊的背景圖片。這些區塊包括詩句、引語和文章內容。
WordPress 6.7 中的背景圖片使用者介面
在全域性樣式中設定背景圖片適用於整個網站。為區塊新增背景圖片後,您只需為同一區塊的單個例項自定義設定,即可定製其外觀。
在 WordPress 6.7 中自定義背景影象
您可以在“文章內容”區塊中使用此功能,在模板中包裝文章和頁面內容。下面的截圖提供了一個如何使用背景圖片的示例。
在“文章內容”區塊中編輯背景圖片
更多區塊支援
除了對詩句、引用和帖子內容塊的背景支援外,WordPress 6.7 還為設計師和主題開發人員喜愛的幾個塊提供了新的塊支援。
邊框支援已擴充套件到許多區塊,包括按鈕、分類、畫廊、Heading 標題、媒體文字、段落、文章標題、引用等。
媒體和文字的邊框控制
WordPress 6.7 中列表項的顏色控制元件
WordPress 6.7 還為設計人員和主題開發人員帶來了期待已久的新增功能:對組區塊的陰影支援。
組區塊的陰影控制元件
字型大小預設
WordPress 6.7 引入了一個新的使用者介面,用於在全域性樣式介面中控制字型大小預設。這允許使用者覆蓋主題的預設設定,並使用編輯器建立、編輯、刪除和應用字型大小預設。
這還包括切換流體排版和設定自定義流體值的功能。
要親自嘗試,請開啟“樣式”介面並導航至“字型大小”>“字型大小預設”。一個新面板將顯示可用字型大小預設的列表。單擊您選擇的預設並進行編輯。
在 WordPress 6.7 中編輯字型大小預設
所有更改都將應用於整個網站。
使用者介面改進和其他編輯功能
WordPress 6.7 引入了更多改進編輯體驗的使用者介面變化和功能。讓我們來看看其中的一些。
釋出按鈕改變了位置
釋出前檢查面板中的“取消 ”和“釋出 ”按鈕的位置互換了,因此您現在無需在頁面上移動游標就可以釋出文章。
釋出按鈕已移至右側
區塊檢查器中的自定義區塊名稱
在 WordPress 6.7 中,當您設定自定義區塊名稱時,它現在也會顯示在區塊檢查器中。在 WordPress 6.6 中,區塊檢查器顯示的是預設區塊名稱(如 Heading)。
在 WordPress 6.6 中,自定義塊區名稱不顯示在區塊檢查器中
在 WordPress 6.7 中,自定義區塊名稱顯示在區塊檢查器中
禁用選擇樣板模組
現在您可以關閉建立新頁面時出現的“選擇樣板”模組。要退出此功能,請從“選項”選單中開啟“首選項”,然後禁用“顯示初始模式”選項。
在 WordPress 6.7 中禁用“選擇樣板”模組
自動連結電話號碼
當您新增電話號碼時,連結欄位會自動新增tel:
。
WordPress 6.7 中的連結電話號碼
允許在圖片區塊中放置多張圖片
現在,您可以在影象區塊上拖放多張影象,並將其轉換為畫廊區塊。
在 WordPress 6.7 中的影象區塊上拖動多個影象
通過在畫廊區塊上拖動多個影象生成畫廊區塊
面向開發人員的新功能和應用程式介面
WordPress 6.7 為開發人員提供了多個新的應用程式介面,以便為他們的外掛新增更多功能。新增了預覽選項 API,其他 API 也擴充套件了新功能,如 HTML API 和互動性 API。讓我們一起來探索其中的一些功能。
預覽選項 API
新的預覽選項 API允許外掛開發人員擴充套件帖子/頁面編輯器中的預覽下拉選單。該 API 引入了一個新的 PluginPreviewMenuItem
元件,外掛可以使用該元件在預覽下拉選單中新增帶有自定義標題和點選處理程式的自定義選單項。
外掛開發人員可以在 WordPress 編輯器中新增自定義預覽選項,以實現一系列功能,例如
- 自定義格式預覽(想想社交媒體文章)
- 針對特定使用者角色限制的文章或頁面預覽
- 額外的預覽模式,如黑暗模式、電子郵件等。
根據所提供的道具,您可以將自定義預覽選單項用作按鈕或連結。
以下是開發說明中關於如何使用新 API 的示例:
import { __ } from '@wordpress/i18n'; import { PluginPreviewMenuItem } from '@wordpress/editor'; import { registerPlugin } from '@wordpress/plugins'; function onPreviewClick() { // Handle preview action } const CustomPreviewMenuItem = () => ( <PluginPreviewMenuItem onClick={ onPreviewClick } > { __( 'Your menu item label' ) } </PluginPreviewMenuItem> ); registerPlugin( 'custom-preview-menu-item', { render: CustomPreviewMenuItem, } );
新外掛模板註冊 API
在 WordPress 6.7 之前,新增自定義塊模板的唯一選擇是通過主題。使用外掛註冊塊模板是不可能的,除非使用複雜的變通方法。
有了新的模板註冊 API,您現在可以使用外掛註冊自定義區塊模板了。新 API 提供了兩個用於註冊和取消註冊模板的新函式:register_block_template()
和 unregister_block_template()
。
它們的使用非常簡單。您只需向函式傳遞幾個引數即可:
$template_name:
名稱,格式為plugin_uri//template_name
(注意//
)$args:
由以下引數組成的陣列:
title
description
content
post_types
有關新 API 的詳細介紹和使用示例,請參閱開發說明和原始拉取請求。
新的區塊型別註冊 API
新的 wp_register_block_metadata_collection()
函式可從清單檔案(如果存在)中註冊區塊型別,而不是直接讀取和解析 block.json
檔案。當外掛註冊多個區塊型別時,這個函式尤其有用,因為它避免了為每個區塊型別讀取和解析 block.json 檔案。
請注意,這個新函式不會取代現有的 register_block_type()
和 register_block_type_from_metadata()
函式。它的使用是可選的,但建議註冊多個區塊的外掛使用,以提高效能。
有關新 API 的全面概述和使用示例,請檢視開發說明。
標題級別選項
藉助新的 levelOptions
屬性,開發人員可以指定 Heading 標題、站點標題、網站副標題、查詢標題、文章標題和評論標題塊的下拉使用者介面中應顯示的標題級別。
該屬性主要用於區塊模板、模板部件和樣板。以下示例程式碼禁用了標題區塊中的 H1、H5 和 H6 標題:
<!-- wp:heading {"levelOptions":[2,3,4],"textAlign":"center"} --> <h2 class="wp-block-heading has-text-align-center"><em>Schedule a Demo</em></h2> <!-- /wp:heading -->
下圖顯示了區塊工具欄中的可用選項:
WordPress 6.7 中的標題級別
您也可以使用外掛或在主題的函式檔案中使用 register_block_type_args
過濾器過濾 levelOptions 屬性。開發說明提供了以下示例:
function example_modify_heading_levels_globally( $args, $block_type ) { if ( 'core/heading' !== $block_type ) { return $args; } // Remove H1, H2, and H6. $args['attributes']['levelOptions']['default'] = [ 3, 4, 5 ]; return $args; } add_filter( 'register_block_type_args', 'example_modify_heading_levels_globally', 10, 2 );
WordPress 6.7 為開發人員帶來的其他變化
- 現在可以將掛鉤區塊插入為模板部分割槽塊的第一個或最後一個子區塊。(請參閱開發說明)
- 鉤子區塊現在尊重
multiple
支援屬性。(參見開發說明) - 使用者介面元件獲得大量更新。(參見開發說明)
- 新函式
getServerState()
和getServerContext()
提供了一種在客戶端導航時訂閱互動式 API 狀態/上下文變化的方法。 - 指令碼模組通過新的
@wordpress/a11y
指令碼模組和新的script_module_data_{$module_id}
過濾器獲得了一些更新。 - HTML API 得到了多項增強,包括支援幾乎所有 HTML 標記、新的
set_modifiable_text()
方法(允許替換script
、style
或title
等獨立元素的文字內容)、HTML 處理器中的全解析器模式等。 - 一些國際化 (i18n) 方面的改進已合併到核心中,包括新的
has_translation()
函式,該函式可在不首先載入翻譯的情況下確定翻譯是否已存在;傳送到admin_email
的郵件將以使用者的本地語言傳送;如果開發人員在已知當前使用者之前在外掛或主題中載入翻譯,則會發出警告。
小結
在這次對 WordPress 6.7 的深入研究中,我們探索了該版本的許多超棒功能和增強特性,從全新的預設主題、縮放模式到帖子編輯器中的元方框、塊繫結 API 新增、媒體管理改進、新設計工具,以及為外掛開發人員提供的許多新功能。
現在,輪到您了。您測試過 WordPress 6.7 嗎?您最喜歡 6.7 中的哪些功能或變化?請在下面的評論中告訴我們。
評論留言