wordpress - 动态 Gutenberg 块未在编辑器中初始化 Slick Carousel，根本不执行 JS

Question

我已经创建了一个动态的 Gutenberg 块，<ServerSideRender />并且该块是使用 PHP 呈现的。cronjob 每晚将客户评论导入 MySQL 数据库。The Block 在 Slick Carousel 中显示这些客户评论。

前端一切正常，但 Block 不会在编辑器（后端）中初始化 Slick Carousel。看起来根本没有执行任何 JavaScript。我已经将我的渲染 PHP 文件剥离为：

索引.php

/**
 * Server-side rendering of the dynamic 'mna/testimonial' block.
 */
function render_block_mna_testimonial($attributes) {
  $foo = '<h1>I am confused</h1>';
  $bar = '<script type="text/javascript">alert("HEY HEY");</script>';
  return $foo.$bar;
}

/**
 * Registers the 'mna/testimonial' block on server.
 */
function register_block_mna_testimonial() {
  register_block_type('mna/testimonial', array(
    'attributes' => array(
        ...
    ),
    'render_callback' => 'render_block_mna_testimonial',
  ));
}
add_action('init', 'register_block_mna_testimonial');

前端行为：显示 H1，显示 Alert

编辑器中的行为：显示 H1，不显示警报

我绝望地添加了 setTimeout<script type="text/javascript">setTimeout(function(){ alert("HEY HEY"); }, 10000);</script>并得到了相同的结果，仍然没有警报。

我尝试使用customEventGitHub 上此评论中描述的 coderaaron：https ://github.com/WordPress/gutenberg/issues/12603#issuecomment-513945557

但由于即使警报不起作用，它也不会执行document.addEventListener。

任何想法为什么 JS 没有在编辑器中执行？

标签： wordpressserver-side-renderingslick.jswordpress-gutenberggutenberg-blocks