WordPress Gutenberg编辑器入门：从零开始掌握WordPress区块编辑器

2026年6月16日 · 阅读约需13分钟

引言

Gutenberg是WordPress 5.0引入的全新区块编辑器，彻底改变了WordPress的内容创作方式。本文将带你从零开始，学习如何使用Gutenberg编辑器，掌握区块编辑的核心技能，让你的内容创作更加高效和灵活。

一、Gutenberg概述

什么是Gutenberg

Gutenberg是WordPress的新一代区块编辑器，以约翰内斯·古腾堡（活字印刷术发明者）命名。它将内容分解为独立的”区块”，每个区块可以单独编辑、移动和设置样式。

Gutenberg的优势

可视化编辑：所见即所得的编辑体验
区块化管理：每个内容元素都是独立区块
丰富的区块类型：内置多种常用区块
可扩展性：支持自定义区块开发
响应式设计：自动适配不同设备
现代化界面：简洁直观的用户界面

与经典编辑器的区别

特性	经典编辑器	Gutenberg编辑器
编辑方式	所见即所得	区块化编辑
内容组织	连续文本	独立区块
布局控制	有限	强大灵活
媒体处理	基础	丰富直观
扩展性	短代码	自定义区块

二、Gutenberg基础操作

1. 界面介绍

Gutenberg编辑器界面布局：
┌─────────────────────────────────────────┐
│ 顶部工具栏：添加区块、撤销、重做等      │
├─────────────────────────────────────────┤
│                                         │
│  内容编辑区域：区块列表                 │
│  ┌─────────────────────────────────┐   │
│  │ 标题区块                        │   │
│  ├─────────────────────────────────┤   │
│  │ 段落区块                        │   │
│  ├─────────────────────────────────┤   │
│  │ 图片区块                        │   │
│  └─────────────────────────────────┘   │
│                                         │
├─────────────────────────────────────────┤
│ 右侧边栏：区块设置、文档设置            │
└─────────────────────────────────────────┘

2. 添加区块

<?php
// 添加区块的方法

// 方法1：点击添加区块按钮
// 1. 点击编辑器左上角的"+"按钮
// 2. 搜索或浏览区块类型
// 3. 点击选择需要的区块

// 方法2：使用斜杠命令
// 1. 在新行输入"/"
// 2. 输入区块名称（如"/段落"、"/图片"）
// 3. 按回车确认

// 方法3：使用快捷键
// - Enter：在当前区块后添加新区块
// - Backspace：删除空区块
// - Ctrl+Z：撤销操作
// - Ctrl+Y：重做操作
?>

3. 选择和移动区块

<?php
// 选择区块
// 1. 点击区块任意位置选中
// 2. 区块会显示工具栏和边框

// 移动区块
// 方法1：使用拖拽
// - 鼠标悬停在区块左上角的拖拽手柄
// - 按住鼠标拖动到目标位置

// 方法2：使用上下箭头
// - 点击区块工具栏的上移/下移按钮
// - 或使用快捷键：Ctrl+Alt+T（上移）、Ctrl+Alt+M（下移）

// 方法3：使用列表视图
// - 点击顶部工具栏的"列表视图"按钮
// - 在列表中拖拽调整顺序
?>

4. 编辑区块设置

<?php
// 访问区块设置
// 1. 选中区块
// 2. 点击区块工具栏的"更多选项"（三个点）
// 3. 或查看右侧边栏的"区块"标签

// 常见设置选项：
// - 样式：预设样式选择
// - 颜色：文本颜色、背景颜色
// - 排版：字体大小、行高
// - 尺寸：宽度、高度
// - 高级：CSS类、HTML锚点
?>

三、常用区块详解

1. 文本区块

<?php
// 段落区块（Paragraph）
// - 最基础的文本区块
// - 支持富文本格式
// - 设置：字体大小、颜色、对齐方式

// 标题区块（Heading）
// - H1-H6 六个级别
// - 支持锚点链接
// - 设置：级别、对齐方式

// 列表区块（List）
// - 无序列表（项目符号）
// - 有序列表（数字）
// - 支持嵌套列表

// 引用区块（Quote）
// - 大段引用文本
// - 支持引用来源
// - 样式：默认、大引用

// 代码区块（Code）
// - 显示代码片段
// - 保留格式和缩进
// - 支持语法高亮（需主题支持）

