第192期 – Joshua Bryant谈道琼斯如何加速WordPress编辑工作流

转录稿

[00:00:19] Nathan Wrigley: 欢迎收听WP Tavern的Jukebox播客。我是Nathan Wrigley。 Jukebox是一个致力于所有WordPress相关事物的播客，包括人物、事件、插件、区块、主题，以及本期内容——道琼斯如何加速WordPress编辑工作流。 如果你想订阅本播客，可以在你喜欢的播客播放器中搜索“WP Tavern”，或访问 wptavern.com/feed/podcast，并将该URL复制到大多数播客播放器中。 如果你有希望我们在播客中讨论的话题，我很乐意听取你的意见，并希望让你或你的想法在节目中亮相。请前往 wptavern.com/contact/jukebox 使用那里的表格。

今天播客的嘉宾是Joshua Bryant。Joshua在道琼斯工作，帮助运营一些世界上最大的发布网站，包括《华尔街日报》、《巴伦周刊》和MarketWatch，所有这些都基于一个WordPress多站点平台。 他与WordPress的渊源，和许多人一样，始于继承一个网站，并逐步深入了解这个CMS能做什么，从页面构建到基础设施和自定义工作流。 在WordCamp US上，他做了一个题为“重新构想WordPress编辑：我们如何将Gutenberg嵌入产品生态系统”的演讲，深入探讨了他的团队如何将Gutenberg块编辑器从WP管理后台解耦，并将其嵌入一个独立的React应用程序，同时保持内容存储在传统的WordPress数据库中。 本期节目将探讨为什么在出版界时间（精确到秒）至关重要，以及“无头”解决方案如何满足这些需求。 Joshua解释了如何重建编辑工作流，以便能够以闪电般的速度发布或更新突发新闻，为编辑消除干扰和页面重载，同时在后台保留WordPress的全部功能和可扩展性。 我们讨论了技术架构：规划、编辑和渲染被拆分为独立的应用程序，其中Gutenberg被定制为仅保留两三个基本区块，并存在于典型的WordPress环境之外。 Joshua谈到了模拟全局WP对象的挑战，如何保持业务逻辑和专有插件的完整性，以及如何与REST API交互以实现瞬时内容发布。 如果你对无头WordPress、大规模编辑工作流或企业级新闻编辑室如何利用开源技术实现现实世界中的速度感兴趣，那么本期节目就是为你准备的。 如果你有兴趣了解更多信息，可以通过访问 wptavern.com/podcast 查看节目说明中的所有链接，在那里你还可以找到所有其他剧集。

闲话少说，有请Joshua Bryant。 今天播客的嘉宾是Joshua Bryant。你好。

[00:03:25] Joshua Bryant: 你好。

[00:03:26] Nathan Wrigley: 很高兴认识你。这是我们第一次见面。今天我们要讨论的是，嗯，道琼斯网站，但我想“无头”可能是最好的概括方式。所以请系好安全带，这将是一期技术含量很高的节目。我还要在一开始说明，对于这期节目，我完全是个外行。所以我希望你能引导我，并在我问出愚蠢的问题时指出来。让我们期待最好的结果。

我邀请你上节目的原因是，“无头”是一个有趣的话题，这是一方面；另一方面是你处理的是道琼斯，及其深远的重要性。在所有我能想象的网站中，没有多少网站需要保持100%的在线时间。所以这方面也会涉及到。 在深入讨论之前，你介意先介绍一下自己吗？我们知道你现在的工作地点，但除此之外，请谈谈你与WordPress等方面的经验。

[00:04:18] Joshua Bryant: 好的。我是这样开始的，我想和大多数WordPress用户一样，我继承了一个WordPress网站，当时对网站开发一无所知。所以我通过谷歌搜索艰难地摸索，什么是DNS？这到底是什么意思？ 而WordPress为我提供了成长的机会，总是有新的东西要学。所以从一开始，我就开始学习构建页面，然后是主题，再是插件。然后我找到了一份构建主题和插件的工作。之后又找到了一份真正专注于其背后基础设施的工作。 随着不断成长，我不断发现WordPress总是有另一层可以探索。我觉得我快接近底层了，但我在每一层都这么想过。去年在WordCamp，我做了一些贡献，我很高兴能继续成长，并更多地了解我们在WordPress环境中拥有的力量。

[00:05:18] Nathan Wrigley: 感谢分享。那么你现在在WordCamp US，显然，你正在和我交谈，我们在同一个房间。你做了还是即将要做演讲？

[00:05:26] Joshua Bryant: 做了。

[00:05:26] Nathan Wrigley: 做了。我们稍后会谈到。演讲题目是“重新构想WordPress编辑：我们如何将Gutenberg嵌入产品生态系统”。我稍后可能会读一些简介，但首先，演讲进行得怎么样？

