Gutenberg 列块的样式

WordPress 5.0 正在 快速临近，新的 Gutenberg 编辑器也随之而来。WordPress 社区围绕着它对用户、设计师和开发人员究竟意味着什么展开了很多讨论。虽然 Gutenberg 肯定会改进写作体验，但对于现在需要确保其插件和主题更新并兼容的开发人员来说，它可能会造成一些麻烦。

确保您的主题与 WordPress 5.0 和 Gutenberg 兼容的最清晰方法之一是为 Gutenberg 引入的新块添加一些基本样式。除了可能已经具有样式的基本 HTML 块（如段落、标题、列表和图像）之外，您现在还将有一些您可能还没有考虑到的复杂块，例如引言、封面图像、按钮和列。在本文中，我们将探讨 Gutenberg 块的一些样式约定，然后为 Gutenberg 的列块添加我们自己的样式。

块命名约定

首先：Gutenberg 块是如何命名的？如果您熟悉代码检查器，您可以在使用您想要设置样式的块的页面上打开它，然后自己检查它

现在，对于您想要设置样式的每个块，这样做可能会很麻烦，幸运的是，有一种方法可以解决这个问题。Gutenberg 块使用块、元素、修饰符 (BEM) 命名约定的形式。主要区别在于每个块的顶层都是 wp。因此，对于我们的引言，名称为 wp-block-pullquote。列将是 wp-block-columns，依此类推。您可以在 WordPress 开发手册 中了解更多信息。

类名注意事项

这里有一个小问题，即块名可能不是您正在处理的唯一类名。在上面的示例中，我们看到类 alignright 也被应用了。并且 Gutenberg 带有两个新类：alignfull 和 alignwide。您将在我们的列中看到，还有一个类来告诉我们有多少列。但我们很快就会讲到这一点。

应用您自己的类名

Gutenberg 块还为我们提供了一种应用我们自己的类的方法

如果您希望为不同主题的块设置一组通用的类，或者想要将现有类应用到有意义的块，或者想要对块进行变体，这将非常有用。

与当前（或“经典”）WordPress 文章编辑器类似，Gutenberg 尽可能少地为前端做出选择，将大部分繁重的工作留给我们。这包括列，它们基本上只包含足够的样式来使它们形成列。因此，我们需要添加填充、边距和响应式样式。

设置列样式

现在该进入问题的核心了：让我们设置一些列的样式！首先，我们需要找到一个我们可以使用的主题。还没有太多主题拥有广泛的 Gutenberg 支持，但这实际上对我们有利。相反，我们将使用一个足够灵活的主题，为我们提供一个良好的起点：Astra。

Astra 是一个免费、快速且灵活的主题，它专为与页面构建器一起使用而设计。这意味着它可以为我们的列提供一个非常好的起始模板。说到这里，我们需要一些内容。以下是我们将要处理的内容

我们有一个包含图像、标题和文本的三列布局。上面的图像是列在 Gutenberg 编辑器中的样子。以下是它们在前端中的样子

您可以看到，我们在编辑器中看到的内容和我们在前端中看到的内容之间有一些差异。最显著的区别是，前端中的列之间没有间距。前端中标题的左端也与第一列的左边缘对齐。在编辑器中，它没有对齐，因为我们使用的是 alignfull 类。

注意：为了本教程的说明，我们将 .alignfull、.alignwide 和无对齐方式视为相同，因为 Astra 主题尚不支持新类。

Gutenberg 列的工作原理

现在我们有了主题，我们需要回答这个问题：“Gutenberg 中的列是如何工作的？”

直到最近，它们实际上还在使用 CSS 网格，但后来切换到了 flexbox。（原因是 flexbox 提供了更广泛的浏览器支持。）也就是说，样式非常轻便

.wp-block-columns {
  display: flex;
}

.wp-block-column {
  flex: 1;
}

如果您想查看我们想要实现的结果，我们有一个包含最终样式的 pen。您可以在其中看到，Gutenberg 只定义了 flexbox，然后说明每一列都应该相同长度。但您还会注意到其他一些事情

• 父容器为 wp-block-columns。
• 还有类 has-3-columns，它为我们记录了列的数量。Gutenberg 支持从两列到六列。
• 各个列具有类 wp-block-column。