// 预格式化区块（Preformatted）
// - 保留所有空格和换行
// - 等宽字体显示
// - 适合展示文本艺术
?>

2. 媒体区块

<?php
// 图片区块（Image）
// - 上传或选择媒体库图片
// - 设置：对齐、链接、尺寸、替代文本
// - 样式：默认、圆形、边框

// 画廊区块（Gallery）
// - 多张图片网格展示
// - 设置：列数、裁剪、链接到
// - 支持拖拽排序

// 封面区块（Cover）
// - 大尺寸背景图片+文字
// - 适合页面开头
// - 设置：背景、叠加、文字位置

// 视频区块（Video）
// - 上传视频文件或嵌入URL
// - 设置：自动播放、循环、静音
// - 支持：MP4、WebM等格式

// 音频区块（Audio）
// - 上传音频文件
// - 设置：自动播放、循环
// - 支持：MP3、WAV等格式

// 文件区块（File）
// - 嵌入可下载文件
// - 显示下载按钮
// - 支持：PDF、文档等
?>

3. 设计区块

<?php
// 分隔线区块（Separator）
// - 水平分隔线
// - 样式：实线、虚线、点线
// - 设置：颜色、粗细

// 间隔区块（Spacer）
// - 添加垂直空白
// - 可调整高度
// - 精确控制间距

// 列区块（Columns）
// - 多列布局
// - 2-6列可选
// - 每列可独立编辑
// - 响应式自动堆叠

// 群组区块（Group）
// - 将多个区块组合
// - 统一设置背景、边距
// - 便于整体移动和样式控制

// 行区块（Row）
// - 水平排列区块
// - 灵活的布局控制
// - 支持对齐和间距设置
?>

4. 小工具区块

<?php
// 最新文章区块（Latest Posts）
// - 显示最新文章列表
// - 设置：数量、分类、排序
// - 显示：标题、日期、摘要、特色图片

// 分类列表区块（Categories）
// - 显示文章分类
// - 样式：列表、下拉菜单
// - 设置：显示文章数量、层级

// 标签云区块（Tag Cloud）
// - 显示标签云
// - 按使用频率调整大小
// - 设置：分类、数量

// 日历区块（Calendar）
// - 显示文章日历
// - 按月份归档
// - 点击查看对应日期文章

// 搜索区块（Search）
// - 嵌入搜索表单
// - 设置：按钮位置、占位符文本
?>

5. 嵌入区块

<?php
// 嵌入区块（Embed）
// - 支持多种平台嵌入
// - 只需粘贴URL
// - 自动转换为嵌入内容

// 支持的平台：
// - YouTube、Vimeo（视频）
// - Twitter、Instagram（社交媒体）
// - Spotify、SoundCloud（音乐）
// - WordPress.org、WordPress.com（WordPress）
// - TED、Issuu（其他）

// 使用方法：
// 1. 添加"嵌入"区块
// 2. 粘贴目标URL
// 3. 点击"嵌入"按钮
// 4. 自动加载嵌入内容
?>

四、高级区块操作

1. 区块模式（Block Patterns）

<?php
// 什么是区块模式
// - 预定义的区块组合
// - 快速创建复杂布局
// - 可重复使用

// 使用区块模式：
// 1. 点击添加区块按钮
// 2. 切换到"模式"标签
// 3. 浏览或搜索模式
// 4. 点击插入到内容中

// 常见模式类型：
// - 按钮
// - 列
// - 标题
// - 文本
// - 图片
// - 视频
// - 更多...
?>

2. 可重用区块（Reusable Blocks）

<?php
// 创建可重用区块
// 1. 选中要保存的区块或区块组
// 2. 点击"更多选项"→"添加到可重用区块"
// 3. 输入名称保存

// 使用可重用区块
// 1. 添加区块时搜索名称
// 2. 或在"可重用"标签中选择
// 3. 插入到内容中

// 管理可重用区块
// 1. 进入"可重用区块"管理页面
// 2. 编辑、删除、导出
// 3. 全局更新所有使用处

// 注意事项：
// - 修改可重用区块会影响所有使用处
// - 可转换为普通区块（断开链接）
// - 支持导入导出
?>

3. 区块样式（Block Styles）

<?php
// 什么是区块样式
// - 预设的样式变体
// - 一键切换外观
// - 主题可自定义

// 使用区块样式：
// 1. 选中区块
// 2. 查看右侧边栏"样式"部分
// 3. 点击选择不同样式
// 4. 实时预览效果

