尖端模式管理和创建

那些精通块模式的人将在设计、构建和扩展 WordPress 的新范例中处于领先地位。

观看本次会议，了解如何利用最新的模式功能，以及一个令人兴奋的新工具来提升自由职业者和代理机构的模式管理体验。

演讲嘉宾：

• WP Engine 的 React 工程师 Michael Day
• Phil Johnston，WP Engine 高级软件工程师

会议幻灯片：

成绩单：

菲尔·约翰斯顿：大家好。 我叫 Phil Johnston，是 WP Engine 的高级软件工程师。 我和我的队友 Mike Day 将讨论 WordPress 中的尖端模式管理和创建。

所以最近有很多新的和有趣的东西被添加到 WordPress 中。 其中之一就是模式。 我将要谈论那个。 图案由块组成。 因此，让我们深入研究它。

您将在块编辑器（即 WordPress 仪表板）中使用块。 在这里您可以创建诸如博客文章或页面之类的内容，并且您可以在这里开始写作或创建。 这是您将使用块的地方。

所以我可以从我的孩子那里借一些乐高积木来进行这次演讲。 因此，为了帮助说明这一点，当您查看此处显示“我是标题块”的页面时，您可以将其视为一个乐高积木块。 然后在它说我是一个段落块的下面，你可以把它想象成你在它下面剪下来的另一个块，然后依此类推。

你在下面有另一个标题块。 所以你可以点击它。然后你可以开始构建你想要的页面。 您只需单击、拖动或重新排序即可重新排列这些块。 然后你可以很容易地重新组装你的页面，因为它们都被阻止了。

虽然这对于像博客文章这样的东西来说非常简单，你可以直接进入编辑器并开始这样做，甚至不知道这些是块，但你也可以构建一个更复杂的块布局，就像你重新看到这里。 所以这里有一个包含三个图像的三列布局。 在那之上，你实际上有一个全宽的列。 它横跨所有这三列。 然后是三个图像块、三个示例标题块、三个段落块，然后是其下方的三个按钮块。

再次重申，WordPress 块就像乐高积木。 您可以将它们拼接在一起，制作一个像我展示的第一个这样的简单布局，或者像您在这里看到的那样制作一个更复杂的布局。 因此，我用红色突出显示了您可能希望在这样的页面上看到的块。 所以你可以看到第一个周围有一个红色框。 [清喉咙]对不起。 那代表一个块。 然后在其下方，您有另一个块，其中包含一些 Lorem ipsum 文本，然后是我提到的三个图像块、三个标题块、三个段落块和三个按钮块。

您可能认为这就是制作这样的页面布局所需的全部内容，但实际上比这要复杂得多。 所以在这张幻灯片上，我突出显示了不可见的块，即您看不到的块。 这些是需要在页面上定义事物应该放置的位置的块，例如三列而不是一列的事实。

因此，隐形块虽然功能强大，但对于普通用户来说也很难深入了解并开始使用。 当您在块编辑器内移动鼠标时，您不会知道那里有不可见的块，因为它们是不可见的。 并且所有这些块还具有随之而来的复杂控件。 例如，这是其中一个列块。

如果你看右边，你会看到所有复杂的控制，这些控制不是超级容易或直观地理解的。 内部块之类的东西使用内容宽度或填充或块间距。 普通用户不会知道或理解这些设置的作用。 如果我走进厨房看到一大堆香料，这有点像我。

我不是一个好厨师。 所以我会像这样在架子上放一堆香料。 而且我不知道如何组合或使用它们，因为我还没有花时间成为一名厨师。 就像成为五星级厨师并烹制美味可口的饭菜需要时间一样，这需要时间，而且学习块编辑器和理解在什么时候使用哪些块来制作看起来不错或味道好的东西也很困难好的。

所以这是一个专业。 这是你必须发展的手艺。 因此，普通用户将像您在此处看到的那样，被扔进块编辑器中，一片空白。 而且他们不会知道他们需要使用列块，或者如何使用该块，或者在该块中放入什么，基本上是他们需要组合的香料来制作真正看起来很棒的东西。

他们可能会觉得很沮丧。 他们可能会觉得很难得到他们想要的东西。 即使他们确实学习了积木的所有这些复杂性，他们也可能只是不具备设计技能。 因此，虽然功能强大，但块可能难以使用。 这就是发明模式概念的原因。

