Редактор Гутенберга проверяет в JS, активен ли конкретный блок - PullRequest
Новая
       33

Редактор Гутенберга проверяет в JS, активен ли конкретный блок

1 голос
/ 20 июня 2019

Я регистрирую блок с пользовательским 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 в редакторе.

1 Ответ

1 голос
/ 21 июня 2019

Вы можете выбрать множество специфичных для блока данных из Модуля данных блока . Тем не менее, в бэкэнде работает следующее: 

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

Документ getBlockType.

Что касается внешнего интерфейса, я собираюсь использовать функцию has_block: 

<?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' );
...