关于Legacy Widget块

Legacy Widget块允许用户添加、编辑和预览由插件注册的第三方Widget,以及使用经典widgets Editor添加的Widget。

通过使用块插入器插入Legacy Widget块并从块的下拉列表中选择小部件,可以添加第三方小部件。

也可以通过在块插入器中搜索小部件的名称并选择小部件来添加第三方小部件。将插入Legacy Widget块的变体。

与Legacy Widget块的兼容性

添加了小部件的事件

Legacy Widget块将以类似于Customizer的方式显示小部件的表单,因此与大多数第三方小部件兼容。

如果小部件在其形式中使用JavaScript,那么在'已添加小部件'jQuery事件触发于文件.

例如,当选中“更改密码”复选框时,小部件可能希望显示“密码”字段。

(函数($){$(document).on(“添加的小部件”,函数($event,$control){$control.find('.change-password').on('change',function(){var isChecked=$(this).prop('checked');$control.find('.password').toggleClass('hidden',!isChecked);} );} );})(jQuery);

请注意,所有小部件的事件处理程序都添加到添加了小部件回调。

显示“无可用预览”

当未选择Legacy Widget块时,Legacy-Widget模块将显示小部件的预览。

当小部件小部件()函数不呈现任何内容或只呈现空的HTML元素。

小工具可以利用这一点,从小部件()不应显示预览时。

类ExampleWidget扩展了WP_Widget{...公共功能小部件($instance){if(!isset($instance['name']){//名称是必需的,因此如果没有名称,则不显示任何内容。回报;}?><h3>姓名:<?php-echo-esc_html($instance['name']);?></h3>...<?php(电话)}...}

允许迁移到块

您可以允许用户轻松地将包含特定小部件的Legacy Widget块迁移到一个或多个块。这允许插件作者逐步淘汰他们的小部件,转而使用更直观、可以在更多地方使用的块。

以下步骤显示了如何执行此操作。

1) 在REST API中显示小部件的实例

首先,我们需要告诉WordPress,可以在REST API中显示小部件的实例数组。

如果满足以下条件,则可以安全完成此操作:

  • 您知道小部件存储的所有值$实例可以表示为JSON;
  • 您知道您的小部件不存储任何私有数据$实例应该对拥有自定义网站权限的用户隐藏。

如果这样做是安全的,那么包括一个名为显示实例in_rest其值设置为真的注册小部件时。

类ExampleWidget扩展了WP_Widget{.../***设置小部件*/公共函数__construct(){$widget_ops=数组(// ...此处显示其他选项“show_instance_in_rest”=>true,// ...此处显示其他选项);parent::__construct(“example_widget”,“ExampleWidget”和$widget_ops);}...}

这允许块编辑器和其他REST API客户端通过访问实例.raw在REST API响应中。

请注意5.8.0之前的WordPress版本允许您通过设置$show_instance_in_rest真的在扩展的类中WP_小工具.

类ExampleWidget扩展了WP_Widget{...公共$show_instance_in_rest=true;...}

现在不赞成使用这个方法,而赞成使用小部件选项方法。

2) 添加块变换

现在,我们可以定义一个块变换它告诉块编辑器用什么来替换包含小部件的Legacy Widget块。

这是通过向块的定义中添加JavaScript代码来完成的。在这个示例中,我们定义了一个转换,该转换可以转换ID为的小部件“example_widget”到一个名为的块中'示例/块'.

变换:{发件人:[{type:'块',块:['core/legacy-widget'],isMatch:({idBase,instance})=>{if(!instance?.raw){//如果REST API中未显示原始实例,则无法进行转换。返回false;}return idBase===“example_widget”;},转换:({instance})=>{return createBlock('示例/块'{名称:instance.raw.name,} );},},]},

3) 从Legacy widget块中隐藏小部件

最后,我们可以告诉Legacy Widget块从“Select Widget”下拉列表和块插入器中隐藏小部件。这鼓励用户使用替换小部件的块。

可以使用小部件类型到隐藏来自退出小部件块过滤器。

函数hide_example_widget($widget_types){$widget_types[]=“example_widget”;返回$widget_types;}添加过滤器('小部件类型to_hide_from_legacy_widget_block','隐藏示例小部件');

在其他块编辑器中使用Legacy Widget块(高级)

您可以选择在其他块编辑器中允许Legacy Widget块,例如
WordPress文章编辑器。默认情况下不启用此功能。

首先,确保遗留小部件所需的任何样式和脚本
加载到页面上。这样做的一个方便方法是手动执行所有
当用户浏览到窗口小部件WP Admin时通常运行的挂钩
屏幕。

add_action('管理员打印样式',函数(){if(get_current_screen()->is_block_editor()){do_action('admin_print_styles-widgets.php');}} );add_action('管理员打印脚本',函数(){if(get_current_screen()->is_block_editor()){do_action(“load-widgets.php”);do_action(“widgets.php”);do_action('侧栏_admin_setup');do_action(“admin_print_scripts-widgets.php”);}} );add_action('admin_print_footer_scripts',function(){if(get_current_screen()->is_block_editor()){do_action(“admin_print_footer_scripts-widgets.php”);}} );add_action('admin_footer',function(){if(get_current_screen()->is_block_editor()){do_action('admin_footer-widgets.php');}} );

然后,使用注册Legacy Widget块寄存器LegacyWidgetBlock哪一个
定义在@wordpress/小部件包裹。

add_action('排队块编辑器资产',函数(){wp_enqueue_script(“wp-widgets”);wp_add_inline_script('wp-widgets','wp.widgets.registerLegacyWidgetBlock()');} );