因此，在 WP Engine，我们构建了一个名为 Atomic Blocks 的插件。 在 Atomic Blocks 中，我们基本上提出了模式的概念，但我们称它们为部分和布局。 这是完全相同的概念。 WordPress Core 实际上从 Atomic Blocks 中获得灵感，形成了 WordPress Core 中现在的概念，称为模式。

所以模式是用户可以浏览的预构建块组，就像你在这里看到的那样。 这里有一堆图案供他们选择。 通过单击一个，他们只需单击一下即可将所有内容插入到他们的页面中。 因此，他们不需要像这样组装积木，乐高积木，而是得到这样的东西，一组预先组装好的积木，希望这些积木是由已经非常擅长设计并且已经投入数小时制作工艺的人制作的块。

所以一旦你把它插入到页面上，它看起来有点像这样。 就这样，砰的一声，你有了一个模式，一大堆预先组装好的块，看起来不错，味道不错，而且可以工作，然后你就可以进入并输入你需要更改的文本. 因此，您可以将示例标题之类的内容更改为您页面的唯一文本。

所以模式对于普通用户来说就像是一个巨大的领先优势。 他们不需要学习块编辑器的所有复杂性，所有那些复杂的东西。 他们不需要成为专业设计师，但只需在页面上插入图案即可获得精美的设计。

因此，如果您是一家代理机构，为他人或客户构建网站，您可以使用块模式来帮助您的客户自助。 通过向您的客户提供一大堆预先设计的模式，他们可以构建自己的页面。

所以说他们有一个活动即将到来，他们需要一个特殊的页面。 他们可以获取您为他们创建的与他们的品牌相匹配的块状图案。 它与他们的配色方案和所有类似的东西相匹配，他们只需单击并将其插入页面并进行逆向工程——只需开始输入这些块，而不需要知道在哪个块中使用哪个块的所有复杂性场景，以及不该做的事情，以及如何构建一个跨设备和所有这些东西都能很好工作的布局。

然而，虽然块状图案对于普通用户来说很容易使用，但它们并不容易创建。 随着时间的推移，它们更难管理。 对于开发人员和代理机构，WordPress 中没有内置工作流程或工具来帮助您制作模式。

因此，我将目前构建模式的步骤分解为 10 个步骤，我将在这里称之为艰难的方式。 如果这看起来势不可挡，那是因为它确实如此。 您要做的第一件事是在 VS Code 等代码编辑器中创建一个 PHP 文件。 您必须在该文件的顶部放置一个特定的文件头。

然后你需要在某个地方建造。 所以你必须有一个 WordPress，可能在你的本地，这很好。 但是随后您需要在该 WordPress 中创建一个临时页面，以便您可以将块放在某个地方并对其进行处理。 然后你需要构建它。 你需要使用那些技能，你开发的手艺，让它看起来很漂亮。 然后当你完成后，你必须切换到代码视图并将所有代码复制到你在第一步中创建的文件中。

然后您必须将该文件保存到主题中的特定位置。 如果您正在构建一个主题并将其交付给您的客户，则必须将其放入模式目录中。 然后，如果您的模式包含像我展示的三列布局中的图像，您必须确保这些图像在您将其交付给客户时确实有效。 因此，因为您是在本地计算机上构建它，所以该图像也将在代码中被引用，就像它在您本地计算机的硬盘驱动器上一样。

显然，这是一个问题。 一旦它不再在您的计算机上，该图像将无法使用。 因此，您需要仔细梳理代码，查找您本地计算机的任何 URL，并将它们替换为特定的 PHP 标记。 然后您需要确保将这些图像文件也实际移动到您的主题中。 您不能只在代码中更改它。 您还必须移动该文件。

然后使它变得更加困难，这是我真正认为最令人沮丧的地方，至少对我来说，当我构建很多模式时，如果我在模式中犯了拼写错误，我需要开始再次在第三步，每次都再次走到第九步，只是为了纠正拼写错误。 您还必须——因为您每次都必须重新生成所有块代码——然后您必须研究所有这些图像 URL 并替换它们，将其放回文件中。

这是一整套重复的、乏味的步骤，尤其是对于管理时间。 就像说您需要在几个月后调整模式。 这很乏味。 这是我们在为 Genesis Pro 系列构建模式时遇到的问题。 我们已经交付了很多部分和布局或模式，并且对一遍又一遍地做这些乏味的事情的过程感到非常沮丧。

