认识 WordPress 古腾堡编辑器：界面与功能板块

古腾堡编辑器（Gutenberg Editor）采用“块”式设计理念，编辑器内的每个部分（如标题、段落、图片、列表、视频、按钮等）视为独立的内容块。用户可以像搭积木一样自由拖拽、排列、插入或删除各种块，本篇介绍其界面和板块。

1. WordPress Gutenberg Editor 界面介绍

下图展示的是 WordPress 当前版本（6.8.1）的古腾堡编辑器界面。为了便于整体查看，我将区块属性和区块样板的界面截图进行了拼接。可以看到，默认的古腾堡编辑器界面由顶部工具栏、主编辑区、右侧设置面板和左侧导航等部分组成，各个功能区域布局清晰，便于用户高效进行内容创作与排版。

1.1 顶部工具栏

顶部工具栏位于编辑器最上方，集成了常用操作按钮，包括返回文章列表、添加区块、撤销与重做、内容结构（大纲）、保存草稿、预览、发布/更新等功能。部分插件或主题还会在这里增加自定义快捷操作，方便编辑与管理。

1.2 主编辑区

主编辑区是内容创作的核心区域。所有文字、图片、列表、标题等内容都以“区块”的形式独立存在。点击“+”按钮可以添加不同类型的区块，编辑时每个区块都会显示专属的快捷操作工具栏，便于调整格式、排序或删除。

如果编辑器所引用的样式表（CSS）与网站前台保持一致，那么在编辑器中看到的内容排版将与实际发布后的页面效果高度一致。这意味着我们在编辑时需要更加注意整体排版和分段，使内容在编辑和发布后都能保持良好的可读性和美观度。养成在编辑阶段就注重排版细节的习惯，可以大幅减少后期调整的工作量，提升整体内容质量。

1.3 右侧设置面板

右侧设置面板分为“文章”（或页面）和“区块”两个标签页。

• “文章”用于全局设置，如分类、标签、特色图片、摘要、评论等。
• “区块”则显示当前所选区块的详细属性，包括样式、颜色、尺寸、对齐方式等，支持个性化定制。

1.4 左侧导航与大纲

左侧导航主要用于显示文章结构大纲和文档导航。点击顶部工具栏中的内容结构图标，可以展开大纲视图，快速跳转到文章的各个标题或段落，便于管理长篇内容和优化整体结构。

1.5 区块属性与区块样板

点击左上角的“+”号可以打开区块插入器，在这里会显示当前站点可用的所有区块类型，包括 WordPress 系统自带的常用区块（如段落、图片、列表、标题等），以及主题或插件扩展的个性化区块（比如表单、价格表、幻灯片等）。Kevin's Space 主题强大，也安装了页面构建器和不少插件，因而区块特别多，如下所示：

区块样板指的是预设的内容结构模板，也叫“模板区块”或“区块模式”。它们将多个区块组合成特定的布局样式，比如两栏文本搭配图片、带按钮的宣传条、常用的文章目录等。用户可以一键插入样板，快速生成复杂的页面结构，然后根据实际需求调整内容和样式。区块样板大大提升了排版效率，尤其适合需要反复使用的内容结构。

媒体面板允许你直接拖拽或插入图片、音频、视频等多媒体内容，支持本地上传，也可以从媒体库中选取素材。除此之外，古腾堡编辑器还内置了 Openverse 搜索功能，这是一个开源的、免费可用的媒体资源库，用户可以在编辑器内直接搜索和插入高质量的图片和音频，方便丰富页面内容，并节省寻找素材的时间。

下图展示了我在 Openverse 中搜索“Web”关键词后，随机拖拽插入的一张图片。可以看到，这种方式默认使用的是远程文件链接，图片下方还自动附带了图片说明和版权注释。这样不仅可以避免版权风险，还能节省服务器的流量和存储空间，非常适合需要大量插图、注重合规的内容创作场景。

2. WordPress Gutenberg Editor 偏好设置

WordPress 古腾堡编辑器的偏好设置面板允许用户根据自己的习惯自定义编辑环境，从而提升内容创作的效率与舒适度。你可以通过右上角“更多工具与选项”（三个点）进入“偏好设置”，对编辑器的各项功能进行个性化调整。常见的设置主要包括以下几个方面：