[00:05:37] Joshua Bryant: 我觉得进行得很顺利。

[00:05:38] Nathan Wrigley: 很好。

[00:05:39] Joshua Bryant: 是的。我在演讲中讲了一个故事，我经常教青少年。几年前，我正在上课，我低头一看，没有人在听我讲课，因为一个学生觉得太无聊了，他开始撕他的泡沫塑料杯，并且一直在吃它。他已经吃掉了半个杯子。在我的演讲进行到一半时，我看了看，没有人做过类似的事情。所以我觉得演讲进行得很顺利，人们都在认真听。这算是我的一个基准。

[00:06:08] Nathan Wrigley: 这个基准不错。

[00:06:08] Joshua Bryant: 我想我进步了。

[00:06:10] Nathan Wrigley: 这是演讲简介。我不会全读，可能会读第一段，希望亲爱的听众能为你接下来的40分钟左右的内容提供一些背景。

“当你把Gutenberg编辑器从WordPress中拿出来会发生什么？本次演讲探讨了我们如何将块编辑器从WP管理后台和解耦循环中解耦，将其嵌入一个独立的React应用程序，以支持自定义编辑工作流，同时仍然保存到传统的WordPress数据库。”

这里面信息量很大。我想即使只是针对一个普通的小型网站，这个话题也会让人好奇，但事实是你实际上在处理……如果我说的不对请见谅，dowjones.com？我不知道是不是dowjones.com，但肯定是道琼斯。

[00:06:50] Joshua Bryant: 道琼斯作为一个实体，一个有趣的事实是，他们不再拥有道琼斯市场指数。他们卖掉了。但他们拥有很多发布网站。所以他们拥有像《华尔街日报》、《巴伦周刊》、Mansion Global这样的网站。我们还收购了更多，我不知道我现在是否能说出其他名字，但我们拥有所有这些实体，所以它们都在一个多站点上。

目前我们的发布系统，我们所有的编辑都是通过我们WordPress多站点环境中的那些网站来发布的。所有这些，我们可以讨论无头，但实际上所有这些内容都会进入一个“全知全能”的云端数据库，我们的前端系统会从那里获取。所以WordPress本身并不渲染wsj.com。我们有一个移动团队用一种方式做这件事，一个网页团队用另一种方式做，他们都从这个“全知全能”的数据库中读取数据。

但我们使用WordPress，我们的编辑使用它，我们称之为NewsPress，并用它来发布我们所有的内容。我们的编辑发现它易于使用，而且我们喜欢WordPress提供的所有功能。所以我们利用了WordPress的力量来做这些事情。

[00:08:03] Nathan Wrigley: 你提到的一些名字是非常庞大的实体。你是说《华尔街日报》吗？

[00:08:08] Joshua Bryant: 是的。

[00:08:09] Nathan Wrigley: 是的，这些是我听说过的，而且我不在这个国家生活，所以这相当了不起了。我猜它们对流量有巨大的需求，同时也极其需要100%的在线。不是99.8%的时间。我猜是100%的时间。

[00:08:26] Joshua Bryant: 没错。我们今天要讨论的话题，适用于所有新闻，但当突发新闻发生时，抢占市场先机至关重要。当泰勒·斯威夫特订婚时，比你竞争对手快10秒，在你发送推送通知时，这是一个重要的时间差。或者对于MarketWatch来说，当市场即将波动时，我们的编辑在旁听董事会会议，能够尽快将这些信息发送出去，并尽快传递给我们的读者，这对我们的出版物来说是最重要的事情。

[00:08:59] Nathan Wrigley: 那么，这个项目或基础设施（姑且这么说），是你继承的，还是你被招进来构建它的？

[00:09:06] Joshua Bryant: 两者都有。用最简单的方式解释，可以说我们有三个系统。我们有一个基于React的规划工具。我们有一个WordPress编辑工具，用于实际撰写文章、保存内容、控制用户权限、锁定和解锁帖子。然后我们有一个前端，它接收他们发布的内容，并以他们需要的任何方式在我们所有的出版物上显示。所以是规划、编辑和渲染。这是三个完全独立的模块，已经存在相当长一段时间了。

[00:09:43] Nathan Wrigley: 我们现在在一个WordPress活动上，周围都是WordPress用户，所以我们现在有点像在一个泡泡里。这个大厅里、这个地方的每个人，可能都能理解你刚才描述的内容。然而，亲爱的听众，希望我没有冒犯你，但会有一大堆听众对你刚才说的内容完全摸不着头脑。 他们下载WordPress，每月支付几美元把它放在一个他们认为可靠的主机上，他们知道某处有个数据库，但他们基本上只使用前端。他们只需要关心这些。请更详细地解释一下你刚才说的：这个React应用、这个编辑器和这个前端。这些到底是什么？