这就是促使我们构建一个工具来帮助我们不必做这些事情、消除这种乏味并使其真正尽可能快的原因。 你可以直接处理它，保存它，然后，砰的一声，它会直接为你进入文件。 它会将文件放在正确的位置。 它为您编写所有代码。 因此，我们决定在内部为自己构建一个工具，以消除所有这些痛苦。 我们实际上从未真正打算让它成为我们可以让其他人使用的东西，但它对我们非常有用，以至于我们想让其他人也可以使用它。

因此，正如您所看到的，当前构建模式的困难方法并不理想，也不是做事的好方法。 这就是我们构建模式管理器的原因，它是一个用于在 WordPress 中创建和维护模式集合的 UI。 因此，我将把它转交给我的同事 Mike Day，让我们了解模式管理器并向我们展示其中的所有出色功能。 交给你了，迈克。

迈克·戴：嗨。 我是迈克。 我是 WP Engine 的一名软件工程师。 模式是一种强大的布局创建工具，有可能改变 WordPress 构建者的游戏规则。 但正如 Phil 刚刚展示的那样，在创建和管理它们方面实际使用这些模式的经验至少可以说是缺乏的。 模式管理器旨在通过一个可以滑入您的工作流程的插件，以一种无摩擦的方式将模式文件的管理带到 WordPress 设计的最前沿。 让我们开始吧。

出于本演示的初始目的，我将在右侧此处打开我的代码编辑器窗口。 这是直接保存到我的磁盘中的实际模式文件。 我真的很想强调一点，当您使用 Pattern Manager 时，您实际上是在操作和创建保存到磁盘的物理文件。 具体来说，它们被保存到您当前的主题目录中。 所以您可以在这里看到这两个 PHP 文件或模式文件，它们代表当前在此模式视图中处于活动状态的模式。

此外，请注意此图像目录。 Phil 提出了一个非常有趣的观点，即现在在处理图案时，假设您将一堆图像保存到一个图案中。 这些特定图像的所有这些 URL 都将指向您的本地安装。 每当真正分享您的工作时，这都是一个大问题。

所有这些图像都将被破坏。 所以我们的做法有点不同。 我们实际上将这些图像的副本直接保存到主题文件夹本身。 例如，这是版本控制的游戏规则改变者。 假设您和您的合作者正在使用 Git。 现在您可以确定在工作时所有人都可以访问相同的图像。

好的。 因此，让我们实际跳入界面。 这是模式视图。 在这里，您可以立即看到为我的主题注册的两种模式。 当您将鼠标悬停在模式预览上时，请注意弹出的操作按钮。 我们有编辑、复制或删除给定模式的选项。 左侧还有一些过滤选项，但稍后我会回到这里。 现在，让我们真正开始编辑模式。

所以马上，我相信你会认出一个非常熟悉的用户界面。 这是 WordPress 块编辑器，在本例中重新用于提供用于处理模式的特定空间。 在右侧，您会看到这些不同的标头属性。 现在，在我开始讨论这些之前，我想提供更多背景信息，并实际使用从 WordPress 开发人员文档中借用的一些文本。

title 属性是不言自明的。 这是一个人类可读的正面 ID，如果您愿意，用户将在网站上与您的模式交互时看到。 类别实际上用于将模式分组在一起。 这将是一组已注册类别，您可以在其中添加一个或多个类别，或者如果您愿意，也可以根本不添加类别。 但是目前在 WordPress Core 中的工作方式存在问题。

确实没有很好的方法来判断哪些类别实际可用。 在您网站的任何地方都没有明显的地方可以实际找到这些已注册的块模式类别，至少我知道是这样。 现在，您可以将关键字视为有点像搜索词。 本质上，您可以输入这些描述性别名来描述您的模式，这样无论用户在插入器中搜索什么，他们都可以轻松找到他们需要的东西。 描述是该想法的一种延伸，除了它是视觉上隐藏的文本。 这对于可能使用屏幕阅读器的视障用户非常有用。

现在回到模式管理器，让我们修改这些元属性。 模式标题是一个简单的文本输入。 只需开始键入即可重命名您的模式。 但是请注意这里的一个隐藏功能。 模式管理器告诉我主题中已存在具有此标题的模式。 我不想不小心破坏那个文件，所以我只想保留标题。

好的。 让我们选择一些类别。 所以，请注意，我们只是在下拉列表中呈现了这个类别列表。 否则，很难知道在哪里可以找到这些数据。 但是这个列表是通过 API 调用动态填充的。 这意味着不仅您主题的所有已注册块模式类别，而且您可能已注册的任何类别我们都会在此处显示。 我们现在只选择特色。

