Javascript 如果特定块处于活动状态,古腾堡编辑器将检入JS

Javascript 如果特定块处于活动状态,古腾堡编辑器将检入JS,javascript,wordpress-gutenberg,gutenberg-blocks,Javascript,Wordpress Gutenberg,Gutenberg Blocks,我正在编辑器中向自定义JS注册一个块: function my_block_assets() { wp_register_script( 'my-block-js', // plugins_url( '/dist/my-block.js', dirname( __FILE__ ) ), array( 'jquery' ), ); register_block_type( 'custom/my-block', array( 'style

我正在编辑器中向自定义JS注册一个块:

function my_block_assets() {

  wp_register_script(
    'my-block-js', // 
    plugins_url( '/dist/my-block.js', dirname( __FILE__ ) ),
    array( 'jquery' ),
  );

  register_block_type(
    'custom/my-block', array(
      'style'         => 'my-block-css',        
      'editor_style'  => 'my-block-editor-css',
      'editor_script' => 'my-block-js',
    )
  );

}

add_action( 'init', 'my_block_assets' );
我只想在编辑器中添加自定义块时运行自定义JS。我是这样做的:

$(window).on('load', function () {      
  var container = document.querySelector('.wp-block-custom-my-block');

  if ( container ) {
    // run custom js
  }
});

这似乎有效,但可能很慢。是否有任何特殊的JS函数可以用来检查编辑器中是否添加了块?我找到了在前端使用PHP检查块的方法,使用编辑器中的has_block(),但对JS没有任何检查。

您可以从中选择许多特定于块的数据。也就是说,以下功能在后端工作:

if ( wp.data.select('core/blocks').getBlockType('custom/my-block') ) { 
  //run custom js 
}

关于前端,我将使用以下函数:

<?php 
mycustomblock_frontend_scripts() {
    if ( has_block( 'custom/my-block' ) ) {
        wp_enqueue_script('my-block-frontend-script');
    }
}
add_action( 'wp_enqueue_scripts', 'blockgallery_frontend_scripts' );