[00:10:20] Joshua Bryant: 好的。你可以把它们想象成你手机上的三个独立应用程序。你可能用一个应用程序，比如你的日历，来规划事情。这就是我们的规划工具。它本质上让我们可以相互协调，并说，嘿，我们需要有一个稳定的新闻流。我们还想附加一些内容，比如我们的摄影师会在那些故事里放一些图片，所以我们可能会把它添加到日历邀请的描述中。这就是我们在规划工具中做的事情。

然后在WordPress工具中，就像任何人在WordPress中做的一样。我们写文章，添加图片，在新闻编辑室的情况下，他们可能会做一些SEO相关的事情，添加一些我们希望出现在谷歌上的元数据。我想每个人都应该熟悉创建帖子。

然后一个完全不同的系统会接收它并说，好的，我要向所有人展示它看起来是什么样子。这部分并不重要，因为那是无头部分。但为了理解我们接下来要讨论的内容——我们将编辑器移到了一个非常简化的工具中——你并不真的需要理解有另一个系统以不同的方式做这件事。

我喜欢想到的一个例子是，当我们做这个项目时，我们是专门为新闻编辑室的需求而做的。所以我们非常具体地定制了它。但我喜欢考虑它的应用场景，我喜欢收集那些有精辟引言的人。当我听到一句很棒的话时，我会想，哦，我需要把它记下来。我不想忘记它。我想象的是，我想打开像Twitter或Bluesky这样的东西，我只想在一个字段里输入，点击发送，然后它就在我的WordPress仪表板上发布了一个帖子。这是一个自定义帖子，写着：这是一条值得注意的推文。然后就发布了。

这样我就不会丢失它，并且可以把它放在我的WordPress里，那里保存了我大部分的东西，比如我的食谱、我的笔记、我的博客，以及我想记住的一切。它就像我个人的在线笔记本。但现在我们创建了一种机制，可以将其扩展并带到WP编辑器之外的任何地方，并且能够在其他地方调用它，比如在一个不同的应用程序中，你输入内容，点击发送，然后所有内容都通过WordPress本身运行。

[00:12:48] Nathan Wrigley: 为什么需要这样做？让我退一步问，这样做的原因是什么？显然，这是可能实现的，但为什么仅仅一个默认的WordPress安装在顶级主机上不适合这种情况？它能为你带来哪些便利？它能为你带来什么性能？它能让你创建什么样的用户界面来实现这一点？我想你说过你们构建了自己的专有系统。你叫它什么，Press News还是News？

[00:13:15] Joshua Bryant: NewsPress。

[00:13:15] Nathan Wrigley: NewsPress，抱歉，说反了。那么，为什么？WordPress中有哪些无法忽视的局限性要求必须这样做？

[00:13:22] Joshua Bryant: 我不认为一定存在什么局限性。我们谈论的是从编辑过程中节省几秒钟的时间。在我们的WordPress系统中，有很多事情我们希望编辑在发布一篇普通文章之前做。我们希望他们列出特定的SEO标题。我们希望他们为标题视频准备备用图片。我们对WordPress内部的一切运作方式都感到满意，但我们谈论的是通过把它放在编辑已经在使用的工具中来节省时间。他们已经在规划工具中规划他们的一天、他们的一个月。这是一个单页应用程序。没有页面重载。全部基于React。不需要调用我们担心的数据库。

我们实际上只是调出Gutenberg编辑器，输入一条突发新闻或MarketWatch（我们称之为“脉冲”）的更新，我们需要尽快传递给读者。如果有大量信息涌入，我们需要能够用尽可能少的信息发布10个帖子，并让它们全部发布到前端，并且能够一个接一个地快速发布10个。

[00:14:37] Nathan Wrigley: 那么根本原因就是时间。一切都是为了节省几秒钟，因为你所在的行业，如果你晚了5秒钟，可能还不如不发布。

[00:14:46] Joshua Bryant: 没错。是时间，同时也是减少对我们编辑的干扰。他们不再有完整的编辑器体验。他们没有侧边栏和所有标签，因为我们的编辑器里有很多东西。

[00:14:58] Nathan Wrigley: 好的，在这个三步流程中，你有React应用，我们稍后会讨论将Gutenberg剥离并推送到这个React应用。但首先是React应用，规划在这里完成，然后大概当规划完成时，我会用“发布”这个词，也许不是发布，但你点击一个按钮，大概会把它推向下游的WordPress安装，然后推送到前端。所以这有点像一种单向循环。

但React+Gutenberg部分的想法是它很快，非常快，而且没有干扰。没有杂乱的东西。你熟悉那个界面。因为即使是最好的WordPress，也有很多事情在进行。当你点击发布时，那一刻可能会发生很多事情。你不希望任何那些事情发生。你只想要发布。砰。完成。

