WordPress模式编辑器中Swiper滑块无法正常工作的求助

一、Slider区块具体修复方案 #

1. 调整脚本适配iframe环境与动态更新 #

修改script.js，解决iframe上下文、重复初始化、动态字段更新问题：

const initSwiper = (sliderEl) => {
  // 销毁已存在的Swiper实例，避免重复初始化
  if (sliderEl.swiper) {
    sliderEl.swiper.destroy(true, true);
  }
  return new Swiper(sliderEl, {
    direction: 'horizontal',
    loop: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
};

const myCustomBlockSlider = () => {
  const sliders = document.querySelectorAll('.slider__swiper');
  sliders.forEach(slider => initSwiper(slider));
};

const setupACFListeners = () => {
  if (!window.acf) return;

  // 监听区块预览渲染完成
  window.acf.addAction('render_block_preview/type=wordpress-boilerplate-theme/slider', () => {
    setTimeout(myCustomBlockSlider, 100); // 延迟确保DOM完全渲染
  });

  // 监听幻灯片字段更新，触发Swiper更新
  window.acf.addAction('acf/field_change', (field) => {
    if (field.closest('.acf-block[data-name="wordpress-boilerplate-theme/slider"]')) {
      setTimeout(myCustomBlockSlider, 100);
    }
  });
};

// 区分iframe（Pattern Editor）与普通页面的加载时机
if (window.self !== window.top) {
  window.addEventListener('load', () => {
    setupACFListeners();
    myCustomBlockSlider();
  });
} else {
  document.addEventListener('DOMContentLoaded', () => {
    setupACFListeners();
    myCustomBlockSlider();
  });
}

2. 调整脚本注册策略 #

移除defer属性，确保脚本与ACF事件同步执行：

wp_register_script('swiper', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', [], wp_get_theme()->get('Version'), ['in_footer' => true]);
wp_register_script($block_name . '-script', $blocks_uri . $block_name . '/script.min.js', [], wp_get_theme()->get('Version'), ['in_footer' => true]);
add_action('enqueue_block_assets', 'register_blocks_styles_and_scripts');

3. 确保区块模板结构正确 #

在slider.php中严格遵循Swiper的DOM结构，保证容器与控件的关联：

<div class="slider">
  <div class="slider__swiper swiper">
    <div class="swiper-wrapper">
      <?php if (have_rows('slides')) : ?>
        <?php while (have_rows('slides')) : the_row(); ?>
          <div class="swiper-slide">
            <?php the_sub_field('slide_content'); ?>
          </div>
        <?php endwhile; ?>
      <?php endif; ?>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-scrollbar"></div>
  </div>
</div>

二、通用区块脚本适配方案 #

1. 环境上下文适配 #

区分iframe（Pattern Editor、区块预览）与普通页面，确保脚本在当前上下文的document中操作：

const isIframe = () => window.self !== window.top;
const getCurrentDoc = () => document;

2. 优先依赖ACF生命周期事件 #

放弃依赖DOMContentLoaded，改用ACF提供的区块专属事件：

• render_block_preview/type=区块名称：区块预览渲染完成时触发
• acf/field_change：字段值变更时触发（处理动态内容更新）
• acf/block_removed：区块删除时触发（清理组件实例，避免内存泄漏）

3. 避免重复初始化 #

对需要实例化的组件（如Swiper、图表），先检查并销毁已存在的实例：

const initComponent = (el, ComponentClass, options) => {
  if (el.instance) {
    el.instance.destroy();
  }
  el.instance = new ComponentClass(el, options);
};

4. 延迟执行确保DOM就绪 #

在ACF事件回调中添加100-200ms延迟，确保ACF完成DOM渲染：

window.acf.addAction('render_block_preview/type=my-custom-block', () => {
  setTimeout(initComponent, 100);
});

5. 脚本注册优化 #

• 移除defer/async属性，确保脚本与ACF事件同步
• 注册脚本时依赖ACF核心脚本，保证加载顺序：

wp_register_script('my-block-script', $script_uri, ['acf-blocks'], $version, ['in_footer' => true]);

内容的提问来源于stack exchange，提问作者Jacek