Пока я изучаю как делать блоки для редактора Gutenberg, я нашёл костыль.

Мне надо было добавить слайдер. Тыкал, тыкал, разбирался в примерах кода, но сделать полноценный блок для современного редактора WordPress так и не получилось.

Слайдер нужен и нужна возможность легко менять изображения через админку. Вариант писать html блок сразу отпал. Можно было сделать через ACF, но не хотелось. И я с ним не сказать, что хорошо знаком, и всё-таки уже это догонять вчерашний день.

Нашёл простой и рабочий вариант. В чём-то даже удобнее полноценного блока.

Создал блок с вложением. Единственное что он умеет, это принимать в себя другие блоки и выступать обёрткой. Как стандартный блок «группа».

Теперь по порядку, что я сделал:

Скачал пример блока Gutenberg examples inner-blocks

Скачал slick slider

А теперь берем и переделываем блок из примера.

Регистрация блока в index.php

function rspl_example_slider_register_block() { // регистрируем блок

 if ( ! function_exists( 'register_block_type' ) ) {
  // Slider is not active.
   return;
 }

  wp_register_script(
   'rspl-example-slider',
   plugins_url( 'block.js', __FILE__ ),
   [ 'wp-blocks', 'wp-element', 'wp-block-editor' ],
   filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
   true
 );

 register_block_type(
  'rspl-example/slider',
  [
   'editor_script' => 'rspl-example-slider',
  ]
 );

} // конец регистрации блока
add_action( 'init', 'rspl_example_slider_register_block' );

Регистрация блока в block.js

( function( blocks, element, blockEditor ) {
	var el = element.createElement;
	var InnerBlocks = blockEditor.InnerBlocks;
	blocks.registerBlockType( 'rspl-example/slider', {
		// blocks.registerBlockType( 'gutenberg-examples/example-07', {
		title: 'Example: Slider',
		category: 'layout',
		edit: function( props ) {
			return el(
				'div',
				{ className: props.className },
				el( InnerBlocks )
			);
		},
		save: function( props ) {
			return el(
				'div',
				{ className: props.className },
				el( InnerBlocks.Content )
			);
		},
	} );
} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );

На этом этапе наш блок уже доступен в редакторе

Регистрируем и подключаем скрипт слайдера slick.js который скачали, указав зависимость от jquery

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

   wp_enqueue_script(
      'rspl-example-slick-script',
      plugins_url( '/assets/js/slick.js', __FILE__ ),
      [ 'jquery' ], // ставим зависимость от jquery 
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slick.js' ),
      true
   );

} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Регистрируем и подключаем скрипт slider.js в котором настройки слайдера и подключение к slick.js Указываем зависимость от jquery и slick

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

 // Подключенный ранее 'rspl-example-slick-script'

   wp_enqueue_script(
      'rspl-example-slider-script',
      plugins_url( '/assets/js/slider.js', __FILE__ ),
      [ 'jquery', 'rspl-example-slick-script' ],
 // зависимость от jquery и slick
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slider.js' ),
      true
   );

} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

А вот и сам slider.js в котором подключение и параметры слайдера.

jQuery(document).ready(function(){
  jQuery('.wp-block-rspl-example-slider').slick({
     dots: true,
     autoplay: true,
     autoplaySpeed: 2000,
     pauseOnHover: true,
     pauseOnDotsHover: true,
   });
 });

Здесь же подключаем style.css со стилями нашего нового блока-слайдера.

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

  // Подключенный ранее 'rspl-example-slider-script',
  // Подключенный ранее'rspl-example-slick-script',
  
   wp_enqueue_style(
      'rspl-example-slider-style',
      plugins_url( '/assets/css/style.css', __FILE__ ),
      array( ),
      filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/style.css' )
   );
      
} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Все работает, Отлично. Теперь, если на странице есть блок с нашим классом, подключаются скрипты и стили, и содержимое выводится слайдером. А раз мы знаем такую информацию, можно ей воспользоваться.

Добавим условие, чтобы скрипты и стили не грузились на сайте все время, а только там где используется блок-слайдер

if ( has_block( 'rspl-example/slider' ) ) { // если есть блок, подключаем скрипты и стили
      
 // Подключенный ранее - 'rspl-example-slider-script',
 // Подключенный ранее - 'rspl-example-slick-script',
 // Подключенный ранее - 'rspl-example-slider-style'

} // конец if если есть блок

Заодно решил немного сократить код и объединил js файлы (не уверен, что так можно, но оно работает). Просто скопировал то, что в slider.js и поместил в конец slick.js

Полный вариант index.php с подключением слайдера

function rspl_example_slider_register_block() { // регистрируем блок

 if ( ! function_exists( 'register_block_type' ) ) {
  // Slider is not active.
  return;
 }

 wp_register_script(
  'rspl-example-slider',
   plugins_url( 'block.js', __FILE__ ),
   [ 'wp-blocks', 'wp-element', 'wp-block-editor' ],
   filemtime( plugin_dir_path( __FILE__ ) . 'block.js' ),
   true
  );

  register_block_type(
   'rspl-example/slider',
   [
   'editor_script' => 'rspl-example-slider',
   ]
  );
} // конец регистрации блока
add_action( 'init', 'rspl_example_slider_register_block' );

function rspl_example_slider_frontend_scripts() { // подключаем скрипты и стили

  if ( has_block( 'rspl-example/slider' ) ) { // если есть блок, подключаем скрипты и стили
		
  wp_enqueue_script(
   'rspl-example-slick-script',
   plugins_url( '/assets/js/slick.js', __FILE__ ),
   [ 'jquery' ], // ставим зависимость от jquery 
   filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/slick.js' ),
   true
   );
	
  wp_enqueue_style(
   'rspl-example-slider-style',
   plugins_url( '/assets/css/style.css', __FILE__ ),
   array( ),
   filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/style.css' )
  );
 } // конец if если есть блок
} // конец функции "подключаем скрипты и стили"
add_action( 'wp_enqueue_scripts', 'rspl_example_slider_frontend_scripts' );

Заметил такой момент. Стили темы перебивают стили кнопок-стрелок на слайдере. Когда стрелка в фокусе, :hover темы добавлял фон, поэтому повышаем специфичность в стилях.

Думаю добавлять код самого slick slider и стилей нет смысла. Хотя если надо, в варианте плагина, слайдер можно скачать по ссылке на GitHub

Да. Может это не самый оптимальный вариант и кастомизируется только кодом. Но он работает и поменять контент сможет любой пользователь.

Как говориться, вопросы, пожелания, критика, все в комменты.