[00:15:39] Joshua Bryant: 没错。

[00:15:40] Nathan Wrigley: 好的。所以你把Gutenberg编辑器从WordPress中拉了出来。嗯，我想在这一点上重要的是要说，Gutenberg是一个开源项目。我们大多熟悉它位于WordPress内部，但它并不属于那里。你把它放进了这个React应用里。你是如何定制它并把它放到那里的？你剥离了什么，添加了什么？

[00:16:01] Joshua Bryant: 是的，好问题。我们决定继续使用Gutenberg而不是其他React工具的部分原因是，我们已经投入了大量的时间和精力在我们的自定义插件和工作流相关的业务逻辑上，我们在WordPress环境中投入了这么多，我们问自己：如何能保持我们在WordPress中的所有投入，并利用WordPress的力量，但把它放在一个稍微不同的地方，以满足我们编辑的所有需求？这真的是背后的驱动力，好吧，我们要把它移到这里，但我们仍然想要那里所有的东西。

所以我们做的是限制了区块的数量。虽然我们的常规编辑器中可能有大部分核心区块，但我们的规划工具中只有段落和列表区块。

[00:17:01] Nathan Wrigley: 就这些？

[00:17:01] Joshua Bryant: 是的，因为我们只需要这些。我们只需要这些。我们有几个自定义插件移到了我们的规划工具中。例如，在MarketWatch，如果你要写一篇关于Target的故事，你会想要标记Target公司，我们称之为股票代码。这让我们的前端知道，嘿，这是关于Target的故事，让我们将实时股票代码信息放入这篇文章中，这样它就不是我一周前写的时候的样子。

而是我现在看的时候，这是实时股票代码数据。我们投入了大量时间和精力为WordPress构建那个插件，所以我们想找到一种方法，不需要重写任何代码，不需要重做任何工作，而是利用我们已经完成的工作，只是把它移到规划工具中，并让它能在两个地方使用同一代码库。

[00:17:55] Nathan Wrigley: 我正在试图理解那是什么样子。假设我在这个规划工具中。我不知怎么进入这个规划工具。我不知道它在哪里，是在桌面上、网站上，还是Mac OS上的一个应用程序。我不知道。可能不需要知道，但我就在里面了。它看起来像Gutenberg，对吗？我的意思是，它就是Gutenberg。一切都一样，只是你只有这个极其有限的区块集合。所以是段落、列表，然后还有几个你们明显需要的定制区块。

那么，当我在做规划，然后我点击——我再用发布这个词，不知道你是否彻底改造了用户界面，让它变成别的样子——但让我们点击发布。那一刻发生了什么？它去了哪里？它如何融入我们讨论的整个流程？

[00:18:36] Joshua Bryant: 好的。你在普通WordPress编辑器中所做的一切，也可以使用这个叫做REST API的东西来完成。这些只是一些存在的端点，你可以调用它们来做诸如锁定帖子、保存帖子、发布帖子等事情。所以当我们在规划工具中做任何类似的事情并点击发布时，它只是访问一个后端位置，说，嘿，帖子编号1、2、3，我希望你像WordPress通常做的那样，为我发布那个帖子。它不需要加载WordPress内部的任何东西，它只是访问那个端点，然后WordPress说，好吧，我知道如何发布。好的，我要发布了。

我们不需要加载页面，不需要访问WP管理后台。它只是跳过了所有那些步骤，说，好的，我为你发布。然后它就发送到下游，它们各司其职。所以本质上是一样的，我们只是跳过了一些步骤。

[00:19:34] Nathan Wrigley: 是的。再次强调，这样做的全部目的是节省时间。

[00:19:39] Joshua Bryant: 是的。

[00:19:39] Nathan Wrigley: 这太有趣了。时间竟是如此重要的商品，这很有趣。我从未遇到过这种情况，我的意思是，我根本不在那个世界里。我脑子里没有一个场景，点击发布然后等待WordPress做它的检查和平衡等等，或者加载它等等，这些时刻是如此重要，以至于需要如此优化。

所以你构建了React应用，它看起来像Gutenberg，你通过REST API点击发布，它去到WordPress，但跳过了所有可能发生的中间环节，我们一会儿可以深入讨论。然后它就立即发布了。

[00:20:15] Joshua Bryant: 没错。

[00:20:15] Nathan Wrigley: 这太有趣了。

[00:20:16] Joshua Bryant: 将WordPress保留在这个流程中的一个好处是，如果有一篇突发新闻文章，我们会尽可能快地发布它。我们将发布那篇文章。但现在它存在于WordPress数据库中，我们可以回去对它做所有我们通常做的事情，但它已经发布了。

