DE{CODE}：前端：构建面向未来的电子商务网站

默认的 WordPress 块编辑器标准化了我们集成布局和主题的方式，并在您的网站前端解锁了新功能。 这使得维护、更改和更新站点变得更加容易，同时减少膨胀、更便携和加载速度更快。 但是 Block Editor 是否适合您的代理机构和您的电子商务网站？ 什么时候是采取行动的合适时机？ 在这个内容丰富的 DE{CODE} 会议中听取 WP Engine 首席软件工程师 Mike McAlister 的讲话，找出答案！

会议幻灯片

全文抄本

迈克·麦卡利斯特：大家好。 我叫 Mike McAlister，是 WP Engine 的首席软件工程师。 我在 Team Genesis 工作，我们的任务是构建 WordPress 的未来，并致力于研究 WordPress 的所有前沿技术。 你可以在所有平台上找到我@MikeMcAlister。 是的，关注我了解更多此类内容。

正如您所见，今天的话题是关于构建面向未来的电子商务网站。 我们有点处在 WordPress 的新悬崖上。 每天都在展示新的范例。 很难驾驭它。 这就是我们今天要看的，在 WordPress 新时代前进的利弊。

所以正如我之前所说，我已经这样做了很长时间。 我以 WordPress 为生。 十多年来，我一直在构建 WordPress 产品、WordPress 业务、最前沿的东西和各种各样的东西。 我有一段时间的主题业务称为 Array Themes，这是一个漂亮的 WordPress 主题小集合，供设计师、摄影师、作品集等使用。

然后我开始尝试使用 WordPress 块编辑器。 这就是 Atomic Blocks 的由来。 这真的是同类插件中的第一个，有点像块编辑器的入门。 我用它来帮助向其他人展示如何学习积木和什么是可能的，以及你需要这样做的代码种类。 所以那真是一次大开眼界的经历。

然后当我加入 WP Engine 时，我开始研究 Genesis 产品套件，我们将 Atomic Blocks 和 Array Themes 中的很多块技术带入了 Genesis 框架。 因此，它为 Genesis Pro 的新一代主题构建提供了动力。 我还通过我的 Liftoff 课程帮助教授 WordPress 创作者如何将这些主题和插件转化为产品和产品业务。

这就是关于我的一点。 在我们开始之前，让我们快速回顾一下，对吧，因为你听说过块编辑器，你可能会使用它，但有些人还没有机会深入研究，或者可能没有不确定它的全部功能。 所以块编辑器，你可能还记得，大约三年前，也许更久，被引入了 WordPress。

这可能是 WordPress 有史以来最大的变化。 这是巨大的。 它把我们从遍布 WordPress 的许多不同的元框和那种每个人都习惯的陈旧布局转变为一种更生动的主动内容构建体验，现在我们正在用小块构建我们的网站内容和按钮和图像。 这些东西都很容易移动到不同的布局中。 这只是一种更强大的设计体验。

但这只是等式的一部分，对吧？ 这就像能够构建内容区域是一回事。 一段时间以来，在某种程度上，我们已经能够使用短代码来做到这一点。 但是现在我们有了块编辑器。 但完整的愿景是能够使用块和模式以及所有这些新工具来构建您的完整网站。

其中的一部分最近在 WordPress 的过去几个版本中发布了，但今年夏天，我们将获得更全面的块站点编辑体验。 所以我今天想谈谈其中的一些，因为，再次，有了块的范例，现在我们将拥有这个令人难以置信的新范例和完整的网站编辑。 我真的希望你开始使用它，因为它是如此强大和令人兴奋。 这对每个人来说都是巨大的。

所以我一直都有这个问题，什么时候进入块编辑器是合适的，对吧？ 人们犹豫不决。 他们不太确定。 我会说大约两年前是最好的时间，但你知道，现在也是一个不错的时间。 有了开源和这类社区项目，人们越早开始采用它们，它们就会变得越好，对吧？

我们越早开始使用它来构建并暴露问题、不足和陷阱，我们越早解决这些问题，它就会变得越强大。 所以我提倡尽早进入并构建那种东西。 这就是为什么我很早就开始使用 Atomic Blocks 的原因。 它可能是第一个块插件。 但我们都从那次经历中学到了很多东西。 所以还有时间继续进行块编辑器和完整的站点编辑。 我们会在这里看到原因。

