云策 WordPress 开发者社区

社区新闻

静态块与动态块：有何区别？

查看官方原文 ↗

WordPress 块编辑器提供两种类型的块：静态块和动态块。这两种块类型的区别在于它们在前端如何渲染。

静态块

静态块是一种在页面保存时其标记已知的内容片段。该块将其内容和标记直接保存在文章内容中。段落块是静态块的一个简单示例。

文章编辑器截图。文章正文包含一个单独的段落块，内容为“If I had a boat, I'd go out on the ocean.”。段落块处于聚焦状态，其上方是编辑工具栏，包含文本对齐选项、加粗、斜体和链接按钮。检查器面板已打开至“块”选项卡。该选项卡顶部显示有关段落块的信息，描述为“Start with the basic building block of all narrative.”

段落内的文字除非内容编辑者手动更改，否则不会改变。内容和标记都是已知的，这使得段落块成为静态块的绝佳示例。其 HTML 标记直接保存到文章内容中。

静态块完全用 JavaScript 编写。save() 函数将块的标记写入 wp_posts 数据库表中文章的 post_content 条目。上面示例的条目将包含确切的标记，外加块指示器内联注释：

<!-- wp:paragraph -->
<p>If I had a boat, I'd go out on the ocean.</p>
<!-- /wp:paragraph -->

块指示器是整体块语法的一部分。WordPress 使用这些 HTML 注释来定义块及其任何属性或元数据。WordPress 解析这些注释以在编辑器和前端显示块，但这些注释永远不会在源代码中渲染。对于静态块，源代码将只包含块指示器内部的标记。

深入探讨

静态块的 save() 函数和保存到数据库的内容彼此紧密相关。文章编辑器运行验证检查，以确保 save() 函数创建的标记与已保存到数据库的标记完全相同。如果存在任何差异，文章编辑器会变得非常“不高兴”并声明该块已损坏。这称为块验证错误。

内容编辑者可以选择尝试块恢复。这将尝试根据块的属性，协调数据库中的内容与块预期保存到数据库的内容。这个恢复过程有时会成功，但并非总是如此。

块验证错误最常见的原因是块的 save() 函数被更新以更改块生成的标记。任何微小的更改，即使是对类名的更改，都可能触发编辑器中的验证错误。

块开发者可以通过添加块弃用来注册块中的更改，从而缓解这些问题。块弃用会记录块标记的先前版本。然后，文章编辑器可以将块的当前内容与先前版本进行比较，并（理想情况下）避免验证错误。

动态块

动态块是一种在页面保存时其标记和确切内容未知的内容片段。这种块可能包含有时效性或依赖于网站其他部分更改的内容。动态块的内容预计会在没有内容编辑者干预的情况下发生变化。因此，动态块的标记在服务器端渲染。

一个简单的例子是核心的站点标题块，它显示网站的名称。此块必须是动态的，因为其内容在页面保存时无法预知。站点标题可以随时通过站点设置更改。

文章编辑器截图。文章正文包含一个单独的站点标题块，内容为“My WPSandbox site.”。站点标题块处于聚焦状态，其上方是编辑工具栏，包含宽度选项、标题级别和文本对齐选项按钮。检查器面板已打开至“块”选项卡。该选项卡顶部显示有关站点标题块的信息，描述为“Displays the name of this site. Update the block, and the changes apply everywhere it's used. This will also appear in the browser title bar and in search results.”

深入探讨

动态块在 JavaScript 和 PHP 中都需要注册。JavaScript 端处理编辑器体验，而 PHP 端处理前端标记的服务器端渲染。

PHP 块注册使用 register_block_type() 函数，该函数需要定义一个渲染方法。这可以通过以下两种方式之一实现：

  1. 注册函数包含一个 render_callback 参数。
  2. 向 block.json 添加一个 render 属性，其值指向一个单独的 PHP 文件。

这些渲染方法会自动接收属性和内部内容信息。它们还可以获取其他所需的动态站点信息——文章列表、评论、分类信息等。

块仍然作为文章 post_content 条目的一部分保存。但是，块的任何标记都不会保存到数据库。相反，其属性被写在块指示器注释内部。每当前端用户访问页面时，都会调用渲染方法来创建块的标记。

举个例子，让我们将上面的段落块想象成一个动态块。在这种情况下，块的序列化形式被保存到数据库。这种形式使用自闭合的块指示器注释。块属性以 JSON 编码字符串中的键值对形式保存：

<!— wp:paragraph { “content”: “If I had a boat, I'd go out on the ocean.” } /—>

块的渲染方法将获取内容属性并应用标记。前端代码将与块的静态版本相同。

应该使用哪种类型？

如果你是块开发者，你可能需要做出的首要决定之一是将块编写为静态块还是动态块。

有时，块的需求会为你做出决定。你的块是否依赖于网站其他部分的信息，例如其他文章、分类法或站点设置？如果是，那么块必须是动态的。内容依赖于其所在页面之外的信息，因此它可能会发生变化。

另一方面，如果你能保证块的内容始终保持不变，你仍然有选择。静态块是显而易见的选择，因为内容是静态的。然而，在这种情况下，选择动态块也有其道理。

静态块的优点

静态块本质上更简单，因为它们只用一种语言（JavaScript）编写。它们的标记在页面保存时已知，因此，如上所述，所有这些 HTML 代码都可以直接保存到数据库。

这种方法性能更高。当访问者查看页面时，内容来自数据库。由于不需要服务器端渲染，显示块时没有延迟。

动态块的优点

动态块的标记预计会发生变化。这就是为什么该标记不保存到数据库的原因。因此，该标记不受文章编辑器验证的约束。这意味着对动态块标记的更改不会引发验证错误。块验证错误相当复杂，北卡罗来纳州立大学这篇关于选择动态块的文章对此有精彩的解释。

这对于更敏捷的团队中的块开发者来说可能是有利的，因为标记更改可能更频繁。例如，团队可能希望对块进行 UX 或可访问性改进。如果该块是动态块，则只需对 PHP render() 函数进行标记更改。无需向弃用数组添加内容。

结论

块开发者可以选择他们想要开发的块类型。静态块非常适合不会改变的内容和标记。动态块专为依赖于外部因素的内容而设计，但对于静态内容也有优势。最终，由块开发者根据其内容和具体情况做出正确的选择。