所以它已经发布了，但现在我们可以像在常规WordPress编辑器中一样，去添加图片，添加SEO数据，做所有那些我们通常会做的事情。我们可以发布更新，但文章已经发布了。所以我们不再匆忙，但我们仍然会让那个故事更充实。

[00:20:53] Nathan Wrigley: 我想确认一下，因为在你演讲的简介中，你用了“自定义编辑工作流”这个短语。我想我们刚刚讨论了。所以是React应用、WordPress、发布、然后前端。但在那一刻，任何修改，比如说，我不知道，有一个更新，有人需要修改它的某些内容。在这一点上，你处于中间步骤。你会去到常规的WordPress网站并在那里更新它。我理解得对吗？你不是回到第一步。

[00:21:20] Joshua Bryant: 没错。我们在规划工具中做所有这些事情。然后，如果你去过我们的一些网站或任何新闻网站，你会看到“最后更新”，并给出一个时间戳。那是当你收到通知，嘿，这个已经更新了。是因为我们回到了WordPress，添加了更多我们的读者会感兴趣或认为重要的信息。我们把它发送下去，然后它又出来了。版本二发布了。

[00:21:45] Nathan Wrigley: 在新闻行业，这种做法是标准做法吗？因为时间如此重要？还是因为那些出版物已经非常成功，才能有这样的便利？

因为我想象构建和维护这个并不便宜。大概需要开发者一直围绕着它，确保它被更新并保持运行。所以我只是好奇这是典型的做法，还是你认为相当独特的。

[00:22:13] Joshua Bryant: 嗯，我告诉你吧。这是我职业生涯中第一次尝试谷歌搜索某些东西却得到零结果。所以我认为这种情况不常发生。我认为这相当独特。我知道我们的母公司，他们拥有很多其他出版公司，他们也没有做过类似的事情。我认为这是我们开创的，这很棒，但对我来说，试图弄清楚它非常不幸。

[00:22:38] Nathan Wrigley: 过程中有令人头疼的问题吗？挑战很大吗？你学到了其他听这个播客的人可能会想，好吧，我需要和Joshua谈谈。我手头有类似的危机。一路上有很多学习吗？

[00:22:51] Joshua Bryant: 我想我学到的主要一点是，WordPress有很好的文档，教你如何以应该使用它的方式来使用它。

[00:23:01] Nathan Wrigley: 正常的方式。

[00:23:02] Joshua Bryant: 是的。所以如果你想学习如何使用WordPress，文档很棒。但如果你想学习如何“误用”WordPress，外面没有很多好的文档。你必须阅读很多Trac工单、GitHub问题和Slack讨论，还有，嗯，阅读代码。

所以，是的，我会说，专业上，WordPress在文档方面很棒，但如果你想做这样非典型的事情，你必须找到那些替代的文档来源，也就是，他们是如何构建的。这是一个很好的教训和很好的学习曲线。通过这个过程，我也学到了很多关于贡献者流程的知识。

[00:23:40] Nathan Wrigley: 是的。哦，是的，我相信你学到了。它的效果是否如规划阶段预期的那样？所以当利益相关者坐下来，这个项目被批准时，它是否完全如预期般实现？或者有没有一些事情突然发现，哦，我们无法做这个特定的事情？也许它比最初预期的效果更好。

[00:24:00] Joshua Bryant: 是的，实际上，我们首先为MarketWatch推出了它，它运行良好，至少据我所知，他们没有抱怨过。但它太好了，以至于他们接下来为wsj.com推出了它，并且我们以非常可扩展的方式开发了它。当他们为wsj推出时，我并不知道。所以这真的是一个无缝过渡。现在我们两个最大的新闻编辑室都在使用它，我想我们接下来会为《巴伦周刊》推出。我预计也不需要为那个做任何工作。

[00:24:32] Nathan Wrigley: 我觉得这太有趣了。我想你可能让自己变得相当不可或缺了。

[00:24:37] Joshua Bryant: 我不会那么说。

[00:24:38] Nathan Wrigley: 听起来肯定是这样。那么，让我们深入探讨一下技术细节，因为我在读我的笔记。你在演讲中提到模拟全局WP对象。虽然这听起来有趣且无疑很复杂，但这样做的关键组成部分是什么？你是如何复制它的？最大的挑战是什么？剥离编辑器并让它其他地方工作。

[00:24:59] Joshua Bryant: 嗯，这是我了解WordPress幕后工作方式的好事之一。当你构建插件时，你导入很多做非常具体事情的WordPress包。我总是假设，当我构建我的代码时，它会把所有这些包都放到一个文件的代码中，然后发送到我的网站。事情就是这样运作的。

但事实并非完全如此。WordPress的打包过程实际上出于速度和效率的考虑，将所有那些脚本提取出来。你不希望20个插件有20个不同版本的相同代码。所以他们把所有那些都提取出来，只使用一个版本的代码。无论你使用的是哪个版本的WordPress，如果你在6.3上，它将运行6.3版本的所有脚本。

