博客
Gutenberg FSE：2026 年 WordPress 设计的未来
AI 生成的 Gutenberg 块如何将您的网站提升到新的水平 — 以及全站编辑为何改变了一切。
全站编辑已登陆 WordPress 5.9。三年后，大多数机构仍未正确使用它 — 而那些正确使用的机构则拥有了重要的竞争优势。
FSE 到底意味着什么
在 FSE 之前，WordPress 主题通过 PHP 模板控制页眉、页脚和全局布局。Gutenberg 只处理内容区域。您可以使用块编辑博客文章，但导航被锁定在 PHP 文件中。
FSE 改变了这一点。使用块主题，网站的每个部分 — 页眉、页脚、侧边栏、归档模板、单篇帖子布局 — 都可以在 Gutenberg 编辑器中使用块进行编辑。布局更改无需 PHP。
这对 AI 生成很重要，因为它意味着整个网站可以表示为块 JSON。没有混合系统，其中一些部分是 PHP 模板，一些是块。一切都是块，一切都是 JSON，一切都可以以编程方式生成和编辑。
PAGEnza 如何使用 FSE
当 PAGEnza 生成网站时，它不仅仅是创建一个主页。它会创建一个完整的块主题，包含：
templates/index.html— 默认模板templates/single.html— 单篇帖子布局templates/archive.html— 博客/类别列表templates/404.html— 错误页面parts/header.html— 可重复使用的页眉块parts/footer.html— 可重复使用的页脚块theme.json— 全局样式（颜色、排版、间距）
所有这些都从相同的 Design Mandate 生成。为主页定义的调色板与 theme.json 全局样式中使用的调色板相同。为英雄部分选择的字体三元组与块主题样式表中加载的字体三元组相同。
这是 FSE 对 AI 生成的关键优势：一致性由系统强制执行，而不是寄希望于设计师记得在所有地方应用相同的字体。
theme.json — 您从未编辑过的最重要的文件
theme.json 是一个配置文件，用于定义块主题的全局设计系统。它控制：
- 调色板 — 出现在编辑器颜色选择器中的命名颜色
- 排版 — 字体系列、大小、行高
- 间距 — 填充和边距控件使用的间距比例
- 边框半径 — 默认的圆角值
- 布局 — 内容宽度、宽幅宽度
当 PAGEnza 生成网站时，theme.json 是根据 Design Mandate 以编程方式构建的。ink、bg1、bg2 和 accent 颜色被注册为命名调色板颜色。字体三元组被注册为字体系列，并带有正确的 Google Fonts @import URL。
结果是，当客户打开 Gutenberg 编辑器更改文本时，颜色选择器仅显示四种品牌颜色 — 没有其他。字体选择器显示三种选定的字体。间距控件使用系统比例。设计系统在编辑器级别强制执行。
"在 Gutenberg 中实时编辑" 到底意味着什么
PAGEnza 生成的每个网站都是一个启用了 Gutenberg FSE 的实时 WordPress 安装。客户可以：
- 直接点击任何文本进行编辑
- 通过点击并从品牌调色板中选择来更改部分背景
- 通过拖动块来重新排列部分
- 从块插入器添加新部分
- 通过点击占位符来更改图像
他们不会因为选择非品牌颜色而意外破坏设计系统，因为唯一可用的颜色是四种品牌颜色。他们不会选择不匹配的字体，因为只注册了三种品牌字体。
这就是使 AI 生成的网站对真实客户实用的原因 — 在交接后，使设计正常工作的约束条件得以保留。
块覆盖问题
FSE 功能强大，但存在覆盖问题。并非所有设计模式都能在核心 Gutenberg 块中清晰地表达。复杂的布局、交互式组件和自定义数据显示通常需要自定义块或第三方插件。
PAGEnza 通过两种方式处理此问题：
对于布局：我们结合使用 Group、Cover、Columns 和 Media & Text 块，并仔细控制属性。仅使用这四种块类型就可以实现大约 95% 的营销页面布局。
对于交互式组件：Plugin Builder 将自定义 Gutenberg 块生成为 PHP 插件。定价表、预订表单、推荐滑块 — 这些被生成为与 FSE 编辑器集成的真正注册块，而不是附加到侧面的短代码。
目标是让客户需要编辑的所有内容都可以在可视化编辑器中进行编辑，而无需接触代码。