所以，我总是听到这些东西，块编辑器的感觉，它很昂贵。 如果你是一个机构，我知道它的成本是多少。 我过去曾与代理机构合作过，改变工作流程的成本很高。 您已经把东西整理得井井有条，要将其换成全新的解决方案，成本很高。 有时我们没有时间在经济上进行这种转变。

我也听说它不稳定。 人们说，好吧，它还没有完全完成。 它准备好生产了吗？ 我们做了很多电子商务的事情，而且钱都在网上，所以我们真的不能承受事情的失败。 我明白了。 然后另一件大事是 JavaScript。 我们从 PHP 框架发展到现在 WordPress 中有一个巨大的 JavaScript 引擎。 因此，这又是代价高昂的，因为现在你必须学习 JavaScript，你必须培训你的开发人员。 这也是耗费时间和金钱的。

但这些事情的现实是，它实际上是完全不同的。 当然，它很昂贵，但随着时间的推移它只会变得更加昂贵。 你拖延的时间越长，你就越依赖于以旧方式做事的解决方案，过渡就会变得更加困难，并且从这些第三方插件中过渡出来可能对您没有任何好处，我们将在谈论性能时探讨这一点。

另外，不管它是否稳定，它现在实际上是相当稳定的。 我们有一个强大的构建块 API。 很多财富 500 强公司、机构，还有很多知名人士使用完整的网站编辑内容构建并投入生产。 所以它就在那里。 再一次，我们将谈论进入那里并亲自弄清楚它有多强大。

然后是 JavaScript，如果你是一名开发人员，我假设你们中的很多人都是，你就会知道 JavaScript 现在比以往任何时候都更强大。 现在的 WordPress 也是如此。 实际上，借助 JavaScript 引擎和 WordPress 的强大功能，这为您打开了很多机会。

它可以被看作是一个积极的因素，因为所有的功能，而且你现在可以接触到一个你以前可能无法接触到的新的开发者群体。 JavaScript 社区中的很多人以前可能忽略了 WordPress。 那么现在，你猜怎么着？ 我的意思是，这对很多人来说是一个巨大的工作机会。 所以我认为在这里使用 JavaScript 也有很多优点。

综上所述，您知道，WordPress，它哪儿也去不了。 我的意思是，它正在大规模增长。 它几乎占 45%，为 45% 的互联网提供支持。 而且每年都还在非常健康地生长。 它每年增长约 Shopify 市场规模。 作为参考，那是相当大的。

就像我之前说的，我们拖延的时间越长，采用一些新技术并弄清楚它如何适应我们的工作流程或我们的代理机构或我们的自由职业者，就会越痛苦。 你最终会想要过渡，只是因为它会非常强大，如果不这样做，你会错过很多东西。 所以我说现在投资。 为自己的长期增长、电子商务的长期增长做好准备。 是的，转到块编辑器。

有很多理由采用这项新技术——更多的控制、更好的性能和节省资金。 我不知道有哪个自由职业者或机构会对这些事情不感兴趣。 这是发展业务的基石，对吧？ 因此，让我们跳入其中的一些。

是的，如果您只知道块编辑器的强大功能。 这是我认为人们有点明白的事情。 就像它是新的，它更强大或其他什么。 但这是其中一件事，就像你真的必须进入那里，从发展的角度理解什么是可能的，你可以利用的东西，你现在可以做的事情，你以前永远做不到。 这是我们在 WordPress 中一直想要的东西，但还没有机会拥有。 所以我们在这里，就像一个绝佳的机会。

控制。 这是很多机构需要的东西，对吧？ 当您的客户有特定需求、品牌需求，或者您需要设置防护栏时，控制并能够对整个事情进行真正微调、精细的控制是最重要的。 因此，对于开发人员来说，当涉及到代码库时，现在您在 WordPress 中拥有一个 JavaScript 驱动的引擎，因此有更多的选择。

无头是另一件正在变得巨大的事情。 由于能够将您的内容和表示层分开，WordPress 现在为您提供了这些机会。 事实上，WP Engine 正在开发 Atlas，这是他们的 Headless WordPress 解决方案。 如果你还没有检查出来，你应该。 太酷了。 这又像是开发人员梦寐以求的事情，能够将 WordPress 用于此类事情。