所以当我们将代码移到规划工具时，React中没有6.3。它不知道这些脚本应该在那里，所以它引用了这个全局对象，这个Global WP。如果你熟悉在控制台里做事，就是，你输入 wp.data.select Core Editor，然后你会得到一堆东西回来，对吧？在React或Gutenberg里它并不存在。所以这是我们的第一个障碍。

WordPress为我们做的，构建这个所有代码都通过的对象，我们必须在React中手动完成。我们必须导入那些包，并将它们设置在全局命名空间级别，这样WordPress代码才能运行。

[00:26:38] Nathan Wrigley: 那挑战有多大？

[00:26:40] Joshua Bryant: 嗯，发现它是个挑战。实现它反而是简单的部分。我们经历了很多次迭代：为什么它不工作？为什么它无法通信？然后我们才意识到是WordPress在为我们做这个。一旦我们有了这个认识，实现就相当简单了。

[00:26:59] Nathan Wrigley: 对我来说，那会是一个非常令人沮丧的过程。来回折腾。为什么不行？为什么不行？然后突然意识到，哦，不行是因为，就像你刚刚描述的那样。是的，这真的很有趣。

但你对经历了这个过程感到满意。没有任何一刻你觉得，好吧，我们要退出了。我们不打算使用WordPress了。我们要使用某种现成的自定义CMS，或者类似的东西。

[00:27:22] Joshua Bryant: 没错。哦，是的。我的意思是，如果你在我来回折腾一周后问我，我会说不。这让我对WordPress有了更深刻的理解，也对贡献者在构建它时所做的、使其高效的决策有了更深的欣赏。我从未想过WP构建过程如何帮助开发者构建高效的网站，即使他们并不真正知道发生了什么。你输入WP scripts build，然后很多事情就发生了。但开发者不需要知道发生的一切。它只是发生了。这对开发者来说很棒。

但当我更进一步，我就像，为什么会这样？我深入研究了兔子洞，想弄清楚WP scripts build做了什么，以及我如何能破坏它？我想用它做别的事情。然后一路绕回来，意识到，不，他们做的是正确的方式，好的方式。既然我明白了它做了什么，我就可以设计我们的系统来与之协调。

[00:28:26] Nathan Wrigley: 是的，听起来你在那里转了个圈。

[00:28:28] Joshua Bryant: 哦，确实。

[00:28:28] Nathan Wrigley: 是的，这真的很有趣。

[00:28:30] Joshua Bryant: 圈，螺旋。

[00:28:31] Nathan Wrigley: 是的，是的，我相信有几个螺旋。那么，在不泄露机密的情况下，你们那些需要参与第一阶段（规划工具）的利益相关者，他们如何访问它？他们能用手机访问吗？他们能用桌面电脑访问吗？他们如何与之交互？

[00:28:46] Joshua Bryant: 是的，对我们来说有两件事很重要。我们希望能够办公室的桌面电脑上访问它，规划事情。但我们也希望我们的记者能够在野外，无论他们在哪里，给我们发送突发新闻。

[00:29:01] Nathan Wrigley: 对，我正要问这个，是的。

[00:29:03] Joshua Bryant: 对。所以这是我们在做这些设计决策和应用决策时的一个驱动因素。我们需要消除编辑发布过程中的尽可能多的障碍。

有时是，我们如何减少点击次数来让一篇完整的报道发布出去？或者是，当有人坐在董事会的后排时，我们如何让它能在手机上以尽可能少的干扰工作？

[00:29:32] Nathan Wrigley: 是的。所以在任何地方，任何设备上都可以用。只要有网络连接，你就能访问这个。

[00:29:37] Joshua Bryant: 是的。

[00:29:38] Nathan Wrigley: 好的，是的。一件好奇的事情，再次，我们要进入技术细节，所以如果这个问题不合适，请原谅，因为你特别提到了用Core / Block Editor替换Core / Editor。我不太熟悉这两者之间的区别，但你提到这一点让我直觉上觉得这里面有些东西。所以为什么这很重要？你不得不对我温和一点，因为我不太理解。

[00:30:01] Joshua Bryant: 我会温和地涉入这个复杂的话题。当我们在我们的流程中构建自定义区块时，很多时候我们使用数据存储。有一个编辑器数据存储和一个块编辑器数据存储。这在WP管理后台是什么样子的？当你打开一篇帖子时，区块插入器，当你点击左上角的加号或者点击添加时，所有显示的区块，那是Gutenberg编辑器的一部分。

