区块使用独特的基于 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 函数创建的标记是否与保存到数据库的区块标记完全相同：

  • 差异将触发 验证错误，通常是由于 save 函数的输出发生变化所致。
  • 开发人员可以通过实施 区块弃用 来解决潜在的验证问题以应对变化。

如上例所示，动态渲染的区块存储的标记非常少。通常，这只是一个包含区块属性的分隔符注释，不受区块编辑器的验证约束。这种方法反映了这些区块的动态特性，其中实际的 HTML 是在服务器端生成的，并不存储在数据库中。

其他资源