为什么以及何时使用 WordPress 组、行和堆栈块

当您使用 WordPress 块编辑器创建和编辑页面时，您可能不止一次尝试在不接触代码的情况下更改某些块的布局或样式而感到沮丧。 特别是当您求助于创建列来创建不打算用于列的布局时。

在这篇文章中，我们将看到我们为某些页面部分布局提供了更合适的替代方案。 通过几个示例，您将看到组、行和堆栈块提供的一些可能性，这些块解决了我们在使用列时可能会遇到的一些问题。

对于这篇文章中显示的示例，我使用了 WordPress 版本 6.0.1 和二十二十二主题。

使用列的示例

例如，让我们看一下我们希望在旅行社页面上显示的第一部分内容的两个简单布局。

要在块编辑器中重现第一个示例，一个选项是首先添加带有所选图像的封面块，然后添加几列不同大小的列。 右栏占三分之一并包含内容（即标题、段落和两个按钮）。

以全尺寸查看时，布局看起来不错。 但是如果我们减小窗口的大小，浏览器会保持以列的形式显示，并在另一个之上显示按钮。

您可以看到，通过这个解决方案，我们不仅添加了一个空列，而且它并不完全是我们在较小设备上寻找的显示。

同样，对于第二个示例，我们也先添加一个封面块，然后是几列，最后是内容。 内容现在包含一个信封图标，后跟一个电子邮件地址。 我们不能使用媒体和文本块，因为块图像的最小大小超过了我们想要显示的大小……所以，我们再次使用两列：一列用于图标，另一列用于文本：

和以前一样，除了添加了空列之外，通过减小窗口的大小，屏幕上显示的结果并不是我们想要的。

正如您在上图中所见，除了左侧的所有文本非常分组外，信封图像与电子邮件地址的组合看起来并不好。 比例丢失了，邮件的文本被破坏了。

让我们看看如果我们使用组、原始和堆栈块而不是列，我们如何解决上述问题。

组块

正如您肯定知道的那样，组块是用于对容器内的一组块进行分组的块。 这就像一个有孩子的父母街区。

它最常用于对一组列或段落进行分组，然后通过例如设置背景颜色或定义页面中其他元素使用的唯一间距和边距道具来调整整个组。

您还可以为其所有内容指定最大尺寸，并添加具有特定样式和颜色的边框。

行和堆栈块

行块和堆栈块是一种块，允许您在一行（或列，与堆栈块）中插入多个块并均匀地间隔它们。 您可以使用行或堆栈块来创建分隔线或在同一行上添加多个项目，就好像它们包含在列中一样。

您可以在两个块中指定的属性与组的属性非常相似，只是您不能指定其内容的最大大小。 在这种情况下，您可以添加整个块相对于其容器的对齐方式。

让我们看看如何使用这些类型的块而不是列来创建前两个示例，以及它们为我们提供的优势。

组、行和堆栈块的示例

要在不使用列的情况下创建第一个示例的第一部分，我们首先像以前一样使用图像创建封面块。 接下来，在封面块内，我们添加一个组块。 组块的特点之一是它的对齐总是全角的，并且在它的容器中居中。 因此，通过添加标题、段落和两个块并将这些块中的每一个居中对齐，结果如下。

这不是我们最初想要的，因为组块向我们显示了中心而不是封面块右侧的所有信息。

但它的优点是我们可以为其指定最大宽度，这样显示的文本就不会占据封面块的整个宽度。 与列不同的是，无论我们将窗口缩小多少，按钮总是并排对齐。

我们如何让组显示在图像的右侧？ 这就是堆栈组为我们提供了我们正在寻找的解决方案的地方。

创建封面块后，添加堆栈块并设置右对齐。 接下来添加限制其大小的组块并添加内容。

现在，我们没有任何空块，无论页面大小如何，在查看页面时，内容都始终以并排对齐的按钮显示。

第二个例子很相似，但是我们如何解决图标和邮箱的问题呢？ 好吧，创建一个带有图像块和段落的行类型块：

现在，当我们减小窗口大小时，页面第一部分的显示效果仍然很好，保持图像和电子邮件地址对齐并且不会破坏文本。

结论

通过这两个示例，我们已经能够看到我们在列中遇到的一些布局问题现在可以通过组、堆栈和行块来解决。 使用这些块，您可以通过证明内容和调整边距来获得有关列的灵活性。 此外，您不会被迫使用没有任何意义的空列。 所以忘记创建带有空列的页面！

Unsplash 上 La-Rel 复活节的特色图片。