中间的大块是第二部分，你在那里进行所有输入，放置你的帖子，添加你的图片。然后右边的侧边栏，你在那里进行调整，是第三部分。所有这三个组成部分都是块编辑器。存在于这三个部分之外的一切是更广泛的编辑器。可以把它想象成一个巨大的包装器，包裹着整个东西。它有保存按钮、发布按钮之类的东西。它包含关于帖子及其所有属性的信息。

所以它的信息量要大得多。块编辑器只需要知道页面上存在哪些区块。编辑器需要知道WordPress内部更广泛的上下文。当我们移动编辑器时，我们移动的是块编辑器。所以保存按钮不在那里。我们不用那个。我们编写了自己的保存按钮，它访问API。

[00:31:23] Nathan Wrigley: 我能在这里打断一下吗？所以当你说块编辑器时，你描述的是那三样东西。左边的面板，你创建内容的中央区域，以及右边的侧边栏（如果你愿意），那里可能有那些区块的设置。但不是那个包装器。

[00:31:36] Joshua Bryant: 对。我们实际上更进一步，说，我们不需要左边或右边。我们只需要中间的部分。我们想让它尽可能没有干扰，并把它移过来。所以我们有把侧边栏放在那里的选项，而且侧边栏可以工作，但作为一个商业决策，我们选择不要它。

而且因为我们是无头的，无论他们改变字体还是颜色，这些实际上都不会影响我们的前端。我们不希望编辑能够加粗、斜体，并把所有他们认为重要的文字变成红色，因为他们会发疯。他们会认为我所有的文字都重要。

所以，是的，我们只移动了中间那块，只移动了块编辑器。我们有一个保存按钮和一个发布按钮，它们不与WordPress编辑器交互，而是与WordPress API交互。

[00:32:28] Nathan Wrigley: REST API将它推送到常规的WordPress网站。好的，再次回到你刚才提到的，当我们开始这次谈话时，我想象的是不同的东西。我以为你完整地把块编辑器拉出来了。所以我在那里学到了一些东西。所以这仅仅是那个内容创建区域。

通过剥离左边、右边以及发布等所有东西，节省的时间就在这里，是吗？节省的几秒钟就是因为它只包含了在屏幕上创建一些文本所需的最基本的东西。

[00:33:00] Joshua Bryant: 是的，完全正确。因为很多时候是，标题、段落、发送。这就是那篇文章的第一个版本。

[00:33:07] Nathan Wrigley: 所以我有一个问题，现在看来似乎没必要问了，但我还是要问。我原本想问的是，比如，手动编辑你在React应用中制作的内容，撤销操作，历史记录等等。但实际不是那么回事。你在React应用中做这一次，然后之后的一切都发生在WordPress网站上。

所以历史和所有东西都以常规方式存储，加粗、斜体、我想把它变成红色，所有这些都是在事后，在它被发布之后，或者至少通过REST API推送到WordPress，你知道，数据库，常规的WordPress网站后完成的。所以所有这些都发生在那。修改都发生在那。

[00:33:49] Joshua Bryant: 对。我们仍然可以访问所有的工具栏选项。所以如果你想添加链接，你会以与你添加WordPress帖子链接完全相同的方式来做。所以我们有一些这样的功能可用，但我们把它锁定了。不是因为它不能工作，而是因为我们不希望它成为编辑的干扰。

[00:34:09] Nathan Wrigley: 那么，有没有什么类型的内容……我试图想象一个场景，大概不是每个人都需要React应用。例如，如果我要写一篇关于，我不知道，园艺或什么的东西，你知道，它真的不是时间敏感的。我可以明年写，它同样重要，或者一个食谱之类的。我需要进入React应用吗？还是这只是为那些需要快速处理的、在现场的记者准备的？所以你有一个两层系统的编辑吗？我需要特别快的那种，你在React里，但园艺文章只是作为一个常规帖子完成？

[00:34:41] Joshua Bryant: 是的。而且我们的大多数帖子都是常规帖子，他们有足够的时间来规划并收集他们的资产，这些都是在规划工具中完成的，所有这些信息都会同步到WordPress。但他们除了我们的突发新闻外，不做任何编辑。

[00:34:58] Nathan Wrigley: 好的。那基本上就是突发新闻React应用了。

[00:35:01] Joshua Bryant: 是的。

[00:35:01] Nathan Wrigley: 好的，这很有趣。抱歉，这有点跑题了。所以他们只是创建文本。他们创建文本和列表，仅此而已。段落和列表。这就是他们全部拥有的。当他们点击REST API时，它是自动发布吗？还是进入其他编辑工作流，让更资深的人审阅？因为我猜在泰勒·斯威夫特结婚这种情况下，你只想直接发布到前端。

