学习 Gutenberg：Gutenberg 到底是什么？

Gutenberg 是 WordPress 中新的基于 React 的 SPA 编辑体验。 哦，等等，一连串的流行语不能算作对软件的有效解释？ 当我们解释 Gutenberg 是什么的时候，我们将**解开这些流行语**。

首先，一个前后对比的截图可能会让你明白这个想法。

流行语 #1：编辑体验

Gutenberg 是 WordPress WYSIWYG 编辑器的重新设计。

WordPress 中的编辑器传统上是那个单一的 WYSIWYG 字段（内容块），它将文章的整个内容保存到 wp_posts 数据库表中的 post_content 列。 Gutenberg 没有改变这一点：它将所有文章内容保存到 post_content 表中，以便通过在 PHP 模板中调用 the_content() 来检索。

所以，Gutenberg 只是编辑器的重新设计… 但是称 Gutenberg 仅仅是编辑器的重新设计是错误的！它比这多得多！

Gutenberg 引入了一种全新的 WordPress 内容概念。 它不仅为开发者提供了一种原生方式来处理分块内容（我们实际上会将它们称为区块，这是它们的官方名称），它还使最终用户能够开箱即用地使用 WordPress 创建丰富、动态的页面布局。 没有 Gutenberg，这可能需要大量的第三方插件（阅读：简码乱七八糟和服务器压力），就像目前所谓的 WordPress “经典”编辑器一样。

为了本文和我们的学习目的，请记住：Gutenberg 不会改变 WordPress 的核心功能。 它 99% 是对编辑器用户界面的更改。 点击“发布”仍然将内容保存到 post_content 中 - 只是在编写和编辑内容的用户体验方面有了更多机会。

流行语 #2：SPA

翻译：Gutenberg 是 WordPress 中的单页应用程序。

在单页应用程序 (SPA) 中，应用程序在单个页面加载时运行，后续交互完全由 JavaScript 和 Ajax 请求驱动。

请注意上述语句中的“在 WordPress 中”部分 - Gutenberg（目前）不会影响 WordPress 的任何部分，除了通常看到编辑器的地方。 实际上，Gutenberg 用 SPA 替换了 WYSIWYG、TinyMCE 编辑器。

这意味着在 Gutenberg 中编写内容既快速又令人满意，我希望我可以说我对开发区块的（有限的）经验也是如此。 对于我们的旅程，这个 SPA 业务意味着开发过程中页面加载缓慢（我们加载了大量 JavaScript），难以理解且令人沮丧的控制台错误，以及大量 npm 模块。

当然，这是一种对情况的悲观看法。 乐观来看？ 当某些东西正常工作时，感觉真的很好。 最初的胜利很少见，但坚持下去！

流行语 #3：React 驱动

翻译：是的，Gutenberg 是用 React 构建的。 这很可能不会很快改变，即使有改变。

在 2017 年 9 月至 10 月期间，关于为 WordPress 选择框架存在一些#热门话题，因为 Facebook 在 React 中添加了一个专利条款。 但是，在来自开源社区的重大反弹之后，包括 WordPress（它为大约 30% 的网站提供支持），Facebook 改变了它。

截至今年 1 月（2018 年），仍然有传言称核心框架的决定尚未做出，但直到我们从相关人士那里得到官方消息，让我们看看事实。

• Gutenberg 正在积极开发中。
• 主题和插件正在积极开发中，为 Gutenberg 做准备。
• 所有这些都发生在 React 中。

我押注 React，如果改变了，那就太好了！ 我将在简历上加上 React，并开始学习它的替代品。

重要资源

1. GitHub 仓库 - 这主要是在开发过程中遇到问题时用于搜索问题，看看它们是否已经提交。
2. Gutenberg 手册 - 这是官方 Gutenberg 文档所在的网站。

小心！

虽然 Gutenberg 项目已经发展到一定程度，不会出现任何重大的基础设施变化，但我们必须记住 Gutenberg 是一款全新的软件，正在积极开发中，任何事情都可能发生。 为什么不站在最前线？ 这是一件激动人心的事情。

WordPress 社区已经开始着手创建工具、教程、案例研究、课程和社区贡献资源。

也就是说，你可能会搜索到之前没有被问过的问题。 在某些时候，你可能会发现自己正在阅读 Gutenberg 源代码以获取文档，并且你可能会发现现有文档已经过时。 你可能会尝试来自两周前的教程中的示例，结果发现它使用了已弃用的 API 方法。

