Gutenberg 21.7 已在 9 月24日正式发布,为 WordPress 编辑器带来了全方位的升级。这一版本重点优化了 命令面板与数据视图,增强了 DataForm 控件 的验证与交互体验,并扩展了 全局样式,让表单元素与整体设计更加统一。与此同时,大量 bug 得到修复,性能与无障碍功能进一步提升。在底层,编辑器继续推进 TypeScript 迁移,为未来平滑过渡到 React 19 打下基础。无论是内容创作者还是开发者,都能在 Gutenberg 21.7 中体验到更顺畅、更高效、更稳定的工作流程。
一、命令面板与全局操作更便捷
在新版中,命令面板的功能进一步增强:
自定义 CSS 命令 已经移至核心命令包中,编辑站点时能更快调用。
菜单导航注册 基于 Core Menu API 实现,开发者可以用更统一的方式来管理站点菜单。
所有屏幕都支持 导航命令,无论是编辑页面还是配置界面,都能直接调用命令操作。
这意味着站点管理将更加直观,编辑流程不再受限于单一界面。
二、数据视图与 DataForm 全面升级
数据视图(DataViews)在这一版本有了大幅改进,重点包括:
支持 颜色字段、数据选择器、密码字段,让数据管理更直观。
DataForm 控件增强:单选、下拉、多选组都支持验证与描述,更适合电商和表单场景。
新增 URL 和电话字段,并在邮件和电话控件中加入图标,界面更友好。
布尔值字段 从切换 UI 改为复选框 UI,更符合操作直觉。
日期时间控件 采用日历式选择,减少输入错误。
引入 groupBy 列表布局 与 行布局,更适合复杂数据展示。
对用户来说,表单和数据展示的可控性显著提升;对开发者来说,扩展性和可维护性也更强。
三、块库与写作模式优化
块库新增与调整亮点:
导航链接 的“添加页面”按钮改为“创建页面”,并在写作模式下直接显示,减少层级切换。
目录块工具栏 更新,更方便快速排版。
条款查询块 新增,Order 和 Order By 控件合并,操作更简洁。
手风琴块 支持 BlockGap,用户可轻松调整内容间距。
在写作模式中,还增加了导航添加页面按钮,并允许隐藏 Query 子项的发布日期,减少干扰。这些改动让写作体验更贴近真实需求。
四、块绑定与编辑器改进
新版对块绑定和编辑器也有多项优化:
新增 block_bindings_supported_attributes 过滤器,为更多属性绑定提供支持。
图像块在 caption 属性绑定时,可以保存 <figcaption> 内容,提升内容一致性。
插入器在空块场景下的显示逻辑更合理,避免无谓的干扰。
同时,编辑器对标签和本地化进行了优化,保证多语言站点的使用体验。
五、全局样式与性能优化
全局样式覆盖范围扩大:站点编辑器始终显示“附加 CSS”按钮,表单元素也全面纳入全局样式控制。
BorderRadius 预设修复:避免生成错误变量名,提高主题兼容性。
Core Web Vitals 优化:通过减少冗余代码和动画,提高加载性能。
对站长来说,统一的全局样式意味着风格更一致,也更容易维护。
六、错误修复与无障碍改进
这次更新修复了许多影响体验的问题:
修复了弹出滚动钩子的滚动异常。
优化了表单控件的颜色变量处理。
修复了过时插入点引用问题,编辑器更稳定。
在无障碍改进方面:
“n 个更多回复”文本可点击,提升评论区可访问性。
评论字段支持 TextareaAutosize,输入体验更好。
支持在已发布文章中启用内嵌评论,并新增重新打开已解决评论的功能。
这些改进让 Gutenberg 更加贴合真实的内容协作场景。
七、开发者与底层增强
引入新的 useCommands API,开发者可以用更现代的方式调用命令。
大量模块迁移到 TypeScript,为未来升级到 React 19 做好准备。
精简不必要的 JS 文件,减少加载压力。
测试方面,新增自动化测试与端到端测试,保证新功能的稳定性。
这为 WordPress 的长远发展打下坚实的技术基础。
八、总结
这次 Gutenberg 更新不只是小修小补,而是一次全方位的体验优化。让编辑者有更顺畅的写作和布局体验、开发者有更强大的 API 与 TypeScript 支持、用户有更快的加载速度与更高的交互可用性,使得大家都能从中受益。
这次更新让 Gutenberg 更加成熟,WordPress 编辑器正迈向一个高效、稳定、面向未来的阶段。