好的。 让我们添加一些可搜索的术语。 出于本演示的目的，我将只使用示例模式。 但请记住，您可以在此处为在插入器中搜索的用户添加描述此模式的术语。 请注意，我在这里使用了一个多词术语。 模式管理器支持这些。

好的。 让我们添加一个描述。 回想一下，这是视觉上隐藏的文本。 所以我认为这里的主要目的是帮助屏幕阅读器。 因此，让我们将其描述为具有反转颜色的三列。 好的。 完美的。 我觉得我们现在处在一个好位置。 我们实际上可以保存我们的工作。 但在我这样做之前，我希望您密切注意右侧此文件中的标题。 现在，只要我点击“更新模式”，突然之间就会有更多的数据。 我们刚刚修改的描述、类别和关键字都已经出现在这里，而无需我触摸这个文件。

好的。 让我们看看剩余的元属性。 所以首先，我们在视口宽度方面有一个非常有趣的属性。 这是一个整数，表示预览此图案的缩放宽度。 因此，默认情况下，每当您创建图案时——假设您制作的东西是全宽的，甚至可能真的很窄。 WordPress Core 中的默认设置可能会使缩放比例在预览中看起来有点奇怪。

所以发布类型。 这只是一组旨在与该模式一起使用的 post 类型 slug。 请注意，在此处添加值实际上会限制模式，因此它仅适用于那些帖子类型。 另请注意，将此留空将导致该模式适用于所有帖子类型。

接下来我们有块类型。 这是另一个数组，但这次是模式旨在使用的块类型。 现在我必须承认，每当我第一次开始使用这些块类型时，我发现它有点混乱。 看起来这种用法真的是为了多用途，但我认为它背后的意图并不是很清楚。

最后，我们有插入器属性。 现在默认情况下，所有模式都会出现在插入器中，但假设您想更改它。 您只需为此属性添加一个布尔值 false，它将在插入器中隐藏起来不被使用。

那么回到模式管理器，让我们看看我们如何处理这些剩余的元属性。 首先，我要关闭这些其他面板。 让我们看一下视口宽度。 现在回想一下，这是一个整数值，它只控制插入器中图案的缩放预览。 当前实施的一个痛苦之处是实际上看到了您的工作结果。

假设我修改了模式文件中的标题并更改了视口宽度。 真正看到它是什么样子的唯一方法是创建一个新帖子。 这有点令人费解。 来回跳转有点过于复杂。 这有点痛苦。 因此，我们采用的方法是将鼠标悬停在滑块上，然后立即显示预览。 当我四处拖动并尝试不同的尺寸时，我可以看到这个图案是如何缩放的。 这真的很有用并且可以节省大量时间。 我们现在选择 1,200。 让我们继续讨论帖子类型。

关于此面板首先要注意的是这些工具提示的存在。 这些只是一些小信息，可以在您使用该应用程序时尝试帮助指导您。 所以首先，这只是重申我已经讨论过的内容。 如果没有选择，如果没有帖子类型添加到您的模式文件的标题中，您的模式将适用于所有帖子类型。 但请注意下面有一个名为模态可见性的设置。

这是一个非常酷的隐藏功能。 本质上，如果您在模式文件的标题中具有正确类型的块类型，则每当用户创建目标类型的新帖子时，他们都会看到模态出现。 他们可以直接从该模式中选择您的模式。 稍后我会准确地告诉你我的意思。 但我想让你注意到这个开关实际上是如何被禁用的。 那是因为除非填充了帖子类型，否则模态可见性设置将不起作用。

因此，我们采用的方法是简单地禁用切换，直到出现帖子类型。 好的。 现在我可以打开它了。 显示器和插入器切换，它会做你可能猜到的事情。 如果您要关闭它，这将在您的文件标题中分配一个 false 值。 而这种图案将不会再出现在插入器中。 好的。 让我们继续更新这个。

现在让我们看看所有这些在一篇文章中是如何实际运作的。 所以我要切换并实际创建一个新帖子。 现在，这就是我正在谈论的行动模式。 因为正确的块类型和帖子类型都添加到文件中，所以我现在在创建新帖子时会立即看到这一点。 我只需单击模式预览，然后，砰的一声，我的模式就在那里。

这很酷，但让我们看看标签实际上是如何工作的。 所以这是我选择的类别，功能。 我主题中的另一个模式有列和文本类别，所以效果很好。 我的搜索词呢？ 我的带有示例模式的搜索词。 效果很好。 我的隐藏文本以三列开头，也完全按预期工作。 那太棒了。

