上周分享英雄风格帖子标题教程时，我有点沮丧。我打算创建一个最大宽度的左对齐组的布局，如下面的截图所示：
这样可以让背景图片的焦点照在右边。然而，这些已知技术似乎都不是理想的。
最常用的方法之一是使用 50/50 列块，将右侧的列留空。这在某些屏幕尺寸上令人困惑。但是，正如 Andrew Starr 在评论中指出的那样，为左列设置特定宽度并清除右列的宽度可以解决此问题。感谢他找到了一种在系统内工作的方法。不过，这不是最直观的方法，也没有充分的理由在 HTML 中留空
。我们不应该教用户，这感觉就像一个 hack。
我的直觉告诉我，我的首选解决方案是正确的。这也是无需借助黑客专栏即可实施的最简单方法。它使用 Cover 块的内容对齐矩阵控件与内部 Group 块上的设置宽度相结合。但是，我遇到了这个问题，不明白为什么。直到我这周重新开始（我稍后再讲）。另外，我很固执，会不断尝试直到它神奇地起作用。
所以，我又回到了绘图板上。厌倦了看以前的设计，我在大约一年前提出了我的第一个模式想法，并使用最新的设计工具重新创建了它：
我还想确保此解决方案适用于任何屏幕尺寸。当向更小的视口移动时，内容应该占据更多空间，直到它到达边缘。本教程中的方法很好地处理了这个问题：
Building with Blocks 系列中的这篇文章介绍了如何创建此布局。作为奖励，我还将展示如何在 Cover 容器没有意义的情况下使用 WordPress 6.0 中的新 Stack 块来完成此操作。
构建基块
在本演练中，我使用了自定义主题。但是，我还测试了 Archaeology、Avantgarde 和 Twenty2。它在整个团队中始终如一地发挥作用。我还在运行 WordPress 6.0 beta 1，但没有激活 Gutenberg 插件。
第一步：添加封面
内容左对齐的封面块。
对于这一步，插入一个新的封面块以及您喜欢的图像。大多数设置是无关紧要的。我选择了全高和全宽选项的切换开关。
这一步最关键的部分是从内容对齐矩阵控件中选择一个选项。在工具栏中，它将是一个带有九个小方块的图标，几乎是点（见屏幕截图）。要在 Container 的中间左侧对齐后续步骤中的块，请选择第二行的第一个“点”。当然，您可以随意尝试不同的选项。
关于封面设计的其他一切都由您决定。
第二步：添加固定宽度组
添加具有特定宽度的块。
要包含您将在步骤 3 中添加的内容，请在步骤 1 的封面内插入一个块。
块侧边栏面板中的“布局”选项卡包含唯一必要的选项你必须设置。您将需要定义内容和范围选项。
这是我在早期测试中遇到的障碍。百分比 (%) 单位的行为与所有其他单位不同。使用时，组块始终是全宽的，并且其内容始终居中。没有其他人有这个问题。但是，并非所有这些都适用于此特定布局。视口宽度 (vw) 和视口高度 (vh) 单位将按预期对齐，但不会在较小的设备上扩展到全屏。
重要的是要记住使用固定的单位类型，例如 px、em 或 rem。您也可以选择“继承默认布局”，但它的行为方式将取决于您的活动主题。
我将 Content 和 Wide 选项都设置为 40rem（对于此类设计，Wide 设置不需要大于 Content）。从技术上讲，这是一个最大宽度值而不是固定宽度。这使它能够适应较小的屏幕尺寸。
第三步：添加内容
添加自定义内容。
最后一步，你只需要在第2步的组中添加你喜欢的内容。我选择添加标题、段落和按钮块。这可以是任何你想要的——没有规则。
使用堆栈块构建
WordPress 6.0 将引入组块的新堆栈变体。它不是典型的自顶向下流，而是垂直弹性布局。我本周在 Gutenberg 13.0 上发帖。
要测试以下技术，您必须安装 WordPress 6.0 Beta 1 或安装最新版本的 Gutenberg 插件。另一种选择是等待几周的时间才能正式发布。
第一步：添加堆栈块
添加一个 Stack 并将其内容左对齐。
第一步在内容画布中插入一个新的 Stack 块。您可以选择为其提供背景颜色或渐变。我选择后者是为了让事情变得有趣。
与 Group 块不同，Stack 具有内容对齐控件。如果您完成了本教程的第一部分，您可能已经知道我的目标是什么。侧边栏中有一个“对齐”控件，用于将嵌套块左对齐、居中或右对齐。重复选项也在工具栏中。
与 Cover 块一样，您可以根据需要使用这些选项。否则，将其设置为“左”以跟随。
步骤 2–3：冲洗并重复
固定宽度组在堆栈变体中左对齐。
步骤 #2 和 #3 与使用 Cover 块作为外部容器时完全相同。所以你只需重复前面概述的过程。此外，最重要的是为组块定义固定宽度。
在经历了上周的挫折之后，这最终变得非常容易。这也是块编辑器变得多么强大以及用户体验有时如何达不到预期的一个例子。如果我作为一个几乎一直生活和呼吸 WordPress 的人遇到了障碍，其他用户很可能也有同样的问题。我希望我在本教程中至少掌握了布局构建的一个方面。
类别：积木搭建
来源