这些信息足以让我们开始。

设置父级样式

由于默认情况下应用了 flexbox，因此最好的做法是确保这些列在较大的屏幕环境中（如我们之前所见）看起来不错。

首先，让我们为它们添加一些边距，这样它们就不会相互重叠，或者与其他元素重叠

/* Add vertical breathing room to the full row of columns. */
.wp-block-columns {
  margin: 20px 0;
}

/* Add horiztonal breathing room between individual columns. */
.wp-block-column {
  margin: 0 20px;
}

由于可以合理地假设列不会是页面上唯一的块，因此我们将上下边距添加到整个父容器，以便列与页面上的其他块之间有一定的间隔。然后，为了使列彼此之间不重叠，我们对每个单独的列应用左右边距。

这些列看起来已经好多了！如果您希望它们看起来更加统一，您也可以始终在列上添加 text-align: justify;。

使列响应式

当我们移动到更小的屏幕宽度时，布局开始崩溃。Astra 在缩小字体大小方面做得很好，但当我们开始达到大约 764px 时，事情开始变得有点拥挤

此时，由于我们有三个列，我们可以使用 .has-3-columns 类明确设置列的样式。最简单的解决方案是完全删除 flexbox

@media (max-width: 764px) {
  .wp-block-columns.has-3-columns {
    display: block;
  }
}

这会自动将我们的列转换为块。我们现在只需要调整填充就可以完成操作 - 它不是最漂亮的解决方案，但它是可读的。不过，我想更具创造性。相反，我们将第一列设置为最宽，然后另外两列将在第一列下方保持为列。

这将取决于内容而有所不同。我认为在这里，将尤达优先考虑为最著名的绝地大师是可以原谅的。

让我们看看它是什么样子的

@media screen and (max-width: 764px) {
  .wp-block-columns.has-3-columns {
    flex-flow: row wrap;
  }
  
  .has-3-columns .wp-block-column:first-child {
    flex-basis: 100%;
  }
}

在媒体查询后的前几行，我们以 .has-3-columns 为目标，将 flex-flow 更改为 row wrap。这将告诉浏览器允许列填充容器，但在需要时进行换行。

然后，我们以 .wp-block-column:first-child 为目标，并将第一列指定为 flex-basis 为 100%。这意味着“让第一列填充所有可用空间”。由于我们正在换行列，因此另外两列将自动移动到下一行。我们的结果是

这种布局的优点在于，使用 row wrap，所有列在最小的屏幕上都会变为全宽。但是，由于它们在到达那个尺寸之前就变得难以阅读，因此我们应该找到一个合适的断点并自己设置样式。大约 478px 应该很合适

@media (max-width: 478px) {
  .wp-block-columns.has-3-columns {
    display: block;
  }
  
  .wp-block-column {
    margin: 20px 0;
  }
}

这将移除 flex 布局，并反转各个列的边距，在它们移动到堆叠布局时保持它们之间的间距。

同样，您可以在以下演示中看到所有这些概念是如何组合在一起的

查看 CodePen 上 Joe Casabona (@jcasabona) 编写的 Gutenberg Columns。

如果您想查看不同的实时示例，您可以在这里找到。

总结

所以，就是这样！在本教程中，我们检查了 Gutenberg 的列块的工作原理、它的类命名约定，然后应用基本的样式，使列在前端的每个屏幕尺寸上看起来都很好。从这里，您可以获取此代码并运行它——我们仅仅触及了皮毛，您只需要使用 CSS 就可以做更多事情。例如，我最近使用 Gutenberg 列创建了这个价格表

当然，还有其他块。Gutenberg 将强大的功能赋予内容编辑者，但更强大的功能赋予主题开发者。我们不再需要构建在 WordPress 编辑器中执行更复杂布局的基础设施，也不再需要指示用户插入短代码或 HTML 来获得页面上的所需内容。我们可以在主题中添加一些 CSS，让内容创作者完成剩下的工作。

如果您想更深入地了解如何为 Gutenberg 准备您的主题，可以查看我的课程，Theming with Gutenberg。我们介绍了如何为许多不同的块设置样式、设置自定义颜色调色板、块模板等等。