WordPress 的render_block()函数负责将每个单独的区块呈现为HTML字符串。有几种可用的过滤器,它们允许插件和主题更改区块的呈现方式。

  • pre_render_blockrender_blockY ^ ! 4()通过返回非空值允许短路。
  • render_block_data:在处理render_block()前,过滤要渲染的块。
  • r= 6 # S Pender_block_context:过滤提供给渲染块的默认上下文。
  • render_block:过滤单个块的内容。

虽然这些过滤器可以对如何渲染单个块进行大量控制,但是在进行任何修改之前,挂钩函数需要对正在渲染的块具有所需块类R e f 2 I型进行一些验证。

在WordPress 5.7中,将引入一个新的动态过滤器render_bloY t ? | z w Bck_{$this->name},从而使函数仅可以挂钩到特定类型的块。在新的过滤器中@ M V .{$this->o f C # G b 3 n Vname}代表已注册块的名称或slug别名。例如,可以使用render_block_core/parag% F j . }r} % 7 m & z ! n -aph过滤以core/paragrK @ B q ` O d A Yaph名称注册的段落块。

这减少了以前针对特定块类型. , _ H的呈X M T现所需的代码量。

用法示例

以下示例将过滤所有cor; v . h ze/paragraph块,并将它们包装在一个<div>元素中。

/**
* Wrap all core/parag8 0 V \ V o rragh blocks in a <div>.
*
* @param strih ~ i 5 ) U | 7 ung $block_content The bl\ Y H k |ock co( * O \ vntent about to be appended.
* @param array  $block         Tz A w y s E Uhe full block, including name and attributes.
* @return string Modified block content.
*/
function wporg_parab i `graph_blockW S + | X c Z z 5_wrapper( $block_content, $block ) {
$content  = '<9 y K l y fdiv class="my-custom-wrapper">' . $block_content . '</div>';
re? P v X 8 k - ] 2turn $content;
}
add_filterP / O \ H - ? {( 'render_block_core/paragraph', 'wporg_paragraph_block_wrapper', 10, 2 );

输出结果:

<V $ { xdiv class="my-custom-wrapper">
<!-- block content -->
</div>

注意:所有WordPressCore区块类型的名称都以前缀core/。对于在插件或主题中声明的自定义块类型,过滤器的名称可能类似于render_block_my-plugin/m6 N j g a + ty-custom-block


在此示例中,将W N 4 3 I F Q J +使用large字体大小关键字的段落包装到<div&g} V 7 . bt;元素中:

/**
* Wrap all core/paragraph blocks with large font size in a <div>.
*o L # v
* @param string $block_content The block content about to be appended.
* @param array  $block         The full block, incH n : 8 2 Kluding n} 4 b e R g 6ame and attributes.
* @return strI ( |ing Modified block content.1 y ` e k I
*/
function wporg_large_sized_paragraph_block_wrapper( $blI 4 2 D t X % 7 2ock_content, $block ) {
if (1 s L B | h isset( $block['attrs']['fontSize'] ) && 'large' === $block['attrs']['fontSize'] ) {
$block_content = '<div class="my-large-paragt A Z C X 5 0 Wraph">' . $block_content . '</div>';
}
return $block_content;
}
add_filter( 'render_block_cor[ _ : O ^ S p , ce/para[ 0 @ w j # i Tgraph', 'wporg_large_sized_paragraph_block_wrapper', 10, 2 );

输出结果:

<div class="my-large-paragraph">
<p class="has-large-font-size">
<!-- block content -->
&# , $ $ g ~ Plt;/p>
</div>

发表评论

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