Gutenberg 21.7 已在 9 月24日正式發(fā)布，為 WordPress 編輯器帶來(lái)了全方位的升級(jí)。這一版本重點(diǎn)優(yōu)化了 命令面板與數(shù)據(jù)視圖，增強(qiáng)了 DataForm 控件 的驗(yàn)證與交互體驗(yàn)，并擴(kuò)展了 全局樣式，讓表單元素與整體設(shè)計(jì)更加統(tǒng)一。與此同時(shí)，大量 bug 得到修復(fù)，性能與無(wú)障礙功能進(jìn)一步提升。在底層，編輯器繼續(xù)推進(jìn) TypeScript 遷移，為未來(lái)平滑過(guò)渡到 React 19 打下基礎(chǔ)。無(wú)論是內(nèi)容創(chuàng)作者還是開(kāi)發(fā)者，都能在 Gutenberg 21.7 中體驗(yàn)到更順暢、更高效、更穩(wěn)定的工作流程。

一、命令面板與全局操作更便捷

在新版中，命令面板的功能進(jìn)一步增強(qiáng)：

• 自定義 CSS 命令 已經(jīng)移至核心命令包中，編輯站點(diǎn)時(shí)能更快調(diào)用。
• 菜單導(dǎo)航注冊(cè) 基于 Core Menu API 實(shí)現(xiàn)，開(kāi)發(fā)者可以用更統(tǒng)一的方式來(lái)管理站點(diǎn)菜單。
• 所有屏幕都支持 導(dǎo)航命令，無(wú)論是編輯頁(yè)面還是配置界面，都能直接調(diào)用命令操作。

這意味著站點(diǎn)管理將更加直觀，編輯流程不再受限于單一界面。

二、數(shù)據(jù)視圖與 DataForm 全面升級(jí)

數(shù)據(jù)視圖（DataViews）在這一版本有了大幅改進(jìn)，重點(diǎn)包括：

• 支持 顏色字段、數(shù)據(jù)選擇器、密碼字段，讓數(shù)據(jù)管理更直觀。

• DataForm 控件增強(qiáng)：?jiǎn)芜x、下拉、多選組都支持驗(yàn)證與描述，更適合電商和表單場(chǎng)景。
• 新增 URL 和電話字段，并在郵件和電話控件中加入圖標(biāo)，界面更友好。
• 布爾值字段 從切換 UI 改為復(fù)選框 UI，更符合操作直覺(jué)。
• 日期時(shí)間控件 采用日歷式選擇，減少輸入錯(cuò)誤。
• 引入 groupBy 列表布局 與 行布局，更適合復(fù)雜數(shù)據(jù)展示。

對(duì)用戶來(lái)說(shuō)，表單和數(shù)據(jù)展示的可控性顯著提升；對(duì)開(kāi)發(fā)者來(lái)說(shuō)，擴(kuò)展性和可維護(hù)性也更強(qiáng)。

三、塊庫(kù)與寫(xiě)作模式優(yōu)化

塊庫(kù)新增與調(diào)整亮點(diǎn)：

• 導(dǎo)航鏈接 的“添加頁(yè)面”按鈕改為“創(chuàng)建頁(yè)面”，并在寫(xiě)作模式下直接顯示，減少層級(jí)切換。

• 目錄塊工具欄 更新，更方便快速排版。
• 條款查詢塊 新增，Order 和 Order By 控件合并，操作更簡(jiǎn)潔。
• 手風(fēng)琴塊 支持 BlockGap，用戶可輕松調(diào)整內(nèi)容間距。

在寫(xiě)作模式中，還增加了導(dǎo)航添加頁(yè)面按鈕，并允許隱藏 Query 子項(xiàng)的發(fā)布日期，減少干擾。這些改動(dòng)讓寫(xiě)作體驗(yàn)更貼近真實(shí)需求。

四、塊綁定與編輯器改進(jìn)

新版對(duì)塊綁定和編輯器也有多項(xiàng)優(yōu)化：

• 新增 block_bindings_supported_attributes 過(guò)濾器，為更多屬性綁定提供支持。
• 圖像塊在 caption 屬性綁定時(shí)，可以保存 <figcaption> 內(nèi)容，提升內(nèi)容一致性。
• 插入器在空塊場(chǎng)景下的顯示邏輯更合理，避免無(wú)謂的干擾。

同時(shí)，編輯器對(duì)標(biāo)簽和本地化進(jìn)行了優(yōu)化，保證多語(yǔ)言站點(diǎn)的使用體驗(yàn)。

五、全局樣式與性能優(yōu)化

• 全局樣式覆蓋范圍擴(kuò)大：站點(diǎn)編輯器始終顯示“附加 CSS”按鈕，表單元素也全面納入全局樣式控制。

• BorderRadius 預(yù)設(shè)修復(fù)：避免生成錯(cuò)誤變量名，提高主題兼容性。
• Core Web Vitals 優(yōu)化：通過(guò)減少冗余代碼和動(dòng)畫(huà)，提高加載性能。

對(duì)站長(zhǎng)來(lái)說(shuō)，統(tǒng)一的全局樣式意味著風(fēng)格更一致，也更容易維護(hù)。

六、錯(cuò)誤修復(fù)與無(wú)障礙改進(jìn)

這次更新修復(fù)了許多影響體驗(yàn)的問(wèn)題：

• 修復(fù)了彈出滾動(dòng)鉤子的滾動(dòng)異常。
• 優(yōu)化了表單控件的顏色變量處理。
• 修復(fù)了過(guò)時(shí)插入點(diǎn)引用問(wèn)題，編輯器更穩(wěn)定。

在無(wú)障礙改進(jìn)方面：

• “n 個(gè)更多回復(fù)”文本可點(diǎn)擊，提升評(píng)論區(qū)可訪問(wèn)性。
• 評(píng)論字段支持 TextareaAutosize，輸入體驗(yàn)更好。
• 支持在已發(fā)布文章中啟用內(nèi)嵌評(píng)論，并新增重新打開(kāi)已解決評(píng)論的功能。

這些改進(jìn)讓 Gutenberg 更加貼合真實(shí)的內(nèi)容協(xié)作場(chǎng)景。

七、開(kāi)發(fā)者與底層增強(qiáng)

• 引入新的 useCommands API，開(kāi)發(fā)者可以用更現(xiàn)代的方式調(diào)用命令。
• 大量模塊遷移到 TypeScript，為未來(lái)升級(jí)到 React 19 做好準(zhǔn)備。
• 精簡(jiǎn)不必要的 JS 文件，減少加載壓力。
• 測(cè)試方面，新增自動(dòng)化測(cè)試與端到端測(cè)試，保證新功能的穩(wěn)定性。

這為 WordPress 的長(zhǎng)遠(yuǎn)發(fā)展打下堅(jiān)實(shí)的技術(shù)基礎(chǔ)。

八、總結(jié)

這次 Gutenberg 更新不只是小修小補(bǔ)，而是一次全方位的體驗(yàn)優(yōu)化。讓編輯者有更順暢的寫(xiě)作和布局體驗(yàn)、開(kāi)發(fā)者有更強(qiáng)大的 API 與 TypeScript 支持、用戶有更快的加載速度與更高的交互可用性，使得大家都能從中受益。

這次更新讓 Gutenberg 更加成熟，WordPress 編輯器正邁向一個(gè)高效、穩(wěn)定、面向未來(lái)的階段。

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息