学习 Gutenberg：系列简介

嘿，CSS-Tricksters！ 👋 我们这里有一个特别的系列长文，完全致力于 Gutenberg，这是 WordPress 编辑器的一次重大改变。 我邀请了一对作者来编写这个系列，它将帮助您了解 Gutenberg 是什么，它能为您的网站做什么，以及如何真正为它开发。

适合谁

本系列更适合对这个新世界感到好奇的开发人员，并希望开始使用它。 本系列并不一定适合希望了解它将如何影响其网站或对此感到担忧的网站所有者。

很明显，Gutenberg 有很多可能性。 是的，它的目标是提供更好的编辑体验，但它也可能改变人们对 WordPress 可能性的看法。 使用内容将构建的自定义“块”（别担心，我们会深入了解所有这些），WordPress 编辑器几乎变成了一个拖放式网站构建器。

我建议您收听 ShopTalk 的这一集，以了解有关所有这些潜力的更多信息。

本系列的由来

真是个有趣的故事。 碰巧我经常合作的两位作者在同一时间独立创建了关于这个主题的长篇系列。 我真不应该，因为直到他们俩都取得了重大进展，我才把二加二放在一起。 独立发布两个系列会很奇怪，所以我们聚在一起，想出一个方法来合并和重新制作这个系列，并制作一个包含两者优点的单一系列。

现在我们就有了这个系列！

先决条件

使用这些技能学习本系列效果最佳

• WordPress 开发概念，如操作、过滤器和模板标记
• 基础（非深入）JavaScript 知识，例如了解对象和数组之间的区别以及回调函数是什么。
• 使用命令行导航目录和运行构建任务

如果您编写了自己的 npm 模块，在 Vim 中编写提交消息感觉很舒服，或者您是 React 的老手，那么本系列对您来说可能进展有点慢。

认识您的老师

从这里开始，我将把这个系列交给作者，也就是您的 Gutenberg 老师：Lara Schenck 和 Andy Bell。

Lara 的一些话

你好！ 回到 2015 年，WordPress 的共同创始人 Matt Mullenweg 指导了一个房间里挤满了 1000 多名 WordPress 开发人员、企业主、最终用户、设计师以及更多通过直播和事后观看视频的人，并指示他们“深入学习 JavaScript。”

我就在那个房间里，我记得我当时想

我可以做到！ 我不知道为什么，jQuery 对我来说已经足够了，而且我最喜欢 CSS，但好吧，Matt，我会把它列在我的待办事项清单里……
——我，在 2015 年

事实是，完全有可能在不接触任何 JavaScript 代码的情况下构建非常棒且强大的 WordPress 主题。 不用说，我花了将近一年半的时间才开始深入学习 JavaScript，所以现在我正在追赶……我相信我不是唯一一个身处这种境地的 WordPress 开发人员。

回到现在。 JavaScript 不仅继续以一种非常大的方式接管网络，而且 JavaScript——以其捆绑、解构、扩展运算符的形式——通过名为 Gutenberg 的编辑器改造，进入了 WordPress 的内部运作机制。

如果您正在阅读本文，我假设您至少听说过 Gutenberg，但如果没有，这里有一个Chris 几个月前写的概述，应该可以帮助您了解情况。 我还假设您在思考 Gutenberg 以及它对 WordPress 的意义（即约 30% 的网站）时，会感到困惑、好奇、兴奋和恐慌。 我在这里告诉您，抛开恐慌，保持兴奋和好奇，因为这对我们开发人员和 WordPress 本身来说都非常令人兴奋。

我预测，在未来几年，Gutenberg 的采用将使 WordPress 摆脱其不幸的“遗留、不安全、对开发人员不友好的博客引擎”的声誉。 举个例子

我想我会再次把我的个人网站做成 WordPress 网站。 6 年后又回来了 😊

—— Rach Smith 🌈 (@rachsmithtweets) 2018 年 2 月 20 日

小巧的 WordPress 正在迎头赶上，它带来了您可以想象到的所有 JavaScript 好处：Gutenberg 是一个 React 驱动的SPA 编辑体验，预计将在今年晚些时候的 WordPress Core 5.0 版本中发布。 它将彻底改变 WordPress 生态系统，并有望为由块驱动的下一代主题和插件铺平道路——这是其他内容管理系统已经采用一段时间了。

