深入理解 WordPress `render_block()` 函数的源码：如何根据区块名调用其渲染回调函数。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！我是今天的主讲人，咱们今天聊聊WordPress里一个挺重要的函数：render_block()。别看名字平平无奇，它可是区块渲染的灵魂人物。咱们的目标是：彻底搞清楚它怎么根据区块名找到对应的渲染回调函数，然后把区块渲染出来的。

一、开场白：区块的世界，render_block() 的地位

在WordPress的世界里，Gutenberg编辑器（区块编辑器）已经成为主流。我们不再像过去那样，在一个大大的文本框里写HTML，而是用一个个独立的“区块”来构建页面。每个区块都有自己的功能，比如标题区块、段落区块、图片区块等等。

那么问题来了，这些区块在前端是怎么显示的呢？这就要靠render_block()函数了。它就像一位勤劳的管家，负责把每个区块的数据交给正确的“厨师”（渲染回调函数），然后把“菜”（渲染后的HTML）端上桌。

二、render_block()：源码剖析，一层层揭开面纱

让我们直接进入源码，看看render_block()到底长什么样（以下代码基于WordPress 6.4.2）：

/**
 * Renders a single block into its HTML markup.
 *
 * @since 5.0.0
 *
 * @param array $block The block to be rendered.
 *
 * @return string The block's rendered output.
 */
function render_block( $block ) {
    if ( ! is_array( $block ) ) {
        return '';
    }

    if ( empty( $block['blockName'] ) ) {
        return '';
    }

    $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );

    if ( ! $block_type ) {
        /**
         * Fires when a block is about to be rendered, but the block type
         * is not registered.
         *
         * @since 5.0.0
         *
         * @param array $block The block being rendered.
         */
        do_action( 'render_block_missing', $block );
        return '';
    }

    $render_callback = $block_type->render_callback;

    if ( ! is_callable( $render_callback ) ) {
        return '';
    }

    $attributes = $block['attrs'] ?? array();

    /**
     * Filters the content of a single block.
     *
     * @since 5.0.0
     *
     * @param string $content      The block content.
     * @param array  $block        The full block, including name and attributes.
     */
    $content = apply_filters( 'render_block', '', $block );

    if ( '' !== $content ) {
        return $content;
    }

    if ( $block_type->is_dynamic ) {
        $content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '', $block );
    } else {
        $content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '' ); // Backward compatibility.
    }

    /**
     * Filters the content of a specific block.
     *
     * The dynamic portion of the hook name, `$block['blockName']`, refers to the block name.
     *
     * @since 5.0.0
     *
     * @param string $content      The block content.
     * @param array  $block        The full block, including name and attributes.
     */
    $content = apply_filters( "render_block_{$block['blockName']}", $content, $block );

    return $content;
}

看起来有点长，但咱们一步步来：

参数检查：
- if ( ! is_array( $block ) ) { return ''; }：确保传入的是一个数组，毕竟区块数据是以数组形式存在的。
- if ( empty( $block['blockName'] ) ) { return ''; }：检查区块数组里有没有blockName这个关键字段，没有的话说明这个区块不完整，直接跳过。
注册表登场：WP_Block_Type_Registry
```
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
```
这里出现了一个关键角色：WP_Block_Type_Registry。这家伙就像一个区块类型的注册中心，记录了所有已经注册的区块类型的信息。get_instance()获取注册表的单例实例，get_registered()方法根据区块名（$block['blockName']）从注册表中查找对应的区块类型信息。

如果找不到对应的区块类型，$block_type就会是false，render_block()会触发一个render_block_missing的action，允许开发者处理未注册的区块（比如记录日志，或者显示一个友好的提示）。
寻找“厨师”：render_callback
```
$render_callback = $block_type->render_callback;
```
找到了区块类型信息，接下来就要找到负责渲染这个区块的“厨师”了，也就是render_callback。这个回调函数通常在注册区块类型的时候定义的。

如果render_callback不是一个可调用的函数（比如null或者不是一个函数名），render_block()会直接返回空字符串。
准备食材：区块属性（$attributes）
```
$attributes = $block['attrs'] ?? array();
```
渲染区块需要一些“食材”，也就是区块的属性（attributes）。从$block['attrs']中获取属性，如果$block['attrs']不存在，就使用一个空数组作为默认值。
过滤内容：render_block 过滤器
```
$content = apply_filters( 'render_block', '', $block );

if ( '' !== $content ) {
return $content;
}
```
这里是第一个过滤器，render_block。这个过滤器允许全局性地修改区块的渲染结果。如果有任何函数通过这个过滤器返回了非空字符串，render_block()就会直接返回这个字符串，而跳过后续的渲染步骤。这提供了一种短路渲染流程的机制，比如用于缓存整个区块的渲染结果。
开火做饭：调用渲染回调函数
```
if ( $block_type->is_dynamic ) {
    $content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '', $block );
} else {
    $content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '' ); // Backward compatibility.
}
```
终于到了最关键的一步：调用渲染回调函数！call_user_func()函数可以动态地调用一个函数，它的第一个参数是函数名，后面的参数是传递给函数的参数。

