本文约 4,642 字，预计阅读 12 分钟。文中命令与配置均经过实测，可直接参考执行。
引言：换个主题，文章里的引用块就裸奔了
写教程类文章离不开引用、表格、代码块这三种区块。但很多主题（尤其是轻量主题和默认主题）对这些区块只提供最基础的结构，样式几乎等于没有：引用块只是斜体缩进，看不出是引用；表格没有边框线，数据糊成一团；代码块没有背景和等宽字体，跟普通段落混在一起。读者扫一眼，重点信息全部丢失。
原因不难理解：WordPress 的区块样式分两层。核心区块自带一套最小可用样式（wp-block-* 类），但具体观感（边框、配色、圆角、滚动条）由主题负责。如果主题没有 add_theme_support( 'wp-block-styles' )，也沒写对应 CSS，区块就维持最低限度的样式。本文给出补齐方案，并介绍如何用 register_block_style() 给区块增加可选样式变体，让编辑文章时就能挑样式。
原理分析：区块样式的三层来源与覆盖关系
| 层级 | 来源 | 是否随主题变化 |
|---|---|---|
| 核心结构样式 | wp-includes/css/dist/block-library/style.css |
否 |
| 主题支持 | add_theme_support( 'wp-block-styles' ) |
是 |
| 主题自定义 CSS / theme.json | 主题样式表、styles.blocks |
是 |
add_theme_support( 'wp-block-styles' ) 会启用核心的「主题样式」补充包（block-library/theme.css），给引用、表格、分隔线等区块加上更完整的默认观感。它解决的是「有没有」，不解决「好不好看」。真正要出效果还是得自己写 CSS，选择器统一用 .wp-block-* 系列类名。
区块样式还有一个进阶玩法：样式变体（Block Style Variations）。用 register_block_style() 注册一个变体，作者在编辑器右侧「样式」面板里就能选择，前台渲染时该变体会作为 is-style-xxx 类加到区块上，主题写对应 CSS 即可。这比让作者手动加自定义类友好得多。
结构层面的调整则用 render_block 过滤器（WordPress 5.7 起对所有区块生效，也可用 render_block_{$name} 精确到某类区块）。比如在表格区块外面套一层可横向滚动的容器，解决移动端表格溢出——这个需求纯 CSS 做不到，必须改 HTML 结构。
保姆级实操
- 启用主题样式支持：
add_theme_support( 'wp-block-styles' )，先拿到核心的补充样式。 - 写引用块样式：左边框 + 内边距 + 弱化文字色，注意
is-style-large变体的处理。 - 写表格样式：边框合并、表头底色、斑马纹，并给移动端加横向滚动容器。
- 写代码块样式：等宽字体、深色背景、
overflow-x: auto，注意不要在代码块上做自动换行以外的干预。 - 注册样式变体：用
register_block_style()给引用、表格各加一个变体。 - 用 render_block 包装表格：移动端表格横向滚动必须靠这层容器。
- 后台同步：配套写进编辑器样式表，保证所见即所得。
<?php
// 子主题 functions.php
add_action( 'after_setup_theme', function() {
// 启用核心补充样式，给引用/表格/分隔线一个基础观感
add_theme_support( 'wp-block-styles' );
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor-style.css' );
} );
// 注册区块样式变体，作者可在编辑器里直接选
add_action( 'init', 'mimangfei_register_block_styles' );
function mimangfei_register_block_styles() {
register_block_style(
'core/quote',
array(
'name' => 'highlight',
'label' => '高亮提示',
)
);
register_block_style(
'core/table',
array(
'name' => 'striped',
'label' => '斑马纹',
)
);
}
<?php
// 表格外层包一层滚动容器，解决移动端溢出（纯 CSS 做不到）
add_filter( 'render_block_core/table', 'mimangfei_wrap_table', 10, 2 );
function mimangfei_wrap_table( $block_content, $block ) {
if ( empty( $block_content ) ) {
return $block_content;
}
return '<div class="table-scroll">' . $block_content . '</div>';
}
/* 引用块：左边框 + 弱化文字 */
.wp-block-quote {
border-left: 3px solid #0969da;
margin: 1.5em 0;
padding: 0.4em 0 0.4em 1em;
color: #57606a;
}
.wp-block-quote.is-style-large {
font-size: 1.25rem;
padding: 0.6em 0 0.6em 1.2em;
}
/* 自定义变体：高亮提示 */
.wp-block-quote.is-style-highlight {
border-left-color: #bf8700;
background: #fff8c5;
padding: 1em 1.2em;
border-radius: 6px;
color: #1f2328;
}
/* 表格：合并边框 + 表头底色 + 斑马纹变体 */
.wp-block-table table {
border-collapse: collapse;
width: 100%;
}
.wp-block-table th,
.wp-block-table td {
border: 1px solid #d0d7de;
padding: 8px 12px;
text-align: left;
}
.wp-block-table th { background: #f6f8fa; }
.wp-block-table.is-style-striped tbody tr:nth-child( odd ) {
background: #f6f8fa;
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* 代码块：等宽字体 + 深色背景 + 横向滚动 */
.wp-block-code,
.wp-block-preformatted {
background: #0d1117;
color: #e6edf3;
border-radius: 6px;
padding: 1em 1.2em;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
font-size: 0.9em;
line-height: 1.6;
}
.wp-block-code code {
background: transparent;
padding: 0;
}
常见踩坑
- 只用
add_theme_support( 'wp-block-styles' )就以为够了：它只给基础观感，配色、圆角、滚动仍需自己写。 - 选择器写得太宽：直接写
table { ... }会影响插件输出的所有表格。必须限定.wp-block-table。 - 案例：某站给表格写了
table { width: 100%; }，结果后台插件设置页的表格全被撑变形，排查半天才定位到是前台样式泄漏到了 admin（编辑器样式表被同时注册到后台）。修正为.wp-block-table table并限定只在wp_enqueue_scripts里加载，问题解决。教训：区块样式必须限定作用域，别写裸标签选择器。 - 代码块做了强制换行：给
pre加white-space: pre-wrap会让长行代码折行，复制后格式乱掉。代码块应保持overflow-x: auto横向滚动。 register_block_style()挂错钩子：必须挂在init或之后，挂在after_setup_theme上区块类型尚未注册，变体不生效。render_block过滤器返回空时仍包装：要先判断$block_content非空，否则空区块也会输出空容器，产生多余间距。- 表格横向滚动容器与
align-wide冲突：宽对齐表格包了滚动容器后，宽度计算会出问题。给.table-scroll设置max-width: 100%并配合overflow-x: auto。 - 深色模式下配色不跟随：代码块写死
#0d1117还好，但引用块边框色用变量会更好。配色统一用 CSS 变量，与主题深色模式（Dark Mode）实现方式的配色体系打通。
总结
区块样式是否合格，用一篇文章实测即可：新建一篇包含标题、引用、表格、代码块、列表的文章，不看编辑器直接看前台，若重点信息能在两秒内被扫出来，就算合格。行动清单：启用 wp-block-styles → 逐个补齐引用/表格/代码块的 CSS → 用 register_block_style() 提供变体 → 用 render_block 解决表格移动端滚动 → 同步写进编辑器样式表 → 深色模式下复检配色。做完这轮，再回头看 主题与区块编辑器的样式同步（editor-style），把前台与后台的观感彻底对齐。
