WordPress 区块图案（Block Patterns）实战：像搭积木一样排版
如果你做过古腾堡（Block Editor）开发，一定遇到过这种尴尬：每个页面都要手动拼”封面图 + 标题 + 按钮”那一套，重复又易错。WordPress 5.4 引入的区块图案（Block Patterns）就是为解决这个问题而生的——它把若干区块预配置成一个”版式模块”，用户在编辑器里一点就插入，文本、图片、链接都能改。主题和插件作者还能用 PHP 注册自己的图案，做到国际化与动态内容。
图案（pattern）本质就是”预配置好的一组区块”。它和”可复用区块（Reusable Block）”不同：主题注册的图案默认是”非同步”的——插入后变成独立副本，改一处不影响别处；而可复用区块是全局同步的。
两种注册方式
WordPress 提供了两条路，官方更推荐第一种：
- 放进主题的 /patterns 目录：写一个带文件头的 PHP 文件，WordPress 自动识别并注册。改起来最直观。
- 调用 register_block_pattern()：在代码中手动注册，适合需要条件判断或动态生成的场景。
用 /patterns 目录时，文件头长这样（关键字段：Title、Slug 命名空间、Categories、Description、Keywords、Block Types）：
<?php
/**
* Title: 欢迎 Hero
* Slug: my-theme/welcome-hero
* Categories: hero, featured
* Description: 全宽封面 + 居中标题与段落
*/
?>
<!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
<div class="wp-block-cover alignfull">
<div class="wp-block-cover__inner-container">
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center">欢迎来到我的站点</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">这里分享我的喜好、爱好与偶尔的碎碎念。</p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->
手动注册与分类的 PHP 写法
需要更灵活的控制时，在 init 钩子里调用函数：
function my_theme_register_patterns() {
register_block_pattern(
'my-theme/two-buttons',
array(
'title' => __( '两个按钮', 'my-theme' ),
'description' => _x( '左侧实心、右侧描边的两个横向按钮。', '图案描述', 'my-theme' ),
'content' => "<!-- wp:buttons -->...</wp:buttons>",
)
);
register_block_pattern_category(
'hero',
array( 'label' => __( 'Hero', 'my-theme' ) )
);
}
add_action( 'init', 'my_theme_register_patterns' );
注意：register_block_pattern() 与注册分类都应在 init 钩子里调用；取消注册用 unregister_block_pattern()。
进阶玩法：把图案绑到区块类型
图案不只能”手动插入”，还能绑定到某个区块类型。比如把一个画廊图案绑定到核心 Gallery 块，用户每次插入 Gallery 时就能直接选你的版式。做法是在文件头加 Block Types 字段，填带命名空间的区块名（如 core/gallery）。
最实用的两类绑定：
- Query Loop 图案：绑定
core/query，让用户一键替换文章列表的布局（双栏网格、卡片流等）。 - 模板部件图案（Template Part）：绑定
core/template-part/header或/footer，在站点编辑器里直接替换整站页眉页脚。
- 在文章编辑器里把区块拼成你想要的版式（建议用 Group/Cover 包一层，方便整段移动）。
- 点右上角 ⋮ → “复制所有区块”，拿到区块标记。
- 在主题的 /patterns 目录新建一个 php 文件，填好文件头，把标记粘进 <?php 之后的部分。
- 到外观 → 编辑器 → 图案 里确认它出现，并测试插入后能否正常编辑。
- 如需在多个分类下出现或可被搜索，补上 Categories 与 Keywords 字段。
生产环境要注意的坑
图案会自动继承主题的全局样式（theme.json / 站点编辑器设置）。但很多第三方图案假设主题定义了 spacingSizes 的 20~80 预设，如果你的 theme.json 缺了这些间距预设，粘贴后版式可能”塌掉”。上线前务必在真实主题里预览。
- 包一层容器：用 Group/Cover 包住整个图案，方便整段改背景色、整段拖拽，也便于挂自定义 CSS 类。
- PHP 的优势：主题里的图案能用 PHP 做国际化（__()）、动态拼 URL、条件注册——这是它比”纯区块”强的地方。
- 别滥用同步图案：要随主题分发，就把”同步”关掉，行为才和主题图案一致。
图案和可复用区块（Reusable Block）有什么不同？
可复用区块是全局同步的，改一处处处变；主题注册的图案默认是”非同步”副本，插入后各自独立。需要随主题分发、又不想被全局改动牵连时，选图案。
一定要写代码才能做图案吗？
不一定。在外观 → 编辑器 → 图案 里用可视化编辑器就能创建、管理和导出，满意后再把标记拷进主题 /patterns 目录。
为什么我粘贴的第三方图案间距乱了？
多半是主题 theme.json 缺少 spacingSizes 的 20~80 预设。补齐默认间距预设，或用你自己的间距体系逐一核对。
图案能用于模板吗？
能。图案既插进文章内容，也能在站点编辑器里直接放进模板（如页眉页脚、文章列表区）。
小结
区块图案把”排版经验”沉淀成可复用的版式模块，是古腾堡时代做主题和页面最划算的一笔投入。先从一个高频重复版式（Hero、文章列表、页脚）做起，用可视化编辑器搭好再落进主题，既快又稳。
相关阅读：
评论 (0)