设置古腾堡专栏的风格

WordPress的5.0 Swift接近，而新古登堡编辑器与它的到来。 WordPress社区中有很多讨论，这些讨论对用户，设计师和开发人员到底意味着什么。尽管Gutenberg肯定会改善写作体验，但对于现在需要确保其插件和主题已更新且兼容的开发人员来说，这可能会有些麻烦。

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

块命名约定

第一件事：古腾堡块如何命名？如果您熟悉代码检查器，则可以使用要设置样式的块在页面上打开它，然后自己检查一下：

现在，对于要样式化的每个块都这样做很麻烦，而且幸运的是，有一种方法可以消除这种疯狂。古腾堡块使用块，元素，修饰符（ BEM ）命名约定的形式。主要区别在于每个块的最高层是wp 。因此，对于我们的拉引号，名称为wp-block-pullquote 。列将是wp-block-columns ，依此类推。您可以在WordPress开发手册中阅读有关它的更多信息。

类名警告

这里有一个小警告，即块名称可能不是您要处理的唯一类名称。在上面的示例中，我们看到也应用了alignright类。 Gutenberg带有两个新类： alignfull和alignwide 。您会在我们的专栏中看到有一个类可以告诉我们有多少个类。但是，我们很快就会解决。

应用自己的班级名称

古腾堡块还为我们提供了一种应用我们自己的类的方法：

该类已添加到Gutenberg编辑器的选项面板中（左）。如DevTools（右）所示，它已应用于元素。

如果您希望为跨不同主题的块提供一组通用的类，或者希望将先前存在的类应用于有意义的块，或者希望对块进行变型，那么这非常好。

就像当前的（或“经典”）WordPress帖子编辑器一样，古腾堡（Gutenberg）为前端做出了尽可能少的选择，而大部分繁重的工作留给了我们。这包括列，这些列基本上仅包含足以使它们构成列的样式。因此，我们需要添加填充，边距和响应样式。

造型柱

是时候解决问题了：让我们来设计一些专栏！我们需要做的第一件事是找到我们可以使用的主题。尚没有太多获得古腾堡（Gutenberg）广泛支持的公司，但对我们而言，这实际上是件好事。相反，我们将使用足够灵活的主题来为我们提供一个良好的起点： Astra 。

Astra是一种免费，快速且灵活的主题，旨在与页面构建器一起使用。这意味着它可以为我们的专栏提供一个非常好的入门模板。说到这，我们需要一些内容。这是我们将要处理的内容：

我们有一个三列的布局，其中包含图像，标题和文本。上图是古腾堡（Gutenberg）编辑器中各列的外观。它们在前端的外观如下：

您可以看到在编辑器中看到的内容与在前端看到的内容之间存在一些差异。最值得注意的是，前端的列之间没有间距。前端标题的左端也与第一列的左边缘对齐。在编辑器中，这不是因为我们正在使用alignfull类。

注意：由于本教程的缘故，我们将处理.alignfull ， .alignwide ，并且没有相同的对齐方式，因为Astra主题尚不支持新类。

古腾堡专栏如何工作

现在我们有了一个主题，我们将回答这个问题： “古腾堡中的列如何工作？”

直到最近，他们才真正使用CSS网格，但是后来切换到flexbox。（理由是flexbox提供了更广泛的浏览器支持。）也就是说，样式非常轻巧：

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

如果您想看到我们想要的结果，我们提供了带有最终样式的笔。您可以在其中看到Gutenberg仅定义了flexbox，然后指出每列的长度应相同。但是您还会注意到其他几件事：

父容器是wp-block-columns 。
该类has-3-columns ，请注意我们的列数。古腾堡支持两到六列的任何地方。
各个列具有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;}
}

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

再次，您可以在以下演示中看到所有这些概念：

请参阅CodePen上的Joe Casabona（ @jcasabona ）撰写的Pen Gutenberg专栏。

如果要查看其他现场示例，可以在此处找到一个示例。

包起来

所以你有它！在本教程中，我们检查了Gutenberg的Columns块是如何工作的，它是类的命名约定，然后应用了基本样式，以使这些列在前端的每种屏幕尺寸下都看起来不错。从这里开始，您可以使用此代码并运行它-我们几乎没有涉及到表面，仅使用CSS您就可以做更多的事情。例如，我最近仅使用古腾堡（Gutenberg）列制作了此价格表：

当然，还有其他障碍。古腾堡（Gutenberg）在内容编辑者手中拥有很多力量，但在主题开发人员手中却拥有更多力量。我们不再需要在WordPress编辑器中构建用于执行更复杂布局的基础结构，也不再需要指示用户插入短代码或HTML来获取页面上的内容。我们可以在主题中添加一些CSS，然后让内容创建者来完成其余的工作。

如果您想更深入地准备古腾堡的主题，可以查看我的课程《与古腾堡的主题》。我们讨论了如何为许多不同的块设置样式，如何设置自定义调色板，块模板等等。

翻译自: https://css-tricks.com/styling-the-gutenberg-columns-block/