I use Gutenberg in WordPress and I have such a block created with ACF:

block.json

{
  "name": "wordpress-boilerplate-theme/slider",
  "title": "Slider",
  "description": "The Slider lets you easily create stunning, responsive slideshow for showcasing images and content.",
  "category": "this",
  "icon": "slides",
  "keywords": ["slider", "block"],
  "supports": {
    "align": true,
    "alignWide": true,
    "html": false
  },
  "acf": {
    "mode": "preview",
    "renderTemplate": "slider.php"
  },
  "script": ["swiper", "slider-script"],
  "style": ["swiper", "slider-style"]
}

script.js

const myCustomBlockSlider = () => {
  const sliders = document.querySelectorAll('.slider__swiper');
  sliders.forEach(item => {
    const swiper = new Swiper(item, {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
    
      // If we need pagination
      pagination: {
        el: '.swiper-pagination',
      },
    
      // Navigation arrows
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    
      // And if we need scrollbar
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  if (window.acf) {
    window.acf.addAction('render_block_preview/type=wordpress-boilerplate-theme/slider', () => {
      myCustomBlockSlider(); 
    });
  }
  myCustomBlockSlider();
});

This works well on the frontend and in post editing!
Unfortunately, when editing in the new Pattern Editor where the content is loaded in the iframe – the slider does not always want to launch, not to mention the fact that I would like to do some .update() when adding slides (which is not even necessary in regular post editing – because each time the slider is initialized anew after editing the fields).

The scripts are in the iframe head, I tried defer and without defer:

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js?ver=1.0.0" id="swiper-js" defer data-wp-strategy="defer"></script>
<script src="https://wordpress-boilerplate.test/wp-content/themes/wordpress-boilerplate-theme/parts/blocks/slider/script.min.js?ver=1.0.0" id="slider-script-js" defer data-wp-strategy="defer"></script>

This is how it register them:

wp_register_script($block_name . '-script', $blocks_uri . $block_name . '/script.min.js', [], wp_get_theme()->get('Version'), ['strategy' => 'defer', 'in_footer' => true]);

I used a hook:

add_action('enqueue_block_assets', 'register_blocks_styles_and_scripts');

I tried various options that I found in Google (there are not many of them) and also what GPT chat suggested to me. Also mutation observer, wp.domReady and others like iframe.addEventListener(‘load’ => that don’t work.

I would like the slider to work in the Pattern Editor in WordPress.

I would like to have a comprehensive solution for various scripts that I will want to load into blocks in the future so that they also work in the Pattern Editor.

Please help me and tell me what I’m doing wrong and what can be done here. I spent all day on this.