2018年12月6日是wordpress的一个特殊日期：它标志着该软件的5.0版本的发布，到目前为止，它已经超过了网络的三分之一。过去，在平台上工作的人们指出，wordpress版本中使用的版本号从来没有任何特殊含义;?因此，wordpress 5.0只是wordpress 4.9的追随者。然而，自从自定义帖子类型在3.0版本中推出以来，5.0带来了可能是最大的创新- 差不多十年了，伙计们。
块编辑器 – 代号“gutenberg” – 现在是wordpress中的新默认书写工具。在core中采用之前，我们心爱的cms依赖于我们现在称之为经典编辑器的东西。顺便说一下，经典编辑器并没有真正消失：你可以把它带回来安装一个插件，恢复您多年来所熟知的默认编辑体验。
那么，为什么经典编辑器被取代了？基本上因为它体现了一种旧的写作概念，这是一个概念，当文本编辑器的唯一需要是在视觉上组成html代码时。
不要创建布局。不要从异构源中嵌入动态内容。当您按下“发布”按钮并使用您的内容时，不要提供您的帖子或页面的样子。
简而言之，经典编辑器提供了非常基本的写作体验，坦率地说，它总是不足以创造除流动文本之外的任何东西。
块编辑器基于内容“块”的概念，即我们可以添加到页面的所有内容 – 文本段落，图像，嵌入 – 在技术上是一个块，即由一个定义的原子实体某些系列的属性。这些属性的组合决定了特定块的状态。一个接一个地组合几个块，您将获得页面的内容。
在从无组织文本到严格内容结构的过渡中，块编辑器引入了最大的变化。
布局预块编辑器在所有这些爆发之前，想要在wordpress中创建布局的人必须在以下任一选项之间进行选择：
从头开始创建一个自定义模板，用代码弄脏他们的手 – 这是一种崇高的意图，但却不那么吸引大众。使用工具，如果是可视工具，可以帮助他们在没有太多代码知识的情况下组成页面结构。这就是页面构建器诞生的方式：页面构建器是提供构建布局的可视方式的插件，理想情况下不需要触及单行代码，并且它们是为了填补可视化模型与实际完成的网站之间的空白而创建的。 。
由于各种原因，页面构建器一直受到不良声誉的影响：
它们往往是缓慢而笨重的。有些提供糟糕的编辑体验。他们最终将用户锁定在难以替换的框架或生态系统中。第一点是显而易见的，因为它是不可避免的：如果你是页面构建者的作者（并且希望能够出售你的产品的副本），你必须尽可能地吸引人;?在生理上，建筑商开始慢慢成为其中所有东西的大代码汤，而不利于表现。
第二点可能是主观的，至少在某种程度上是这样。然而，第三点是事实。当然，对于每个项目都可以使用相同的工具完美地完成，随着时间的推移完善对仪器的了解，但是你越坚持它，它就越难以有一天停止使用它。
块编辑器旨在超越这种僵局：从用户的角度来看，它旨在提供更好，更丰富的写作体验，而从开发人员的角度来看，它提供了一个统一的共享api，可以从中构建。
css布局简史如果你已经够大了，你可能已经知道了这个故事。如果没有，那么您可能会很高兴听到当天前端开发人员的生活状况。
css规范的第一个版本可以追溯到1996年，它允许嵌入式样式表添加字体样式，为元素选择颜色，更改页面中对象的对齐和间距。问题在于，在那些日子里，语义html的概念并不完全普及。换句话说，内容和形式之间没有明确的分离。我们写的标记和我们想要的外观完全交织在同一个文档中。
这导致html元素更多地用于演示目的，而不是将意义传达给他们在页面中的存在。例如，在布局方面，这也导致表元素用于创建布局而不是实际的表格数据。为了实现更复杂的布局，表开始嵌套到其他表中，从语义的角度来看，页面成为一场噩梦，它的大小增长和增长，并且随着时间的推移很难维护。如果您曾经编写过html电子邮件，那么您就很清楚生活是什么样的。而且，实际上，这仍然存在于今天的网站中，即使它是针对较小的元素而不是完整的页面布局。
然后，web标准运动的目标是提高开发人员的意识，即我们可以以不同的方式做得更好;?这种风格和内容应该分开，我们需要使用html元素来表达它们的含义，并强化这样一个概念：较轻的页面（就代码权重而言）是一个比无法管理的嵌套表格更好的选择。
然后我们开始（使用）div元素，并使用float属性并置它们。演示焦点从标记转移到样式表。floats成为多年来最可靠的布局工具，但它们处理起来可能有些问题，因为必须清除它们才能使页面返回到标准流程。此外，在这个时代，页面标记仍然过于冗余，即使使用div而不是表格有助于使我们的内容更容易访问。
随着flexbox规范的出版，2012年出现了转机时刻。flexbox允许开发人员解决一系列长期存在的小布局问题，并且具有优雅的语法，需要实现更少的标记。突然间（好吧，不是那么突然，我们仍然需要关心浏览器支持，对吗？），可靠地将事物集中在两个轴上并不是问题。令人耳目一新。最后，调整布局可以减少到只改变样式表中的一个属性。
与flexbox一样重要的是，这不是故事的结局。
这是2019年！我们来使用css grid。如果你到目前为止阅读这篇文章，我们认为可以肯定两件事是肯定的：
我们显然不是在这个行业中过着平和，安静的职业生活。我们使用的东西会发生变化。2017年，css grid?layout module规范正式发布，但是，随着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项目，那么您将面对上面提到的两个选项：我们是从头开始并手动编写模板，还是有什么东西可以给我们一点帮助？幸运的是，有一个插件可能会引起您的兴趣，我们创建的插件有双重目标：
在块编辑器和css网格之间创建桥梁。创建一个插件，可能会让人们超越采用块编辑器的最初怀疑态度。它叫做grids，可以在wordpress插件库中免费下载。
系统允许您使用块编辑器中的可视控件手动指定尺寸，背景，响应行为，但是在设计上，它不提供任何内容块。当然，人们可以将这种方法视为一个弱点，但我们认为