I’ve created a dynamic Gutenberg Block with <ServerSideRender /> and the Block is rendered using PHP. A cronjob imports customer reviews into a MySQL database every night. The Block displays those customer reviews inside a Slick Carousel.

Everything is working great in the frontend but the Block won’t initialize the Slick Carousel in the editor (backend). It looks like no JavaScript is executed at all. I’ve stripped down my rendering PHP file to this:

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

Behaviour in the frontend: H1 is displayed, Alert is displayed

Behaviour in the editor: H1 is displayed, Alert is not displayed

I added setTimeout out of desperation <script type="text/javascript">setTimeout(function(){ alert("HEY HEY"); }, 10000);</script> and got the same result, still no alert.

I tried using customEvent as coderaaron described in this comment on GitHub: https://github.com/WordPress/gutenberg/issues/12603#issuecomment-513945557

But since even the alert doesn’t work it won’t execute document.addEventListener either.

Any ideas why the JS is not beeing executed in the editor?