如果你遇到了一些你觉得不正常的东西，请在GitHub 上研究并报告问题，在 WordPress Slack 的 #core-editor 频道中询问，或通知上述过时博客文章的作者。 而且，如果问题出在文档上，你也可以自己修复它！

设置

现在，我希望你设置一个开发环境，以便我们能够在更多背景下继续讨论。 做以下几件事

1. 设置本地 WordPress 安装，无论你选择如何设置 - 这可以是一个现有项目，也可以是一个全新安装。 只需要一个可以用于演示目的，并且可以非常糟糕的东西。
2. 激活一个比较简单的主题。 Twenty Seventeen 就很好用。 你的主题只需要在帖子和页面模板中调用 the_content();，大多数开箱即用的主题都这样做。
3. 安装 Gutenberg。 你可以在插件库中找到它。 这个版本已经很成熟了，并且定期更新，因此我们不必担心从开发版本开始工作。
4. 激活 Gutenberg 插件并创建一个新帖子。

如果你之前从未在本地运行过 WordPress 网站，请查看本指南。 我们强烈建议你下载类似于MAMP、XAMPP之类的工具，如果你这是你第一次使用。

探索一下

你应该会看到类似的东西

就像上图所示，输入 / 会显示一个区块列表。删除 /，在右侧你会看到一个 +，点击后会显示一个按类别组织的额外区块列表。

注意右侧的面板，它有“文档”和“区块”两个选项卡。“区块”选项卡称为区块检查器，它提供了一个很好的区域来显示特定区块的选项，比如段落区块的选项

我建议你花几分钟时间在你的页面上玩一下，尝试一下不同类型的区块。关注一下检查器侧边栏，看看每个区块提供了哪些自定义选项。你现在看到的这些区块都包含在 核心区块库 中，可以作为创建自定义区块的参考（我们将在本系列的下一部分进行操作！）。

创建完一个包含五到六个不同类型区块的页面后，保存并发布页面，然后从前端查看它。不错吧！

现在，让我们做一些疯狂的事情。从插件屏幕上停用 Gutenberg。回到该页面的编辑屏幕，你应该会看到类似下面的内容，在“经典”编辑器中

这些注释都是什么？它们就是区块！它们与你在创建页面时选择的区块 **一一对应**。

在幕后，区块是由它们周围的 HTML 注释标识的 HTML 片段。在上面的例子中，你会注意到一些区块名称，例如 wp:block-name，后面跟着 JSON，比如第二个段落区块。当我指定一些自定义选项在区块检查器中时，这些选项将与区块标识符一起存储，这样，当我重新启用 Gutenberg 时，我的设置不会丢失；它们会直接与区块定义一起保存。

但是，在你重新启用插件之前，先从前端再次查看该页面。你是否丢失了一些样式？我丢了。

继续重新启用 Gutenberg 插件，并仔细检查编辑器，确保你的区块仍然完整。由于这些 HTML 注释，它们应该还在！

现在，让我们四处看看这些样式是从哪里来的。当我在前端检查我的段落区块时，我看到了几个内联样式——这是在区块检查器中选择的选项的结果——以及来自 Gutenberg 插件中包含的 style.css 文件的几个结构样式（在 5.0 发布后，请记住，这将仅来自 WordPress，而不是插件）。

现在，尝试从编辑器视图中检查该段落区块。你应该会看到相同的内联样式集，以及从编辑器视图中应用到区块的相同的 p.has-background 选择器。很有趣！

这引出了一个事实，即区块可以在主题的前端和编辑器之间共享样式。在 Gutenberg 之前，我们有主题或前端样式，我们可以单独包含一个 editor-style.css 来向 WordPress 管理区域添加 CSS。但是现在，我们的区块默认情况下几乎会在前端和编辑器视图之间共享样式。

**积极的一面：**这使我们能够为发布者创建一个内容视图，该视图更接近他们将在前端看到的内容。他们不再需要点击“预览”按钮十几次来查看发布之前的小内容更改。

**消极的一面：**这可能会为我们带来更多工作——作为设计师和开发人员，我们现在除了要创建面向网站的前端体验外，还要创建编辑器体验！而且我们必须弄清楚哪些样式是在两者之间共享的。但是，我认为，如果有一个经过深思熟虑的设计和前端策略，这不会像你想象的那样成为一个大问题。

嗯…… JavaScript 在哪里？

我们需要 JavaScript 来在 Gutenburg 中创建一个区块。所以我们现在就来创建一个区块吧！这是本系列下一篇文章的重点。