// 常见样式示例：
// - 按钮：填充、轮廓、方形
// - 引用：默认、大引用
// - 图片：默认、圆形、边框
// - 列表：默认、内联

// 自定义区块样式（开发者）：
// register_block_style() 函数
// 在主题或插件中添加
?>

4. 区块模板（Block Templates）

<?php
// 什么是区块模板
// - 预定义的内容结构
// - 新建文章时自动加载
// - 适合固定格式的内容类型

// 自定义文章类型模板：
// 在注册CPT时设置template参数
// 定义区块顺序和属性
// 可锁定模板结构

// 示例代码：
// 'template' => array(
//     array( 'core/paragraph', array(
//         'placeholder' => '添加简介...',
//     )),
//     array( 'core/image', array(
//         'align' => 'wide',
//     )),
//     array( 'core/paragraph', array(
//         'placeholder' => '添加详细内容...',
//     )),
// ),
// 'template_lock' => 'all', // 锁定模板
?>

五、Gutenberg键盘快捷键

1. 全局快捷键

Ctrl + Z：撤销
Ctrl + Shift + Z：重做
Ctrl + A：全选
Ctrl + C：复制
Ctrl + V：粘贴
Ctrl + X：剪切
Ctrl + S：保存草稿
Ctrl + Shift + D：复制区块
Delete / Backspace：删除选中区块

2. 区块操作快捷键

Enter：在当前区块后添加新区块
Shift + Enter：在当前区块内换行
Ctrl + Alt + T：将区块上移
Ctrl + Alt + M：将区块下移
Ctrl + Alt + Y：在代码编辑器和可视化编辑器之间切换
/：在新行输入斜杠命令

3. 格式快捷键

Ctrl + B：粗体
Ctrl + I：斜体
Ctrl + U：下划线
Ctrl + K：插入链接
Ctrl + Shift + K：删除链接

4. 选择快捷键

Ctrl + A：全选所有区块
Escape：清除选区
Arrow Up / Down：在区块间移动

六、Gutenberg与主题开发

1. 主题支持

<?php
// 在主题中添加Gutenberg支持
// 通常不需要额外操作，WordPress主题默认支持

// 添加宽对齐支持
add_theme_support( 'align-wide' );

// 添加编辑器样式
add_editor_style( 'editor-style.css' );

// 自定义颜色调色板
add_theme_support( 'editor-color-palette', array(
    array(
        'name'  => __( '蓝色', 'textdomain' ),
        'slug'  => 'blue',
        'color' => '#0073aa',
    ),
    array(
        'name'  => __( '橙色', 'textdomain' ),
        'slug'  => 'orange',
        'color' => '#ff6b35',
    ),
) );

// 禁用自定义颜色
add_theme_support( 'disable-custom-colors' );

// 自定义字体大小
add_theme_support( 'editor-font-sizes', array(
    array(
        'name' => __( '小', 'textdomain' ),
        'size' => 12,
        'slug' => 'small'
    ),
    array(
        'name' => __( '正常', 'textdomain' ),
        'size' => 16,
        'slug' => 'normal'
    ),
    array(
        'name' => __( '大', 'textdomain' ),
        'size' => 36,
        'slug' => 'large'
    ),
) );
?>

2. 区块样式CSS

/* 编辑器样式示例 */

/* 区块间距 */
.wp-block {
    margin-bottom: 1.5em;
}

/* 宽对齐 */
.alignwide {
    margin-left: calc(25% - 25vw);
    margin-right: calc(25% - 25vw);
    max-width: 100vw;
}

/* 全宽对齐 */
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
}

/* 自定义区块样式 */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid currentColor;
}

/* 列区块 */
.wp-block-columns {
    display: flex;
    gap: 2em;
}

.wp-block-column {
    flex: 1;
}

3. 自定义区块开发入门

<?php
// 简单的自定义区块（使用PHP渲染）
// 完整的区块开发需要JavaScript和React知识

// 注册动态区块
function my_plugin_register_block() {
    register_block_type( 'my-plugin/custom-block', array(
        'editor_script' => 'my-plugin-block-editor',
        'render_callback' => 'my_plugin_render_block',
    ) );
}
add_action( 'init', 'my_plugin_register_block' );

// 渲染回调函数
function my_plugin_render_block( $attributes ) {
    return '<div class="custom-block">' . 
           esc_html( $attributes['content'] ) . 
           '</div>';
}

