学习使用Gutenberg编辑器进行内容创作和排版

在前面的课程中已经介绍过，WordPress的Gutenberg编辑器是一种新的内容创建方式，它使用区块来组织和设计网页。它于2018年12月随WordPress 5.0版本发布，取代了之前的经典编辑器。Gutenberg编辑器的目标是提供更灵活、更直观、更富有创意的网站制作体验。

经过多年的持续迭代，到2026年，Gutenberg编辑器已经发展到第三阶段——协作阶段（Phase 3: Collaboration）。目前WordPress最新的6.7版本中，Gutenberg已经成为一个功能完善、生态成熟的编辑系统，不仅支持文章和页面编辑，更扩展为全站编辑（Full Site Editing, FSE）的核心引擎，让用户可以使用区块来自定义网站的每一个角落——从页眉、页脚到导航菜单、侧边栏，一切皆可"区块化"。

这意味着，更多的发布控制和格式设置选项被交到用户手中，而无需PHP、JavaScript、HTML或CSS方面的专业知识或技术培训。如此一来，编辑和内容创作者可以比以往更轻松地创建帖子和页面并设置其格式。你可以插入图像、更改字体大小和颜色，轻松创建表格和列，并进行排版。

💡 知识点复习：Gutenberg的名字来源于约翰内斯·古登堡（Johannes Gutenberg），他是15世纪德国发明家，被誉为西方活字印刷术的发明者。正如古登堡的印刷术革命性地改变了知识传播方式，WordPress的Gutenberg编辑器也旨在革新网页内容的创作方式。

一、🎯 Gutenberg编辑器的优势和局限

你仍然可以使用标准的段落块来编写你的帖子，但块编辑器有许多功能，可以通过使用各种块为你提供多种格式化内容的选项。在块编辑器中找到的每个块都可以为你提供显示选项的设置，例如颜色设置、字体大小和颜色以及宽度。

✅ 核心优势

相比于经典编辑器，Gutenberg编辑器有以下几个优势：

⚠️ 已解决的历史局限

需要特别指出的是，以下是Gutenberg早期版本存在的一些局限，但在2026年的当下，这些问题已经基本得到解决：

🔄 当前仍需注意的局限

尽管Gutenberg已经非常成熟，但在使用中仍需注意以下几点：

二、🖥️ 如何使用Gutenberg编辑器

要使用Gutenberg编辑器，你只需要在WordPress后台创建或编辑一个页面或文章，就可以看到编辑器的界面。

📐 编辑器界面结构

编辑器的界面分为三个部分：

┌─────────────────────────────────────────────────────────────┐
│  📍 顶部工具栏                                               │
│  [+ 添加区块] [↩️ 撤销] [↪️ 重做] [📋 列表] [👁️ 预览] [发布]   │
├─────────────────────────────────────────────────┬───────────┤
│                                                 │ ⚙️ 侧边栏  │
│                                                 │           │
│              📝 内容区域                         │ • 文档设置 │
│                                                 │ • 区块设置 │
│         在这里添加和编辑你的区块                  │ • 样式设置 │
│                                                 │           │
│                                                 │           │
└─────────────────────────────────────────────────┴───────────┘

➕ 添加区块的方法

你可以通过单击编辑帖子（或编辑页面）屏幕左上角的小加号来发现可用的不同类型的块。单击该图标会显示块的下拉菜单。

添加区块有以下几种常用方式：

✏️ 编辑区块的操作

要编辑一个区块，你只需要在内容区域点击它，然后在侧边栏或者区块上方的工具栏中修改它的设置。

区块工具栏提供的常用操作：

[≡ 区块类型] [↑ 上移] [↓ 下移] [B 粗体] [I 斜体] [🔗 链接] [⋮ 更多选项]

💡 效率技巧：在编辑器中按下 Ctrl + K（Windows）或 Cmd + K（Mac）可以快速打开命令面板，输入命令即可快速执行各种操作，如"添加标题"、"设置特色图片"等。这是WordPress 6.0引入的强大功能，类似于代码编辑器中的命令面板。

