WordPress 站点编辑器的主要目标之一（是的，现在是 “官方名字) 是移动基本块样式 止 CSS 到结构化 JSON. JSON 文件是机器可读的，这使得基于 JavaScript 的站点编辑器可以直接在 WordPress 中配置主题的全局样式。
还没到那一步呢！ 如果我们看一下 Twenty-Twenty-Two (TT2) 默认主题，有两个主要未解决的问题： 样式交互 （喜欢 :hover, :active, :focus）， 边距 和 布局容器的填充. 你可以看到这些是如何在 TT2 中临时修复的 style.css 文件而不是将其放入 theme.json 文件中。
WordPress的6.1 解决了这些问题，我想做的是专门研究后者。 现在我们有了用于布局容器的边距和填充的 JSON 化样式，这让我们可以 在我们的主题布局中定义间距的更灵活和强大的方法.
我们在谈论什么样的间距？
首先，我们已经有 根级填充 这是描述填充的奇特方式 <body> 元素。 这很好，因为它确保了在所有页面和帖子上共享的元素的一致间距。
但还有更多，因为现在我们有一种方法可以让块绕过填充并全宽对齐。 这要归功于 填充感知对齐 这是一个新的选择加入功能 theme.json. 所以，即使你有根级别的填充，你仍然可以允许，比方说，一个图像（或其他一些块）突破并变成全角。
这让我们得到了另一件事： 约束布局. 这里的想法是，嵌套在布局中的任何块都遵循布局的内容宽度——这是一个全局设置——并且不会流出它之外。 我们可以通过对齐逐个块地覆盖该行为，但我们会做到这一点。
让我们从……开始吧
根级填充
同样，这不是新的。 我们已经能够在 <body> 元素在 theme.json 自实验以来 古腾堡插件 在版本 11.7 中引入了它。 我们将它设置在 styles.spacing 对象，我们有 margin 和 padding 用于定义正文顶部、右侧、底部和左侧间距的对象：
{ "version": 2, "styles": { "spacing": { "margin": { "top": "60px", "right": "30px", "bottom": "60px", "left": "30px" }, "padding": { "top": "30px", "right": "30px", "bottom": "30px", "left": "30px" } } }
}这是一个全局设置。 所以，如果我们打开 DevTools 并检查 <body> 元素，我们会看到这些 CSS 样式：
body { margin-top: 60px; margin-right: 30px; margin-bottom: 60px; margin-left: 30px; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px;
}凉爽的。 但这里存在一个问题，即我们究竟如何允许一些块突破该间距以填满整个屏幕，边到边。 这就是为什么有间距，对吗？ 它有助于防止这种情况发生！
但确实有很多情况，您可能希望在块编辑器中工作时在一次性实例中打破该间距。 假设我们在页面上放置一个图像块，我们希望它全角显示，而其余内容尊重根级填充？
输入…
填充感知对齐
在尝试创建第一个定义所有样式的默认 WordPress 主题时 theme.json 文件中，首席设计师 Kjell Reigstad 说明了突破根级填充的挑战性方面 GitHub问题.
WordPress 6.1 中的新功能就是为了解决这个问题而创建的。 接下来让我们深入研究。
useRootPaddingAwareAlignments
一个新的 useRootPaddingAwareAlignments property 是为了解决这个问题而创建的。 它实际上是在 Gutenberg 插件 v13.8 中首次引入的。 这 原始拉取请求 是一本很好的入门书，介绍了它是如何工作的。
{ "version": 2, "settings": { "appearanceTools": true, "useRootPaddingAwareAlignments": true, // etc. },马上，请注意这是我们必须选择加入的功能。 该属性设置为 false 默认情况下，我们必须明确地将其设置为 true 为了启用它。 还要注意我们有 appearanceTools 设置 true 以及。 这让我们进入 UI 控件 在站点编辑器中设置边框样式、链接颜色、排版，当然还有包含边距和填充的间距。
设置 appearanceTools 设置 true 自动将块选择为边距和填充 无需设置 settings.spacing.padding or setting.spacing.margin 至 true.
当我们启用时 useRootPaddingAwareAlignments，我们提供了带有根填充值的自定义属性，这些属性设置在 <body> 元素在前端。 有趣的是，它还将填充应用于 .editor-styles-wrapper 类，以便在后端块编辑器中工作时显示间距。 很酷！
在四处挖掘时，我能够在 DevTools 中确认那些 CSS 自定义属性。
启用 useRootPaddingAwareAlignments 还将左右填充应用到任何支持上面全局样式图像中的“内容”宽度和“宽”宽度值的块。 我们还可以在中定义这些值 theme.json:
{ "version": 2, "settings": { "layout": { "contentSize": "640px", "wideSize": "1000px" } }
}如果全局样式设置与中定义的不同 theme.json, 那么全局样式优先。 您可以了解有关管理块主题样式的所有信息 在我的上一篇文章中.
contentSize是块的默认宽度。wideSize提供“宽”布局选项，并为要伸展的块建立更宽的列。
因此，最后一个代码示例将为我们提供以下 CSS：
/* The default content container */
.wp-container-[id] > * { max-width: 640px; margin-left: auto !important; margin-right: auto !important;
} /* The wider content container */
.wp-container-[id] > .alignwide { max-width: 1000px;
}[id] 表示由 WordPress 自动生成的唯一编号。
但是猜猜我们还能得到什么？ 完全对齐也是如此！
.wp-container-[id] .alignfull { max-width: none;
}看到了吗？ 通过启用 useRootPaddingAwareAlignments 并定义 contentSize 和 wideSize，我们还获得了一个完全对齐的 CSS 类，用于总共三个容器配置，用于控制添加到页面和帖子的块的宽度。
这适用于以下特定于布局的块：Columns、Group、Post Content 和 Query Loop。
块布局控件
假设我们将任何上述特定于布局的块添加到页面中。 当我们选择块时，块设置 UI 会根据 settings.layout 我们定义的值 theme.json （或全局样式用户界面）。
我们在这里处理非常具体的块——可以在其中嵌套其他块的块。 所以，这些布局设置实际上是关于控制那些嵌套块的宽度和对齐方式。 默认情况下启用“内部块使用内容宽度”设置。 如果我们关闭它，那么我们没有 max-width 在容器上，它里面的块是边到边的。
如果我们将开关保持打开状态，那么嵌套块将遵循 contentWidth or wideWidth 值（稍后会详细介绍）。 或者我们可以使用数字输入来定义自定义 contentWidth 和 wideWidth 在这个一次性实例中的值。 那是很大的灵活性！
宽块
我们刚刚查看的设置是在父块上设置的。 一旦我们在其中嵌套了一个块并选择了它，我们就可以在该块中使用其他选项来使用 contentWidth, wideWidth, 或全角。
contentWidth 设置，在上下文菜单中标记为“无”，但也可以设置为 wideWidth （标记为“宽宽度”）或“全宽度”。请注意 WordPress 如何将根级填充 CSS 自定义属性乘以 -1 选择“全宽”选项时创建负边距。
.alignfull 类在嵌套块上设置负边距以确保它占据整个视口宽度而不与根级填充设置冲突。使用约束布局
我们刚刚介绍了 WordPress 6.1 中的新间距和对齐方式。 这些特定于块和块中的任何嵌套块。 但 WordPress 6.1 还引入了新的布局功能，以提高主题模板的灵活性和一致性。
恰当的例子：WordPress 已经完全重组了它的 Flex 和 Flow 布局类型，并给了我们一个 受限 布局 使用站点编辑器的全局样式 UI 中的内容宽度设置，可以更轻松地对齐主题中的块布局。
Flex、Flow 和 Constrained 布局
这三种布局类型之间的区别在于它们输出的样式。 伊莎贝尔·布里森 (Isabel Brison) 写得很好 这很好地概述了差异，但让我们在这里解释一下以供参考：
- 流程布局： 在嵌套块之间添加垂直间距
margin-block方向。 这些嵌套块也可以左对齐、右对齐或居中对齐。 - 约束布局： 与 Flow 布局完全相同，但对基于
contentWidth和wideWidth设置（无论是在theme.json或全局样式）。 - 弹性布局： 这在 WordPress 6.1 中没有改变。 它用 CSS 弹性盒 创建一个默认情况下水平流动（连续）的布局，但也可以垂直流动，因此块堆叠在另一个之上。 使用 CSS 应用间距
gap属性。
这种新的布局类型为每个布局创建语义类名称：
| 语义布局类 | 布局类型 | 支持的块 |
|---|---|---|
.is-layout-flow |
流程布局 | 列、组、发布内容和查询循环。 |
.is-layout-constrained |
约束布局 | 列、组、发布内容和查询循环。 |
.is-layout-flex |
弹性布局 | 列、按钮、社交图标 |
Justin Tadlock 有一篇关于 不同的布局类型和语义类，包括用例和示例。
更新您的主题以支持受限布局
如果您已经在使用自己制作的块主题，那么您会想要 更新它以支持受约束的布局. 所需要的只是换掉一些东西 theme.json:
{ "version": 2, "settings": { "layout": { "type": "constrained", // replaces `"inherit": true` "type": "default", // replaces `"inherit": false` } }
}这些是最近发布的块主题，启用了间距设置 useRootPaddingAwareAlignments 并有更新 theme.json 定义约束布局的文件：
禁用布局样式
基本布局样式是 WordPress 6.1 Core 中附带的默认功能。 换句话说，它们是开箱即用的。 但是如果我们需要这个小片段，我们可以禁用它们 functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );这里有一个大警告：也禁用对默认布局类型的支持 删除这些布局的所有基本样式. 这意味着您需要为间距、对齐方式以及在不同模板和块上下文中显示内容所需的任何其他内容滚动自己的样式。
结束了
作为全宽图像的忠实粉丝，新包含的 WordPress 6.1 布局和填充感知对齐功能是我最喜欢的两个功能。 与其他工具一起使用，包括更好的边距和填充控制， 流体排版，以及更新的 List 和 Quote 块等，有力地证明了 WordPress 正在朝着更好的内容创建体验迈进。
现在，我们不得不拭目以待，看看普通设计师和内容创作者的想象力和创造力如何使用这些令人难以置信的工具并将其提升到一个新的水平。
由于站点编辑器的开发迭代正在进行中，我们应该始终预见到前方的艰难道路。 然而，作为一个乐观主义者，我很想知道即将到来的 WordPress 6.2 版本会发生什么。 我正在密切关注的一些事情是像 正在考虑的功能 包容，支持 粘性定位, 新的布局类名称 对于内部块包装器， 更新的页脚对齐选项及 向 Cover 块添加约束和流动布局选项.
本篇 GitHub 问题 #44720 列出布局相关的讨论 预定用于 WordPress 6.2.
额外的资源
在深入研究所有这些内容时，我查阅并参考了很多资料。 这里有一大堆我觉得有用的东西，我认为你可能也会喜欢。
教程
WordPress帖子
GitHub 拉取请求和问题
- 硬币聪明。 欧洲最好的比特币和加密货币交易所。了解更多
- 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
- Sumber: https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/