这里根据$block_type->is_dynamic来判断区块是不是动态区块。动态区块需要传递 $block 参数，静态区块则不需要。 $block['innerHTML']包含了区块的原始HTML内容，如果区块包含嵌套的子区块，这些子区块的HTML也会包含在innerHTML中。
特定区块过滤器：render_block_{$block['blockName']}
```
$content = apply_filters( "render_block_{$block['blockName']}", $content, $block );
```
这是第二个过滤器，render_block_{$block['blockName']}。这是一个动态的过滤器，它的名称会根据区块名而变化。比如，如果区块名是core/paragraph，那么过滤器名就是render_block_core/paragraph。这个过滤器允许针对特定类型的区块修改渲染结果。
大功告成：返回渲染后的HTML
```
return $content;
```
最后，render_block()函数返回渲染后的HTML字符串。

三、举个栗子：自定义区块的渲染流程

为了更形象地说明render_block()的工作方式，我们来创建一个简单的自定义区块，并看看它的渲染流程。

注册区块类型：

function my_custom_block_init() {
    register_block_type( 'my-plugin/my-block', array(
        'attributes'      => array(
            'content' => array(
                'type'    => 'string',
                'default' => 'Hello, world!',
            ),
        ),
        'render_callback' => 'my_custom_block_render',
    ) );
}
add_action( 'init', 'my_custom_block_init' );

这段代码注册了一个名为my-plugin/my-block的区块类型。它有一个content属性，默认值是"Hello, world!"。并且指定了渲染回调函数是my_custom_block_render。

定义渲染回调函数：

function my_custom_block_render( $attributes, $content ) {
    $block_content = '<div class="my-custom-block">';
    $block_content .= esc_html( $attributes['content'] );
    $block_content .= '</div>';
    return $block_content;
}

这个函数接收区块的属性和内容，然后生成HTML代码。这里使用了esc_html()函数来转义HTML实体，防止XSS攻击。

使用区块：

在WordPress编辑器中，插入一个my-plugin/my-block区块，并修改content属性为"你好，世界！"。
render_block() 的调用：

当WordPress渲染页面时，会调用render_block()函数来渲染这个区块。render_block()函数会：
- 接收包含区块信息的数组（包括blockName为my-plugin/my-block和attrs为['content' => '你好，世界！']）。
- 通过WP_Block_Type_Registry找到my-plugin/my-block的区块类型信息。
- 获取render_callback，也就是my_custom_block_render函数。
- 调用my_custom_block_render函数，并将['content' => '你好，世界！']作为参数传递给它。
- my_custom_block_render函数生成HTML代码：<div class="my-custom-block">你好，世界！</div>。
- render_block()函数返回这个HTML代码。

最终显示：

页面上就会显示：

<div class="my-custom-block">你好，世界！</div>

四、重要提示：区块渲染的一些注意事项

安全性： 在渲染回调函数中，一定要注意安全性，防止XSS攻击。使用esc_html()、esc_attr()等函数来转义HTML实体。
性能： 渲染回调函数应该尽可能高效，避免执行耗时的操作。可以使用缓存技术来提高性能。
动态区块 vs 静态区块： 动态区块每次加载页面都会重新渲染，而静态区块只在内容更新时才会重新渲染。如果区块的内容是动态变化的（比如显示当前时间），就应该使用动态区块。
过滤器： 善用render_block和render_block_{$block['blockName']}过滤器，可以灵活地修改区块的渲染结果。

五、render_block() 的核心流程图

为了更好地理解render_block()的流程，我们可以用一个表格来总结一下：

步骤	描述	关键代码
1	接收区块数据数组。	`$block`
2	检查区块数据是否有效（是否是数组，是否包含`blockName`）。	`is_array( $block )`, `empty( $block['blockName'] )`
3	从`WP_Block_Type_Registry`获取区块类型信息。	`$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );`
4	检查是否找到了对应的区块类型。如果没有找到，触发`render_block_missing` action。	`! $block_type`
5	获取渲染回调函数`render_callback`。	`$render_callback = $block_type->render_callback;`
6	检查渲染回调函数是否是可调用的。	`! is_callable( $render_callback )`
7	获取区块属性`attributes`。	`$attributes = $block['attrs'] ?? array();`
8	应用`render_block`过滤器，允许全局修改区块渲染结果。	`$content = apply_filters( 'render_block', '', $block );`
9	调用渲染回调函数`render_callback`，生成HTML代码。	`$content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '' , $block );` (动态区块) 或 `$content = call_user_func( $render_callback, $attributes, $block['innerHTML'] ?? '' );` (静态区块)
10	应用`render_block_{$block['blockName']}`过滤器，允许针对特定区块类型修改渲染结果。	`$content = apply_filters( "render_block_{$block['blockName']}", $content, $block );`
11	返回渲染后的HTML代码。	`return $content;`

六、总结：render_block() 的重要性

render_block()函数是WordPress区块渲染的核心。理解它的工作原理，可以帮助我们更好地开发自定义区块，优化区块的渲染性能，以及灵活地控制区块的显示效果。

希望今天的讲座能帮助大家更深入地理解render_block()函数。记住，掌握它，就掌握了区块渲染的钥匙！

下课！

发表回复 取消回复

发表回复取消回复