WordPress Gutenberg教程：如何使用新的WordPress 5.0块编辑器

2018年12月6日，随着WordPress 5.0的发布，WordPress进行了重大更改。 旧的经典TinyMCE内容编辑器已不复存在，取而代之的是代号为Gutenberg的全新块编辑器。

尽管新的块编辑器确实可以让您执行一些以前无法在WordPress中执行的操作，但当您初次使用它时，它也不总是最直观的工具。

为了帮助您从新的块编辑器中获得最大收益，我们决定创建本教程，以帮助您快速掌握如何使用块编辑器执行与之前使用TinyMCE编辑器相同的操作类型。

无论您是已经将网站升级到WordPress 5.0，还是仍在使用WordPress 4.9，本教程都可以为您提供帮助。

*注–虽然新的编辑器在开发过程中被命名为“ Gutenberg”，但实际上它现在是默认编辑器，这意味着它仅被称为“ WordPress编辑器”或“块编辑器”。 因为WordPress团队希望取消Gutenberg的名称，所以您经常会看到我称其为“块编辑器”，因此本教程对于以后浏览的人们来说是有意义的！

WordPress Gutenberg块编辑器的（非常）快速介绍

与新编辑器的最大区别是 块 （因此名称为“块编辑器”）。 使用旧的TinyMCE编辑器，您的所有内容都在一个长字段中，有点像Microsoft Word文档。 但是，使用新的编辑器，内容中的每个项目都是一个单独的“块”。 例如：

• 段落是一个单独的块
• 图像是一个单独的块
• 嵌入式YouTube视频是一个单独的块
• 标题是一个单独的块
• …我想你现在明白了。 一切都是一个单独的块。

在此WordPress Gutenberg教程中，我将大量引用“插入新块”。 因此，在深入学习本教程之前，让我快速向您确切演示如何实际执行该操作。

插入新块有三种不同的方法：

首先，您可以使用 两个之一 加号图标。 这些图标将打开一个弹出窗口，您可以在其中选择要插入的块：

1. 左上角的加号图标始终可见。 插入一个新块 在最后 您的内容。
2. 仅当将鼠标悬停在两个现有块之间的空间上时，才会显示此加号图标。 它可以让您插入一个新块 之间 现有的块。

其次，您也可以按Enter键在您正在使用的块下面创建一个新的空白块。然后，您可以使用块左侧的加号图标来选择要使用的块类型：

当您浏览块编辑器教程时，这些各种按钮将更有意义。

如何通过WordPress块编辑器使用文本

让我们从最基本的内容开始-文本。 在本节中，我将向您展示如何处理段落文本，标题，引号等内容。然后，我还将向您展示如何插入链接和其他基本设置。

添加各种段落文本

创建新的段落文本很容易–您只需单击并键入即可，就像使用旧编辑器一样。 唯一的区别是，每当您按下Enter键时，编辑器都会为您的下一个段落创建一个单独的块：

添加标题（H2，H3，H4）和其他文本块

如果要插入标题，一种方法是插入新的标题栏：

另外，您也可以使用工具栏将常规段落块转换为标题：

您可以对其他文本块使用相同的方法，例如：

• 引号
• 清单
• 等等。

格式化文本（对齐方式，颜色等）

要设置文本格式，您将使用两个区域。

首先，有一个浮动工具栏。 该工具栏仅在您 不是 积极打字。 在这里您可以：

• 更改对齐方式
• 添加粗体和斜体

如果您不喜欢格式化工具栏的显示和消失方式，则还可以使用编辑器的设置将工具栏固定在界面顶部，这更类似于经典TinyMCE编辑器的工作方式：

对于其他格式设置选项（例如文本的颜色或字体大小），您可以使用 堵塞 侧边栏（当您单击一个块时，它会自动选择）。

例如，如果您单击一个段落，则可以使用边栏使文本变大或变小和/或更改文本颜色：

不幸的是，每个块的这些选项都不相同。 例如，现在是 不是 除非您使用自己的自定义CSS，否则可以更改标题的颜色。

插入链接

要插入链接，请单击包含您要链接的文本的块。 然后，寻找 关联 格式工具栏上的图标。 这将打开一个界面，您可以在其中添加链接（也可以单击切换按钮以使链接在新选项卡中打开）：

如何插入媒体内容（图像，视频等）

既然您对如何在块编辑器中使用文本有了一个很好的了解，那么让我们介绍内容的另一个组成部分-图像和视频。

插入和格式化图像（包括替代文本）

插入图片的一种方法是添加 图像 堵塞。 这样您就可以访问WordPress媒体库（就像旧的编辑器一样）或从网址插入图片：

但是，块编辑器还添加了一种更简单的插入图像的新方法。 现在，您可以将图像直接从桌面拖到编辑器界面中：

插入图像后，您可以使用右侧边栏执行以下操作：

1. 添加替代文字
2. 变更图片大小
3. 使图像链接到特定的URL

您还可以通过直接在图片下方键入内容来添加标题：

插入视频（和其他嵌入式内容）

为了帮助您嵌入来自YouTube，Vimeo和许多其他服务的视频，块编辑器为您提供了完整类别的 嵌入 块：

选择一个块后，只需将URL粘贴到要嵌入的内容中：

另外，您也可以将YouTube URL粘贴到空白块中，这样可以节省一些单击：

您可以对所有其他类型的嵌入式内容使用相同的方法。

如何移动和重新排列块

使用旧的WordPress编辑器，您必须使用剪切和粘贴来移动内容。 你仍然可以 种类 使用新的块编辑器可以做到这一点，但这并不完美。

例如，虽然您可以从一个块剪切和粘贴文本，但是剪切文本所在的空块仍将存在，因此并不完全相同。

相反，通常最好使用块编辑器的内置控件。

您可以通过两种方式移动块。 要访问它们，请将鼠标悬停在要操作的块上。

首先，您可以使用箭头将方块向上或向下移动一个位置。 其次，您还可以使用拖放功能将块移动到页面上的任意位置（要激活拖放功能，您需要将鼠标悬停在箭头之间的六个点上）：

使用块编辑器提高工作效率的20多种技巧

我希望上面的WordPress Gutenberg教程能使您对如何在基本级别上使用块编辑器有个好​​主意。 但是，一旦掌握了基础知识，就会有很多技巧可以帮助您更有效地使用编辑器。

我正在谈论诸如使用“ /”更快地插入新块，使用列创建更复杂的布局，使用键盘快捷键以节省时间等问题。

根据我使用编辑器的实际经验，我将所有这些技巧收集到了20多个块编辑器技巧的列表中，以帮助您提高工作效率。

用更多的块扩展您的内容

古腾堡块编辑器的一大优点是您不仅限于默认的块集合。 使用第三方Gutenberg块插件，您可以为以下内容添加新的块：

• 定价表
• 图片库
• 滑杆
• 感言
• …还有更多

您可以禁用新的WordPress区块编辑器吗？

是的！ 禁用新的块编辑器并继续使用TinyMCE编辑器非常简单。 实际上，我们实际上撰写了一篇专门针对该主题的文章。 了解如何禁用WordPress Gutenberg块编辑器并继续使用经典的TinyMCE编辑器。

充分利用此WordPress Gutenberg教程！

无论您是以Gutenberg编辑器还是WordPress块编辑器而闻名，我希望本教程对您有所帮助，并且您现在对如何使用新的块编辑器创建内容有了更好的了解。

如果您对如何使用新的块编辑器还有其他疑问，请发表评论，我们将竭诚为您服务！