「ギャラリー」ブロックを自動スクロールさせ表示する方法

以下の手順で設定します。

1. 「ギャラリー」ブロックを選択します。
2. 設定→アスペクト比を設定します。
3. 高度な設定→追加CSSクラスにmy-slickと入力します。

以下のコードをfunctions.phpに追加します。

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('slick-theme-style', get_template_directory_uri() . '/plugins/slick/slick-theme.css');
  wp_enqueue_script('slick-js', get_template_directory_uri() . '/plugins/slick/slick.min.js', ['jquery'], false, true);

  ob_start();
  ?>
  jQuery(function ($) {
    $(".my-slick").slick({
      arrows: false,            // 矢印を非表示
      autoplay: true,           // 自動再生を有効に設定
      autoplaySpeed: 0,         // 自動再生の間隔（ミリ秒）、0で無限
      cssEase: "linear",        // アニメーションのイージング（線形）
      pauseOnFocus: false,      // スライドにフォーカスが当たったときに一時停止しない
      pauseOnHover: false,      // スライドにマウスオーバーしたときに一時停止しない
      slidesToScroll: 1,        // スクロールするスライドの数
      slidesToShow: 3,          // 表示するスライドの数
      speed: 5000               // スライドが切り替わる速度（ミリ秒）
    });

    // SafariやFirefoxで画像サイズが正しく取得できない問題対策
    setTimeout(() => {
      $(".my-slick").slick('setPosition');
    }, 500);
  });
  <?php
   wp_add_inline_script('slick-js', ob_get_clean(), 'after');
}, 20);