WordPress 的全新编辑器 Gutenberg 发布已有一年多了。在我看来，围绕它的争议大部分已经平息。已经过去足够的时间让它的用户体验和可访问性得到了改进，人们也更加清晰地看到了它的潜力。没有回头路了。
我偶然发现了一些文章，比如 Haris Zulfiqar 说他 押注于它，Nick Hamze 说区块是 下一代的。
虽然我认为它仍然存在一些瑕疵（比如为什么我不能在块引用中放入列表？为什么我不能向链接添加类？为什么我不能通过箭头键浏览块选择器？），但我总体上非常喜欢它。而且不仅仅是概念上的。我将 将其作为我的 2020 年目标之一，将 CSS-Tricks 迁移到 Gutenberg，因此我在 1 月份就立即着手进行了。
我们已经迈出了一步
由于我们已经 将新闻通讯创作体验转换为新的编辑器，因此我们已经积累了一些使用 Gutenberg 的经验。我们的新闻通讯是 CSS-Tricks 上的自定义文章类型，这些文章类型在此处发布为公共 URL，具有自定义 RSS Feed，并由 MailChimp 发送，MailChimp 获取并读取该 RSS Feed。
我们可以通过 Gutenberg Ramp 插件为新闻通讯打开 Gutenberg。这非常适合自定义文章类型和具有个别 ID 的文章，但我希望仅为新内容打开 Gutenberg。我最终修改了该插件。 这是一个拉取请求，以防那里有人认为这是一个好主意。
这对我来说很重要，因为我们有数万篇使用旧编辑器创建的旧文章，即使 Gutenberg 在我们打开它们进行编辑时不会破坏它们，但它为它们提供的编辑体验也不如“经典”编辑器（例如，我们有用于特殊代码块等的特殊按钮）。
处理旧内容
如果 Gutenberg 可以在打开旧文章时将其转换为正确的块，那就太好了，但这在目前看来像是一个梦想。比如，它必须解析 HTML，识别哪些块看起来像块，识别哪个块最合理，包括我们自定义的块（它们是最重要的），并且必须以一种不脆弱的方式非常正确地执行此操作。
目前，旧内容仅使用旧编辑器。甚至没有一种简单的方法可以从编辑器中为单个文章启用 Gutenberg。（我可以将值硬编码到 Gutenberg Ramp 使用中，但这有点乏味。）
我有点担心旧编辑器会真的变得很糟糕。例如，我开始使用它的一个主要原因是，在这个网站上，旧编辑器会随机滚动到页面底部。我绞尽脑汁也想不出为什么，但这使得我的创作变得非常讨厌。只是一个很小的不起眼的小问题，让我想要使用正在积极开发的编辑器体验。
但即使旧编辑器变得很糟糕，为所有内容启用 Gutenberg 也不是那么糟糕。所有旧内容都将位于一个大型的“经典”块中，并且一切都会正常。
总之，它正在工作！
为新文章启用 Gutenberg 本身就是一个不小的挑战，但现在它对我们来说已经开启了，我们正在使用它创建所有新内容。我在这里只是代表我自己说话，但我太喜欢它了。它对内容创作来说是一个巨大的升级，我有点痴迷于它。团队也很高兴。
创建自定义块
看看我们拥有的这个花哨的文本块
你可能会想，哦，酷，一个创建自定义块的机会。事实上，我们甚至涵盖了学习和 在一个完整的系列中创建 Gutenberg 块。但这提出了一个非常相关的情况：何时不构建块。此块唯一独特之处在于它具有一个特殊的类名，我们的 CSS 使用该类名来设置该块的样式。仅此而已。添加类名是每个块的内置功能，因此此处自定义块实际上没有必要。
事实上，我们可以更进一步，使用此确切类创建一个文本块作为“可重复使用的块”，这样我们甚至不必记住或输入该类名。在我使用此类创建文本块后，我从 kebab 菜单中选择“转换为可重复使用的块”，现在它将永远保存为可重复使用的块。
我们现在已经在其他一些方面使用它了，比如我们的“文章系列”块（一个<h4>和<ol>以及一个带有特殊<div>-with-a-class 包装器的块）以及脚注块等等。
但我们确实也需要一些自定义块，为此我使用 create-guten-block 来制作一个特殊的插件¹ 来创建它们。我看到一个对我们来说非常重要的插件是代码块。代码块已经有一个原生块。它基本上将代码放在<pre>标签中，并且来自 Gutenberg 的内容默认情况下已转义。
我们花哨的代码块允许我们选择它是哪种语言，突出显示某些行，并提供自定义标签。这在我们的旧编辑器中都可以通过 HTML 属性实现，因此此块只是在所有这些之上提供了一个不错的 UI。
该块非常特定于 CSS-Tricks，因此开源它没有多大意义。但我创建的另一个块是开源的，那就是 CodePen 嵌入块。我在 CodePen 博客上写过它。
它允许您粘贴 CodePen URL，并将其转换为 CodePen 嵌入。oEmbed 默认情况下已经可以做到这一点，但是使用此插件，您可以控制所有内容，例如高度、主题和默认选项卡。
在创作时实际看到嵌入的 Pens 非常棒！
尚未解决的挑战
目前最大的挑战是处理图像。在旧编辑器中，我们集成了 一个非常非常花哨的设置 与 Cloudinary。图像会自动上传到 Cloudinary，断点会以编程方式确定，会创建多个尺寸，会创建响应式图像语法，最终出现在 HTML 中的是一个完美的响应式图像语法，其中图像由 Cloudinary 托管。这使我们能够利用 CDN 并以最佳格式提供图像。
使用 Gutenberg 创建的文章中没有发生这种情况。 😭
我需要找到或开发一个新的系统，该系统可以在网站上的任何位置出色地处理图像，理想情况下使用一个不太定制的系统，该系统更易于维护。我可能会使用 Cloudinary 解决这个问题，我可能会尝试其他服务，我可能会让 WordPress 直接处理它，并由 Jetpack 网站加速器 支持。目前还不确定。总有事情要做。
- 我看到 WordPress 本身也开始参与块脚手架游戏。他们的“create-wordpress-block”概念已经进入了 Gutenberg 存储库 本身，您可以使用
npm init @wordpress/block [options] [slug]启动它。
非常好的文章，我喜欢看到人们如何利用 Gutenberg 来适应他们现有的网站和工作流程。关于为提示设置可重复使用的块而不是为所有内容构建自定义块的观点确实很好。再加上组块，这可能是对稍微复杂一些的情况的良好解决方案。
我也想在代码块上设置语法高亮，并发现了 Code Syntax Block 插件，该插件扩展了核心块。我认为它主要缺少的是行高亮。我之前没有看到你的 Codepen 嵌入块，这确实不错！我肯定会用到它。
我也是 Cloudinary 的忠实粉丝。你能否详细说明一下为什么 Cloudinary 和块编辑器无法很好地协同工作？
我也是 Cloudinary 的忠实粉丝，只是我之前有一个非常定制的设置，导致了一堆技术债务。实际上，我确实采取了行动，将其拆除，现在直接使用Jetpack 网站加速器。它不像 Cloudinary 设置那样花哨（例如，Cloudinary 设置可以为每个图像单独确定完美的
srcset），但它几乎没有技术债务，与 Gutenberg 配合得很好，并且使上传时间更快。嗨，Chris！
我以为你会让 CSS tricks 使用 JAMstack 技术，但是 WordPress 和 PHP 不是 JAMstack 吗？我的意思是，你推广它并不一定需要使用它，但我以为你会使用它呢？
哦，我确实非常喜欢 Jamstack。我认为它能够为很大一部分网络提供动力，并且是一个不错的选择。但是，任何给定的单个网站可能都有许多不同的技术栈的原因。对于 CSS-Tricks 来说，有几个原因。一个是，我使用了 WordPress 的大量不同功能，我认为 CSS-Tricks 某种程度上是WordPress 网站的典范。它非常适合。第二个是遗留问题。重写网站绝非易事。需要有巨大的明显优势。我可以看到将 CSS-Tricks 迁移到 Jamstack 架构的一些好处，但也许不足以让我立即着手并将其作为首要任务。我仍然很乐意在这个网站上进行开发，感觉工作效率很高，也没有遇到任何障碍。即使我要使用此网站的 Jamstack，我可能也会继续使用 WordPress。我已经写过关于为什么仅仅更改 CMS 对我来说没有特别帮助的原因。我可以使用静态网站生成器并访问 WordPress API 来实现 Jamstack，而无需离开 CMS，你知道吗？再说一次，我现在不会这样做，因为有很多未知因素，而且我没有看到足够多的优势。但是，如果我今天要开发一个新的网站，你必须说服我不要使用 Jamstack。
感谢你的回答！
我已经阅读了你的另外两篇文章，我完全理解了。我也有同样的经历：5 年前我在 WordPress 上创建了一个项目，我不得不重新做一遍，我花了整整一个半月的时间，在每天工作结束后晚上加班（而且我独自一人负责这个项目），才以 JAMstack 方式重新构建它。很艰难。
嗨，Chris，
关于你对图像处理的担忧，Cloudinary 有一个新的插件（测试版），也支持 Gutenberg。
查看一下 – https://cloudinary.com/documentation/wordpress_integration
我成功使用过的另一种创建自定义区块的方法是使用 Advanced Custom Fields。如果你已经习惯使用 ACF 构建网站，那么学习创建自定义区块的函数，然后将所需的字段分配给这些区块，就会非常简单。一旦我在客户端工作中最终采用了 Gutenberg，它就成为了我现有工作流程的重大改进。
Gutenberg 是一款很棒的工具。但是，鉴于 WordPress 的市场份额，认为每个人都必须使用 Gutenberg 的想法……充其量是愚蠢的。互联网是多元化的。没有充分的理由相信每个人都需要 Gutenberg。
嗨，Chris，
我认为 Gutenberg 为我们提供了非常棒的写作体验，我也很喜欢可重复使用的区块。
无论如何，我写信是为了让你知道，如果你没有注意到，你可以使用 Gutenberg 本地转换使用经典编辑器创建的帖子。我不记得选项在哪里，但我认为它隐藏在三个点后面。
它不是自动的，但我之前处理过一些旧帖子，我不得不说它做得很好，即使遇到短代码或自定义代码。也许你可以在需要编辑旧帖子时尝试一下。
我的两分钱
是的，知道这一点很好！我相信这将是我们最终要做的事情，只是全面启用它，并处理大部分以奇怪的巨大经典区块形式存在的旧帖子，但在我们想要进行重大更新时尝试自动转换。
不要忘记区块样式变体！
使用极少的代码（注册变体并支持类），你就可以获得一个 UI 来应用这些类名并在编辑器中获得不错的预览！
你需要添加一个新的类，比如
.is-style-explanation（所有样式变体都以is-style开头），但你可能可以在 15 分钟内完成所有工作。这是一篇有见地的文章，Chris。另外，很高兴看到你正在使用我的create-guten-block 开源项目来创建新的自定义区块。我已经很久没有更新该项目了，它在开源社区中关于 Gutenberg 的所有模棱两可和敌意中被搁置了。
和平！✌️