将 CSS Grid 应用于 WordPress 布局

2018 年 12 月 6 日对 WordPress 来说是一个特殊的日子：它标志着 5.0 版本的发布，该软件至今仍为超过三分之一的网络提供支持。过去，在该平台上工作的人指出，WordPress 版本号从未有任何特殊含义；因此，WordPress 5.0 只是 WordPress 4.9 的后续版本。然而，5.0 带来了自 3.0 版本引入自定义文章类型 以来最大的创新——这几乎是十年了。

块编辑器——代号为“古腾堡”——现在是 WordPress 中新的默认写作工具。在它被核心采用之前，我们心爱的 CMS 一直依赖于我们现在称为经典编辑器的工具。顺便说一句，经典编辑器并没有真正消失：您可以通过 安装一个插件来恢复您多年来一直使用的默认编辑体验。

那么，为什么替换经典编辑器呢？本质上是因为它体现了一种旧的写作理念，一种在文本编辑器唯一需求只是可视化地编写 HTML 代码时产生的理念。

不是为了创建布局。不是为了从异构来源嵌入动态内容。也不是为了提供当您按下“发布”按钮并发布您的内容时，您的帖子或页面将是什么样子的表示。

简而言之，经典编辑器提供了非常基本的写作体验，坦率地说，它在创建任何超过流畅文本的内容方面总是力不从心。

块编辑器基于内容“块”的概念，因为我们添加到页面中的所有内容——文本段落、图像、嵌入——在技术上都是一个块，即由特定属性序列定义的原子实体。这些属性的组合决定了该特定块的状态。将多个块一个接一个地组合起来，您将获得页面的内容。

从无组织的文本到严格的内容结构的这种转变中，体现了块编辑器引入的最大变化。

块编辑器之前的布局

在所有这些东西出现之前，想要在 WordPress 中创建布局的人必须在以下选项之间进行选择

1. 从头开始创建自定义模板，直接处理代码——这是一个崇高的目标，但对大众来说并不那么有吸引力。
2. 使用一个工具，最好是可视化工具，帮助他们构建页面结构，而无需太多代码知识。

这就是 页面构建器 的诞生：页面构建器是提供可视化方式构建布局的插件，理想情况下无需编写一行代码，它们是为了填补可视化模型和实际完成的网站之间的空白而创建的。

页面构建器一直有着糟糕的名声，原因有很多

1. 它们往往速度缓慢且笨重。
2. 有些提供了糟糕的编辑体验。
3. 它们最终会将用户锁定在一个难以替换的框架或生态系统中。

第一点是显而易见的，也是不可避免的：如果您是页面构建器作者（并且希望销售您的产品），您必须使其尽可能具有吸引力；从生理上讲，构建器开始逐渐变成包含所有内容的大型代码汤，从而损害了性能。

第二点可能在某种程度上是主观的。然而，第三点是一个事实。当然，人们可能很乐意在每个项目中都使用相同的工具，随着时间的推移，不断完善对该工具的了解，但是您越坚持使用它，将来可能停止使用它就越困难。

块编辑器旨在克服这种僵局：从用户的角度来看，它旨在提供更好、更丰富的写作体验，而从开发人员的角度来看，它提供了一个统一的、共享的 API，供其构建。

CSS 布局简史

如果你的年龄足够大，你可能已经知道这个故事了。如果不是，听听过去前端开发人员的生活是什么样的，可能很有趣。

CSS 规范的第一个版本可以追溯到 1996 年，它允许嵌入式样式表添加字体样式，为元素选择颜色，更改页面中对象的对齐方式和间距。问题是，在那些日子里，语义 HTML 的概念并不完全普及。换句话说，内容和形式之间没有明确的区分。我们编写的标记和我们想要的外观完全交织在同一个文档中。

这导致 HTML 元素更多地用于演示目的，而不是传达其在页面中的存在意义。例如，在布局方面，这也导致使用表格元素来创建布局而不是实际的表格数据。为了实现更复杂的布局，表格开始嵌套到其他表格中，使页面从语义的角度来看变成一场噩梦，其大小不断增长，并且随着时间的推移变得非常难以维护。如果你曾经编写过 HTML 邮件，那么你就很好地了解了生活是什么样的。而且，确实，即使是对于较小的元素而不是完整的页面布局，这种情况在当今的网站中仍然存在。

