使用块状模式扩展WordPress编辑器

大家好，我是Daisy Olson。我是Daisy Olson。我是一个自动的开发者关系Wrangler。我的主要工作是支持WordPress开源社区。我很高兴能在这里分享WordPress区块编辑器的一个非常有用的功能。你可能已经知道，块编辑器有时被称为古腾堡，可以用来真正创建高级和有趣的内容布局。

今天我将分享一下在2020年8月发布的一些WordPress 5.5版本中增加的区块模式功能。区块模式功能是在编辑器中实现的。积木模式功能提供了一个目录的访问。由块组成的预制模式，允许用户轻松创建和修改，吸引人的内容布局。

这个功能主要是为了让主题和插件开发者为他们的用户和客户创建预定义的区块配置。除了WordPress中默认包含的那些，还可以注册额外的区块模式，为内容创作者提供更多的选择，以快速创建高度可定制的内容。

他们的WordPress网站。注册块模式提供了一个非常简单的方法来添加模板一样的块组到帖子或页面准备添加独特的内容，从添加块模式，独特的网站的品牌，以扩展插件或主题功能。可能性是无穷无尽的。

我先岔开话题，说说另一个块状编辑器的功能，在谈论块状模式时，可能会引起一点混乱。这就是可重用块功能。可重用区块是一个区块或一组区块，这些区块被保存起来以允许从一个中心位置进行管理。对可重复使用的区块所做的更改将适用于整个网站中区块的每个实例。

当一个可重复使用的区块被编辑时，这些编辑将影响到网站上任何使用过该编辑的可重复使用区块的地方。然而，区块模式是作为一个起点，并没有同样的中央管理。一旦一个区块模式被添加到一个帖子或页面中，它就不再与注册的区块模式相关联，可以在不影响用于插入区块的区块模式的情况下进行修改。

通过在WordPress主题的函数点PHP文件中或在自定义插件中添加一些相当简单的代码，从块插入或面板中注册使用块模式。在这个例子中，我们将在一个简单的插件中添加必要的代码。为了保持区块模式插入器的有序性，可以将创建区块模式类别的选项与区块模式本身一起注册。

我建议利用这个选项，以方便内容创作者今后的工作。在这种情况下，我已经注册了一个块状模式的类别，有一个类别名称和人类可读的标签。类别名称将被WordPress用来识别该类别。请注意，我使用了所有的小写字母，并在类别名称中用破折号分隔。

第二个属性包含一个带有标签属性的数组。这将为类别分配一个人可读的标签，该标签将在块模式插入器面板的类别下拉菜单中列出。

代码、区块模式由两个必填属性和两个可选属性组成。标题和内容是必填属性。描述和类别是可选的，但建议使用。标题将为您的区块模式提供一个标签，以便在可用区块模式列表中显示。内容包含了该图案的初始块内容。

这些内容也将被用来创建一个区块的渲染，因为它将与插入或面板中的活动主题样式一起出现。根据您的块模式的内容，它可能需要转义某些字符，如双引号和单引号字符。有许多在线工具可以帮助完成这项任务，onlinestringtools.com的一个选项的URL显示在这里。

在这里，你可以看到完成的代码，可以添加到一个主题或插件。在这种情况下，我已经添加了一个简单的段落块的例子，用于演示目的。我还用if语句包装了我的注册代码，这样只有在添加代码的网站上存在块模式功能的情况下，注册代码才会被使用，如果代码被添加到一个不支持WordPress这个相对较新的功能的网站上，这将起到一个保障作用。

请注意，我在我的区块模式注册代码中包含的字符串，如我的真棒模式，或这是我的真棒区块模式，都是用本地化函数包装的，以允许字符串被翻译成其他语言。

这是在对任何面向用户的字符串进行编码时的最佳实践。这个例子极其简单，但我们来看看获取注册一个有点复杂的基于块的布局所需的内容标记的过程，以注册一个块模式。

在这里，我们有一个基本的WordPress网站，是为这个示范在主页上创建的。我已经添加了每一个核心或包含在WordPress的块模式。所以，你会看到，我们有像一个两个按钮块模式，包括两个按钮，就像它所暗示的，一个三个按钮块模式。

