WordPress 6.1 中更新了编辑器布局支持

WordPress 6.1 为块编辑器的布局控件和功能带来了相当大的灵活性。一种新的布局类型，“受约束（constrained）”，被添加到已经可用的 Flow 和 Flex 布局类型中。此外，布局重构工作带来了新的布局样式、新的块级间距、布局的更多语义类名称、根填充（root padding）以及禁用所有主题的所有布局样式的方法。

新的“受约束”布局类型

新的“约束”布局类型已从“流体（flow）”布局中分离出来。这意味着“流体”现在仅对应于基本布局配置。此更改将内容宽度逻辑移动到一种称为 “受约束（constrained）”的新布局类型， 这使得将块设置为默认使用内容宽度变得更加容易。

每种布局类型输出什么样式？

流体（Flow）布局

• 子块之间的间距用margin-block-start, margin-block-end;
• 子块的左、右和中心对齐。

约束布局

• 子块之间的间距用margin-block-start, margin-block-end;
• 子块的左、右和中心对齐；
• 子块的宽度限制（基于 settings > layout > contentSize 和 settings > layout > wideSize from theme.json ）；
• 可选地，所有子块的左/右/中心对齐。

Flex 布局（未更改）

• 基本 flex 显示规则，默认为水平方向；
• 子块之间的间距用gap;
• 可选地，左/右/中心/对齐和水平/垂直方向之间的空间。

布局块支持重构

在wordpress 6.1 中，为组、按钮、社交图标和列等块提供布局样式的布局块支持已被重构。在此版本之前，布局块支持将在渲染时为每个存储在帖子内容或模板中的块的每个实例输出布局样式，从而导致在此 Gutenberg 问题中报告的站点前端输出冗余样式# 41434。

为了解决这个问题，重构通过在核心WordPress theme.json 文件中存储一组布局定义来添加基本布局样式的概念，其中包含每个当前布局类型的默认规则。这些基本布局样式通过带有前缀的语义类名附加到每个布局类型is-layout-，从而产生以下基于类名的规则：

• is-layout-flow（与 Group 和其他容器块中使用的 Flow 布局相关的基本布局规则）
• is-layout-constrained（与 Group 和其他设置内容和宽尺寸的容器块中使用的约束布局类型相关的基本布局规则）
• i s-layout-flex（与 Flex 布局类型相关的基本布局规则，用于按钮、社交图标和列块）

现在，当渲染使用布局支持的块时，上述类名之一将被注入到块的输出中，将基本布局样式附加到该块。结果是布局支持现在只输出一个wp-container-123类名（其中 123 是一个半随机数），以及当块使用非默认布局属性时相关的样式。这意味着使用默认布局设置的包含许多组块的帖子或页面的冗余CSS规则将大大减少。

另外，Layout support在输出wp-container-123规则时，会通过新增的样式引擎功能将规则排入队列，从而将所有规则组合在一个style 标签中输出。这进一步整理了 CSS 输出。

在 theme.json 中的块级别启用块间距

布局重构的一个副产品是blockGap现在可以在 theme.json 中的块级别和通过全局样式UI设置，因为间隙样式现在也可以通过上述布局类型类名称输出，使用直接 CSS 值，而不是块间​​隙 CSS 变量--wp--style--block-gap。为了向后兼容依赖 CSS 变量的主题和块，为根styles.spacing.blockGap样式定义的值也作为 CSS 属性输出。

注意： 图库Gallery 块目前不支持 theme.json 中的 blockGap 样式，因为它依赖于间隙间距的特殊方法来考虑图像块的宽度。

布局支持中的语义类名

从 WordPress 6.0 开始，布局支持为布局属性输出语义类名称orientation、justifyContent和flexWrap，从而产生诸如 is-vertical、is-content-justification-left和is-nowrap类的名称。

随着 WordPress 6.1 中的更改，结合基于布局类型的类名称，现在可以针对 组Group 块的特定配置，例如，通过诸如.wp-block-group.is-layout-flex.is-vertical.

这些语义类名称仅为已显式设置的 Layout 属性输出。

根填充

默认情况下，可以在 Styles > Layout > Padding 中设置的根填充应用于最外层的包装元素。在前端是wp-site-blocks; 在编辑器中是editor-styles-wrapper.

这种方法的问题是它不允许块扩展到完整的视口宽度。

useRootPaddingAwareAlignments更改应用左右填充的位置，以便设置为全宽的块实际上可以跨越整个视口宽度。

它是如何工作的？

代替包装器，将左右填充添加到具有约束布局集的最外层容器块。然后，将相同值的负边距添加到该块的任何全宽子级。此外，这些全宽块的非全宽子代也将应用左右填充。这是为了使全宽容器块的内容不会撞到视口的侧面。

要启用此设置，请在 theme.json 中，"useRootPaddingAwareAlignments": true在设置对象中添加。

参看古腾堡工单 #42085 中的更多背景。

禁用布局样式主题支持

默认情况下，WordPress 会输出组、列、社交图标和按钮等块的结构布局样式，作为布局块支持的一部分。到目前为止，一些主题已经通过使用未记录的方法覆盖或render_layout_support_flag删除render_block filter.

在 WordPress 6.1 中，基本布局样式已合并为全局样式输出的一部分，因此现有的选择退出生成的布局样式的方法将不再有效。取而代之的是，主题现在可以使用一个新的主题支持标志，称为disable-layout-styles。主题可以使用以下代码选择加入此功能：

// 可以同来禁用布局样式  add_theme_support( 'disable-layout-styles' );

使用这个新的主题支持标志可确保在代码中明确处理预期的行为。它还允许使用此标志的主题仍然使用在渲染时注入布局块的语义类名称，例如内容对齐类。

注意：选择加入此功能将删除组、列、社交图标和按钮等块所需的样式，因此使用此功能的主题将需要提供自己的结构布局样式，以便这些块在编辑器中正确呈现和在网站的前端。在大多数情况下，特别是对于基于块的主题，生成的布局样式更适合确保正确呈现核心块。对于希望调整块间距的主题，请查看手册条目“什么是块间隙以及如何使用它？” .