WordPress 6.1 新增受约束布局类型及编辑器布局优化详解

WordPress 6.1 为块编辑器带来了革命性的升级，显著提升了布局控件与功能的灵活性。新增的”受约束（constrained）”布局类型与现有的 Flow 和 Flex 布局类型协同工作，为内容创作提供了前所未有的自由度。此次更新不仅优化了布局重构工作，还引入了全新的布局样式、块级间距机制、语义化类名、根填充功能，以及禁用所有主题布局样式的实用选项。

### 新的”受约束”布局类型

“受约束”布局类型已从”流体（flow）”布局中独立出来，这意味着”流体”现在仅保留基础布局配置功能。这一调整将内容宽度逻辑迁移至新的”受约束”布局类型，让创作者能更轻松地将块默认设置为使用内容宽度。不同布局类型的表现形式各具特色：

– **流体（Flow）布局**：通过 margin-block-start 和 margin-block-end 定义子块间距，支持左中右对齐
– **约束布局**：在保持 Flow 布局间距与对齐特性的基础上，新增子块宽度限制（基于 theme.json 中的 contentSize 和 wideSize 设置）；可选择统一左中右对齐
– **Flex 布局**：维持原版 Flex 布局规则，默认水平排列，使用 gap 定义间距，支持多维度对齐与方向控制

### 布局块支持重构

WordPress 6.1 对布局块支持进行了全面重构，解决了此前版本中每个块实例渲染重复样式的问题。重构的核心在于 theme.json 文件中新增了基础布局样式定义，包含各布局类型的默认规则。这些规则通过语义类名 is-layout-+布局类型（如 is-layout-flow、is-layout-constrained）附加到对应块，实现高效样式管理。

重构后的布局支持仅输出 wp-container-123 类名（123 为随机编号）及非默认属性相关样式，大幅减少冗余 CSS 规则。同时，新增样式引擎功能将所有规则整合至单一 style 标签中输出，进一步优化了前端性能。

### 在 theme.json 中启用块间距

布局重构的延伸功能使 blockGap 可在 theme.json 中按块级和全局样式设置。这一改进允许使用直接 CSS 值替代原有的 –wp–style–block-gap 变量，增强兼容性。特别说明：图库 Gallery 块暂不支持此功能，因其依赖特殊间隙间距计算方法。

### 布局支持中的语义类名

自 WordPress 6.0 起引入的语义类名（orientation、justifyContent、flexWrap）在 6.1 版本中更加完善。结合布局类型类名，可创建如 .wp-block-group.is-layout-flex.is-vertical 的精准样式选择器。这些类名仅对已显式设置的 Layout 属性生效，为精细化设计提供强大支持。

### 根填充机制

根填充功能允许在 Styles > Layout > Padding 中设置的默认填充应用于最外层包装元素（前端为 wp-site-blocks，编辑器中为 editor-styles-wrapper）。新增的 useRootPaddingAwareAlignments 功能通过特殊计算方式，使全宽块能完整跨越视口宽度。其工作原理为：将左右填充附加到约束布局的最外层容器，同时为全宽子级添加等值负边距，确保内容不触碰视口边缘。

启用方式：在 theme.json 设置对象中添加 “useRootPaddingAwareAlignments”: true。

### 主题禁用布局样式支持

WordPress 6.1 统一了布局样式输出机制，主题可通过以下方式禁用默认样式：

“`javascript
add_theme_support( ‘disable-layout-styles’ );
“`

此功能删除组、列等块的自动样式，主题需自行提供结构布局样式。值得注意的是，虽然禁用自动样式可保留语义类名称（如内容对齐类），但主题需承担确保块正确呈现的责任。对于基于块的主题，系统生成的布局样式通常更优；若需调整块间距，建议参考”什么是块间隙以及如何使用它？”文档。

完整文档指引：文档 > 块编辑器 > 说明 > 架构 > 布局样式

文章网址：https://www.wpbull.com/news/2009.html