title: "区块的标记表示" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Fundamentals - Getting Started - Repos

区块的标记表示

区块在数据库或 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 输出。

当区块被保存时，会执行 save 函数——该函数在区块在客户端注册时定义——以生成存储在数据库中的标记，并包裹在区块分隔符注释中。对于动态渲染的区块（通常将 save 设置为 null），只保存带有区块属性的占位符注释。

以下是动态渲染区块（save = null）的标记表示。请注意，除了注释外没有 HTML 标记。

<!-- wp:latest-posts {"postsToShow":4,"displayPostDate":true} /-->

当区块具有 save 函数时，区块编辑器会检查 save 函数创建的标记是否与保存到数据库的区块标记相同：

• 差异将触发验证错误，通常是由于 save 函数输出的更改引起的。
• 开发者可以通过实现区块弃用来解决潜在的验证问题，以应对更改。

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

Additional resources

• Data Flow and Data Format
• Static vs. dynamic blocks: What’s the difference? | Developer Blog
• Block deprecation – a tutorial | Developer Blog
• Introduction to Templates > Block markup | Theme Handbook