这意味着对于像我一样在 2015 年没有“深入学习 JavaScript”的开发人员来说，有两件事

1. 还有时间。
2. 现在我们有一个非常具体的、现实世界的学习环境。

这是个好消息！ 我说的是我自己，但我发现，当我有一个特定的应用时，学习一项技术会容易得多。 有了它，我邀请您和我一起踏上“深入学习Gutenberg”的旅程，并在此过程中学习大量的 JavaScript 和 React。

本系列的主题并不新鲜。 WordPress 社区已经开始创建用于 Gutenberg 开发的优秀资源，我建议您尽可能多地阅读和观看！ 虽然本系列涵盖了一些相同的信息，但这里的目标是以一种读者必须做一些工作才能获得答案的方式来构建内容——有点像课堂或指南，包含问题和作业。

是的，我们会创建一个块，但在此过程中，我们会偏离块构建，并学习有关环境设置、API 以及其他开发概念和术语的信息，这些信息我花了很长时间才理解。 归根结底，我希望帮助您在没有严格的文档或大量 Stack Overflow 帖子可以参考时，对代码进行实验更有信心。

Andy 的一些话

即将推出的新 WordPress 编辑器为内容制作人员和开发人员带来了大量机会，但随之而来的是需要学习一个全新的 JavaScript 技术栈。 对有些人来说，这会导致一些担忧，所以我想参与进来，尽力提供帮助。 我们将深入研究一些核心 JavaScript 概念，并构建一个自定义块，它将为一个经典的设计模式——卡片——提供支持。 这种设计模式让我们有很多东西需要考虑，例如可变内容和媒体。

在我们深入研究之前，我们将看一下新的 JavaScript 技术栈及其提供的工具。 我们还将看一下 React 组件，以便对响应式、状态驱动的 JavaScript 和 JSX 进行入门。

利用我们所掌握的知识和工具，在本教程系列结束后，我们将拥有一个可靠的自定义卡片块。 这也可以作为维护网站内容的许多其他类型块的基线。

在我们深入研究之前，让我们先将我们的机器设置为合适的工具来完成这项工作。因为我们使用的是现代 JavaScript 堆栈，所以有些浏览器还不支持该语言功能。因此，我们将使用一些基于 Node JS 的工具将此代码编译成更具跨兼容性的形式。

运行 Node JS

我们的设置差异很大，因此我将为您提供官方的 Node JS 网站，您可以在其中找到方便的安装程序。有一个非常实用的页面解释了如何使用流行的包管理器，在这里。

运行您的终端

我们将在本系列的后面使用我们的终端运行一些命令，所以请设置您的终端。我喜欢 iTerm，但这仅适用于 Mac，因此以下是一些适用于 Mac 和 Windows 用户的资源

• Mac：您可以使用默认的终端，它位于 *Applications > Terminal*
• Windows：您可以获得 正在运行的 Linux 子系统，使用命令提示符或获取类似 Hyper 的软件

运行本地 WordPress 实例

因为我们使用的是现代 JavaScript 堆栈，所以必须在您的机器上本地运行 WordPress 实例。如果您以前没有这样做过，请查看本指南。如果您不熟悉此操作，我强烈建议您下载类似 MAMP、XAMP 或类似的东西。

运行本地实例后，请准备一个主题以供使用，因为我们将在后面深入研究一些主题代码。

如果您不每天使用现代 JavaScript，那么它可能会让人望而生畏，因此，我们将一起深入研究现代版本的 JavaScript 的一些核心元素：通常称为 ES6。

然后，我们将利用这些知识来构建一个 React 组件。React 是一个非常流行的框架，但同样，它也很令人望而生畏，因此我们将一起深入研究，以尽量减少这种感觉。Gutenberg 的 JavaScript 设置非常类似于 React，因此它也是熟悉基于组件的、响应式 JavaScript 框架的练习。

我们完成这些操作后，我希望您会感觉很棒，因此我们将利用这种势头，深入研究有时令人恐惧的 webpack，这是一种我们将用来处理我们的 JavaScript 并将它们合并在一起的工具。我们还将运行 Babel，它会神奇地将我们的 ES6 代码转换为支持更好的 ES5 代码。

此时，我认为您会对这个堆栈充满信心，因此我们将深入研究主菜 - 我们将构建我们自定义的卡片块。

听起来不错吗？太棒了。让我们开始吧！