三、🧱 什么是区块（Block）

区块是Gutenberg编辑器的基本单元，它们可以表示不同类型的内容，如文本、图片、视频、按钮、表格等。每个区块都有自己的属性和设置，可以调整其外观和功能。你可以通过拖放、复制、粘贴、移动、删除等操作来管理区块。

🎨 区块的设计哲学：可以把区块想象成乐高积木。每一块积木都有特定的形状和功能，你可以自由组合它们来构建任何你想要的结构。同样，每个区块都是一个独立的内容单元，你可以通过组合不同类型的区块来创建丰富多样的网页布局。

核心块是指可供你在WordPress默认安装中使用的块。你不需要在WordPress安装中安装任何特殊插件或添加任何其他内容，因为这些核心块是核心软件的一部分。

📊 区块分类总览

Gutenberg编辑器提供了多种核心区块，分为以下几类：

除了内置的核心区块，你还可以通过安装插件来添加更多的自定义区块，例如联系表单、轮播图、计数器、定价表等。你也可以通过编写代码来创建你自己的区块，实现你想要的功能和效果。

📝 第一类：文本块

此部分中的块为内容中的文本提供格式设置和放置选项。文本块是内容创作的基础，掌握这些区块可以帮助你高效地组织和呈现文字信息。

📌 SEO提示：正确使用标题层级（H1-H6）对搜索引擎优化至关重要。每个页面应只有一个H1标题（通常是文章标题），然后使用H2作为主要章节，H3作为子章节，以此类推。这种层级结构帮助搜索引擎理解你内容的组织方式。

🖼️ 第二类：媒体块

处理媒体文件（例如图像、视频和音频文件）的插入、演示和格式化。在视觉传播时代，恰当使用媒体内容可以显著提升用户体验和内容吸引力。

⚡ 性能提示：上传图片时，WordPress会自动生成多种尺寸的版本。为了优化页面加载速度，建议：①上传前压缩图片；②使用WebP等现代格式；③启用延迟加载（Lazy Loading）。WordPress 6.x版本已默认启用图片延迟加载功能。

🎨 第三类：设计块

此部分中的块允许你为每个帖子或页面上的内容创建不同的布局。布局元素包括表、列和按钮。这些元素使你能够创建看起来不同或相同的页面和帖子，让你可以随心所欲地发挥创意。

🎯 设计技巧：使用"组"区块可以实现很多高级效果。例如，你可以为一个组设置背景颜色或图片，然后在组内放置多个区块，这样所有内容都会有统一的背景。组还可以设置内边距和外边距，精确控制内容的呈现方式。

🔧 第四类：小部件块

这些块在块编辑器中可用，允许你插入具有预定义内容或动态功能的组件。小部件块可以为你的页面添加交互性和动态内容，无需编写代码即可实现常见功能。

🏗️ 第五类：主题块

本节中的块主要用于全站编辑（FSE）功能，特别是在创建和自定义模板时使用。这些区块代表了WordPress向"全站区块化"演进的重要方向，让你可以使用区块来构建网站的每一个部分。

💡 全站编辑说明：主题块主要在"站点编辑器"（外观 → 编辑器）中使用，而非普通的帖子/页面编辑器。使用这些区块需要启用支持全站编辑的"区块主题"（Block Theme）。WordPress官方的Twenty Twenty-Four、Twenty Twenty-Five等主题都是区块主题，可以充分发挥这些功能。

🔗 第六类：嵌入块

此块允许你嵌入来自网络上各种服务的内容，例如来自YouTube的视频、来自Twitter的特定推文或来自Instagram的照片。

截至2026年，WordPress块编辑器支持嵌入来自40多种服务的内容。只需粘贴URL，WordPress通常会自动识别并转换为嵌入区块。

常用嵌入服务一览：

⚠️ 注意事项：由于社交媒体平台API政策的变化，部分嵌入可能需要额外配置或出现显示问题。例如，Twitter/X在2023年调整API政策后，嵌入功能可能受到限制。建议定期测试嵌入内容的显示效果。