同样，对于开发人员，您可以选择自己的 JavaScript 语言。 尽管块是用 React 编写的，但您可以编写 Vue，也可以编写 Angular。 如果你愿意，你可以写 Vanilla。 这真的取决于你，因为它都被编译并发布了，最后这并不重要。 除此之外，您还可以使用相同的 JavaScript 工作流程。 您可以使用以前没有的集成 CI/CD 东西，自动化构建工具。 通过在 WordPress 中利用这个新的 JavaScript 未来，所有这一切都是可能的。

再一次，我提到了这一点，之前提到过这一点，但那里的 JavaScript 开发人员数量庞大。 这是巨大的。 因此，我们越早开始采用其中一些技术并将这些人带入 WordPress 领域，生态系统就会变得越强大，解决方案、产品和插件就变得越有价值。 当我们开始将这些人才引入 WordPress 时，这些事情都会出现。

我在能够塑造和塑造 WordPress 之前提到过。 这对于能够创建自定义应用程序，甚至为您的客户启动自定义站点来说意义重大。 现在，修改管理员变得容易多了。 假设您想添加一个工具栏来公开您的一些电子商务工具或数据。 现在非常容易。 他们有一些选项可以很容易地插入这些不同的工具栏和整个界面。 令人印象深刻。

同样，你可以走另一条路。 您可以锁定 UI。 假设您想更多地控制体验。 你现在完全可以做到这一点。 由于它由 JavaScript 提供支持，因此您可以更好地控制 UI 交互等。 因此，您可以设置的护栏要好得多，也容易得多。

就体验而言，我们都遇到过第三方插件更新的情况，它改变了一些东西，突然间你放在这里的按钮现在不见了或者不见了。 好吧，通过束缚自己并能够自己控制体验，您可以防止这些不幸事件的发生。 您的客户看不到这些问题的发生，因为您可以更好地控制体验。

在控制你的命运方面，这是我将不断回到关于第三方插件的内容。 插件很棒，但它们可能有害，您可能会建立对它们的不健康依赖。 它会在很多方面限制你的成长。 能够自己直接连接到 WordPress 并拥有这种控制权，并且知道您放入的内容已经过测试和维护，并且可以随时更新，这很重要，对吧？ 这比可能依赖第三方进行修复要可靠得多。

最后，便携性。 这就是一切，对吧？ 我们不能将我们的内容或网站锁定在专有解决方案中。 这是非常昂贵的，昂贵的。 这很危险。 而我们选择了WordPress，这样我们就不会出现那种情况，对吧？ 所以这很重要。

表现。 这是我们一直在处理的事情，但现在它比以往任何时候都更加重要，因为我们无法承受没有出色表现的后果。 谷歌不会善待我们。 你们以前都看过这句话，页面加载延迟一秒会导致 7% 的转化率损失、页面浏览量减少以及客户满意度下降。

我不知道这个星球上有谁会对此表示满意，尤其是在电子商务和您的客户方面。 因此，如果您有加载无关文件和您甚至不使用的东西的插件，并且它会花费您金钱，那么您必须非常认真地看待这一点。 您必须采取行动并控制那里的情况。

再一次，不要误会我的意思，我喜欢插件。 我一直在使用它们。 但是这些功能强大的插件可以在数百万个网站上运行。 当您必须制作适用于数百万网站的插件时，您必须添加对每个人都没有帮助的东西。 您必须添加额外的脚本和额外的样式来适应不同的浏览器。 通常，这些东西都会为您加载。 很少有微调控制能够关闭这些东西。 所以你得到了整个插件的大部分，你不一定需要它。

现在，如果你是一个敏锐的开发人员，你可以进入那里并解开一些东西以加快速度，但我仍然认为在这一点上你可以花时间自己写一些东西，尤其是随着新的人才库来到 WordPress，控制那里。 您可以更精细地控制构建。 你可以做 tree shaking、minifying，所有这些现在都是可能的。

所以我认为我们越早考虑我们希望与第三方插件建立什么样的关系，特别是在页面构建器方面，你知道，既然我们要模式和所有这些很棒的东西工具，您不一定需要页面构建器。 而且这些插件中有很多并没有真正计划过渡到块编辑器。 所以你必须做出决定。 你知道吗，你是选择这个可能帮助你现在构建的插件，还是开始采用 WordPress，它会让你面向未来，为你提供你需要的工具和你需要的控制？ 所以那里有一些重大决定。 我完全明白了。

