块编辑器开发文档

客户端导航兼容性

💡 云策文档标注

概述

本文档详细介绍了如何确保 WordPress 块和交互区域与客户端导航兼容。客户端导航通过仅更新页面变化部分实现无完整页面重载的页面过渡,但要求所有交互区域兼容,否则可能导致状态丢失或渲染错误。文档重点围绕 block.json 声明、兼容性要求和实现指南展开。

关键要点

  • 客户端导航依赖交互区域兼容性,不兼容区域可能导致静默失败或回退到完整页面重载。
  • 兼容性通过 block.json 中的 supports.interactivity.clientNavigation 属性声明,必须显式设置,默认值为 false。
  • 非交互块和使用 Interactivity API 的交互块通常兼容,但需遵循特定指南;使用原生 JavaScript 或其他库的块不兼容。
  • 确保兼容性需注意 CSS、JavaScript 和 HTML 方面,如避免动态注入样式、使用脚本模块、保持 HTML 结构一致等。
  • 提供兼容性验证方法和检查清单,帮助开发者测试和确认块与客户端导航的兼容性。

代码示例

{
    "supports": {
        "interactivity": {
            "clientNavigation": true
        }
    }
}

注意事项

  • 即使块看似兼容,也必须在 block.json 中显式声明 clientNavigation 属性,否则 WordPress 无法识别其兼容性。
  • 使用 wp_unique_id() 生成的 CSS 选择器可能导致兼容性问题,建议改用 wp_unique_id_from_values()。
  • 客户端导航仅支持脚本模块(