然后，Web 标准运动应运而生，其目标是提高开发人员的意识，让他们知道我们可以以不同的、更好的方式做事；样式和内容应该分离，我们需要根据其含义使用 HTML 元素，并强化这样一个概念：从代码权重的角度来看，更轻的页面比无法管理的嵌套表格海洋从根本上来说是一个更好的选择。

然后我们开始（过度）使用 div 元素，并使用float属性将它们并置。演示重点从标记转移到样式表。多年来，浮动成为最可靠的布局工具，但它们可能有点难以处理，因为为了使页面恢复到其标准流程，必须清除它们。此外，在这个时代，页面标记仍然过于冗余，尽管使用 div 代替表格有助于使我们的内容更易访问。

转折点出现在 2012 年，当时发布了 Flexbox 规范。Flexbox 允许开发人员解决一系列长期存在的布局小问题，并提供优雅的语法，只需更少的标记即可实现。突然（好吧，不是那么突然，我们仍然需要关心浏览器支持，对吧？），在两个轴上可靠地 居中对齐内容 不再是一个问题了。令人耳目一新。最后，调整布局可以简化为更改样式表中的一个属性。

尽管 Flexbox 至今仍然很重要，但它并不是故事的结束。

现在是 2019 年！让我们使用 CSS Grid。

如果你读到这里，我们认为可以肯定两件事

1. 我们显然不是为了过上平静、安宁的职业生涯而进入这个行业的。
2. 我们使用的工具将会发生变化。

2017 年，CSS Grid 布局模块规范正式发布，但正如 CSS 规范的惯例，它的草案和临时实现已经存在一段时间了。

CSS Grid 是对 CSS 能够并且应该做什么的大胆尝试。如果我们停止微观管理页面的样式，开始更全面地思考会怎样？如果我们有一个系统可以可靠地在屏幕上定位元素，而根本不依赖于所使用的标记或元素的顺序，并且同时可以在较小的屏幕上以编程方式应用呢？

不，这不仅仅是一个想法。这更像是一个梦想；那种你不想醒来的美梦。除了在 2019 年，这已经成为现实。

当然，Grid 和 Flexbox 之间的主要区别更加细微，但基本上归结为 Grid 在两个维度上操作，而 Flexbox 仅限于一个维度。知道哪些元素将放置在容器的限制范围内，我们可以准确地选择这些元素将在哪里结束，完全来自样式表中编写的指令。

我们想在以后调整布局吗？没问题，该修改不会影响标记。

Grid 背后的基本思想是元素布局在一个，嗯，网格中。根据定义，网格由一定数量的列和行组成，列和行之间的边界形成一系列可以用内容填充的单元格。

这种方法在实现所需结果方面节省的代码量是惊人的：我们只需要识别一个容器元素，对其应用display: grid规则，然后选择该容器内的元素并告诉 CSS 它们在哪个列/行开始/结束。

.my-container {
  display: grid;
  grid-template-columns: repeat( 3, 1fr );
  grid-template-rows: repeat( 2, 1fr );
}

.element-1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

以上示例创建了一个与.my-container元素关联的3×2网格；.element-1是一个2×2的块，它内嵌在网格中，其左上角顶点位于网格第一行第二列。

听起来很不错，对吧？

CSS Grid更棒的一点是，你可以创建模板区域，为这些区域赋予有意义的名称（例如“header”或“main”），然后使用这些标识符以编程方式将元素放置在这些区域中。

.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

