Cómo utilizar el editor de bloques de WordPress (tutorial de Gutenberg)

WordPress中的块编辑器，是我们现在用来编写内容和编辑站点的默认工具。它在2019年推出，大家都亲切地称它为“古腾堡（Gutenberg）”。这个新编辑器取代了之前的老式经典编辑器。块编辑器用起来特别简单、直观，无论是创建内容还是编辑WordPress网站，它都能胜任。

块编辑器 (Gutenberg) 和经典编辑器有什么区别？

在深入研究块编辑器之前，让我们比较并了解古腾堡块编辑器和旧经典编辑器之间的差异。WordPress 中的经典编辑器如下所示：

它有一个文本编辑器框，其中包含一些基本的格式选项。它的功能和视觉外观非常有限。WordPress 中的块编辑器如下所示：

就像你所看到的，它们是两个完全不同的编辑器，用于在 WordPress 中创建内容。旧的经典编辑器是带有类似于 Microsoft Word 的格式按钮的文本编辑器。新编辑器使用不同的方法，称为“块”（因此，名称为“块编辑器”）。

块是可以添加到编辑屏幕以创建布局的内容元素。添加到帖子或页面的每个项目都是一个块。例如，可以添加段落、图像、视频、图库、音频、列表等块。所有常见内容元素都有块，并且可以通过WordPress 插件添加更多块。

WordPress 块编辑器比经典编辑器有何优势？

WordPress 块编辑器提供了一种向帖子和页面添加不同类型内容的简单方法。例如，以前，如果你想使用经典编辑器向内容添加表格，那么需要一个单独的表格插件。使用块编辑器，你可以简单地添加表格块，选择列和行，然后开始添加内容。

可以上下移动内容元素，将它们作为单独的块进行编辑，并轻松创建富媒体内容。最重要的是，WordPress 块编辑器易于使用和学习。这为所有刚刚开始第一个博客或构建DIY 商业网站的WordPress 初学者提供了巨大的优势。

话虽这么说，让我们来看看如何像专业人士一样使用 WordPress 块编辑器来创建精彩的内容。

使用 Gutenberg – WordPress 块编辑器

块编辑器的设计直观且灵活。虽然它看起来与旧的 WordPress 编辑器不同，但它仍然可以完成你在经典编辑器中可以完成的所有操作。

使用块编辑器创建新的博客文章或页面

像平常一样开始创建新的博客文章或页面。只需单击WordPress 管理员中的帖子 » 添加新帖子菜单。如果要创建页面，请转至页面»添加新Menú.

这时就会启动块编辑器。

如何在块编辑器中添加块

每个帖子或页面的第一个块是标题。可以使用鼠标移动到标题下方或按键盘上的 Tab 键将光标向下移动并开始书写。

默认情况下，下一个块是段落块，这样用户就可以开始写作了。但是，如果你想添加其他类型的内容，也很方便。只需要点击编辑器左上角的“添加新块”按钮[+]，或者在现有块的下面或右边点击这个按钮，就可以添加新的内容块了。

单击该按钮将显示添加块菜单，顶部有搜索栏，下面有常用块。可以单击选项卡来浏览块类别或输入关键字来快速搜索特定块。

如果不想使用鼠标点击按钮，那么也可以使用键盘快捷键。首先输入 / 搜索一个块，然后按键盘上的 Enter 键将其插入。

在新编辑器中使用块

每个块都有自己的工具栏，显示在块的顶部。工具栏中的按钮将根据你正在编辑的块而变化。例如，在下面的屏幕截图中，我们正在开发一个段落块，它显示基本的格式按钮，如文本对齐、粗体、斜体、插入链接以及三点菜单下可用的更多选项。

除了工具栏之外，每个块还可以有自己的块设置，这些设置显示在编辑屏幕的右栏中。这些设置根据正在编辑的块而有所不同。例如，段落块可以编辑文本、背景、链接颜色以及版式。

可以上下移动块并重新排列它们。如果你想执行此操作，只需单击拖放或单击块工具栏中的向上和向下按钮即可。

按组和列组织块

块编辑器还附带了方便的工具来管理和组织你的内容布局。可以通过在按住键盘上的 Shift 键的同时单击多个块来选择它们。

之后，继续并单击工具栏中的块类型按钮，将选定的块转换为组或列。然后，可以将样式应用到整个组块，例如更改对齐方式或间距。

块编辑器还可以添加空的组或列块。后面还可以用其他块填充它们。

可以根据需要在每列中添加任何类型的块。这让你可以为不同的用列创建漂亮的布局。