好的。 因此，让我们跳回并介绍另一个剩余的元属性。 这个解释起来有点奇怪。 我觉得如果我只是给你看会更容易。 因此，让我们继续创建一个新模式。 你所要做的就是点击这个创建新模式按钮。 在这里，我回到了编辑器中。 在本例中，我将选择代码块。 在此代码块中，我将粘贴一些示例代码。

现在这实际上取自 WordPress 文档。 这是您使用 PHP 注册块转换的方式。 所以你可以把这段代码粘贴到一个函数文件中，无论你喜欢什么。 让我告诉你我们是如何处理这个问题的。 在这个转换后的块类型部分，有一个下拉菜单。 这个下拉列表是动态填充的，就像通过 API 调用的帖子类型和类别一样。

所以我可以简单地搜索我的目标类型——就是这样，核心/代码——然后选择它。 现在再次说明一下，不同之处在于您现在如何执行此操作与使用模式管理器。 现在要做到这一点，我必须找到这个代码块，找出我可能需要的确切内容，找出我的块类型，并将其粘贴到某个地方，而在模式管理器中，我只是选择了这个字段。 我从下拉列表中选择了这个值。 好的。 让我们更新一下。 我将创建一个新帖子。 让我们退出我们的模态。

这次，我还要选择代码块。 但是我不需要用内容实际填充它，我可以简单地从工具栏中选择这个选项。 并注意这个模式选择。 当我选择模式时，就有我的模式。 通过单击它，该块立即转换为我的目标模式。

转换类型要涵盖的另一件事是所谓的语义块模式。 这些类似于块转换，但针对模板部分。 例如，页眉和页脚。 但是那里有一个问题。 关于选择目标模板部分块类型需要了解的一件事是，您必须还分配了正确类型的帖子类型，否则它将无法工作。 因此，我们采用的方法是简单地为您分配此模板类型。 它是锁着的。 并且它将保持锁定状态，直到实际删除此块类型为止。

这就是这个编辑器视图的初始演示，但我确实需要在此处切换后台主题。 现在我将切换回模式视图。 这里的重点是向您展示模式管理器如何处理大量模式。 这个特定的主题注册了 50 多个模式。

现在请注意，当我点击这些不同的类别时，这些模式是如何立即被过滤掉的。 当我试图在一堆模式中找到我需要的东西时，这非常有用。 但是假设您想要更精细的控制。 只需开始打字。 此过滤的工作方式与插入器非常相似。 它真的很有用而且非常活泼。 说到 snappy，还需要指出的是这个 UI 给人的感觉有多快。

请注意，在我真正滚动到它们之前，这些预览是如何加载的。 这是一个非常擅长节省浏览器资源的自定义实现。 无论您使用多少种模式，它都会让这款应用程序感觉快速且非常活泼。 好的。 我们在本次演示中介绍了很多内容，所以让我们快速回顾一下。 模式代表了单个内容元素的管理和整页设计之间有趣的交集。

作为 WordPress 构建者，创建更大的布局元素并在主题中重复使用它们的能力是一个引人注目的想法。 页眉、页脚、推荐、功能框。 这些都是每个网站的标志。 现在您可以使用模式轻松设计整个站点。

现在，尽管模式作为块主题的关键组成部分出现，但 WordPress 本身没有用于实际创建或管理这些模式的官方界面，路线图上也没有任何内容。 相反，构建者必须在他们的代码编辑器中手动创建模式，来回复制和粘贴代码数十次，从而留下很大的出错空间。

我们的产品 Pattern Manager 旨在融入您的工作流程。 只需安装并激活该插件，您将获得一个用于过滤模式、创建、复制、编辑、删除以及所有这些的现代 UI，以及在使用核心 WordPress 编辑器的熟悉体验中编辑内容的体验。 此外，许多难以理解的正确标记模式文件的复杂性，例如，添加类别、关键字，或者甚至可能限制仅适用于某些自定义帖子类型，都在我们的 UI 中被抽象掉了。 构建者可以通过易于使用的侧边栏控件完全控制这些设置。

Pattern Manager 已发布，现在可从以下 URL 下载。 试一试，让我们知道您的想法。 请随时亲自与我联系，让我知道您的想法。 我们希望您尝试一下模式管理器。 我们希望它能像帮助我们的 WordPress 构建者团队一样帮助您。 谢谢。