四、🆕 区块模式与全站编辑（新功能详解）

本节是本课程新增内容，介绍Gutenberg近年来最重要的两项功能更新：区块模式（Block Patterns）和全站编辑（Full Site Editing）。这些功能极大地扩展了Gutenberg的能力边界，是现代WordPress使用的核心技能。

🎭 区块模式（Block Patterns）

区块模式是预先设计好的区块组合，可以一键插入到你的内容中。这相当于拥有了专业设计师预制的布局模板，让普通用户也能创建出专业水准的页面布局。

使用方法：

1. 点击添加区块的加号按钮
2. 切换到"模式"标签页
3. 浏览或搜索所需的模式
4. 点击即可插入到内容中
5. 根据需要修改文本、图片等内容

常见模式类别：

💡 技巧：你可以创建自己的区块模式！选中多个区块后，点击工具栏的三点菜单，选择"创建模式"，即可保存为可复用的自定义模式。这对于需要在多个页面重复使用的布局非常有用。

🌐 全站编辑（Full Site Editing）

全站编辑（FSE）是Gutenberg编辑器的终极愿景——让用户能够使用区块来编辑网站的每一个部分，而不仅仅是文章和页面内容。

FSE包含的核心概念：

访问站点编辑器：

1. 进入WordPress后台
2. 点击"外观" → "编辑器"
3. 在左侧面板中选择要编辑的部分：
   • 模板：编辑页面结构布局
   • 模板部件：编辑页眉、页脚等复用组件
   • 样式：设置全局颜色、字体、间距

⚠️ 兼容性说明：全站编辑功能需要使用"区块主题"才能完整体验。如果你使用的是传统的"经典主题"，可能无法访问全部FSE功能。建议使用WordPress官方的Twenty Twenty-Four或Twenty Twenty-Five主题来学习FSE功能。

🎨 全局样式（Global Styles）

全局样式系统允许你在一处定义设计规范，然后自动应用到整个网站。这类似于专业设计中的"设计系统"概念，确保网站视觉的一致性。

可配置的全局样式项目：

使用技巧：

• 在站点编辑器中点击右上角的"样式"图标（半月形）访问全局样式
• 修改会实时预览，确认后点击"保存"应用到全站
• 可以将当前样式配置导出为JSON文件，用于迁移或备份

五、✍️ 内容块：文本块与媒体块的使用

如上所述，对于作者而言，只需要掌握文本块和媒体块这两种内容块，即可更简单、更强大地编辑网站的内容。

你的文章可以被分解为不同的内容块，每个块代表一种类型的内容，如段落、标题、图片、列表、表格、按钮、视频等。

🎯 核心工作流程：

1. 规划内容结构 → 2. 逐块添加内容 → 3. 调整样式设置 → 4. 预览和优化 → 5. 发布

你可以在编辑器中，通过拖放、复制、粘贴、删除等操作，自由地添加、移动、排列、组合、嵌套各种内容块，从而创建出你想要的网页布局和效果。而且，你可以在编辑器中，实时地预览你的内容，或者切换到不同的视图，查看你的内容在不同的设备上的显示情况。

📱 响应式预览：点击顶部工具栏的预览按钮，可以选择桌面、平板、手机三种视图模式，查看你的内容在不同设备上的显示效果。这对于确保移动端用户体验非常重要。

内容块不仅可以让你更简单地编辑网站的内容，还可以让你更强大地编辑网站的内容。内容块不仅有着丰富的内置类型，还可以通过插件扩展更多的类型，如地图、轮播、联系表单、社交媒体、测试题等。

你可以根据你的网站的主题和目的，选择适合你的内容块，或者自定义你的内容块。而且，你可以为每个内容块设置不同的样式和属性，如颜色、字体、对齐、动画、链接等，从而增强你的内容的美观性和功能性。

六、📝 添加和编辑文本：文本块详解