在古腾堡中保存和重复使用块

使用块的最好的优点是它们可以保存和重复使用。这对于经常需要向其文章或页面添加特定内容片段的网站所有者和博主特别有用。只需单击位于每个块工具栏右上角的菜单按钮即可。从菜单中选择“创建图案”选项。

Atención:你还可以将整个组和列保存为可重复使用的块。这样，就可以保存整个部分，并在以后需要时快速使用它们。要保存为可重复使用的块，只需点击相关选项，然后会弹出一个窗口。在这个窗口里，您需要给这个块起个名字，这样以后要用的时候就能轻松找到它。另外，你还可以选择一个类别来保存这个块。这样，就可以更有条理地管理这些可重复使用的块了。

接下来，单击“创建”按钮保存你的图案。 WordPress 会存储你的模式以及其中的所有块。要重复使用你的模式，只需编辑要添加它的帖子或页面即可。然后，单击 [+] 添加阻止按钮或使用 / 键盘快捷键。可以通过输入你指定的名称来找到该模式。

模式功能让网站站长更轻松地往页面布局里添加一些常用的元素，比如吸引人的标语、社交媒体分享按钮、横幅广告等。你选择的WordPress主题或插件可能自带了一些模式，也可以去WordPress的块模式库里找找其他人分享的模式，看看有没有喜欢的。

在古腾堡块编辑器中发布和管理选项

每篇WordPress 帖子都包含大量元数据。包括发布日期、类别和标签、特色图像等信息。所有这些选项都整齐地放置在编辑器屏幕的右栏中。

古腾堡中的插件选项

WordPress 插件可以利用块编辑器的 API 将其设置集成到编辑屏幕中。一些流行的插件带有自己的块。例如，WPForms，最好的WordPress 表单生成器插件，可以使用块将表单添加到你的内容中。

其他 WordPress 插件也可能会将其设置添加到块编辑器屏幕。例如，以下是WordPress 的多合一 SEO如何允许在块编辑器底部编辑 SEO 设置：

同样，如果使用WooCommerce运行在线商店，那么会注意到它也有自己的块。这些块可以让你将产品添加到任何 WordPress 帖子和页面。

在块编辑器中添加一些常用块

基本上，块编辑器功能强大，完全可以胜任旧经典编辑器所做的工作。不仅如此，使用它，你的工作将变得更快、更流畅。更厉害的是，它还具备更多新功能，比如提供丰富的无代码选项，轻松设计内容。以下是一些常见的块，可以根据需要轻松使用它。

1. 在 WordPress 块编辑器中添加图像

WordPress 块编辑器中有一个随时可用的图像块。只需添加块，然后上传图像文件或从媒体库中选择它。

还可以从计算机中拖放图像，编辑器将自动创建图像块。添加图像后，你会看到块设置，可以在其中添加图像的元数据，例如替代文本、图像分辨率大小以及添加图像链接。

2. 在块编辑器中添加链接

块编辑器附带多个块，可以在其中添加文本。最常用的是段落块，它在工具栏中有一个插入链接按钮。所有其他常用的文本块在工具栏中也有一个链接按钮。

还可以使用键盘快捷键插入链接，在 Mac 上为 Command + K，在 Windows 计算机上为 CTRL + K。

3. 在古腾堡中添加图片库

图库块的工作原理类似于图像块。添加它，然后上传或选择图像文件。

4. 使用 Gutenberg 在 WordPress 帖子中添加短代码

在经典编辑器中使用的所有短代码，在块编辑器中同样可以完美运行。可以直接将它们插入到段落块中，或者选择使用专门的简码块来实现。

在块编辑器中探索其他内容块

古腾堡编辑器承诺通过引入一些新块来解决 WordPress 中一些长期存在的可用性问题。

1. 在 WordPress 中的某些文本旁边添加图像

使用旧的编辑器，许多用户无法在文本旁边放置图像。但现在可以使用媒体和文本块执行这步操作。

这个简单的块包含两个并排放置的块，让你可以轻松添加旁边带有一些文本的图像。

2. 在 WordPress 帖子和页面中添加按钮

在以前的编辑器中，给博客文章或页面添加按钮确实是个头疼的事。可能得找专门的插件来生成按钮的短代码，或者直接切换到 HTML 模式手动编写代码。幸运的是，古腾堡编辑器内置了一个按钮块，让您能轻松快捷地给任何帖子或页面加上按钮，再也不用为这事烦恼啦！

你可以为按钮添加链接、更改颜色等等。

3. 在博客文章和登陆页面中添加漂亮的封面图片

