如何在 Gutenberg 中创建可重复使用的块

已发表: 2019-06-11

Gutenberg 块编辑器随 WordPress 5.0 版一起取代了经典编辑器,改变了我们创建帖子和页面的范式。 它们中的每一个都由特定类型的内容集或块组成:文本、标题、引用、列表、文件、表格、图像、封面、图片库、媒体和文本、按钮、嵌入等,您可以从中自定义一些属性迅速创造出非常引人注目的设计。

因此,例如,插入下面我向您展示的部分就像插入一个新的封面块一样简单,我在其中叠加了一个 100% 不透明的橙色过滤器,并添加了我喜欢的消息和按钮。

通过充分利用它们来重新宣传您的最佳帖子

试用 Nelio 内容

不要再浪费时间,自动在社交网络上重新推广您的花盆!

所有这些都来自Gutenberg块编辑器,无需离开帖子,也无需复制和粘贴或编辑 HTML 代码。 这对于经典的WordPress编辑器来说是不可想象的。 如果您想了解有关封面块提供的不同可能性的更多详细信息,您一定会对阅读这篇关于特色图像和封面块之间差异的文章感兴趣。

使用块编辑器,您可以在组合各种元素的基础上获得许多新的设计可能性。 我向您保证,花一点时间来了解您可用的每个块提供的不同可能性,以便在页面和帖子的设计中更具创造性和生产力,这是一种补偿。

您是否已经完成了古腾堡的内容创作课程?

我要它!

块编辑器逐步解释。

块编辑器的一大优点是,您不仅可以创建所有可用块提供的各种内容,还可以重复使用块。

您已经知道,代码、内容和设计的重用是所有 Web 开发人员利用以前的工作、节省时间和减少冗余的基本效率原则。 它还可以帮助您在整个网站中保持统一的图像或样式。 您只需浏览我们的网站即可看到一组非常相似的部分,它们具有相同的风格但不同的内容,以及来自我们客户的不同号召性用语或推荐。

下面让我们看看创建可重用块的工作原理。

创建可重用块

您在帖子或页面中创建的任何块都可以转换为可重复使用的块。 为此,只需选择相关块,单击三点图标,然后选择Add to Reusable blocks

添加可重用块
将可重用的块添加到 WordPress 块库。

系统会要求您输入要添加的块的名称并保存。

命名可重用块
命名要重用的块并保存。

重用块

现在,每当您想在帖子或页面中使用其中一个可重用块时,都可以在可重用部分的块库中使用它。

重用块
当您将自己定位在可重用块的顶部时,右侧会显示它的预览。

选择后,块被插入。 效果与您在创建它的同一帖子中复制该块相同:

您是否已经完成了古腾堡的内容创作课程?

我要它!

块编辑器逐步解释。

修改可重用块

请注意,不能像任何其他普通块一样修改可重用块 - 您只能通过单击其编辑按钮来修改它:

修改可重用块
单击编辑按钮以修改可重用块。

当您编辑可重用块时,您不仅要修改当前帖子中出现的实例,而且要修改块本身,无处不在。 换句话说,您在可重用块中所做的任何修改也将应用于您添加了可重用块的所有帖子和页面。

你肯定会问自己,我怎么做才能只对我刚刚添加的块进行更改,而不是在其余已创建的块中进行更改?

转换为普通方块

如果您只想更改刚刚添加的重用块而不修改您在网站其余部分中拥有的块的所有实例,您始终可以选择将刚刚添加的块转换为常规块。

将重复使用的块转换为常规块
将重复使用的块转换为常规块并进行所需的修改。

此时,重用的块再次成为原始类型的块。 在这种情况下,块被转换回覆盖块,我现在可以在不更改可重用块的情况下进行任何我想要的更改。

你还没报名? 你在等什么?

我现在进去了!

块编辑器逐步解释。

管理可重用块

对于您创建的每个可重用块,都会在您的数据库中使用您指定的名称创建一个块类型的新自定义内容类型。 但您可以随时直接修改或删除任何创建的可重用块,就好像它们是任何其他帖子类型一样。

为此,请单击可重用块选项卡中块库末尾可用的选项管理所有可重用块。

管理所有可重用的块
单击管理所有可重复使用的块以转到您创建的块列表。

或者,您还可以选择从选项Manage All Reusable Blocks访问可重复使用的块列表,您可以在三点图标右上角的菜单中找到该选项,显示更多工具和选项

管理所有可重用的块
显示更多工具和选项菜单的管理所有可重用块选项。

在这两种情况下,您都可以可视化您创建的可重用块的列表,并且对于其中的每一个,您都可以像处理任何帖子或页面一样对其进行修改或删除。

可重用块列表。
可重用块列表。

请记住,您对可重用块所做的任何修改都将自动应用于使用它的所有帖子和页面。

编辑可重用块
编辑我们创建的可重用块。

同样,如果您删除它,可重用块也将在您添加它的所有页面中自动删除(并且您没有再次将其重新转换为常规块)。

这是您提高效率和重用网站所有部分的必要条件,以确保您在整个网站上保持相同的图像和风格。

在下一篇文章中,我还将解释如何使用 Gutenberg 导出和导入块。 但是您知道我的建议是,您可以通过注册 Gutenberg 的内容创作课程来学习更多关于 Gutenberg 的技巧?

照片由Nicola FioravantiUnsplash上拍摄