Как заставить работать Swiper слайдер в админке Wordpress?

Question

[Елизавета Красова]

Всем привет.
Возможно кто-то сможет подсказать в чём причина того, что не работает Swiper slider. Буду рада любым советам, догадкам и подсказкам :)

Вызывается данный скрипт в 2 местах Wordpress-сайта: на странице фронтенда и в админке(кастомный блок для гутенберга). На фронтенде этот скрипт работает, а в админке никак не хочет.
По коду админки файлы слайдера есть и находятся после 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery', но не происходит добавление дополнительных классов от слайдера, соответственно и слайды не пытаются переключаться.

<div class="slider-gutenberg-block">
  <div class="swiper-container">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
           <img src="#" alt="Слайд">
        </div>
       <div class="swiper-slide">
          <img src="#" alt="Слайд">
       </div>
       <div class="swiper-slide">
          <img src="#" alt="Слайд">
       </div>
     </div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
  </div>
</div>

const PSwiper = new Swiper( '.swiper-container', {
	direction: 'horizontal',
	effect: 'fade',
	setWrapperSize: true,
	slidesPerView: 1,
	loop: true,
	autoplay: {
		delay: 7000,
		disableOnInteraction: false,
	},
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
	},
} );

Comments

[Артем Золин]

Ошибки в консоли?

[Елизавета Красова]

Артем Золин, ошибок, касающихся слайдера, нет

Answer 1

[Артем Золин]

Возможно вы подключаете скрипты на wp_enqueue_scripts, а в админке надо использовать admin_enqueue_scripts

И из текста на понятно, где и в какой момент подключается скрипт инициализации. Обычно я его вешаю функцией wp_add_inline_script() с зависимостью от основного, чтобы гарантировать нужный порядок исполнения

Comments

[Елизавета Красова]

Подключаются скрипты через функцию создание блоков для Gutenberg - register_block_type( )
Весь код с подключениями ниже.

function slider_gutenberg_block_cgb_block_assets() {

	wp_register_script(
		'cgb-script',
		plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ),
		array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ),
		filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ),
		true
	);
	wp_register_style(
		'cgb-editor-style',
		plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' )
	);

	wp_register_script(
		'cgb-swiper-lib-script',
		plugins_url( 'src/block/swiper-slider/swiper-bundle.min.js', dirname( __FILE__ ) ),
		array( 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery' ),
		filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-bundle.min.js' ),
		true
	);
	wp_register_script(
		'cgb-swiper-init-script',
		plugins_url( 'src/block/swiper-slider/swiper-init.js', dirname( __FILE__ ) ),
		array( 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery', 'cgb-swiper-lib-script' ),
		filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-init.js' ),
		true
	);
	wp_register_style(
		'cgb-swiper-style',
		plugins_url( 'src/block/swiper-slider/swiper-bundle.min.css', dirname( __FILE__ ) ),
		array( 'wp-edit-blocks' ),
		filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-bundle.min.css' )
	);


	register_block_type(
		'cgb/block-slider-gutenberg-block', array(
			'style'         => array('cgb-swiper-style'),
			'script'		=> array('cgb-swiper-lib-script', 'cgb-swiper-init-script'),
			'editor_style'  => array('cgb-editor-style', 'cgb-swiper-style'),
			'editor_script' => array('cgb-script', 'cgb-swiper-lib-script', 'cgb-swiper-init-script'),
		)
	);
}

add_action( 'init', 'slider_gutenberg_block_cgb_block_assets' );