Стили блоков WP - триггер JS при выборе стиля блока

Question

Есть ли «правильный» способ запуска JS в редакторе блоков WP, когда выбран стиль блоков?

Я искал документацию и Google, но не вижу никого, кто запускает сценарий JS в стиле блока.

По сути, я хочу внедрить два элемента вокруг блока core/group, если у него есть определенный стиль.

Мой код прекрасно работает на внешнем интерфейсе, но в бэкэнде я может заставить его работать только на странице refre sh, после выбора стиля блока. Вот что у меня получилось:

Зарегистрировано по стилю блока с php:

register_block_style(
  'core/group',
  array(
    'name' => 'shape-pattern-1',
    'label' => 'Shape Pattern 1'
  )
);

Функция, которую я хочу запустить, когда стиль используется

var initialiseShapePatterns = function($block) {

    $block.prepend('<span class="shape-before"></span>');
    $block.append('<span class="shape-after"></span>');

    $(window).on('load scroll', function() {
        if( $block.isInViewport() ) {
            $block.addClass('animate');
        } else {
            $block.removeClass('animate');
        }
    });

} 

Вызов функции на внешнем интерфейсе (работает)

$(document).ready(function() {
    $('.is-style-shape-pattern-1, .is-style-shape-pattern-2, .is-style-shape-pattern-3').each(function() {
        initialiseShapePatterns( $(this) );
    });
});

Вызов функции в редакторе блоков (работает только если стиль уже выбран при загрузке страницы)

if( wp.domReady ) {
    wp.domReady(function() {
        $('.is-style-shape-pattern-1, .is-style-shape-pattern-2, .is-style-shape-pattern-3').each(function() {
            initialiseShapePatterns( $(this) );
        });
    });
}

Я получаю, что я говорю, что он запускается только при загрузке dom, но я не могу найти ничего в документации о запуске код по стилю выберите.

Есть идеи?

Answer 1

Добавьте даже слушателя к объекту, по которому щелкнули, при выборе стиля, который делает это для вас. Примерно так (замените кнопку #styleselect на правильный элемент).

$( "#styleselectbutton" ).click(function() {
      $('.is-style-shape-pattern-1, .is-style-shape-pattern-2, .is-style-shape-pattern-3').each(function() {
            initialiseShapePatterns( $(this) );
        });
    });