SuperAPI AI 工具集

wordpress-block-editor-fse

前端与建站

查看项目

更新于 10-15 14:17

技能介绍

用途

本技能面向 WordPress 6.7+ 的现代区块开发与全站编辑(Full Site Editing,FSE)。资料指出,FSE 自 WordPress 6.2 起已可用于生产环境,其核心理念是把页眉、页脚、模板等内容都视为区块,而不仅是文章内容。区块主题使用 HTML 模板加 theme.json,取代传统主题的 PHP 文件加 style.css。

主要能力

  • theme.json 配置:集中管理颜色、排版、间距、布局等设计变量,WordPress 会自动生成 CSS 自定义属性(如 var(--wp--preset--color--primary)、var(--wp--preset--font-size--large)、var(--wp--preset--spacing--50))。资料示例使用 theme.json v3(WP 6.7)。
  • 区块主题架构:包含必需文件 style.css(主题元数据)、theme.json、templates/index.html(回退模板),以及可选的 single.html、page.html、archive.html、parts/header.html、parts/footer.html、patterns/ 与 functions.php。
  • 模板与模板部件:以区块标记编写 HTML 模板,支持查询循环(query loop)、分页、文章标题、特色图像、文章内容等区块。
  • 区块样板(Block Patterns):以 PHP 文件定义预设计布局,并可注册样板分类。
  • 自定义区块开发:使用 block.json(Block API v3)定义属性、supports 与渲染方式,支持服务端渲染(render.php)与客户端渲染(React)。
  • 区块支持特性(supports):可启用对齐、颜色、间距、排版、锚点等 WordPress 内置功能。
  • 自定义文章类型与区块编辑器:注册 CPT 与分类法时需设置 show_in_rest => true,并可通过 template 与 template_lock 控制默认区块与结构限制。
  • 开发工作流:使用 @wordpress/scripts 进行构建(wp-scripts start、wp-scripts build)。

使用方式

资料给出的典型流程包括:在 theme.json 中定义设计变量与样式;在 templates/ 与 parts/ 中编写区块模板;在 patterns/ 中定义样板;在 blocks/ 目录下用 block.json 与 render.php 或 index.js 开发自定义区块,并在 functions.php 中通过 register_block_type() 注册;使用 @wordpress/scripts 构建前端资源。

适用场景

资料建议在以下情况使用:新建主题、需要一致的设计系统、希望让非技术用户进行可视化定制。

限制

资料明确不建议在以下情况使用:需要复杂服务端逻辑、团队不熟悉区块、存在大量 PHP 依赖。此外,资料未提供收费、价格、平台支持范围或效果保证等信息。