文字块是一种用于添加和编辑文本内容的内容块，它可以让你在网站上输入、格式化、排版、修饰你的文本，从而传达你的信息和观点。文字块是一种非常常用的内容块，它可以用于创建文章、页面、产品介绍、客户评价、个人简介等各种文本内容。文字块的使用方法和功能非常简单而灵活，你可以轻松地掌握和应用。下面，我们就来详细地介绍一下文字块的特点和操作。

（一）如何添加文字块

要添加文字块，你有多种方法可以选择，下面介绍三种最常用的方法：

无论你使用哪种方法，添加文字块后，你就可以在文字块中输入你的文本内容了。你可以输入任意长度的文本，文字块会自动地根据你的输入，调整它的高度。你也可以在文字块中，使用回车键来创建新段落。你可以在编辑器中，添加多个文字块，来创建你的文本内容。

💡 技巧：按两次回车键会创建新的段落块，按 Shift + 回车 则是在同一段落内换行。

（二）如何编辑文字块

添加文字块后，你可以对文字块进行各种编辑，来改变它的外观和功能。文字块的编辑主要分为两种方式：使用工具栏和使用设置面板。

📍 使用工具栏

在文字块的顶部，你可以看到一个工具栏，它提供了一些常用的文本编辑功能：

⚙️ 使用设置面板

在编辑器的右侧，你可以看到一个设置面板，它提供了一些高级的文本编辑功能：

🎨 首字下沉：在段落块的设置面板中，可以启用"首字下沉"选项，让段落的第一个字母放大显示，这是一种经典的排版效果，常用于杂志风格的内容。

（三）如何移动和删除文字块

除了添加和编辑文字块，你还可以对文字块进行移动和删除，来调整你的文本内容的顺序和结构。

🔄 移动区块

❌ 删除区块

⚠️ 误删恢复：如果不小心删除了区块，立即按 Ctrl + Z（撤销）可以恢复。WordPress会保留完整的操作历史。

（四）如何复制和粘贴文字块

除了移动和删除文字块，你还可以对文字块进行复制和粘贴，来快速地创建和重复你的文本内容。

💡 跨文章复制：你可以在不同的文章或页面之间复制区块。只需复制区块，然后在另一个编辑窗口中粘贴即可。

（五）如何组合和嵌套文字块

除了复制和粘贴文字块，你还可以对文字块进行组合和嵌套，来创建更复杂和更丰富的文本内容。

组合与嵌套的区别：

创建组合的方法：

1. 选择多个区块（按住Shift点击，或使用列表视图）
2. 点击工具栏中的"分组"按钮，或通过三点菜单选择"分组"
3. 现在可以为整个组设置统一的样式，如背景色、边框、内边距等

常用的嵌套结构：

列区块（3列布局）
├── 第1列
│   ├── 图片块
│   └── 段落块
├── 第2列
│   ├── 图片块
│   └── 段落块
└── 第3列
    ├── 图片块
    └── 段落块

🔧 实用技巧：使用"组"区块可以创建卡片效果——设置背景色、圆角边框、阴影效果，再添加内边距，就是一个漂亮的内容卡片。

七、♻️ 区块面板：打造可复用的样式库

可复用区块（Reusable Blocks，在WordPress 6.3+中更名为"同步模式/Synced Patterns"）是Gutenberg中一项强大的效率功能。它允许你保存区块组合，并在多个位置重复使用。更重要的是，当你修改一个可复用区块时，所有使用该区块的地方都会自动更新。

🎯 可复用区块的应用场景

➕ 创建可复用区块

1. 选择你想要保存的一个或多个区块
2. 点击工具栏中的三点菜单（⋮）
3. 选择"创建模式"
4. 输入名称，并选择"同步"选项（如果希望修改同步更新）
5. 点击"创建"保存

📝 使用可复用区块

在编辑器中，点击加号按钮 → 切换到"模式"标签 → 找到"我的模式"分类 → 点击插入

⚠️ 同步 vs 非同步模式（WordPress 6.3+新概念）：

⚙️ 管理可复用区块

方法一：通过编辑器

