古腾堡教程:如何使用新的 WordPress 块编辑器

已发表: 2019-04-22

新的 WordPress Gutenberg 块编辑器以印刷机的发明者 Johannes Gutenberg 命名,在 WordPress 5.0 版本中作为 WordPress 的默认编辑器首次亮相。

任务很简单,用 WordPress 创造新的写作和编辑体验。

Gutenberg 编辑器具有块,在使用 WordPress 创建富媒体内容方面提供了独特的体验。

它为编辑器带来了许多原生功能,而经典编辑器需要插件来完成任务。

稍后我将带您了解如何使用 Gutenberg 块编辑器。

与许多使用 WordPress 的客户一起工作,没有多少人对他们的编辑体验的艰难转变感到兴奋。

这可能解释了为什么随着古腾堡的发布,数百万 WordPress 用户一旦选择了经典编辑器就安装了经典编辑器。

wordpress 经典编辑器插件

一部分理由可能是与旧主题的兼容性,另一部分只是用户愤慨或缺乏如何使用古腾堡块编辑器的知识。

我希望在阅读完这篇文章后,你会对块编辑器感到满意。

一步一步:如何使用古腾堡块编辑器?

它从创建页面或帖子开始。 你已经熟悉的东西。

使用古腾堡块编辑器创建页面或帖子

当您添加新页面或帖子时,您首先应该注意的是这个工具栏。

古腾堡编辑器工具栏

在左侧,我们有 + 添加块工具栏。 这是您可以向内容添加块的地方之一。

古腾堡编辑器工具栏块

您也可以通过单击最后一个块下方的添加块,然后单击出现的 + 图标。

或者,将鼠标悬停在块之间,会出现“添加块”图标,单击它以添加块。

古腾堡编辑器工具栏块添加

接下来是撤消和重做按钮。

古腾堡编辑器工具栏块撤消

顶部工具栏上的下一个图标显示您的内容结构。

古腾堡编辑器工具栏内容结构

接下来是块导航

如果并且当您的内容随着许多块而增长时,您可以从这里导航到块。 很酷是不是。

古腾堡编辑器工具栏导航

在右侧,

古腾堡编辑器工具栏右侧

这些非常简单,保存草稿,预览您的帖子(在新选项卡中打开)和发布。

下一个图标切换设置的显示。 它显示或隐藏右侧窗格。

古腾堡编辑器显示隐藏右窗格

如果设置可见,请单击它以隐藏以获得更广泛的无干扰编辑器。 再次单击它以显示设置。

古腾堡编辑器工具栏右窗格隐藏

工具栏的尾部是三个垂直点。 这使您可以隐藏或查看更多工具和选项。

古腾堡编辑器工具栏隐藏更多选项

那么,您可以使用更多工具和选项来做什么呢?

  • 您拥有工具栏——在一处访问所有块和文档工具。
  • 聚光灯模式。 让您一次专注于一个块
  • 全屏模式。 炸毁您的编辑器,以获得完全无干扰的编辑体验。
  • 如果您需要编写代码和 HTML 块无法处理的代码,请在可视化编辑器(您现在看到的内容)和代码编辑器之间切换。
  • 管理可重用块
  • 键盘快捷键和
  • 复制编辑器上的所有内容。

古腾堡街区

到目前为止,您一直在看到块,但它们是什么?

我们将走很长的路来看看它们是如何工作的,希望它会变得有意义,你可以根据你对它的理解给它一个定义。

Gutenberg 中有六类块,包括最常用块、通用块、格式、布局元素、小部件和嵌入。

古腾堡编辑器添加帖子块

使用经典编辑器创建内容时,您只需将内容输入文本区域即可。

使用新的编辑器,您将利用按内容类型组织的块。 要添加文本内容,需要文本/段落块、图像 - 图像块、Html、HTML 块。

这与将所有内容插入到一个位置的经典编辑器不同。

使用块工具

每个块都有您在创建和编辑内容时可以使用的工具。

与所有工具可见的经典编辑器不同。

要访问这些工具,请单击块中的内容。 我们将使用段落/内容,因为这是您经常使用的。

古腾堡编辑器访问块工具

当您单击块中的文本或内容时,会在内容上方打开一个工具箱。

古腾堡开放式块工具

您将看到的工具是您正在使用的块所独有的,因此当您单击媒体块时不要期望看到相同的工具。

例如,段落块具有文本格式工具左对齐、居中对齐、右对齐、粗体、斜体、插入超链接和文本删除线。

加上您安装的其他插件添加的更多格式化工具,以扩展默认块功能。

块工具包上跨越块的两个功能是开头的“变换块”,然后在最后,您应该看到“更多选项”图标 - 三个垂直点 - 其中包含块的更多设置你正在和你一起工作。

转换古腾堡块

要转换块,请单击上面段落块中所见的块。

假设我们要将第一段转换为引用,单击它,然后单击转换为图标,然后选择要将其转换为的新块。

转换古腾堡块

将段落块转换为引用现在看起来像这样。

将块转换为引用

更多选项按钮

块工具包的另一个按钮是“更多选项”图标——三个垂直点。 单击任何块以查看它。

转换块工具附加选项

使用更多选项,您可以使用块做更多的事情,例如; 隐藏块设置,复制块,在前面和后面的块之前或之后插入块,将块编辑为 HTML,将块添加到可重用块,最后,删除或删除块。

使用 Gutenberg 块编辑器更改帖子或页面的永久链接

单击帖子或页面的标题。 在其上方,将显示链接。

古腾堡编辑器更改永久链接

单击编辑按钮,然后修改您的链接,然后单击保存

古腾堡编辑器更改永久链接保存

Gutenberg 块编辑器上的文档和块设置

每个 Gutenberg 帖子或页面的右侧都有一个带有两个选项卡的窗格。

文档窗格具有页面或帖子的文档范围设置,包括状态和可见性、帖子作者、标签、特色图片、讨论 - 以允许评论、类别和插件相关的帖子和​​/或页面设置。

古腾堡编辑器文档设置

块窗格包含特定于块的设置。

单击内容区域中的块,然后在右侧窗格中单击块窗格。

古腾堡编辑器块设置

结论

我们已经介绍了一些关于 Gutenberg Blocks 编辑器的信息。

我希望有了这些知识,将其用于内容创建和发布应该不那么令人生畏。

您在使用新的块编辑器吗? 您对此有何经验?

您可能还想将现有的 WordPress 帖子转换为 Gutenberg 块?