EP01. “Gutenberg 区块编辑器：基础操作与区块类型”
🔒 登录后可标记已读Gutenberg 是 WordPress 5.0 之后内置的默认编辑器（不用装插件，打开后台就有），把整篇文章/页面拆成一个个独立的"区块"（段落、图片、标题、列表……），每个区块能单独排版、移动、删除。这篇笔记讲怎么添加区块、常用区块类型有哪些、怎么排版调整——适合还在用 Elementor 或习惯经典编辑器、没正式碰过 Gutenberg 的新手。进阶用法（Reusable Blocks、Patterns）看《常用区块进阶》；跟 Elementor 该怎么选看《Gutenberg vs Elementor 该怎么选》。
重点内容
怎么添加区块
- 后台 → Posts → Add New（或 Pages → Add New），打开的就是 Gutenberg 编辑器
- 三种加区块的方式：
- 点内容区域下方或区块之间出现的 (+) 按钮
- 直接在空行输入
/，接着打字（比如打/image），编辑器会即时列出匹配的区块类型，选中按 Enter 插入 - 左上角工具栏的 (+) 图标，打开完整区块库，按分类浏览
常用区块类型
| 区块 | 用途 |
|---|---|
| Paragraph（段落） | 最基本的文字区块，默认新建内容就是这个 |
| Heading（标题） | H1-H6，注意一篇文章只该有一个 H1（通常是标题本身），正文小标题用 H2/H3 |
| Image（图片） | 单张图片，可设对齐方式、加说明文字 |
| Gallery（图库） | 多张图片组成的相册墙 |
| List（列表） | 有序/无序列表 |
| Columns（分栏） | 把内容分成 2-6 栏并排显示，常用来做图文并排、卡片式排版 |
| Buttons（按钮） | 一个或一组可点击按钮，能设链接、颜色、圆角 |
| Table（表格） | 简单表格，适合放对比数据 |
| Cover（覆盖图） | 图片/影片背景 + 文字叠加，常用来做 Hero 区块 |
| Media & Text（图文） | 一张图 + 一段文字并排，Cover 和 Columns 的简化版 |
排版怎么调整
- 每个区块选中后，上方会浮出该区块专属的工具栏（对齐、加粗、加链接等），右侧栏（Block 面板）能调更细的设置（颜色、间距、宽度）
[截图：选中一个区块后浮出的顶部工具栏，以及右侧 Block 设置面板]
- 拖动排序：把鼠标移到区块左边缘，出现六个点的图标（拖动手柄），按住拖到想要的位置；也可以选中区块后用工具栏上的上/下箭头移动
- List View（列表视图）：点顶部工具栏的列表图标，能用大纲的方式看到整篇文章的区块结构，对内容多、区块嵌套深的页面（比如 Columns 里面还有 Columns）特别有用，比在编辑区里一个个找方便
[截图：List View 展开的区块大纲面板，显示嵌套的区块层级结构]
- 换行技巧：Shift + Enter 是同一个区块内的强制换行（不会新建一个段落区块）；Ctrl/Cmd + K 快速给选中文字加链接
📌 Gutenberg 本身是免费的，不用额外装插件；如果用的主题是"区块主题"（Block Theme），还能进一步用 Full Site Editing 编辑页首页尾和整站模板，这部分内容不在本篇展开。
常见误区
- ❌ 每次都要新建段落区块才打字——直接在最后一个区块按 Enter，Gutenberg 会自动新建一个 Paragraph 区块，不用手动点 (+)
- ❌ 一篇文章里用了好几个 H1 标题——SEO 上一篇内容通常只该有一个 H1（一般就是文章标题本身），正文里的小标题应该用 H2/H3
- ❌ 想调整区块顺序时用剪切/粘贴——直接拖拽区块左边的六点手柄，或者用 List View 展开大纲直接拖动，比剪切粘贴更不容易把格式弄乱
- 💡 区块多、结构复杂的页面，先点开 List View 看整体结构，比在画布里一个个滚动找区块更快定位
Sources
Blog / Website：
- How to Use the WordPress Block Editor (Gutenberg Tutorial) — https://www.wpbeginner.com/beginners-guide/how-to-use-the-new-wordpress-block-editor/
官方文档：
- Block Editor Handbook — https://developer.wordpress.org/block-editor/