[00:35:28] Joshua Bryant: 是的。它直接发布到前端。他们有段落和列表，那是核心部分，但他们也有一些我们的专有插件，比如我们有一个更正插件，一个股票代码插入器，还有几个我们移过去的，比如我们的署名插件。我们有一个作者数据库，所以他们可以说，嘿，这是我写的。所以我们编写了一个区块，它在WordPress中有效，在规划工具中也有效，但功能非常有限，因为这就是他们需要的全部。所以我们说我们将剥离其他所有东西。

[00:36:00] Nathan Wrigley: 那么，通常的工作流是，写了这篇非常紧急的文章的同一作者，会在那边点击发布，它从React应用通过REST API到WordPress，再到前端？然后他们几乎立即……在那一点上他们会放手不管吗？还是他们几乎立即回到WordPress网站，然后想，实际上，你知道吗，我确实想把那部分加粗，我想给那个加下划线？所以我只是好奇那个工作流是什么样子的。

[00:36:26] Joshua Bryant: 我认为这取决于具体情况。所以在一种情况下，虽然它是突发新闻报道，但只要我们不把它转换成完整的文章，我们就可以在规划工具中进行更新。所以他可以回去，我们可以编辑它，说，嗯，我想让它加粗，我会在规划工具中做。但如果你想，你也可以在WordPress环境中做。当我们说转换成文章时，我们的意思是，这是突发新闻，但我要点击一个按钮，那会让其他编辑知道，我们即将把这个变成一个完整的文章。

[00:36:56] Nathan Wrigley: 哦，我明白了。

[00:36:57] Joshua Bryant: 是的。因为很多时候我们有多名编辑在处理同一篇文章。所以我们需要协调，尤其是在突发新闻时。嘿，这现在正在发生。我已经发出去了。我要把这个交给你。你能进去吗？希望没有打字错误，但修正任何打字错误，或者更改标题，或者添加SEO数据。所以他们真的像一个团队一样工作，尤其是在突发新闻时，然后传递给其他编辑。

[00:37:24] Nathan Wrigley: 是的，我想因为你深入其中，这个工作流是如此不言自明。对我来说，只是如此好奇，有这么多有趣的小步骤，而这一切的背后都是为了节省几秒钟的愿望。这绝对不像我过去遇到的任何WordPress网站。希望你能原谅我一直问同样的问题。但我真的觉得这非常有趣。

所以园艺文章在网站上完成，重要的及时文章在React应用中完成，然而还有一个转换成，我不知道，常规内容之类的按钮，编辑可以进去然后，是的，这真是环环相扣。绝对令人着迷。

[00:38:01] Joshua Bryant: 是的。这就是为什么我之前说，我们在构建WordPress系统时投入了如此多的业务规则和时间，以至于我们并没有非常认真地考虑其他工具。因为我们在里面投入了太多，WordPress系统有如此强大的力量，首先是开箱即用的功能，其次是我们在此基础上构建的东西，所以我们说，我们需要在这个用例中利用这一点。

[00:38:28] Nathan Wrigley: 是的。老实说，我想我们可以花一整天来讨论这个，但我们可能应该继续前进了。

我好奇你在构建这个过程中获得的知识，因为我知道在WordPress社区中，大多数人并不做无头，但有一群像你这样的核心人员就是喜欢这些东西。

我只是好奇，你在这个过程中获得的知识，是否会反馈到开源项目中，你和道琼斯方面是否有承诺将其公开，开放一个仓库，分享内容，分享你完成它的方式，以及沿途获得的知识？

[00:39:02] Joshua Bryant: 是的，我认为这最终是我的目标。我启动了一个仓库，只是为了展示我们如何移动Gutenberg。那里有很多我不得不移除的专有内容。目前这只是我的仓库。目前它还缺少很多内容，比如如何让自定义区块在那边工作？我想继续添加内容，但我也在考虑，这对更广泛的WordPress社区有什么作用？这如何能应用于帮助核心项目，或者帮助承包商，或者帮助那些有很多客户的人。

我想到的一件事是，如果我们有一些可能比较挑剔的客户，对吧？我想我们都曾遇到过这样的人，他们说，我不喜欢WordPress。我听说过React这个词。我想要React。人们说，React很酷，对吧？或者我想要一个Vue项目，或者我想要它看起来像这样。我不想去WordPress后端。

这开启了一系列不同的可能性，我们可以说，好吧，我要拼凑一个——我讨厌这样说，但我要“氛围编程”一个单页React应用，并依靠WordPress API来提供数据库、用户管理、帖子保存、修订历史。你可以把WordPress用作一个完整的系统，然后只需在上面贴上React，拥有完整的Gutenberg编辑体验，保存所有信息，并且仍然能做所有你熟悉如何在WordPress中做的事情，你的客户很高兴，而他们对此一无所知。

[00:40:38] Nathan Wrigley: 这有点像没有WordPress的WordPress。有WordPress的外观和感觉，但没有WordPress的开销。

**[00:40: