EP484-485. “Pages & Post 编辑器入门（Gutenberg）与常用 Blocks”
🔒 登录后可标记已读- Gutenberg 里每一段文字、每张图片、每个按钮，都是一个独立的 Block——整个页面就是这些区块从上到下堆出来的
- Heading 的数字越小字号越大，H1 才是最大的标题，跟直觉容易反过来
- Block 种类多到眼花，但成本很低——不满意直接删掉重加，不用怕试错
重点内容
EP484. Gutenberg 编辑器界面导览
进入方式：WordPress 后台 → Pages → Add New（Post 的编辑器界面和用法完全一样）
核心概念：Block（区块）
- 编辑器里的每一段内容——一段文字、一张图片、一个按钮、一个分栏——都是一个独立的 Block。
- 整个页面/文章就是由一个个 Block 从上到下堆叠组成的。
顶部工具栏（从左到右）
| 按钮 | 作用 |
|---|---|
| Add Block（顶部的 +） | 添加新区块，效果跟区块左侧的 + 一样，作者更推荐用区块左侧的 +，因为能直接看到会插入到哪个位置 |
| Undo / Redo | 撤销 / 重做 |
| Content Structure（i 图标） | 显示字数、标题数、段落数、区块数统计，方便控制文章长度 |
| Block Navigation | 列出页面里所有区块，方便直接跳转到某一个区块（图片多的时候特别好用） |
| Elementor 编辑器入口 | 如果主题带了 Elementor 插件会显示，本课不使用 |
右上角功能
- Save Draft：存草稿，不发布，可以随时回来继续编辑。
- Preview：在新标签页预览当前效果（未发布也能预览）。
- Publish：发布页面/文章，点击后会弹出发布前确认（见下方 Pre-publish checks）。
- Settings（齿轮图标）：开关右侧的设置面板。
右上角「更多工具与选项」菜单（三个点）里的设置：
- Top Toolbar：把区块的编辑工具条从"贴着区块显示"改成固定显示在页面顶部。两种模式看个人习惯，作者偏好贴着区块显示（更容易找到）。
- Spotlight Mode：聚光灯模式，正在编辑的区块保持原色，其他区块变灰，帮助专注。
- Fullscreen Mode：全屏编辑，去掉干扰，作者推荐使用。
- Visual Editor / Code Editor 切换：Visual 是正常所见即所得模式；Code Editor 会把所有内容显示成底层代码（区块本质上都是代码，只是 Visual 模式帮你隐藏了）。课程里大部分涉及代码的地方都是直接复制粘贴，不需要自己写。
- Manage All Reusable Blocks：管理所有保存过的「可复用区块」（Reusable Block）。
- Keyboard Shortcuts：查看快捷键列表（复制区块、删除区块等常用操作都有对应快捷键）。
- Copy All Content：一键复制页面/文章的全部内容。
- Options：勾选/取消要显示的面板，比如 Permalink、Featured Image、Discussion、Page Attributes，还有主题自带的设置面板（例子中是 OceanWP Settings）。不用的面板可以关掉，界面会更干净，尤其是装了很多插件、面板变多之后。
- Enable Tips：开启操作提示，编辑过程中会弹出使用小贴士。
- Enable Pre-publish Checks：开启后点击 Publish 会先跳出确认框（问你是否要发布、可见性和发布方式），关掉的话点 Publish 就直接发布，不会再确认。
Document 面板（右侧，"Blocks" 和 "Document" 两个 tab 里的 Document）
| 设置项 | 作用 |
|---|---|
| Visibility（可见性） | Public（公开）/ Private（仅管理员和有权限的人可见）/ Password Protected（需要密码才能查看） |
| Publish（发布时间） | 可以设置为过去的日期（补发历史文章）或未来的日期（定时发布） |
| Pending Review | 开启后文章会进入"待审核"状态，需要审核通过才能真正发布 |
| Move to Trash | 移到回收站 |
| Permalink（固定链接） | 页面的网址（URL）后缀，例如把默认的 "about-me" 改成 "info"，网址就会变成 域名/info；下方有预览可以直接查看效果 |
| Featured Image（特色图片） | 给这篇文章/页面设置一张代表性图片（比如博客文章的封面图） |
| Discussion | 开启或关闭这篇内容的评论功能 |
| Page Attributes | 选择页面模板（不同主题有不同模板可选，例：Full Width、Landing Page）；设置 Parent Page（父页面）——如果一个页面是另一个页面的从属内容（例："About Us" 下面有 "Team"、"Booking"、"Pricing" 等子页面），可以把父页面指定为 "About Us"，让它变成 Child Page（子页面）；还可以设置 Order（子页面之间的排列顺序） |
📌 "Blocks" 和 "Document" 是右侧面板的两个 tab，Document 讲的就是上面这些整篇内容的设置；Blocks tab 是针对当前选中区块的设置，会在 EP485 详细讲。
[截图：Gutenberg 编辑器整体界面，标注顶部工具栏和右侧 Document 面板]
EP485. 常用 Blocks 详解
添加 Block 的两种方式
- 点击区块左侧的 + 号（作者推荐，能精确控制插入位置：加在上面还是下面）。
- 点击顶部工具栏的 + Add Block，效果一样。
- 直接在搜索框输入关键词找区块，例如搜 "column" 找分栏、搜 "YouTube" 找 YouTube 嵌入——熟悉之后这是最快的方式。
Block 分类一览
*Most Used（最常用）*
- Paragraph（段落）、Heading（标题）、Image（图片）、Gallery（图库）、Verse（诗歌格式文本）、Archives（归档）、Quote（引用）、Button（按钮）、Columns（分栏）等最高频使用的区块。
*Inline Elements（内联元素）*
- 例如让文字和图片并排显示（文字在左、图片在右）的排版方式。
*Common Blocks（常用区块）*
- Paragraph：最基础的区块，直接打字不做任何转换就是段落。
- Heading：标题，数字越小字号越大（Heading 1 最大）。
- Image：单张图片。
- Gallery：图库，可以一次上传多张图片，会按上传顺序从左到右排列。
- Quote：引用文字。
- List：列表。
- Audio：音频文件。
- Cover：带背景图/背景色的封面区块，常用来做首屏大图。
- File：文件下载区块。
- Video：视频文件。
*Formatting（格式类）*
- Verse、Code（代码片段）等格式化文本。
- Classic Editor：给习惯老版 WordPress 编辑器的用户保留的区块，插入后区块内部就是老版编辑器界面。如果有旧插件跟新的 Gutenberg 不兼容，可以用这个区块继续用老插件。新手一般用不到。
- Custom HTML：直接写 HTML 代码的区块，涉及编程，本课不涉及。
- Preformatted：让区块内所有文字保持同一种格式。
- Pull Quote：突出引用，比普通 Quote 区块窄，常用于在文章中间做视觉强调。
- Table：表格，适合展示价格对比等结构化信息（例如像 Bluehost 那种基础版/进阶版/高级版套餐对比）。
*Layout Elements（版式类）*
- Button：按钮，例如"立即购买"按钮。
- Columns：多栏布局。
- Media & Text：图文并排。
- Page Break：分页。
- Separator：分隔线。
- Spacer：留白间距。
*Widgets（小工具类）*
- 每个 widget 区块都对应一个特定功能，插入后整个区块会变成该功能的展示：
- Archives：显示归档列表。
- WP Forms / Contact Form：显示表单插件生成的联系表单。
- Shortcode：插入短代码。
- Categories：显示分类列表。
- Latest Comments：显示最新评论。
- Latest Posts：显示最新文章列表。
*Embeds（嵌入类）*
- 直接粘贴链接就能嵌入外部内容，非常简单：YouTube、Instagram、Facebook 等平台的帖子/视频链接粘贴进对应区块，内容会直接显示在页面里，不需要写任何代码。
操作一个 Block 的常见动作
- 切换区块类型（Transform）：选中区块后，工具条最左侧的图标可以把当前区块转换成同类的其他区块，例如把 Image 转成 Cover、File 或 Media & Text，内容不会丢失。
- 对齐 / 宽度：图片类区块可以设置左对齐、居中、右对齐，也可以设为 Wide Width（更宽）或 Full Width（撑满页面宽度）。
- More Options（工具条最右边的三个点）：
- Hide block settings（隐藏该区块的设置面板）
- Duplicate（复制这个区块）
- Insert Before / Insert After（在这个区块的上面/下面插入新区块）
- Edit as HTML（把这个区块变成 HTML 代码来编辑）
- Add to Reusable Blocks（存成可复用区块，之后可以在 Manage All Reusable Blocks 里重复调用，适合经常重复用的内容模块）
- Remove Block（删除这个区块）
- 右侧 Block 设置面板：选中区块后，右侧栏会出现该区块专属的设置项。例如：
- Image 区块：Alt Text（图片替代文字，给搜索引擎看，后面 SEO 部分会细讲）、Image Size（Thumbnail/Medium/Full Size）、宽高、点击后跳转链接、Advanced 里的自定义 CSS Class（涉及代码，本课不需要）。
- Paragraph 区块：字号（Font Size）、Drop Cap（首字母放大效果）、文字颜色、背景颜色等。
- 拖拽排序：
- 方式一：把鼠标移到区块上，点击上/下箭头，一步步移动位置。
- 方式二：把鼠标移到区块左侧的六个点（拖拽手柄）上，按住并拖拽到想要的位置，直接调整顺序（更快）。
- 删除区块：选中区块 → More Options（三个点）→ Remove Block。
动态最近使用图标：区块左侧 + 号旁边会显示三个图标，代表你最近用过的区块类型（比如经常加图片、加标题，这几个类型就会常驻在这里方便快速取用）。
📌 Blocks 数量很多，这篇笔记只列出课程实际提到的类型，其余没讲到的建议自己在后台试着点开看看效果，成本很低（不满意直接删除区块即可）。
[截图：Add Block 面板，展示 Most Used / Common Blocks / Formatting / Layout Elements / Widgets / Embeds 各分类]
[截图：选中一个区块后，右侧出现的 Block 专属设置面板]
核心概念速查
| 术语 | 解释 |
|---|---|
| Block（区块） | Gutenberg 编辑器的基本内容单位，一段文字/一张图/一个按钮都是一个 Block |
| Reusable Block（可复用区块） | 保存下来可以在其他页面/文章里重复插入的区块 |
| Permalink（固定链接） | 页面/文章的网址后缀部分 |
| Parent Page / Child Page（父页面/子页面） | 页面之间的从属关系，用于组织多层级内容结构（如 About Us 下的 Team、Pricing 子页面） |
| Featured Image（特色图片） | 代表这篇内容的封面图，常用于博客文章列表展示 |
行动步骤
- 打开 Pages → Add New，熟悉一遍编辑器顶部工具栏和右侧 Document 面板的每一项设置。
- 试着开关 Top Toolbar / Spotlight Mode / Fullscreen Mode，找到自己喜欢的编辑视图。
- 依次试用 Paragraph、Heading、Image、Gallery、Columns、Button 这几个最常用的 Block。
- 练习：用区块左侧 + 号插入一个 Block，再用拖拽手柄把它移动到别的位置，最后删除它。
- 熟悉后再进入 EP486，用这些 Block 实际编辑首页内容。
常见误区
- 以为顶部的 + Add Block 和区块左侧的 + 是两个不同功能，其实效果一样，只是区块左侧的更方便看清插入位置。
- 混淆 Heading 的数字大小逻辑：Heading 数字越小字号越大（H1 最大），不是数字越大越大。
- 把 Classic Editor / Custom HTML 当成新手必学内容——这两个是给老用户或懂代码的人用的，新手可以先跳过。
Sources
Udemy（课程 transcript）：
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 484 Pages & Post Editor Introduction (Gutenberg)
- The Completed Digital Marketing Guide 27 in 1 — Section 33, Lecture 485 Pages & Post Blocks