Builder 基础:探索块模式

已发表: 2022-01-20

最新版本的 WordPress 将于 1 月 25 日月底到达。也许在您阅读本文时,5.9 版已经发布给全世界。 我再兴奋不过了。 有无数的增强和新特性,其中许多我们将在以后的文章中介绍,但今天的主题是块“模式”。

虽然对 WordPress 来说并不陌生,但由于 5.9 版启用的功能,特别是基于块的主题,模式正受到很多新的关注。 模式正在迅速成为 WordPress 本身的基本组成部分,并且似乎准备重塑我们设计和构建网站的方式。 那么还有什么更好的时间来探索真正的块模式以及如何使用它们呢?

基础

在我们深入研究块模式之前,让我们从基础开始并建立一些术语。 WordPress 在过去几年中发生了很大变化。 确保我们都在同一页面上是件好事。

堵塞

是 WordPress 中内容的基本“单元”。 从一段文本到一组图像,一个块几乎可以采用任何形式。 我喜欢想象一块乐高积木. 虽然每个块可能看起来不同或具有独特的功能,但它们都很好地结合在一起创建了网页的内容。

图案

模式只是形成特定布局的预定义块集合。 模式可以是单个块或由多个块组成。 正如我们稍后将看到的,模式使构建复杂的页面布局变得简单而有趣。

编辑

编辑器是我们用来创建页面和帖子的用户界面。 自 2018 年一直在 WordPress 5.0 中引入以来,编辑器被许多名字所称呼。 其中包括 Gutenberg、Gutenberg Editor、Block Editor 等。 出于本文的目的,我们将简单地使用术语“编辑器”。

插入器

在编辑器中,插入器用于向页面添加块和模式。 您可以通过单击编辑器左上角的蓝色 (+) 符号来访问插入器。

下面的屏幕截图说明了我们定义的术语。

为什么要使用块模式?

编辑器使我们能够从块中构建几乎任何设计,无论是简单的博客文章还是精心设计的登录页面。 让我们以这篇文章为例。 您现在正在阅读的是段落块。 上面的标题是一个标题块,屏幕截图只是一个图像块。 将这些内容元素添加到页面很容易。 我打开了插入器,找到了合适的块并点击插入。

快速提示:您知道块也可以使用斜杠命令插入吗? 用“/”键开始一个新段落,将出现可用块的列表。 键入其他字母将微调搜索结果。 试试看!

稍微复杂一点的东西呢? 考虑以下定价表,这是一种通常用于在网站上展示产品或服务的设计。

仔细观察,您可能会识别出用于创建此布局的各个块。 底座是一个 Columns 块,具有三个等间距的列。 每个 Column 块内部都有一个 Separator、Heading、Paragraph、Buttons 和 Spacer 块。 你能认出几个?

事实上,这个定价表由 25 个单独的块组成。 无论您使用 WordPress 的技能水平如何,从头开始复制此布局既乏味又具有挑战性。

现在想象一下,如果已经为您配置了这组 25 个块。 只需单击一下,您就可以插入完整的定价表并对其进行调整以满足您的个人需求。 更好的是,如果触手可及的大量设计集合,每一个都符合您的主题审美? 想想创意图像和文本布局、号召性用语、页眉、页脚,甚至整页布局。 拥有这种类型的“入门内容”可以节省大量时间,甚至可以让新的 WordPress 用户更容易访问编辑器。

这就是块模式的用武之地。上面的定价表实际上是包含在即将发布的二十二十二主题中的模式,该主题将与 WordPress 5.9 一起发布!

希望这个小练习已经说明了为什么我对块模式的潜力如此兴奋,但是我们如何实际使用它们呢?

如何使用模式

就像块一样,可以使用插入器将模式添加到页面中。 在插入器打开的情况下,导航到“模式”选项卡,其中显示了按类别分割的所有可用模式。 选择适合您的布局,然后单击以插入。 然后,您可以编辑构成图案的各个块,就像编辑任何其他块一样。 您可以插入的模式数量没有限制。 混合搭配以创建独特的页面设计。

