3.3 KiB
3.3 KiB
区块的标记表示
区块通过独特的基于HTML的语法存储在数据库或HTML模板中，这种语法以HTML注释作为清晰的区块分隔符。这确保了区块标记在技术上是有效的HTML。
以下是定义区块标记的几条准则：
- 核心区块以
wp:前缀开头，后跟区块名称（例如wp:image）。值得注意的是，core命名空间被省略。 - 自定义区块以
wp:前缀开头，后跟区块命名空间和名称（例如wp:namespace/name）。 - 注释可以是单行、自闭合或HTML内容的包装器。
- 区块设置和属性以JSON对象形式存储在区块注释内部。
以下是图像区块的简化标记表示：
<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
<img src="source.jpg" alt="" />
</figure>
<!-- /wp:image -->
区块标记在区块编辑器和前端显示区块时都至关重要：
- WordPress在编辑器内分析区块标记以提取其数据，并向用户呈现可编辑版本。
- 在前端，WordPress再次解析标记以提取数据并渲染最终HTML输出。
有关区块数据在WordPress中如何解析的深入探讨，请参阅数据流文章。
当区块保存时，会执行save函数（在客户端注册区块时定义）以生成存储在数据库中的标记，并用区块分隔符注释包裹。对于动态渲染的区块（通常将save设置为null），仅保存带有区块属性的占位符注释。
以下是动态渲染区块（save = null）的标记表示。请注意，除了注释外没有HTML标记。
<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->
当区块具有save函数时，区块编辑器会检查save函数创建的标记是否与保存到数据库的区块标记相同：
如上例所示，动态渲染区块的存储标记非常简洁。通常，这只是一个包含区块属性的分隔符注释，不受区块编辑器验证的约束。这种方法反映了这些区块的动态特性，实际HTML在服务器端生成，不存储在数据库中。
附加资源
- 数据流与数据格式
- 静态与动态区块：有何不同？ | 开发者博客
- 区块弃用教程 | 开发者博客
- 模板入门 > 区块标记 | 主题手册