静态块与动态块

在开发 WordPress 区块时,你需要考虑区块的功能,以及它是否需要根据外部因素而变化。

幸运的是,根据你的需求,可以创建静态或动态区块。

让我们看看静态区块和动态区块之间的区别,如何确定哪种适合你的需求,以及不同的开发方法。

静态区块

如果你一直在按照本模块的课程构建版权日期区块,那么你一直在构建一个静态区块。

由于静态区块的内容是固定的,一旦将其添加到编辑器,save 函数被触发,并且文章或页面被保存,区块的内容将不会改变。

静态区块适用于不需要更改的内容,比如引用或推荐语。

动态区块

然而,如果你考虑版权日期区块的实际需求,理想情况下,如果物理年份发生变化,区块的渲染内容也应该更新。

否则,你需要编辑任何添加了该区块的地方,以触发 save 函数并更新年份。

这就是动态区块的用武之地。

动态区块不通过 save 函数渲染其内容,而是使用 PHP 在包含该区块的文章或页面收到前端请求时渲染其内容。

让我们看看将版权日期区块转变为动态区块需要做些什么。

使版权日期区块动态化

要使版权日期区块动态化,你需要指定一个包含区块渲染逻辑的 PHP 文件或函数。

这可以通过几种方式完成,但最简单的是在 block.json 文件的区块元数据中使用 render 属性。

打开 src 目录中的 block.json 文件,并将以下代码添加到该文件的底部:

"render": "file:./render.php"

这告诉 WordPress 使用名为 render.php 的文件来在前端渲染区块的内容。

然后,你可以在 src 目录中创建一个 render.php 文件,并将渲染逻辑添加到该文件中:

<?php
    $block_props = get_block_wrapper_attributes();
    $starting_year = $attributes['startingYear'];
    $current_year = date( 'Y' );
?>
<p <?php echo $block_props?>>
    Copyright © <?php echo $starting_year?> - <?php echo $current_year; ?>
</p>

你可以使用 get_block_wrapper_attributes 函数来获取区块的包装器属性。这类似于在 JavaScript 中调用 useBlockProps

然后,你可以从 PHP 的 $attributes 数组中获取 startingYear 值。这个 $attributes 变量是暴露给你为区块的 render 元数据属性设置的文件中的三个变量之一,它包含为区块设置的任何属性。

然后,你可以创建 $current_year 变量,它使用 PHP 的 date() 函数始终获取当前年份。这样,当区块被渲染时,它总是获取当前年份。

最后但同样重要的是,输出段落标签,包括所有相关属性和内容。

一旦你设置好了 render.php 文件,你可以删除编辑器中与区块保存过程相关的任何代码,因为你不需要将任何内容保存到文章中。

为此,你可以删除 save.js 文件。

你还可以删除传递给 registerBlockTypesave 属性,以及导入 save 函数的 import 语句。

完成这些更改后,你可以运行构建过程,然后创建一篇文章,并将区块添加到文章中。

你会看到区块在编辑器中仍然按预期渲染。但是,如果你在代码编辑器中查看区块,你会看到保存的版本不包含任何输出。

当你预览它时,内容会被渲染。

然而,如果你模拟年份变化,比如通过更改 PHP 中变量的值,区块的前端渲染将相应更新。

其他资源

有关开发静态区块与动态区块之间差异的更多信息,你可以阅读区块开发基础中的静态或动态渲染区块部分。

发表回复

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