虽然插入器提供了对块图案的轻松访问,但您会注意到每个图案的预览非常小,并且它们都堆叠在一个列中。 很难可视化和比较布局,因此很难选择正确的布局。

为了解决这个问题,WordPress 5.9 包含了 Pattern Explorer。 可以通过单击“模式”选项卡上类别下拉列表旁边的“探索”按钮来访问这个令人兴奋的新功能。

资源管理器打开一个模式窗口,该窗口通过网格中显示的模式提供增强的浏览体验。 它们也可以按类别轻松搜索或过滤。

上面的屏幕截图是 Pattern Explorer 的第一次迭代。 未来的 WordPress 版本有望扩展 Explorer 的功能。 当前的实验添加了移动/平板电脑预览和单独演示模式的选项,而不是网格布局。 虽然没有得到任何确认,但请留意 WordPress 6.0 到 2022 年中期的其他增强功能。

通过对模式的所有讨论,您可能想知道,它们实际上来自哪里?

在哪里可以找到他们

以三种方式之一注册模式,通过您当前的主题、第三方插件或通过模式目录的 WordPress 本身。 让我们探索每种方法。

主题

您的主题可能是在您的网站上提供模式的最直接方式。 正如我们在上面的定价表中看到的那样,许多基于块的主题都包含他们自己的定制模式集合。这只是主题区分自己的另一种方式,一组强大的布局选项将为用户带来巨大的好处。 在撰写本文时,二十二十二主题将附带 60 多个!

模式目录 (WordPress)

从 WordPress 5.9 版本开始,WordPress 将通过 Pattern Directory 提供自己的模式。

Pattern Directory 是一个社区驱动的模式存储库,很像 WordPress 插件和主题存储库,将在 5.9 版本之前开放供公众提交。 您可以直接从 Pattern Explorer 浏览和插入所有提交和批准的模式。 这意味着 WordPress 用户将可以访问数百个(如果不是数千个)块模式。

快速提示:某些主题可能会禁用 WordPress 从模式目录中包含的模式。 当主题开发人员包含他们自己的模式集合并希望提供更精心策划的用户体验时,通常会这样做。

第三方插件

最后我们有插件。 由于模式已经存在多年,许多第三方插件,例如 Genesis Blocks 和 Redux,已经创建了广泛的模式库。 这些库通常不直接与 Pattern Explorer 等功能集成,并且具有 WordPress 核心中没有的自定义块。 他们也倾向于使用自己的插入模式的方法,但随着时间的推移,我预计许多人会开始遵循 WordPress 的新标准化方法。

如果您在 Pattern Directory 不断成熟的同时寻找小众块和布局,或者您没有使用具有自己模式的主题,我绝对建议您探索第三方插件必须提供的内容。

模式的未来

WordPress 5.9 将为块模式带来许多增强功能。 正如我们所讨论的,Pattern Explorer 将使您更容易为您的网站选择正确的设计。 模式目录将使您能够访问大量社区构建的模式,这些模式将无缝集成到您的主题中。

虽然您将始终能够从单个块中创建独特的设计,但我相信我们大多数人会直接进入 Pattern Explorer。 我们将选择一种布局,要么是我们的主题提供的要么是从目录中提供的,然后根据需要进行调整。 我知道我会的。

此外,我们可以预期新的基于块的主题将通过其内置块模式集合的广泛程度来判断。 具有一百多种模式的主题,所有这些都被整齐地分类并涵盖了广泛的用例,很可能会成为常态。 虽然主题的美感很重要,但为用户提供轻松创建精美网页所需的工具至关重要。

模式是 WordPress 的未来,未来是光明的。

包起来

在本文中,我们回顾了什么是块模式,如何使用它们,以及它们为什么会从根本上改变我们构建 WordPress 网站的方式。 在下一篇 Builder Basics 文章中,我们将深入探讨并教您如何实际创建自己的模式!

那么你对模式有什么看法呢? 你在你的网站上使用它们吗? 您有任何本文未涵盖的问题吗? 让我们在评论中知道。