为古腾堡编辑器添加自定义Pattern方便内容编辑

文 / @WordPress主题

简介

小本本在WordPress5.5中发现了一个古腾堡编辑器的新功能:Patterns。这个功能允许开发者添加一些常用的模块组合,以便在需要的时候使用。虽然看起来和「可重用模块」有点类似,但是它们的区别在于Patterns提供的是一个内容模板,插入文章后可以重新编辑,而可重用模块的内容是只读的。

古腾堡编辑器的Patterns功能

添加自定义Patterns的方法

为了方便添加自定义Patterns,WordPress提供了一个register_block_pattern函数。以下是一个示例,我们使用该函数为本站添加了一个名为「文档参数」的自定义Pattern,用于翻译官方文档的函数参数数据。

add_action('init', function(){
  register_block_pattern(
    'page-intro-block/codex-param-pattern',
    [
      'title' => __('文档参数', 'page-intro-block'),
      'description' => _x('文档参数表格', 'page-intro-block'),
      'content' => '<!--wp:table{"className":"is-style-regular"}--><figure class="wp-block-table is-style-regular"><table><thead><tr><th>参数</th><th>数据类型</th><th>是否必需</th><th>描述</th><th>默认值</th></tr></thead><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure><!--/wp:table-->',
      'categories' => ['buttons'],
    ]
   );
});

添加以上代码后,「文档参数」会出现在古腾堡编辑器的Patterns选项卡中。点击这个Pattern,将缩略图中显示的模块添加到编辑区域,然后可以根据需要添加或修改Pattern的内容。目前本站「开发文档」栏目中文章的函数参数部分,都是通过这种方式添加的,非常方便。

什么时候使用自定义Patterns,什么时候使用可重用模块?

了解了这两个函数的特性,使用场景也就非常明显了:Patterns适用于用户需要经常发布一些结构类似,但内容不同的模块时使用;而可重用模块则适用于发布能在多篇文章中使用的内容,在插入到这些文章中后,可以在可重用模块管理器中统一修改这些内容。

添加UTHEME为好友
扫码添加UTHEME微信为好友
· 分享WordPress相关技术文章,主题上新与优惠动态早知道。
· 微信端最大WordPress社群,限时免费入群。