WordPress块编辑器提供两种类型的块:静态和动态。这两种类型的块之间的区别取决于它们在前端的渲染方式。

静态块

A 静态块 是一块内容,当页面保存时已知标记。该块将其内容和标记直接保存在帖子内容中。段落块是静态块的一个简单示例。

Screenshot of the post editor. The body of the post contains a single Paragraph block that reads "If I had a boat, I'd go out on the ocean." The Paragraph block is focused and above it is the edit toolbar, containing buttons for text alignment options, bold, italic, and link. The Inspector Panel is opened to the Block tab. The top of that tab is displaying information about the Paragraph block, with a description that reads "Start with the basic building block of all narrative."
示例

段落

静态块,显示在编辑器中。

除非内容编辑器手动更改段落,否则段落中的单词不会更改。内容和标记都是已知的,这使该段落块成为静态块的绝佳例子。它的HTML标记直接保存到帖子内容中。

静态块完全写在JavaScript中。这save()功能将块的标记写入post_content该职位的条目wp_posts数据库表。上面的示例的条目将包含该确切的标记,以及块指示器内联用法:

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

块指示器是整体的一部分 块语法。WordPress使用这些HTML注释来定义块及其具有的任何属性或元数据。WordPress解析了这些注释以在编辑器和前端显示块,但是这些注释从未在源代码中呈现。对于静态块,源代码将仅在块指示器内包含标记。

更深入的潜水

静态块save()功能和保存到数据库的内容相互紧密相关。邮政编辑器运行验证检查,以确保由save()功能与已经保存到数据库的标记相同。如果有任何差异,邮政编辑器将变得非常不开心,并宣布要打破的块。这称为块验证错误。

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

块验证错误是最常见的save()更新功能以更改块产生的标记。任何小更改,即使是类名称,都可以触发编辑器中的验证错误。

块开发人员可以通过添加一个来减轻这些问题 块弃用 在块中注册更改。块弃用保留了块标记的先前版本的记录。然后,帖子编辑器可以将块的当前内容与以前的版本进行比较,并(理想情况下)避免验证错误。

动态块

A 动态块 是一块内容,当页面保存时,其标记和精确内容尚不清楚。该块可能包含及时的内容或取决于网站其他部分的更改。如果没有内容编辑器的干预,预计动态块的内容将变化。结果,动态块的标记在服务器端呈现。

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

Screenshot of the post editor. The body of the post contains a single Site Title block that reads "My WPSandbox site." The Site Title block is focused and above it is the edit toolbar, containing buttons for width options, heading level, and text alignment options. The Inspector Panel is opened to the Block tab. The top of that tab is displaying information about the Site Title block, with a description that reads "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."
示例

网站标题

动态块,显示在WordPress Post Editor中。此块显示网站的名称。

更深入的潜水

在JavaScript和PHP中都注册了动态块。当JavaScript侧处理编辑器体验时,PHP侧处理了前端标记的服务器端渲染。

PHP块注册使用 register_block_type() 功能,需要定义渲染方法。这可以通过两种方式之一发生:

  1. 注册功能包括 render_callback 争论。
  2. A render 属性被添加到block.json,其值指向单独的PHP文件。

这些渲染方法会自动接收属性和内部内容信息。他们还可以获取其他必需的动态站点信息 – 发布列表,评论,分类信息等。

块仍然保存为post_content帖子的条目。但是,该块的标记都没有保存到数据库中。相反,其属性写在块指示器注释中。每当前端用户访问页面时,渲染方法被调用以创建块的标记。

例如,让我们考虑上述段落块,就像它是一个动态块一样。在这种情况下,块的序列化形式 保存到数据库。此表单使用自闭合块指示灯注释。块属性在JSON编码字符串中保存为键值对:

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

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

您应该使用哪种类型?

如果您是块开发人员,那么您可能会做出的第一个决定之一是将块写入静态块还是动态块。

有时,块的要求会为您做出决定。您的街区是否依赖网站其他部分的信息,例如其他帖子,分类法或站点设置?如果是这样,必须要动态。内容依赖于其居住的页面之外的信息,因此它可以更改。

另一方面,如果您可以保证该块的内容始终保持不变,那么您仍然可以选择。静态块是明显的选择,因为内容是静态的。但是,在这种情况下,有一些论点选择动态块。

静态块的优势

静态块本质上更简单,因为它们是用单一语言编写的JavaScript。他们的标记在保存时已知,因此,如上所述,所有HTML代码都可以直接保存到数据库中。

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

动态块的优势

预计动态块的标记将发生变化。这就是为什么该标记未保存到数据库的原因。结果,该标记不受后编辑的验证。这意味着变为动态块的标记不会丢下验证错误。块验证错误相当复杂,并且在本文中得到了很好的解释 选择动态块 来自NC州立大学。

这对于更敏捷的团队中的块开发人员可能是有利的,在更敏捷的团队中,加价更改可能更有可能。例如,团队可能希望对块进行UX或可访问性改进。如果该块是动态块,则将标记的更改简单地对PHP进行render()功能。不需要对弃用阵列的添加。

结论

块开发人员可以选择要开发哪种类型的块。静态块非常适合不会改变的内容和标记。动态块设计用于取决于外部因素的内容,但也具有静态内容的优点。最后,由Block开发人员决定其内容和情况。

谢谢至 @BPH@Fabiankaegy@Greenshady@Mburridge,和 @WebCommsat 用于审查此帖子。

By zhuon

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注