// 学习资源：
// - WordPress官方区块开发手册
// - Gutenberg示例代码库
// - 区块开发教程
?>

七、Gutenberg插件推荐

1. 必备插件

<?php
// 1. Gutenberg（官方）
// - 最新版本的Gutenberg
// - 比WordPress核心更新更快
// - 实验性功能预览

// 2. 经典编辑器（Classic Editor）
// - 恢复旧版编辑器
// - 适合不适应Gutenberg的用户
// - 可选择默认编辑器

// 3. Gutenberg Ramp
// - 按文章类型启用/禁用Gutenberg
// - 渐进式切换
// - 平滑过渡方案
?>

2. 增强插件

<?php
// 1. CoBlocks
// - 大量额外区块
// - 布局区块：行、列、分隔符
// - 媒体区块：画廊、滑块、灯箱
// - 社交区块：分享、关注

// 2. Stackable
// - 高级区块集合
// - 设计精美的区块
// - 大量自定义选项
// - 模板库

// 3. Kadence Blocks
// - 强大的区块工具集
// - 高级行布局
// - 可定制的设计选项
// - 性能优化

// 4. Otter Blocks
// - 轻量级区块插件
// - 实用的区块类型
// - 模板库
// - 动画效果

// 5. Ultimate Addons for Gutenberg
// - 全面的区块集合
// - 创意区块
// - 表单区块
// - 内容区块
?>

3. 工具插件

<?php
// 1. Block Visibility
// - 控制区块显示条件
// - 按用户角色、设备、时间显示
// - 高级可见性控制

// 2. Reusable Blocks Extended
// - 增强可重用区块管理
// - 分类和标签
// - 更好的搜索和筛选

// 3. Block Directory
// - 浏览和安装单个区块
// - 直接从编辑器搜索
// - 一键安装
?>

八、Gutenberg最佳实践

1. 内容组织

<?php
// 1. 合理使用区块类型
// - 标题用标题区块（不用加粗段落）
// - 列表用列表区块（不用手动输入符号）
// - 代码用代码区块（保留格式）

// 2. 保持区块简洁
// - 每个区块聚焦一个内容元素
// - 避免在一个段落区块放太多内容
// - 适当使用群组区块组织相关内容

// 3. 利用区块模式
// - 常用布局保存为模式
// - 快速创建一致的内容结构
// - 提高内容创作效率

// 4. 可重用区块策略
// - 全局通用内容：页脚、CTA、广告
// - 定期更新的内容：联系方式、地址
// - 注意：修改会影响所有使用处
?>

2. 性能优化

<?php
// 1. 优化图片
// - 使用合适的尺寸
// - 压缩图片文件
// - 启用懒加载（WordPress默认支持）

// 2. 减少区块数量
// - 合理合并相关区块
// - 避免过度嵌套
// - 使用群组区块组织

// 3. 缓存策略
// - 页面缓存
// - 区块缓存（特定插件）
// - 对象缓存

// 4. 插件选择
// - 只安装需要的区块插件
// - 定期评估和清理
// - 选择性能良好的插件
?>

3. 可访问性

<?php
// 1. 语义化结构
// - 正确使用标题层级（H1-H6）
// - 列表使用列表区块
// - 引用使用引用区块

// 2. 图片替代文本
// - 为所有图片添加alt文本
// - 描述性文字
// - 装饰性图片留空alt

// 3. 颜色对比度
// - 确保文本和背景有足够对比度
// - 遵循WCAG 2.1 AA标准
// - 避免仅用颜色传达信息

// 4. 键盘导航
// - 确保所有区块可键盘操作
// - 测试Tab键导航
// - 提供焦点样式
?>

4. 工作流程建议

<?php
// 1. 规划内容结构
// - 先确定大纲
// - 选择合适的区块类型
// - 考虑布局需求

// 2. 批量创建内容
// - 使用区块模式快速创建
// - 复制相似区块
// - 利用可重用区块

// 3. 团队协作
// - 统一区块使用规范
// - 共享可重用区块
// - 建立内容模板

// 4. 定期维护
// - 检查废弃区块
// - 更新可重用区块
// - 优化性能
?>

九、常见问题和解决方案

1. 性能问题

<?php
// 问题：编辑器加载慢
// 可能原因：
// - 大量区块
// - 过多插件
// - 服务器资源不足
// - 大型媒体文件