然后，如果你往下走，你可以看到我们有一些其他的选项，比如两列文字与图片。我们有三列的按钮。我们有一些会做图片。在这里，我们有一些东西，旨在为一个大的标题与一个，标题在图像。

当我们继续往下看，你可以看到更多。最后，我们有一个引用块模式，这是一个非常好的例子，你可以使用块模式的类型。为了创造一种方法，让你的内容有一个非常一致的布局，你可能会反复使用，这将是一个非常常见的。

以及某些类型的网站可能会使用什么。所以现在我将创建一个新的帖子。我要到这里去新的，然后发布。所以，为了开始这个。这个帖子真的只是作为一种方式，以获得，你将需要的标记，以创建您的块模式。所以只是为了，为了给这个帖子起个名字，我会说这是一个区块模式设置，然后我就可以开始创建区块了。

让我们说，我想让我们给它一个标题。

好吧，我在这里再加一个区块。也许对于这个，我们也许会创建某种团队页面。所以我们可能希望有一个图片。我们可能希望有一些传记内容。所以你可以说，我们将有一个名字。我们将有一个标题。我们可以说我们要有某种传记。

我们可以对这个内容进行一些格式化的应用，比方说我们要把以后要替换的名字做得更粗壮。我们可以或许说，我们想让标题。

比方说，我们把标题做得很小，然后传记就只是内容，我们可以说，我们想让这个标题的行高小一点，或许。

所以我们可以或许说线的高度只会是一个。然后我们可以说，在这里，我们会有什么是媒体。我们会有一些图片。根据你安装的主题，你可能有专门为你的主题创建的样式。你可以设置文字和背景颜色和其他一些东西，可能在一定程度上取决于你的主题，或者，你在你的块类别中使用的块。

需要注意的是尽量避免有这种额外的段落，因为当你，当我们去创建，得到这个块模式的内容时，我们会发现，如果有这些段落，我们需要删除它们。只是为了让我们在这个媒体区域有一些东西，让我们继续看看我的媒体库里有什么样的图片。

所以，我们有一个例子，让我们说，在这种情况下，我们将创建一个目录，似乎远我们的团队吉祥物。现在我们已经添加了这个图片。我将继续前进，并尝试使这个缩略图。假设我想把这个图片放在右边，让我们看看我们还能做什么。

可能我们想把它做得小一点，这样就不会占用页面上那么多的空间。而我们认为这只是一组非常简单的块。它不是很复杂。但是你可以用这个选项来添加极其复杂的全页面布局。比如说，它可以用于登陆页等东西的起点。

好吧，我有我的书。所以在这里，我有我的书。我要称这为完成，我要继续保存我的草稿，这样我就不会失去我的工作。现在，这里的内容是，不可见的。所以，如果我们能看到它的样子，它的设计方式看起来， 但我们不能看到的标记， 这实际上是创建这个。

因此，我们需要做的是揭示，并做到这一点，我们要去这里的选项，这是三个小点在你的屏幕的右上角。然后我们要从视觉编辑器换成代码编辑器。这将改变屏幕。我们仍然会看到我们的顶部，我们的标题在这里，块模式设置。

这是可以编辑的。我不建议在这个视图中编辑你的内容，除非你非常熟悉HTML和块标记，因为这很容易破坏你的内容。WordPress对它需要这些信息的格式是非常具体的。如果我们看一下这个区块的构成，将成为我们的区块模式，你可以看到，我们从这个注释出来的HTML开始，上面写着WP冒号标题。

这是，不会显示给终端用户，但WordPress会看到它。它将会出现在前面内容的标记中。但它的唯一意图是让WordPress知道这实际上是一个小块。所以我们用com一个注释出来的块和HTML打开它，然后用一个注释出来的HTML块关闭它。

而在这两个注释之间就是该块的实际内容。所以稍微复杂一点的例子就是媒体破折号文字。对于我们的媒体内容块。而在这种情况下，我们有我们在块的侧面有块。所以我们打开这个块。所以让我继续选择这个，这样你就可以看到所有的打开内容。

