WordPress Gutenberg Editor 101 [+来自 WordCamp 演讲者的见解]
“Gutenberg 正在释放用户手中的巨大创造力和力量,让他们可以在不依赖任何其他人的情况下自行创建和设计事物并制作网站。[如果没有古腾堡],他们可能不得不雇人来做这件事,或者这些网站和东西可能不会存在,”Matt Mullenweg 在 WordCamp Europe 2022 的闭幕式上说。
要在 2022 年及以后发挥WordPress的真正力量,了解 WordPress Gutenberg 编辑器非常重要。
Gutenberg 在 WordPress 5.0 中被设置为默认编辑器。展望未来,此编辑器的使用将扩展到小部件和菜单,甚至使您能够使用完整的站点编辑来设计主题模板。
那么,古腾堡编辑器是如何工作的,您如何才能在您的WordPress 网站上最有效地使用它?
这些是我们将在本文中回答的问题类型。以下是您将学到的内容:
- 古腾堡编辑器是什么
- Gutenberg 编辑器与其他解决方案的优缺点
- 如何使用古腾堡编辑器的一般概述
- 九个更有效地使用古腾堡编辑器的高级技巧
什么是 WordPress 中的古腾堡编辑器?
Gutenberg 编辑器是 WordPress 的默认内容编辑器,可提供全新的模块化编辑体验。编辑器中的每条内容都是它自己的块,可以添加、排列和重新排列以创建富媒体页面。与需要短代码、自定义 HTML 和其他解决方法的过程不同,此过程是高度可视化和直观的。
该编辑器被命名为“古腾堡”,因为它旨在彻底改变整个建筑和出版体验,就像古腾堡对印刷文字所做的那样。
您还可能会看到它被称为“WordPress 块编辑器”,甚至只是“WordPress 编辑器”,因为多年来它一直是默认编辑器。
Gutenberg 编辑器在 2018 年 12 月发布的 5.0 版本中首次添加到 WordPress。它取代了旧的 TinyMCE 编辑器,后者现在被称为“经典编辑器”或“经典 TinyMCE 编辑器”。
Gutenberg 最独特的地方在于其基于块的方法。当您使用古腾堡创建设计时,每个元素都是一个单独的“块”。这里有些例子:
- 每个段落都是它自己的块。
- 每个图像都是它自己的块。
- 文本标题是它自己的块。
- 嵌入的 YouTube 视频是它自己的块。
- …等等。
“每个块都是一个独特的独立单元,但在 WordPress 中,我们拥有一致的工具来编辑、管理和控制它们。那就是块编辑器,”Bluehost 的高级 WordPress 工程师 Evan Mullins 在他的WCEU 2022 闪电演讲中解释道,“Blockity McBlock Blocks,天哪!
我们将在下一节讨论优缺点,但这种基于块的方法有一些优点:
- 在创建内容时,您可以更直观地预览设计的外观。
- 您可以更轻松地合并布局元素(例如多列)和内容元素(例如按钮),而无需求助于自定义 HTML 和 CSS。
- 它消除了使用短代码从插件添加内容的需要,这在旧版编辑器中是常见的需要。相反,插件现在可以提供自己的专用块。
区块愿景
古腾堡基于块的方法也开辟了一个全新的可能性领域。
WordPress 核心团队一直在推动 Gutenberg 的原因之一是它不仅仅是帖子 和页面的内容编辑器。最终目标是您将能够使用 Gutenberg 设计 100% 的站点,从页眉一直到页脚。这种类型的编辑称为全站点编辑 (FSE )。
要了解更多信息,请查看我们的WordPress 完整站点编辑完整指南。
“在过去的几年里,有一个愿景 [that’s been] 指导 WordPress 开发的路线图。古腾堡区块编辑器只是第一步,全站点编辑是第二步的主要焦点,”WCEU 2022 发言人 Evan Mullins 在他的GitHub中写道。接下来的步骤是协作,这将提供一种更直观的方式来共同创作内容,以及多语言,这将为多语言站点提供核心实现。
使用古腾堡编辑器的优缺点
虽然使用 Gutenberg 编辑器有很多优点,但它并不完美。 让我们回顾一下使用 Gutenberg 与其他流行编辑选项(例如 Classic TinyMCE 编辑器或像 Elementor 这样的页面构建器插件)相比的一些优缺点。
使用古腾堡编辑器的优点
- 您将获得比经典 TinyMCE 编辑器更加直观、无代码的设计体验(尽管在设计灵活性方面它仍然不如页面构建器插件强大)。
- 在所有条件相同的情况下,您使用 Gutenberg 创建的设计通常会比使用页面构建器插件创建的设计加载得更快。这是因为 Gutenberg 给页面增加了较少的“重量”。
- 与页面构建器插件不同,古腾堡编辑器是一项原生功能。这意味着您通常不需要担心兼容性问题,也不需要处理更新。
- Gutenberg 的可扩展性很强,这意味着您可以找到大量添加新块、设计选项、模板等的插件。
使用古腾堡编辑器的缺点
- 拖放功能仍然不如页面构建器插件灵活。
- 虽然它比 TinyMCE 编辑器更直观,但您仍然无法像使用页面构建器插件那样在处理它时看到 100% 准确的视觉设计。
- 当涉及动画、运动效果等细节时,页面构建器插件仍然提供更高级的设计功能。
如何使用古腾堡编辑器
现在,让我们看看如何使用 Gutenberg 和块创建基本内容。
我们不打算在这里太深入。但是,如果您想更详细地了解如何使用块,可以阅读我们关于如何使用 WordPress 块的完整指南。
在下一节中,我们还将分享一些更高级的技巧,以便在古腾堡编辑器中更有效地工作。
添加段落文本
要添加文本内容,您只需单击编辑器并开始输入,就像您在 Microsoft Word 或 Google Docs 中工作一样。
每当您按下回车键时,古腾堡都会自动为您创建一个新的段落块。
对于粗体和斜体等基本格式,您可以使用选择内容时出现的工具栏。
要添加标题,您可以添加标题块。如何?接下来让我们介绍一下!
添加块
对于段落块,您只需单击并键入,如上所示。要添加其他块,您可以单击其中一个“加号”图标来打开块插入器。
顶部工具栏上的主加号图标打开完整的块插入器:
您还可以通过将鼠标悬停并单击出现的“加号”图标来在内容的特定部分插入块:
自定义块
添加块后,您有两个主要选项来自定义块。
首先,您会在选择块时出现的浮动工具栏上看到一些基本选项。对于更高级的自定义选项,您可以使用 边栏中的“阻止”设置。
当您选择一个块时,您会在边栏中看到特定于该块的设置:
添加图像和其他媒体
要插入独立图像,您可以添加图像块。然后它会为您提供上传图片或选择媒体库中现有图片的选项:
您还将获得其他基于图像的块,例如画廊块。
要嵌入来自 YouTube 或 Vimeo 等地方的视频,您可以使用该服务的专用嵌入块,然后只需粘贴 URL:
添加按钮和其他元素
Gutenberg 的优势之一是您不再需要自定义 HTML 来添加按钮和其他类似的内容元素,例如分隔线。
相反,您可以只为要包含的元素添加专用块:
创建更复杂的布局
要开始更高级的布局,您将主要依赖两个块:
- 列块- 此块可让您创建多列设计。
- 组块 – 此块可让您将多个块组合在一起。例如,您可以使用它为多个块应用通用背景颜色。
这两个块以相同的基本方式工作。
首先,您将添加 Columns 或 Group 块,它们将充当“父”块。对于 Columns 块,您还将获得一个额外的选项来选择列布局。
然后,您可以在 Columns 或 Group 块中添加其他块。您可以使用出现在内部的“加号”图标或将块拖放到父块中。
例如,这是在三列布局中添加块的样子:
为了帮助您管理这些嵌套块,编辑器包含一个称为列表视图的功能 – 下一节将详细介绍!
从古腾堡编辑器中获取更多信息的九个技巧
了解 Gutenberg 编辑器的基础知识后,您就可以开始提升技能以解锁新功能并提高工作效率。
以下是改善古腾堡工作流程的九个技巧。
1. 使用列表视图来选择和使用块。
如果您创建了一个更复杂的布局,例如带有列或组的布局,有时可能很难单击您想要控制的确切块,因为这些块彼此嵌套。
例如,您可能想要控制主父列块,但您总是不小心单击内部列块或这些列中的内容。
为了解决这个问题,编辑器包含一个列表视图功能。在列表视图中,您将看到帖子中所有版块的完整列表,这些版块按它们出现的顺序排列。
要打开列表视图,您可以单击顶部工具栏上的列表视图按钮或使用此键盘快捷键 – Ctrl + Alt + O(稍后将详细介绍快捷键)。
以下是您可以在列表视图中执行的操作:
- 通过单击选择一个块。您还可以使用Shift + Click选择多个块。
- 通过在列表视图中拖放来重新排列块。
- 单击“三点”图标可打开块的基本设置,例如复制块。
2. 使用键盘更快速地插入块。
完整的块插入器界面非常适合您查看哪些块可用。但是,随着您对 Gutenberg 的熟悉程度越来越高,您将确切地知道要使用哪个块,因此浏览完整界面是浪费时间。
为了加快速度,您可以使用键盘快速插入块。就是这样:
- 按Enter键 转到编辑器中的新行。
- 键入/(斜杠),后跟要插入的块的名称。
- 使用键盘箭头键从 WordPress 建议的列表中选择您想要的确切块。
3.使用其他键盘快捷键来节省时间。
键入斜杠以快速插入块是 Gutenberg 中最有用的键盘快捷键之一,但编辑器还包括许多其他键盘快捷键,以帮助您更有效地工作。
以下是我们挑选的一些最有用的古腾堡编辑器键盘快捷键:
- Ctrl + Z – 撤消最近的更改。
- Ctrl + Shift + Z – 重做您刚刚“撤消”的更改。
- Shift + Alt + Z – 删除您当前选择的块。
- Ctrl + Shift + D – 复制您选择的块。
- Shift + Alt + O – 打开阻止列表视图。
注意:在 macOS 上,将Ctrl 换成Cmd。
您可以使用此键盘快捷键 – Shift + Alt + H打开键盘快捷键的完整列表:
4. 通过从您的计算机拖放图像来快速上传图像。
虽然 Gutenberg 编辑器可以像使用 Classic 编辑器一样轻松地从媒体库中选择图像,但它还为您提供了一个新的快速上传图像的选项。
使用块编辑器,您还可以通过从计算机上的文件夹中拖动图像来上传图像。
首先,单击图像文件并将其从本地文件夹拖到编辑器中。执行此操作时,您应该会看到一条蓝线出现,指示图像的放置位置。
当您发布图像文件时,古腾堡将使用图像块自动将图像上传到该位置。
您也可以同时拖动多个图像文件。当您执行此操作时,古腾堡将自动上传所有这些图像并将它们插入画廊块中。
5.根据您的喜好更改古腾堡界面布局。
如果您不喜欢 Gutenberg 中的默认界面布局,您有几个选项可以根据您的喜好对其进行自定义:
- 顶部工具栏- 默认情况下,块的编辑工具栏显示为所选块上方的浮动工具栏。如果您愿意,可以启用顶部工具栏设置 ,将其更改为文档顶部的固定工具栏。
- 聚光灯模式- 这会将焦点放在当前选定的块上,并使其他块稍微变暗。
- 全屏模式- 默认情况下启用。如果禁用它,您将能够看到 WordPress 管理侧边栏。
您可以通过单击编辑器右上角的“三点”图标来访问所有这些选项:
6. 需要时编辑 HTML 代码。
虽然大多数人会在编辑器的可视界面中工作,但古腾堡还可以轻松访问内容的底层 HTML 代码。
使用 HTML 有两种选择:
首先,您可以通过单击编辑工具栏上的“三点”图标并选择Edit as HTML来编辑单个块的 HTML 。要返回视觉预览,请执行相同的操作但选择Edit visually:
其次,您可以通过单击编辑器右上角的“三点”图标并选择代码编辑器来编辑整个文档的 HTML :
7. 锁定块,使其他用户无法编辑它们。
为了避免不小心弄乱重要内容(或您网站上的其他用户不小心弄乱内容),Gutenberg 现在允许您从 WordPress 6.0 开始“锁定”块。
锁定块时,您可以选择要禁用的特定操作:
- 移动方块
- 删除块
目前,您仍然可以编辑锁定块的内容。但是,您将来可能会获得锁定内容的能力。
以下是锁定块的方法:
- 在编辑器或列表视图中选择它。
- 单击“三点”菜单图标。
- 选择锁定。
- 选择要在弹出窗口中锁定的操作。
- 单击应用。
您可以通过执行相同的操作来解锁块。
8. 安装 WordPress 块插件以添加更多功能。
虽然本机 WordPress 编辑器已经附带了大量可供您使用的块,但这些默认块远非您唯一的选择。您还可以通过安装插件来添加新块。
一些插件专注于添加单个块,例如 帮助您创建目录的SimpleTOC 插件。其他人添加了 20 多个块的整个集合,例如Spectra。
其他人甚至更先进。例如,WP-DXP是一个免费插件,它扩展了 Gutenberg 块编辑器以提供设置显示内容和显示内容规则的能力。
Filter Digital首席技术官 Paul Halfpenny在他的WCEU 2022 闪电演讲“使用 WordPress 提供个性化体验”中说,“尽管对 Gutenberg 和 FSE 进行了投资,但 WordPress 缺乏在界面中为管理员提供个性化的能力。例如,如果他们想根据用户行为设置一个块来显示不同的内容吗?”
WP-DXP 旨在为编辑人员提供一种“快速简便的方式,以根据不同用户的身份和他们过去的行为向他们显示块内容,”Halfpenny 解释道。通过扩展 Gutenberg 以向 WordPress 提供深度个性化选项,他们的目标是使 WordPress 能够继续与企业内容管理系统竞争。
除了专用块插件之外,许多其他 WordPress 插件也将添加自己的块。例如,如果您使用HubSpot WordPress 插件,您将获得一个专用的 HubSpot 表单块,可以轻松地将表单包含在您的内容中。
9. 使用积木图案和可重复使用的积木来节省时间。
块模式 和可重用块是块的预制集合。您可以将它们想象成“块模板”。
“可重复使用的块具有相同的内容,可在站点的多个位置使用。例如,如果您在每篇博客文章的开头都有一个介绍段落,并且您想在一个地方管理所有内容,则可以使用可重用块。然后当你编辑它时,所有实例也会更新,”穆林斯在他的 WCEU 闪电演讲中解释道。
另一方面,块图案“可以包含多个块和样式以实现特定的外观或图案。它们内置于插入器中,因此可以轻松浏览、添加和编辑,”他说。
您可以使用块模式和可重复使用的块来节省创建/重复使用设计的时间,还可以访问专业设计师的设计。
如需更详细的了解,请查看我们的WordPress 块模式完整指南。虽然那篇文章的重点是块模式,但它也涉及可重用块以及它们与块模式的区别。
立即开始使用古腾堡编辑器
自从在 WordPress 5.0 中推出以来,Gutenberg 编辑器迅速成长为使用 WordPress 不可或缺的一部分。更重要的是,随着 WordPress 继续在 Gutenberg 的基础上构建完整站点编辑等功能,它的作用只会越来越大。
一旦掌握了 Gutenberg 的诀窍,您就可以使用它来更好地控制您网站的设计和内容——所有这一切都不需要任何特殊的技术知识。今天就试一试,您很快就会成为古腾堡专家。