EP214-215. “customTemplates 注册空白模板与 Block 自由拼装”

"customTemplates": [
    {
      "name": "emptycanvas",
      "postTypes": ["page"],
      "title": "Empty Canvas"
    }
  ]

（如果这个属性写在其他属性上方，记得给数组结尾的方括号后面补一个逗号。）

这是这门课 Block Theme 章节的最后一讲：新建一个「空白模板」（empty-canvas.html），只包含一个 wp:post-content（自动输出用户在这个页面/文章里实际添加的所有内容），完全不含页头/页脚/任何固定结构。配合 theme.json 的 customTemplates 声明，站点所有者可以在编辑任意一个页面时，从「模板」下拉菜单里手动切换成这个空白模板——效果是这一篇内容想用什么 Block 就用什么 Block（包括这一章做的所有自定义 Block：Banner、Slideshow、Header、Footer 等），完全自由拼装，连页头页脚都可以按需选择要不要加。这体现了 Block Theme「组合的自由度不只停留在模板层面，也能下放到单篇内容层面」的核心优势，也是整个 Block Theme 章节收尾时想传达的关键思想。

涉及文件

• wp-content/themes/fictional-university-block-theme/theme.json （修改，新增 customTemplates）
• wp-content/themes/fictional-university-block-theme/templates/empty-canvas.html （新建）

代码实现

theme.json：登记自定义模板，让编辑器「切换模板」菜单能识别到：

{
  "customTemplates": [
    {
      "name": "emptycanvas",
      "postTypes": ["page"],
      "title": "Empty Canvas"
    }
  ],
  "version": 2,
  "styles": { /* ...不变... */ },
  "settings": { /* ...不变... */ }
}

templates/empty-canvas.html（新建，唯一内容就是自动输出用户实际添加的内容）：

<!-- wp:post-content /-->

关键改动点：

• customTemplates 的三个字段：name 是这个自定义模板的内部标识（要跟 templates/ 目录下对应的文件名一致，比如这里文件叫 empty-canvas.html，name 用 emptycanvas）；postTypes 是一个数组，声明这个自定义模板可以被哪些文章类型使用（这里只允许 page，意味着写文章时的模板选择器不会出现它，只有编辑「页面」时才能选到）；title 是在编辑器「切换模板」下拉菜单里显示给用户看的名字
• wp:post-content 是核心 Block，作用是「原样输出这篇内容实际编辑的正文」——跟这门课在 EP177 学过的 post-title/post-content 是同一类核心 Block，只是这里把它当成整个模板文件唯一的内容：模板本身不预设任何固定结构（没有页头、没有页脚、没有任何写死的布局），完全交给编辑这篇内容的人自己决定要不要插入 header/footer/banner 等任何 Block
• 使用方式（操作步骤，非代码）：在 WordPress 后台新建一个页面，右侧面板「页面」菜单（不是「区块」菜单）里有一个「模板」选项，点开后除了系统默认提供的几个模板（single/page 这类固定选项），还会看到刚注册的「Empty Canvas」——选中它之后，这篇页面的正文区域就完全是一张空白画布，编辑器里插入什么 Block、按什么顺序排列,前台就原样显示什么
• 验证效果：先随手插入一个段落/列表存成草稿——切换模板前显示混乱的默认排版；切成 Empty Canvas 后，页面正文彻底清空（因为空白模板本身没有任何固定内容），这时候可以自由地插入 Banner Block（嵌套标题/按钮）、再插入 Events and Blogs Block，甚至可以选择性地在最前面插入 Header Block——页头页脚在这种页面里也变成了「要不要插入的可选项」，而不再是模板强制固定的部分
• 这一讲想传达的核心思路：前面所有讲座建立的「模板」（index.html/single.html/page.html 等）是「按 URL 类型统一预设默认结构」的层级；而 Empty Canvas 这种自定义模板，把这种组合的自由度从「模板级别」下放到了「单篇内容级别」——同一个文章类型（比如 page）可以有的页面用标准 page.html 模板（走固定的面包屑/子页面列表结构），也可以有的页面单独选成 Empty Canvas（完全自由拼装，适合落地页这类不需要标准结构的场景）
• 作者顺手提到的一个延伸思路（没有实现）：如果想让 Header Block 也能按需定制（比如某些页面不想显示左上角 Logo），可以把它从纯占位 Block 升级成带真正编辑器交互的 JSXBlock，加一个「是否显示 Logo」的开关属性——这只是留给读者自己练习延伸的想法,不是这一讲要实现的内容

常见坑

• 只新建了 templates/empty-canvas.html 文件，没有在 theme.json 里登记 customTemplates——较新版本 WordPress 的「切换模板」菜单不会认得到这个模板文件,选不到它
• customTemplates 里 name 字段跟实际的模板文件名对不上——WordPress 找不到对应的文件，模板切换后可能白屏或报错
• 以为空白模板只能用来放核心 Block——完全可以（也应该）自由使用这一章建立的所有自定义 Block（Banner/Slideshow/Header/Footer 等），空白模板的意义只是「不预设固定结构」，不是「限制只能用核心 Block」

[截图：编辑页面时右侧"页面"面板的模板下拉菜单里出现新注册的 Empty Canvas 选项，以及切换后完全空白、自由插入 Banner/Header 等 Block 拼装出的页面效果]

延伸 / 后续讲座会用到

这一讲是 Block Theme 章节的收尾。下一章「Keeping Blocks Organized」会把这一整章用自建样板代码（JSXBlock/PlaceholderBlock）搭建的 Block Theme，改造成 2024 年官方推荐的最新标准做法（block.json、多 Block 统一管理与构建流程等）。

Sources

Udemy：

• Become a WordPress Developer: Unlocking Power With Code — Section 28, EP214, EP215