这里有很多，属性和属性的设置。所以其实真正的开口就是这么多。所以它告诉了WordPress一些东西，它怎么用这个内容是WordPress说了算。而在这种情况下，我们只使用核心区块，没有使用插件区块，但是在某些情况下，你可能会有额外的区块，这些区块是由你的插件添加的，或者在某些情况下，区块也可以在主题中注册。

那么在这之后，我们就有了这个区块的内容。然后在这个块里面，我们有第二个块，一个段落块，实际上是两个段落块，然后第三个块。然后这些内块全部做完之后，那么这个块，外块的HTML就关闭了，然后外块的注释就存在了。

 所以，在这种情况下，我们拥有的是嵌套块。所以，正如你所看到的，这里可以有非常可定制的高级块布局。这也是为什么如果你有非常复杂的内容，而你又要反复使用的时候，区块模式会如此有用的原因之一。

因此，为了创建一个注册代码。我们要做的就是把这段代码放到我之前给你看的注册代码的内容部分。然后让我继续，我将去我的插件。这不是什么，我会建议这样做，但只是，一个简化的方式来获取代码，我们将进入插件编辑器。许多主机实际上已经禁用了这个。

这是我的简单积木模式插件，这里我注册了一些积木模式。我这里有一个例子，是我之前做的。这叫做我的宠物详情。如果我向下滚动，那么我有第二个，一个我已经注册的块模式，有一个更简化的版本。我可以做的就是把我从帖子里复制出来的代码粘贴到这里。

这基本上是你可以在这里做什么注册你的块模式。需要注意的是，特别是如果你的内容中存在诸如引号或引号、单引号或双引号之类的字符，或者任何其他需要被转义的字符，PHP都不会改变它理解代码的方式，你已经添加了任何介于你的单引号之间的字符，你注册的代码块模式的内容属性。

你会想要逃离这些内容。有很多不同的选项可以用来转义内容，我用过的是onlinescreentools.com向前斜线转义的破折号。我用过的一个是onlinescreentools.com前向斜线转义的破折号字符串，如果你在网上搜索一个字符串转义器，你就能找到一个工具，你可以把你的标记复制进去。如果你在网上搜索一个字符串转义器，你将能够找到一个工具，你可以复制你的标记到它，然后它将得到转义强度。

我会告诉你，如果你这样做，你会想删除所有的换行符和多余的空格在这里，这样你得到的是一个非常干净的版本，你的HTML标记。所以，当你把它粘贴在这里，它不会有任何额外的像换行符或，空的空间或那些种类的东西。

所以在这种情况下，其实在某些情况下，我可以看一下代码，我可以看到，我不会有任何字符，会干扰这个块的渲染。我在标记中确实有一些双引号，但是因为我是用单引号把这个包起来的，所以不会，造成问题。

所以这一切都要看你的内容是什么样的，你的内容中的省略号或者是收缩号会有潜在的问题。所以一旦你添加了这个区块模式，你就可以。回到一篇文章中去。让我给你演示一下你会添加块状模式的方法。首先，我们要换回视觉编辑器。

所以这就是选项。右上角的三个点，切换回可视化编辑器。你可以看到现在我们有了常规的WordPress区块编辑器视图。为了在一些内容中添加块模式，你会打开这个主插入器。在这里，所有可用的区块都会提供给你。

你会看到有一些模式。在某些情况下，如果你已经保存了以前的可重复使用的块，可以从这里访问。所以可以通过点击模式标签来访问模式。有一个下拉菜单，会显示你的类别。

而你在他们网站上注册的所有积木图案都可以在这里找到。所以让我检查一下这里。我相信，我可能已经真正停用了我的block patterns插件。所以让我去把它激活。然后让我们再试试这个，看看我创建的区块模式。

所以现在你可以看到这里，现在激活了那个插件，我可以看到我的自定义图案的类别。而当我打开它的时候，我可以看到两个块状图案。所以这两个是我之前创建的。其中一个有相当多的内容。另一个就比较简单了。如果我只是点击它，那么它就会把它添加到我所打开的文档的末尾。