在页面性能和 SEO 方面，我们都知道页面速度和 Core Web Vitals，它们现在变得非常重要。 这是我们追求的范例。 你想要那些绿色圆圈。 再次，使用这些 WordPress 插件中的一些可能很难达到这些效果，因为它们正在加载各种资产。 除非你进入那里并且你真的在微调和解开东西，否则你将要处理这个问题。

WordPress 有了新一波的开发人员，我们都意识到我们需要的东西是我们以前没有的，比如能够说你有一个页面，上面有一堆块。 好吧，您不一定要为所有块加载整个脚本和样式。 您只想获取页面上加载的样式。 对不起，您页面上加载的块。 好吧，现在我们有函数可以做到这一点。

你可以在底部看到这个 Should Load Separate Core Block Assets 函数。 好吧，这只会扫描您的页面，查看您的页面上有哪些块，并且只会吐出那些样式和脚本。 所以你可以看到我们正在朝着更多的方向发展，比如，性能微小的文件未来，我们只加载我们需要的东西。 这会变得更好。 同样，一旦我们进入那里并开始构建，WordPress 本身就会越早采用这些功能，我们就会将它们作为核心。 然后我们不必有插件，因为核心已经采用了它们。

很多人都在研究这种表演工作。 你可以在这里看到我有一个列表。 这只是从事这项伟大工作的一小部分人。 跟着他们。 关注他们关注的人。 注意他们的转发，因为进入这个 WordPress 时代有很多脑力，每天都有很多聪明人想出聪明的解决方案。 所以，是的，跟随其中一些人。

最后，我想谈谈通过这项技术节省和赚钱的问题，因为我们再次谈论长期增长，以及与 WordPress 一起增长的长期机会。 并且有很多利用这种技术创收的新机会，你可以想出各种提供新服务和新产品的方式。 我们也会稍微讨论一下。

当谈到页面设计和页面构建器插件以及类似的东西时，我提到现在我们可以用模式替换它们。 好吧，模式基本上就是页面布局，WordPress 正在实施的页面布局部分，因此您可以构建漂亮的页面。 好吧，能够使用模式作为每个项目的起点，这样你就可以构建一个模式集合，你可以为每个客户项目使用这些模式，然后你可以为客户定制它们，你可以创建一个完整的入门模式库您可以将其用于每个项目，因此您不必每次都重新发明轮子。 你在节省时间。 你在存那笔钱。

另一项新技术是 theme.JSON。 这几乎就像是一种全球性的网站样式设置方式，这是我们以前没有的。 因此，能够加载您的模式，然后对您的按钮或链接或标题颜色的样式进行全局更改，以真正根据您的客户需求或您的品牌进行微调，这些都是可以的如您所知，之前花了很多时间在编辑器和定制器之间来回穿梭，并试图把事情做好。

然后，当您移动站点时，您必须再次执行此操作，因为 WordPress 不一定会记住这些东西。 这些现在都可以节省大量时间和金钱。 所以你越早采用这些东西，比如 theme.JSON、全局样式，很快就会有排版控制，你就越早开始省钱和赚钱。

削减你的插件是我一直在谈论的事情，但我认为我们越早开始查看可能并质疑我们在网站上安装的东西，我们是否需要那些，你可能不需要缓存插件了。 有很多主机在他们的级别上实现了缓存。 而且，如果您能够发布精简资源和更小的构建，那么我们可能已经达到了可能不需要大型缓存插件的地步。

正如我提到的，其中一些页面构建器也是如此。 我们现在可以将页面构建体验卸载到 WordPress 吗？ 我们可以开始使用带有 theme.JSON 文件的模式并构建我们自己的设计集吗？ 我想我们可以。 我想我们快到了。 这并不是说某些项目或类似项目的页面构建器没有用例。 我认为有。

但同样，我认为当我们谈论长期增长、WordPress 的未来、您的业务和 WordPress 的未来时，我看到了一个更简单的未来，一个您可以更好地控制的未来。 我认为我们现在看到了它的开始。 当然，目前很难看到，但这就是我们所处的位置。 所以，是的，这是您创建您想要的、您需要的、属于您的、为您量身定制的工具集的机会。 它会帮助你移动得更快，更快。

最后，这是我也一直在写的很多东西。 你知道，正如你所知，WordPress 正在经历这一转变。 随之而来的是对新解决方案的需求，对吧？ 即使是最常见的插件，比如每个网站上都有的表单插件，好吧，现在我们需要它的块版本。

