这是排版测试样本，全部使用 Gutenberg 原生区块（core/heading、core/paragraph、core/list、core/quote、core/table、core/code、core/separator）。中文与 English mixed content 都放了一些，方便同时看中文行高和英文的 letter-spacing / capitalize 效果。

Heading 1 一级标题

一级标题下方的正文。Hommy Enterprise (Xinhui) Co., LTD. 成立于 1999 年，专注制冷与食品加工设备。这一段用于观察正文与标题之间的间距是否舒服，以及正文颜色（当前被设成纯黑）在不同背景下的可读性。

Heading 2 二级标题

二级标题是文章里最常用的一级。新首页里 h2 用的是 800 字重 + 深蓝到亮蓝的渐变文字，这一节就是用来对比「纯色深蓝」和「渐变」两种观感的。段落里夹一个站内链接，看链接色和 hover 是否跟正文分得开。

Heading 3 三级标题

三级标题通常用于小节。这里的正文用来检查行高：中文在 1.75 行高下比较松，英文在 1.6 下更紧凑，两者混排时会以同一个 line-height 渲染，所以取值要兼顾。

Heading 4 四级标题

四级标题一般用在要点分组的开头，字号接近正文加粗，主要靠颜色和字重区分层级。

Heading 5 五级标题

五级标题已经比较少见，字号通常和正文一样大，只靠字重和颜色区分。

Heading 6 六级标题

六级标题是最小一级，多数主题会把它做成小号大写或带字距的标签样式。

列表、引用与表格

下面三种是 Markdown 里最常出现的结构，纯文本粘贴进 Gutenberg 时就会自动变成这些区块。

• 无序列表第一项 —— Ice cream & frozen desserts equipment
• 无序列表第二项 —— Hard Ice Cream Machines (Gelato Makers)
• 无序列表第三项 —— Slush Machines & Smoothie Machines

1. 有序列表第一步 —— 确认杯量与出料速度
2. 有序列表第二步 —— 现场试机并记录温度曲线
3. 有序列表第三步 —— 出运前整机满负荷跑 8 小时

引用块用来强调一句话。新首页里对应的样式是蓝色左边框加浅蓝底色，字色压深一档。

Hommy 排版测试

代码与行内代码

行内代码长这样：wp_get_global_stylesheet()，代码块如下。

// 检查某个 CSS 变量最终生效的值
const s = getComputedStyle(document.documentElement);
console.log(s.getPropertyValue('--wp--preset--color--heading'));

最后一段：测试连续两段之间的间距，以及段末标点、英文斜体 italic text 和加粗 bold text 的混排效果。

Hero 大字测试：整行渐变 + 关键词换色

下面三个 h2 是同一个标题的三种做法。整行的蓝色渐变都来自 CSS（Colors 面板只能给纯色，做不到渐变）；差别只在 “vending machine” 这三个词怎么上色。

做法 A：关键词用调色板颜色（纯原生，编辑器里点得出来）

Good vending machine Factory

编辑器操作：选中 “vending machine” → 工具栏下拉箭头 → 高亮 → 切到「文字」页签 → 选琥珀色。区块存下来就是一个 <span class="has-inline-color has-luminous-vivid-amber-color">，纯原生，不写一行代码。

做法 B：关键词用自定义色值（纯原生，取色器里手填）

Good vending machine Factory

同一个入口，取色器里直接填 #f59e0b。一样是原生操作，只是颜色不进调色板。

做法 C：关键词自己也是渐变（原生做不到，要 CSS 类）

Good vending machine Factory

内联文字色只能是纯色，给不了渐变。要做成「关键词是渐变黄」，只能给这个词包一个 <span> 加自定义 class，再在 CSS 里写渐变。编辑器里得走「编辑为 HTML」，或者直接用自定义 HTML 块写。