还有一个很好的功能，那就是封面块。它能让你轻松给帖子和页面加上封面图像或者一个带有颜色的背景封面。封面图像一般都比较宽，经常用来作为页面新部分或者故事开头的装饰。它看起来特别美观，还能帮你打造吸睛的内容布局。

使用起来也很简单，只需添加一个封面块，然后上传喜欢的图片就行。还可以选择给封面加个覆盖颜色，或者设置成固定背景图像，这样用户往下滚动页面时就能产生超酷的视差效果了。

4. 在文章中创建表格

在经典编辑器中，添加表格到WordPress帖子可不是件容易的事，得借助插件，或者自己编写CSS和HTML代码来创建。不过好消息来了，现在块编辑器内置了一个默认的表格块，能轻松快捷地把表格加到帖子和页面里。只需添加这个块，然后选好要插入的列数和行数，就能搞定啦！

现在可以继续开始向表行添加数据。如果需要，可以随时添加更多行和列，并且有两种基本样式选项可用。

5. 创建多栏内容

经典编辑器在创建多列内容时确实不太给力，这让很多人头疼。好在块编辑器为我们提供了列块功能，只需要简单地添加一下，就能轻松得到两列段落块，让我们的内容展示更加多样和灵活。

这个柱块非常灵活。可以在一行中添加最多 6 列，甚至可以在每列中使用其他的块。

专业使用古腾堡的额外提示

你可能会担心，使用块编辑器会不会花更多时间去添加和调整块，而不是真正去创作内容。其实完全不用担心，块编辑器的操作速度超快。稍微熟悉一下，就能很轻松地添加各种块，根本不需要太多思考。相信你很快就会发现，使用块编辑器能让你的工作流程变得更快更顺畅。

下面是一些针对高级用户的额外提示，可帮助你更快地使用 WordPress 块编辑器。

1. 将块工具栏移至顶部

你可能已经在上面的屏幕截图中注意到，每个块的顶部都有一个工具栏。你可以将此工具栏移动到编辑器的顶部。只需单击屏幕右上角的三点按钮，然后选择“顶部工具栏”选项。

2.使用键盘快捷键

古腾堡附带了几个方便的快捷方式，可以让你的工作流程变得更快、更轻松。第一个是 /。只需输入 /，开始输入，然后编辑器就会向你显示可以立即添加的匹配块。如需更多快捷键，继续单击屏幕右上角的三点菜单，然后选择“键盘快捷键”。

这里会弹出一个弹出窗口，其中列出了你可以使用的所有键盘快捷键。该列表将为 Windows 和 Mac 用户提供不同的快捷方式。

3.拖放媒体自动创建媒体块

古腾堡可以让你将文件拖放到屏幕上的任何位置，它会自动为你创建一个块。例如，可以放置​​单个图像或视频文件，它会为你创建块。或者，可以删除多个图像文件来创建图库块。

4. 添加 YouTube、Twitter、Vimeo 和其他嵌入内容

块编辑器可以更轻松地将第三方内容嵌入到你的 WordPress 内容中。所有流行的第三方服务都有块。

可以随时复制并粘贴嵌入 URL，它会自动为你创建一个块。例如，如果添加 YouTube 视频 URL，那么它会自动创建 YouTube 嵌入块并显示视频。

默认嵌入选项不适用于 Facebook 和 Instagram 嵌入，但有一个解决方法，后面会告诉你们。

在 WordPress 中的古腾堡块编辑器中添加更多块

WordPress 中的块编辑器开发人员可以创建自己的块。有一些优秀的 WordPress 插件为新编辑器提供块捆绑包。

这里有几个：

1.Spectra WordPress 古腾堡块

Spectra WordPress Gutenberg Blocks是一个包含许多高级块的块库，可以向内容添加更多设计元素。

Spectra 由流行的Astra WordPress 主题的开发团队创建，可帮助你创建漂亮的设计，无需编写任何代码。

2. PublishPress 块

PublishPress Blocks是另一个功能强大的块库，带有附加块来扩展古腾堡块编辑器。它包括漂亮的布局选项、滑块、按钮、图标、图像库、地图、选项卡、推荐、手风琴（accordions）等。

3. Stackable – Gutenberg Blocks

Stackable – 古腾堡块是一系列设计精美的古腾堡块的集合，可以在你的网站上使用它们。它包括容器、帖子、功能网格、手风琴、图像框、图标列表、号召性用语等块。

希望这个古腾堡教程可以帮助你学习如何使用 WordPress 块编辑器。