WordPress Gutenberg 块编辑器初学者指南 2026

自 2018 年 WordPress 5.0 推出 Gutenberg 以来，内容创建方式发生了根本变化 — 从像基本文字处理器一样工作的 TinyMCE 编辑器转变为基于块的编辑器，其中内容像数字乐高一样逐块组装。

如果您是 WordPress 新手或觉得 Gutenberg 令人困惑，本指南将带您了解编辑器的每一个部分，从界面到高级功能，以及最有用的键盘快捷键来节省您的时间。

1. 什么是 Gutenberg? 历史和背景

Gutenberg 是 WordPress 项目的名称，该项目开发了块编辑器来取代 TinyMCE (经典编辑器)。其三个核心目标是：

• 简化内容创建 — 允许任何人在不了解 HTML 或 CSS 的情况下构建精美的布局
• 网站完整编辑 (FSE) — 从单个编辑器编辑网站的每一个部分 — 页眉、页脚、侧边栏
• 开发者自由度 — 使开发者能够构建自定义块作为可复用、可共享的组件

"Gutenberg" 的名称向 约翰尼斯·古腾堡致敬，他是 15 世纪印刷机的发明者，他的发明永远改变了信息的分发方式。

2. 界面概览 — 3 个主要区域

1. 顶部工具栏

• 块插入器 (+) — 打开完整块库；单击将任何块添加到您的内容
• 工具菜单 — 在编辑模式和选择模式之间切换
• 撤销 / 重做 — 在您的编辑之间往后或往前步进
• 保存 / 更新 — 保存草稿或更新已发布的文章
• 设置图标 — 切换右侧的文档设置面板

2. 内容区域（中心）

白色中央区域是您构建内容的位置。单击任何位置添加新块，或在任何空白段落中按 / (斜杠) 即可按名称快速搜索任何块。

3. 文档设置面板（右侧边栏）

• 文章选项卡 — 设置状态、可见性、发布日期、分类、标签、特色图像
• 块选项卡 — 调整当前选定块的样式、颜色、排版和间距

3. 您必须知道的核心块

WordPress 内置了超过 90 个块。这 10 个是您会经常使用的：

4. 什么是块模式?

块模式是由多个块组合在一起的预组装模板 — 例如一个 Hero 部分包含标题 + 段落 + 按钮，或一个完整设计的价格表 — 可以立即插入和自定义。

使用块模式

1. 单击左上角的块插入器 (+)
2. 单击模式选项卡
3. 浏览类别（关于、行动号召、文本、标题等）
4. 单击一个模式立即插入它
5. 用您自己的内容替换占位符文本和图像

5. 网站完整编辑 (FSE) vs 经典主题

有两个广泛的 WordPress 主题类别需要理解：

• 经典主题 — 传统主题类型，其中仅文章/页面内容区域可通过块编辑。页眉、页脚和侧边栏通过自定义器或 PHP 模板文件控制。
• 块主题 (FSE) — 支持网站完整编辑的现代主题，允许您在块编辑器内编辑页眉、页脚、存档模板和单文章模板。

受欢迎的块主题包括：Twenty Twenty-Four、Ollie、Kadence (FSE 版本)

在外观 → 编辑器处访问网站完整编辑 (仅在使用块主题时可见)。

6. 可复用块 — 在任何地方使用内容

可复用块 (现在称为 "同步模式") 是保存的块或块组，可以插入到任何文章或页面。编辑一次，更改就会在所有使用它的地方传播。

创建可复用块

1. 选择您想要保存的块或组
2. 单击 ⋮ (三点菜单) → 创建模式/可复用块
3. 给它起一个描述性的名称 (例如 "行动号召部分 — 联系我们")
4. 如果您希望编辑在所有使用它的地方传播，请选择同步
5. 单击创建

7. 必要的键盘快捷键

8. 顶级 Gutenberg 块插件

WordPress 核心块涵盖基础知识。对于更复杂的布局和更丰富的设计选项，这三个免费插件强烈推荐：

Spectra (由 Brainstorm Force 开发)

添加 40 多个额外块，包括高级标题、图标列表、信息框、团队、推荐、价格列表、时间轴和星级评分 — 所有这些都具有细粒度的样式控制。非常适合商业网站。

GenerateBlocks

优先考虑速度和性能。它只提供四个核心块 (容器、网格、标题、按钮)，但每个都非常灵活，支持动态数据。生成任何块插件中最干净、最小的代码 — 理想用于需要 PageSpeed 分数的网站。

Kadence Blocks

一个全面的免费选项，涵盖所有常见的商业网站需求：高级图库、选项卡、手风琴、图标框、信息框、行布局等。与 Kadence 主题生态系统无缝配合，包括其页眉/页脚生成器。

高效管理块

要精通 Gutenberg，需要理解超越简单点击添加和键入的块管理。这些是大多数用户应该更早发现的技术。

转换块

您可以将块从一种类型更改为另一种类型，而不会丢失内容 — 例如段落 → 标题、列表 → 引用或列 → 组。单击块，然后单击工具栏左上角的块类型图标，然后选择 "转换为"。

在列之间移动块

要将块从左列移动到右列，请剪切块 (Ctrl+X)，单击目标列内部，然后粘贴 (Ctrl+V)。跨列边界拖动在某些浏览器中的行为可能不一致。

块锁定

在有多个编辑器的网站上，锁定关键块以防止意外删除或移动：

1. 选择您想要锁定的块
2. 单击 ⋮ → 锁定
3. 选择 "防止移除" 和/或 "防止移动"
4. 单击应用

Gutenberg 中的排版和间距控制

从 WordPress 6.x 开始，Gutenberg 在大多数块上支持排版和间距控制 — 无需自定义 CSS：

排版控制

• 字体大小 — 从预设中选择 (S/M/L/XL/XXL) 或设置自定义 px/rem 值
• 字体族 — 如果活跃主题通过 theme.json 定义字体选择，您可以选择每个块的不同族
• 行高 — 控制文本行之间的垂直间距
• 字间距 — 调整字符之间的间距 — 对需要现代或编辑风格的标题很有用
• 文本转换 — 应用大写、首字母大写或小写，无需重新输入

间距控制

• 内边距 — 块内的内部空间，可按边控制 (顶部/右侧/底部/左侧)
• 外边距 — 将块与相邻块分开的外部空间
• 块间隙 — 容器或组内子块之间的间距

在右侧的块设置面板 → 样式中查找所有这些。如果选项被隐藏，请单击 ⋮ → 显示更多设置。

Gutenberg 和核心网页生命力指标性能

正确使用 Gutenberg 可以有意义地改善 WordPress 页面速度并帮助满足 Google 的核心网页生命力指标阈值：

将 Gutenberg 与 LiteSpeed Cache 配对可以自动优化块编辑器生成的 CSS，进一步改善整个网站的首次内容绘制 (FCP) 分数。

9. 初学者提示和技巧

• 使用列表视图 (堆叠线条图标) 以树的形式查看文章的完整块结构 — 非常适合导航复杂布局
• 向上或向下拖动块以重新排序，或使用块工具栏上的箭头按钮
• 使用组块将多个块包装在一起，以便您可以一次将背景颜色或内边距应用于整个组
• 锁定块以防止意外删除或移动 — 在多作者网站上很有用
• 按 Escape 退出文本编辑模式；按 Enter 在当前块之后添加新块