// 解决方案：
// 1. 减少单页区块数量
// 2. 禁用不必要的区块插件
// 3. 优化图片和媒体
// 4. 升级服务器配置
// 5. 使用缓存插件
// 6. 启用Gutenberg性能优化
?>

2. 兼容性问题

<?php
// 问题：经典编辑器内容在Gutenberg中显示异常
// 可能原因：
// - 短代码不兼容
// - 自定义HTML问题
// - 样式冲突

// 解决方案：
// 1. 使用"经典"区块包裹旧内容
// 2. 逐步转换为Gutenberg区块
// 3. 测试短代码兼容性
// 4. 调整主题样式

// 问题：插件不支持Gutenberg
// 解决方案：
// 1. 查找Gutenberg兼容的替代插件
// 2. 使用经典编辑器（Classic Editor插件）
// 3. 联系插件开发者请求支持
?>

3. 布局问题

<?php
// 问题：区块对齐不正确
// 可能原因：
// - 主题不支持宽对齐
// - CSS样式冲突
// - 容器宽度限制

// 解决方案：
// 1. 确认主题支持align-wide
// 2. 检查主题CSS
// 3. 使用列区块创建布局
// 4. 调整主题容器宽度

// 问题：响应式显示异常
// 可能原因：
// - 自定义CSS问题
// - 区块设置不当
// - 媒体查询冲突

// 解决方案：
// 1. 测试不同设备尺寸
// 2. 检查自定义CSS
// 3. 使用响应式友好的区块
?>

4. 内容迁移问题

<?php
// 问题：从其他平台迁移内容
// 解决方案：
// 1. 使用WordPress导入工具
// 2. 检查内容格式
// 3. 转换为Gutenberg区块
// 4. 修复链接和媒体

// 问题：批量转换经典内容为区块
// 解决方案：
// 1. 使用"转换为区块"功能
// 2. 手动调整复杂内容
// 3. 使用批量转换插件
// 4. 保留经典版本作为备份
?>

十、Gutenberg的未来

1. 发展方向

<?php
// Gutenberg的未来发展：

// 1. 全站编辑（Full Site Editing）
// - 使用区块编辑整个网站
// - 头部、底部、侧边栏都用区块
// - 统一的编辑体验

// 2. 区块目录（Block Directory）
// - 直接从编辑器搜索安装区块
// - 丰富的第三方区块生态
// - 一键安装使用

// 3. 协作编辑
// - 多人实时协作
// - 评论和建议功能
// - 类似Google Docs的体验

// 4. 更多内置区块
// - 导航区块
// - 社交区块
// - 表单区块
// - 更多布局选项
?>

2. 学习资源

<?php
// 官方资源：
// - WordPress官方文档：https://wordpress.org/support/article/wordpress-editor/
// - Gutenberg手册：https://developer.wordpress.org/block-editor/
// - 区块开发指南：https://developer.wordpress.org/block-editor/how-to-guides/

// 社区资源：
// - Gutenberg Times：新闻和教程
// - Block Lab：自定义区块工具
// - WordPress Stack Exchange：问答社区

// 视频教程：
// - WordPress.tv：官方视频
// - YouTube：大量教程
// - Udemy、Coursera：课程平台
?>

3. 社区生态

<?php
// Gutenberg生态系统：

// 主题开发者：
// - 适配Gutenberg的主题
// - 自定义区块样式
// - 全站编辑支持

// 插件开发者：
// - 自定义区块开发
// - 区块增强插件
// - 集成现有功能

// 主机提供商：
// - 性能优化
// - Gutenberg特定优化
// - 一键演示

// 设计社区：
// - 区块模式分享
// - 设计资源
// - 最佳实践
?>

十一、总结与扩展

你已经学会了：

✅ Gutenberg概述和基础操作
✅ 常用区块的使用方法
✅ 高级区块操作（模式、可重用、样式）
✅ 键盘快捷键
✅ 主题开发中的Gutenberg支持
✅ 实用插件推荐
✅ 最佳实践和性能优化
✅ 常见问题解决方案
✅ Gutenberg的未来发展

下一步可以学习：

自定义区块开发：学习开发自己的Gutenberg区块
全站编辑：使用Gutenberg编辑整个网站
区块模式设计：创建和分享区块模式
高级主题开发：深度集成Gutenberg到主题
多语言Gutenberg：构建多语言的Gutenberg网站
Gutenberg性能调优：深入优化Gutenberg性能

引言