然后我可以从这里做的是继续开始编辑它。但它是，所以一旦我把这个区块模式插入到我的文章或页面中，那就不再与这个区块模式相联系了。这个区块模式又在那里，可以在将来再次使用，但我可以继续对这组区块进行任何我需要的修改。

这不，我们来看看，看看一些专门为2021主题打造的区块模式。只是为了给大家介绍一下核心主题的主题开发团队挖掘这个功能的一些方法。我们要做的，我这里有一个全新的帖子。

我将继续使用这个主插入器，我要选择模式。然后你会看到，下拉将有我的自定义模式，这是我创建的类别，我的插件的模式。文本标题库列和按钮是WordPress中默认包含的，块模式的类别。

而我活跃的主题，首先出现的是2021年。而这些。这些是2021主题中包含的块状图案。如果你激活了另一个主题，它们就无法使用。但由于我已经激活了这个主题，我可以继续访问这些。

几件事情，如果你有一个区块模式，你可以在你的网站中使用它，而且它是一个插件或主题的一部分，你不再安装的区块模式。只要在该区块模式中使用的区块仍然存在于你的网站上，这不应该影响主题的变化或缺乏注册区块模式的插件应该不会影响任何你已经创建的内容，因为当你当你添加一个区块模式或使用区块模式添加内容到海报页面时，这种连接不再存在。

它不会以任何方式回溯到你用来创建该内容的模式。您将无法再使用该图块图案添加新内容。该区块模式将不再显示在该面板中，但您之前创建的任何内容将保留。因此，让我们花点时间看看2021主题利用这个功能的一些方式，允许用模式创建不同类型的内容。

列表中的第一个叫做大文本。如果点击那个你可以看到，它只有一个段落或一个，标题块，巨大的字体大小为144像素，行高为1.1。这就是块状模式，就是它的全部功能。这是一个非常简单的创建块状模式的例子。

如果你一直想拥有创建这种大文本的选项，这里还有一个。这是未能获得那些标题的它的链接区域。因此，这可以用于某种社会链接，这是一个例子在这里。一旦这个被添加到你的内容中，你就可以去改变这个内容，以满足你的需求。

但这是一组基本的块。所以在外块中，我们有。让我们来看看，这个区块到底是由什么组成的。这是一个封面块。它有一个隔板，然后段落又是一个隔板，然后我们有一些列，它是一个两列的区域。每一个都有一个段落，然后最后我们又得到一个隔板。

封面的设计让你可以创建或改变它。比如说，你可以选择不同颜色的背景，也可以保持原样。它看起来像它有一些边框应用到它，这是一个风格，这个块可能由主题添加。一旦添加到你的内容中，你就可以继续使用它。

所以我们再快速的去了解一下这些。我们有一个媒体和文本文章的标题。它看起来就像它的中间文本块，已经应用了一些样式和内容，允许你创建这种布局，左边标题上有一个图像，点，像一个分隔符，然后在这种情况下有一些标签或归属。

如果你继续向下滚动，你可以看到，有一些东西，如联系信息一个投资组合列表，它看起来像它会带来的，也许让我们看看这个做什么。这带来了带图片的段落，这样你就可以创建几乎像一个。 一个PO的内容列表，链接出潜在的其他地方在你的网站。

而我最喜欢的一个是重叠图像块模式。所以，如果我们添加这个，你可以看到，我们这里有一个列。有两列。其中一列有两张图片和隔板，另一列有一张图片和一个隔板，主题添加了一个样式，允许图片重叠。

因此，它是一个组合的块状模式，以及一些自定义的主题已经创建了这种重叠的效果。而一旦这是在这里，你不能把这个和替换的图像内只是你的选择，但它是一个非常有趣的使用这种块状模式的功能。

那么这就是对WordPress从5.5开始的区块模式功能的一些使用方式的概述，但在当前的核心主题中，我的介绍到此结束。我很想听听你今后是如何使用区块模式的。非常感谢大家今天的参与。