javascript - WP Block Styles - 选择 block 样式时触发JS

Question

选择 block 样式后，是否有“正确的方法”在 WP block 编辑器中运行 JS？

我已经通过文档和谷歌进行了搜索，但没有看到任何人在 block 样式上运行 JS 脚本的示例。

本质上，我想在 core/group block 周围注入(inject)两个元素，如果它具有特定的样式的话。

我的代码在前端工作得很好，但在后端，我只能在选择 block 样式后刷新页面才能让它工作。这是我到目前为止所得到的:

通过 php block 样式注册:

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) );
    });
});

block 编辑器中的调用函数(仅在页面加载时已选择样式时有效)

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

在jquery中，你可以添加事件监听器，当事件发生时，它会触发一个 Action 。

以下代码片段将在单击 ID 为“myButtonId”的按钮时执行。

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

您需要设置要触发此功能的按钮的 ID。您可以使用 html id 属性

执行此操作

<button id='myButtonId'> Button Text </button>

在 wordpress 中，您可以添加自定义 HTML。您提到了 block ，所以我假设您使用的是 gutenburg block 编辑器。这意味着您可以找到“自定义 HTML” block ，然后将该 html 按钮放入自定义代码中。