.container {
  display: grid;
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

对于那些在表格时代就开始从事这项业务的人来说，上面的代码简直就是科幻小说。

无论如何，好消息是：CSS Grid的浏览器支持非常好。

在WordPress中使用CSS Grid

所以，这很棒，知道我们今天可以做比几年前多得多的事情，可能会让你想要尝试一下Grid。

如果你正在做一个WordPress项目，你又回到了上面提到的两种选择：我们是重新开始并手动编写模板，还是有什么东西可以帮助我们？幸运的是，有一个插件可能会让你感兴趣，我们创建它的目标是双重的

1. 在块编辑器和CSS Grid之间建立桥梁。
2. 创建一个插件，也许可以让人们克服最初对采用块编辑器的疑虑。

它叫做Grids，可以在WordPress插件库中免费下载。

Grids只负责布局结构。它提供了一个12×6的网格（称为Section），你可以在上面拖动和绘制将包含在该Section中的元素（Areas）。

该系统允许你手动指定尺寸、背景、响应式行为，所有这些都使用块编辑器中的可视化控件，但根据设计，它不提供任何内容块。当然，有人可能会认为这种方法是一个弱点，但我们认为它实际上是Grids最大的优势，因为它使插件能够与世界各地其他开发人员创建的大量内容块集成。更重要的是，Grids在某种程度上帮助这些块以及WordPress平台与CSS Grid本身建立了联系。

然而，即使插件本身不严格生成内容，也难免将其与成功的页面构建器放在同一个语境中，事实上，将它的功能与那些构建器提供的功能进行比较。如果你关心表单和内容分离、页面重量、易于维护等概念，Grids为在WordPress中创建视觉上吸引人的布局提供了更简洁的解决方案。

生成的标记是最少的。在最基本的形式中，一个Section（即具有display: grid属性的元素）仅由其自身元素组成——当然，还有一个内部包装器（无法避免，用于间距目的），然后是属于该Section的每个Area的一个元素。这在避免使用不必要的标记方面是巨大的进步。

对于那些不害怕亲自动手为块编辑器开发块的人来说，块的渲染是在服务器端完成的，这允许使用过滤器向Section和Area元素添加自定义类。

这个选择也直接决定了你禁用Grids安装后会发生什么。
​​
​​如果你没有再次保存页面，Grids在前端留下的实际上只是你放在内容区域中的内容。没有任何额外的标记元素，没有任何奇怪的短代码。
​​
​​在后端，块编辑器有一个系统，会在你编辑一个应该使用特定块类型但该块类型当前不可用的页面时向你发出警告：在这种情况下，你可以轻松地暂时重新启用Grids，将你的内容移动到另一个位置，然后完全删除该Section。

生成用于创建网格的CSS也动态添加到页面中，作为文档<head>部分中的内联样式。我们并不是特别喜欢直接写在页面中的样式，因为理想情况下，我们希望将所有样式委托给我们可以进行版本控制的文件，但在这个案例中，我们发现这种方法非常方便。

另一种可行的方案是识别所有可能的列/行起始/结束点，并以编程方式将这些点与类映射，然后可以使用这些类来实际定位网格内的元素。在一个12×6的网格中，这将导致总共有36个类选择器，如下所示

.grids-cs-1 {
  grid-column-start: 1;
}

.grids-ce-2 {
  grid-column-end: 2;
}

如果我们决定提供更多关于网格组成方式的控制，例如，让用户访问确定网格结构由多少列或多少行组成的选项呢？

我们必须手动映射样式表中尚不存在的类（并仅为此发布插件更新），或者再次内联生成它们，然后将这些类添加到网格元素中。

虽然完全没问题，但这种方法有点违背了拥有更精简、更容易扫描的标记的想法，因此我们决定不采用这种方法，并接受样式动态放置在文档head中的代价，知道它可以很容易地被缓存。

由于插件的实验性质，用于实际组成网格的后端UI是使用CSS Grid和一组CSS变量创建的，我们通过这些变量控制内容区域的属性。使用变量极大地加快了我们网格创建器原型背后的工作——如果我们选择另一条路径，那么在开发时间方面不仅会花费更长的时间，而且还会变得更加复杂，并且在未来的维护中也更加难以理解。

需要反馈！

为了进一步促进CSS Grid的采用，我们需要能够自动化使用它创建布局流程的工具。

虽然我们已经看到了很多关于这项技术的精彩示例，但如果假设今天发布的每个网站背后都有一支前端开发团队，可以解决这个问题，那就太短视了。

我们需要能够生成良好标记、不会妨碍网站样式表维护的工具，最重要的是，在WordPress世界中，这些工具可以轻松地与人们喜欢的现有主题集成。

我们认为Grids是朝着这个方向迈出的一步，因为它是一个建立在两个标准之上的工具——块编辑器API和CSS Grid——因此，它重新发明轮子的风险较小。

虽然我们在最近在柏林举行的WordCamp Europe上记录了人们对该插件的普遍兴趣——Matt Mullenweg本人在他的主题演讲中简要演示了该插件——但我们知道它仍然需要大量反馈，而这些反馈只能通过现实场景获得。因此，如果你想试用Grids，请使用它，测试它，并且为什么不建议新功能呢。