• 常规：包括预发布前的检查清单、自动保存、显示按钮文本标签等基础编辑习惯相关的选项。
• 外观：可以控制是否始终显示列表视图、简化界面、使用主题样式、显示区块路径导航等界面元素的显示与隐藏，此处强烈建议把“使用主题样式”勾选上。
• 无障碍：为提升可访问性，提供如限制光标在区块内移动、增强屏幕阅读器支持等辅助功能选项。
• 区块：用于管理区块插入器中各类区块的显示，比如是否显示常用区块，以及自定义常用区块的排列顺序和可见性。可以适当隐藏掉一些不用的区块，方便文章编辑时快速找到需要的区块。

3. WordPress Gutenberg Editor 模式介绍

3.1 代码编辑器

通过点击右上角三个点里的“代码编辑器”，或者键入快捷键进入代码编辑器模式，这是一个让你直接编辑 HTML 代码的功能。在代码编辑器模式下，所有的区块内容会显示为 HTML 代码形式，允许用户进行更精细的编辑，尤其是对于需要插入自定义代码、修改结构或添加特殊元素的高级用户非常有用。

在这个模式下，用户可以完全控制页面的 HTML 标记和结构，适用于需要进行更复杂自定义的场景。退出代码编辑器后，所有的代码将自动转换回正常的区块编辑模式，便于继续使用古腾堡编辑器的可视化操作。

需要注意的是，尽量使用标准的 HTML 语言进行编辑，否则在从代码编辑器切换回可视化编辑模式时，可能会出现格式错误或内容显示不正常的情况。由于古腾堡编辑器的可视化模式对 HTML 结构有一定的要求，不规范的代码可能导致区块渲染不正确，甚至丢失某些内容。为了确保内容能够在两种编辑模式之间顺利转换，建议使用干净、标准的 HTML 代码，并避免使用过于复杂的自定义标签或未闭合的标签。

3.2 全屏模式、专注模式与焦点模式

在 WordPress 古腾堡编辑器中，有三种不同的可视化编辑模式，旨在提升写作体验和帮助用户更加专注于内容创作。这三种模式分别是：全屏模式、专注模式和焦点模式。下面是这三种模式的简要介绍：

1. 全屏模式
   全屏模式通过隐藏顶部工具栏、侧边栏等界面元素，让编辑区域最大化显示。它适合那些希望完全沉浸在创作过程中的用户。在全屏模式下，你可以专注于内容，不受其他界面元素的干扰。
2. 专注模式
   专注模式通过高亮当前正在编辑的区块，并将其他区块变暗，帮助用户集中注意力在当前的编辑内容上。这种模式特别适合长篇文章写作或者需要精准编辑某个内容块的情境。
3. 焦点模式
   焦点模式与专注模式类似，也会突出当前正在编辑的区块，但与专注模式不同的是，它会进一步隐藏其他无关的工具和界面元素，帮助用户减少所有的视觉干扰，达到更高效的写作状态。

4. 古腾堡编辑器的快捷键有哪些？

在 WordPress 古腾堡编辑器中，快捷键提供了一种高效的方式，帮助用户快速切换编辑模式、操作内容和管理区块，减少鼠标点击的时间。使用快捷键可以大大提高编辑效率，尤其是对于熟练用户，可以更流畅地进行创作和排版。

按下Shift+Alt+H打开 WordPress Gutenberg Editor 提示窗，根据中国大陆使用习惯，常见的快捷键如下：

功能	快捷键（Windows）	快捷键（Mac）
切换到代码编辑器	Ctrl + Shift + Alt + M	Cmd + Shift + Alt + M
保存草稿	Ctrl + S	Cmd + S
撤销操作	Ctrl + Z	Cmd + Z
删除当前区块	Ctrl + Shift + Z	Cmd + Shift + Z
加粗文本	Ctrl + B	Cmd + B
全选文本	Ctrl + A	Cmd + A
快速插入区块（"/"）	/（输入后选择区块类型）	/（输入后选择区块类型）
设置标题（H1-H6）	Ctrl + Alt + 1-6	Cmd + Alt + 1-6
设置链接	Ctrl + K	Cmd + K
移出链接	Ctrl + Shift + K	Cmd + Shift + K

5. 真实感受古腾堡编辑器的魅力

WordPress Gutenberg Editor 的官方链接为 https://cn.wordpress.org/gutenberg，这不仅是一个产品介绍页面，更是一个生动的 DEMO 展示。你可以直接在浏览器中无门槛操作、拖拽，体验古腾堡编辑器的模块化设计，感受通过简单拖放就能构建专业页面的魅力。不得不说，这种宣传介绍产品的模式是真不错！