1. 点击古登堡编辑器的设置（右上角三点菜单）
2. 找到"工具"菜单 → "管理区块面板设置"
3. 点击进入管理页面

方法二：直接访问

在浏览器地址栏输入：你的网站域名/wp-admin/edit.php?post_type=wp_block

在管理页面你可以：

• 查看所有已创建的可复用区块
• 编辑区块内容
• 删除不再需要的区块
• 导出区块（JSON格式）供其他网站使用
• 导入其他网站的区块

八、⌨️ 键盘快捷键速查表

熟练使用键盘快捷键可以显著提升编辑效率。以下是Gutenberg编辑器中最常用的快捷键（Windows/Mac）：

📋 通用操作

✏️ 文本格式

🧱 区块操作

💡 提示：在编辑器中按 Ctrl + /（或 Cmd + /）可以查看完整的快捷键列表。

九、❓ 常见问题与解决方案

以下是使用Gutenberg编辑器时常见的问题和解决方法：

Q1: 编辑器加载缓慢或卡顿怎么办？

可能原因与解决方案：

• 区块过多：尝试将长文章分成多篇，或使用可复用区块减少重复内容
• 浏览器扩展冲突：尝试禁用浏览器扩展，特别是广告拦截器
• 服务器性能：联系主机提供商优化服务器配置
• 浏览器缓存：清除浏览器缓存后刷新页面

Q2: 如何将经典编辑器内容转换为区块？

操作步骤：

1. 打开包含经典内容的文章
2. 内容会显示在"经典区块"中
3. 点击区块工具栏，选择"转换为区块"
4. WordPress会自动识别并创建相应的区块

Q3: 区块之间间距太大/太小怎么调整？

解决方法：

• 使用"间隔符"区块添加精确的空白
• 在区块设置中调整"尺寸"→"外边距"和"内边距"
• 使用全局样式统一设置区块间距

Q4: 如何在区块中添加自定义CSS？

操作步骤：

1. 选中目标区块
2. 在右侧设置面板中展开"高级"选项
3. 在"额外CSS类"中输入类名
4. 在主题的自定义CSS或Customizer中编写对应样式

Q5: 为什么某些区块选项不可用？

可能原因：

• 当前主题不支持该功能
• 需要安装额外的区块插件
• WordPress版本过旧，需要更新
• 正在使用经典主题而非区块主题

十、📚 课程总结

总之，Gutenberg编辑器是WordPress的一项重大创新，它为WordPress的用户和开发者带来了更多的选择和机会，让内容创作和信息分发变得更加简单和有趣。

📌 本课程核心要点回顾：

🎯 学习建议：

1. 动手实践：理论知识需要通过实践来巩固。建议你创建一个测试文章，尝试使用各种区块类型
2. 循序渐进：先掌握基础的文本块和媒体块，再逐步探索设计块和高级功能
3. 关注更新：WordPress持续更新Gutenberg功能，建议关注官方博客了解最新变化
4. 善用社区：WordPress拥有活跃的社区，遇到问题可以在论坛或社交媒体寻求帮助

🔗 推荐学习资源：

• WordPress官方区块编辑器手册：https://wordpress.org/documentation/article/wordpress-block-editor/
• Gutenberg官方GitHub仓库：https://github.com/WordPress/gutenberg
• 全站编辑入门指南：https://fullsiteediting.com/

如果你还没有尝试过Gutenberg编辑器，建议你耐心尝试一下，会发现Gutenberg已经日益强大。更具体的细节探索，与其读文章，不如自己亲自尝试。最好的学习方式，就是动手创建你的第一篇区块编辑器文章！

📝 课后练习：

1. 创建一篇包含以下元素的测试文章：
   • 一个带有特色图片的封面区块
   • 使用H2和H3的多级标题结构
   • 一个三列布局，每列包含图片和说明文字
   • 一个引用块
   • 一个CTA按钮
2. 尝试创建一个可复用区块（如作者简介卡片），并在两篇不同的文章中使用它
3. （进阶）如果你的主题支持，尝试进入站点编辑器，修改网站的页眉或页脚模板