我们需要更好的 JavaScript 支持的版本，我们可以在编辑器中自定义和更改。 市场一直很缓慢地赶上了这一点。 我不知道是因为缺乏 JavaScript 开发人员，还是——有很多原因，但关键是市场现在非常开放。 所以以前的插件就像过去 10 年的顶级插件一样，您可以将您为客户和站点所做的这些事情变成产品。

事实上，我已经看到它已经完成了。 我开始使用 Atomic Blocks 来做到这一点。 我想替换短代码之类的东西，并开始制作积木来做到这一点。 仅仅因为它是为数不多的这样做的人之一，它很快就变得非常流行。 因此，有很多机会可以通过货币化和找出新的利基市场进行挖掘。

大家知道，尤其是电子商务，有很多难题需要解决。 而客户，他们为这些东西支付了额外费用，因为我们正在解决他们无法自己解决的真正棘手的问题，尤其是节省时间和金钱的解决方案。 所以我无法充分说明 WordPress 现在有多少机会。 前所未有的是，市场已经准备好迎接这些新的解决方案，这些新的更直观、更好的 UI 和更紧凑的构建。

客户已经为这些东西做好了准备，他们会为此付钱。 是的，再一次，在这里，从来没有比现在更多的机会，特别是对于电子商务的东西。 我看到越来越多的人在寻找解决方案。 最擅长的人应该为块编辑器制作这些东西。 我们需要释放长期增长，这是实现这一目标的一种方式，将您的工作转化为产品。

好的，综上所述，从哪里开始呢？ 开始学习这些东西是一项艰巨的任务。 我的工作方式以及我认为很多人可能的工作方式是，通过构建一些东西更容易学习。 因此，无论是构建新事物还是采用您过去构建的事物之一，客户项目或您自己的个人网站，请尝试采用它，如果它是通过页面构建插件或其他方式完成的，请尝试接受它并在块编辑器中构建它。

我的意思是，没有任何借口，只是进入那里并开始使用它。 制作你的第一个积木。 将标题或功能部分变成一种模式。 弄清楚设置侧边栏与内容区域和块之间的关系以及绑定设置的不同方式。 这里有各种各样的探索途径。 修改用户界面，进入并向其中一个工具栏添加自定义按钮。 将它与您的一个块中的某些设置相关联。

这些都是现在很容易做到的事情。 我在这里提供了一些链接。 有指向文档的链接，块编辑器文档。 但还有一个存储库，即 WordPress GitHub——对不起，Gutenberg 存储库，他们在其中提供了构建特定内容的示例。 所以他们可能会说这就是你构建区块的方式。 下面介绍如何通过 API 提取数据。 他们在为开发人员提供非常详细的示例方面做得非常好。

然后一旦你构建了它，就完成启动它的过程，或者甚至模拟启动它，因为在你构建了一些东西之后你会发现一些东西，这是一回事。 但是有点让它上线并经历将它放在生产服务器上并设置您的站点以启动它的过程，我们都知道在那一小段时间里也会弹出一些东西，对吗？ 因此，请完成启动它的过程。 做记录。

然后我想那时候我开始意识到这件事已经准备好了，对吧？ 这东西很给力这东西准备好了。 同样，它肯定会有一些怪癖，就像有任何软件一样。 而且我们在开源社区中，所以关于它的美妙之处在于您可以回馈您发现的东西和发现的小怪癖。

您可以简单地报告它，这将引起别人的注意并修复它，或者您可以修复它并提供修复。 希望它能被合并。所以回到我之前所说的，我的意思是，无论你现在还是以后采用它，都取决于它的稳定性，你越早开始使用它，它就会变得越稳定，并且报告这件事。 我认为这是整个事情中非常有价值的部分，我们有这个机会，而且在很大程度上由我们控制让它变得更好。 所以我希望你这样做。

所以无论如何，是的，从哪里开始？ 从这里开始。 开始建造一些东西。 进到那里去。 做几个积木。 我想你会看到的。

就是这样。 你知道，再一次，我只想鼓励你走出去，做点什么。 看看所有的机会。 并与我分享。 按我的方式发送。 在 Twitter @MikeMcAlister 上找到我，向我展示您构建的内容或向我提出任何问题。 好的，非常感谢您的宝贵时间。