Web Design Leaves

<?php
/**
 * Plugin Name:     My Slider
 * Description:     Example block written with ESNext standard and JSX support – build step required.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     my-slider
 *
 * @package         wdl
 */

function wdl_my_slider_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/my-slider" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-my-slider-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-my-slider-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-my-slider-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/my-slider', array(
    'editor_script' => 'wdl-my-slider-block-editor',
    'editor_style'  => 'wdl-my-slider-block-editor',
    'style'         => 'wdl-my-slider-block',
  ) );
}
add_action( 'init', 'wdl_my_slider_block_init' );

function add_my_slider_scripts_and_styles() {
  $dir = dirname( __FILE__ );

  //Swiper の JavaScript ファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider',
    plugins_url( '/assets/swiper.js', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.js" ),
    true
  );

  //Swiper を初期化するためのファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider-init',
    plugins_url( '/assets/init-swiper.js', __FILE__ ),
    //依存ファイルに上記 Swiper の JavaScript を指定
    array('swiper-slider'),
    filemtime( "$dir/assets/init-swiper.js" ),
    true
  );

  //Swiper の CSS ファイルの読み込み（エンキュー）
  wp_enqueue_style(
    'swipe-style',
    plugins_url( '/assets/swiper.css', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.css"  )
  );

}
add_action('enqueue_block_assets', 'add_my_slider_scripts_and_styles');

import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, PanelRow, ToggleControl } from '@wordpress/components';
import './editor.scss';

export default function Edit( props ) {
  //分割代入を使って props 経由でプロパティを変数に代入
  const { className, attributes, setAttributes} = props;

  //選択された画像の情報を更新する関数
  const onSelectImage = ( media ) => {
    // media から map で id プロパティの配列を生成
    const media_ID = media.map((image) => image.id);
    // media から map で url プロパティの配列を生成
    const imageUrl = media.map((image) => image.url);
    // media から map で alt プロパティの配列を生成
    const imageAlt = media.map((image) => image.alt);

    setAttributes( {
      mediaID: media_ID,  //メディア ID の配列
      imageUrl: imageUrl,  // URL の配列
      imageAlt: imageAlt,  // alt 属性の配列
    } );
  };

  //URL の配列から画像を生成
  const getImages = ( urls ) => {
    let imagesArray = urls.map(( url ) => {
      return (
        <img
          src={ url }
          className="image"
          alt="アップロード画像"
        />
      );
    });
    return imagesArray;
  }

  //メディアライブラリを開くボタンをレンダリングする関数（上記関数を使って画像をレンダリング）
  const getImageButton = (open) => {
    if(attributes.imageUrl.length > 0 ) {
      return (
        <div onClick={ open } className="block-container">
         { getImages( attributes.imageUrl ) }
        </div>
      )
    }
    else {
      return (
        <div className="button-container">
          <Button
            onClick={ open }
            className="button button-large"
          >
            画像をアップロード
          </Button>
        </div>
      );
    }
  }

  //画像を削除する（メディアをリセットする）関数
  const removeMedia = () => {
    setAttributes({
      mediaID: [],
      imageUrl: [],
      imageAlt: [],
    });
  }

  //インスペクターを追加する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title='Slider Settings'
          initialOpen={true}
        >
          <PanelRow>
            <ToggleControl
              label="ナビゲーションボタン"
              checked={attributes.showNavigationButton}
              onChange={(val) => setAttributes({ showNavigationButton: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="ページネーション"
              checked={attributes.showPagination}
              onChange={(val) => setAttributes({ showPagination: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="スクロールバー"
              checked={attributes.showScrollbar}
              onChange={(val) => setAttributes({ showScrollbar: val })}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  return (
    [
      getInspectorControls(),  //インスペクター
      <div className={ className }>
      <MediaUploadCheck>
        <MediaUpload
          multiple={ true }
          gallery={ true }
          onSelect={ onSelectImage }
          allowedTypes={ ['image'] }
          value={ attributes.mediaID }
          render={ ({ open }) => getImageButton( open ) }
        />
      </MediaUploadCheck>
      { attributes.imageUrl.length != 0  &&   // imageUrl（配列の長さ）で判定
        <MediaUploadCheck>
          <Button
            onClick={removeMedia}
            isLink
            isDestructive
            className="removeImage">画像を削除
          </Button>
        </MediaUploadCheck>
      }
    </div>
    ]
  );
}

import { Fragment } from '@wordpress/element';

export default function save( { attributes } ) {
  //画像をレンダリングする関数
  const getImagesSave = ( url, alt ) => {
    let image_elem;
    let imagesArray = [];

    for( let i = 0 ; i < url.length; i ++ ) {
      if( url.length === 0 ) {
        image_elem = null;
      }else{
        if( alt[i] ) {
          image_elem =  (
            <div className="swiper-slide">
              <img
                className="card_image"
                src={ url[i] }
                alt={ alt[i] }
              />
            </div>
          );
        }else{
          image_elem = (
            <div className="swiper-slide">
              <img
                className="card_image"
                src={ url[i] }
                alt=""
                aria-hidden="true"
              />
            </div>
          );
        }
      }
      imagesArray.push( image_elem ) ;
    }
    return imagesArray;
  }

  return (
    <div className="slider-container">
      <div className="swiper-container">
        <div className="swiper-wrapper">
          { getImagesSave( attributes.imageUrl, attributes.imageAlt ) }
        </div>
        { attributes.showPagination &&
          <div className="swiper-pagination"></div>
        }
        { attributes.showNavigationButton &&
          <Fragment>
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
          </Fragment>
        }
        { attributes.showScrollbar &&
          <div className="swiper-scrollbar"></div>
        }
      </div>
    </div>
  );
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType( 'wdl/my-slider', {
  title: 'My Slider',
  description: 'Example block written with ESNext standard and JSX support',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //属性を設定
  attributes: {
    //属性 mediaID（メディア ID の配列）
    mediaID: {
      type: 'array',
      default: []
    },
    //img の src に指定する URL
    imageUrl: {
      type: 'array',
      default: []
    },
    //img の alt 属性の値
    imageAlt: {
      type: 'array',
      default: []
    },
    //ナビゲーションボタンの表示・非表示
    showNavigationButton: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showPagination: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showScrollbar: {
      type: 'boolean',
      default: true
    },
    //img の キャプションの値
    imageCaption: {
      type: 'array',
      default: []
    },
    //キャプションの表示・非表示
    showCaption: {
      type: 'boolean',
      default: true
    },
  },
  edit: Edit,
  //save 関数で null を返す
  save: () => { return null }
} );

<?php
/**
 * Plugin Name:     My Slider
 * Description:     Example block written with ESNext standard and JSX support – build step required.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     my-slider
 *
 * @package         wdl
 */

function wdl_my_slider_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/my-slider" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-my-slider-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-my-slider-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-my-slider-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/my-slider', array(
    'editor_script' => 'wdl-my-slider-block-editor',
    'editor_style'  => 'wdl-my-slider-block-editor',
    'style'         => 'wdl-my-slider-block',
    'render_callback' => 'my_slider_render',
    //属性を追加
    'attributes' => [
      //属性 mediaID（メディア ID の配列）
      'mediaID' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageUrl（URL の配列）
      'imageUrl' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageAlt（alt 属性の配列）
      'imageAlt' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageCaption（キャプションの配列）
      'imageCaption' => [
        'type' => 'array',
        'default' => []
      ],
      //ナビゲーションボタンの表示・非表示
      'showNavigationButton' => [
        'type' => 'boolean',
        'default' => true
      ],
      //ページネーションの表示・非表示
      'showPagination' => [
        'type' => 'boolean',
        'default' => true
      ],
      //スクロールバーンの表示・非表示
      'showScrollbar' => [
        'type' => 'boolean',
        'default' => true
      ],
      //キャプションの表示・非表示
      'showCaption' => [
        'type' => 'boolean',
        'default' => true
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_my_slider_block_init' );

function my_slider_render($attributes, $content) {

  //属性 imageUrl が空なら何も表示しない
  if (empty($attributes['imageUrl'])) {
    return '';
  }

  //属性 imageUrl が空でなければスライダーのマークアップを組み立てる
  $output = '<div class="wp-block-wdl-my-slider">';
  $output .= '<div class="swiper-container" '. $slider_options .'>';
  $output .= '<div class="swiper-wrapper">';

  $imageUrl = $attributes['imageUrl'];
  $imageCaption = $attributes['imageCaption'];
  $imageAlt = $attributes['imageAlt'];

  for($i = 0; $i < count($imageUrl); $i ++) {
    $img_url = esc_url($imageUrl[$i]);
    $img_caption = $imageCaption[$i] ? esc_html($imageCaption[$i]): '';
    $img_alt = $imageAlt[$i] ? esc_attr($imageAlt[$i]): '';
    if($img_alt !=="") {
      $output .= '<div class="swiper-slide"><img className="card_image" src="'
                 . $img_url . '" alt="' . $img_alt . '" />';
    }else {
      $output .= '<div class="swiper-slide"><img className="card_image" src="'
                 . $img_url . '" alt="" aria-hidden="true" />';
    }
    //キャプションを表示する場合
    if($attributes['showCaption']) {
      if($img_caption) {
        $output .= '<div class="caption">'. $img_caption . '</div>';
      }
    }
    $output .= '</div>';
  }

  $output .= '</div>';
  //ページネーションを表示する場合
  if($attributes['showPagination']) {
    $output .= '<div class="swiper-pagination"></div>';
  }
  //ナビゲーションボタンを表示する場合
  if($attributes['showNavigationButton']) {
    $output .= '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
  }
  //スクロールバーを表示する場合
  if($attributes['showScrollbar']) {
    $output .= '<div class="swiper-scrollbar"></div>';
  }
  $output .= '</div></div>';
  return $output;
}

function add_my_slider_scripts_and_styles() {
  $dir = dirname( __FILE__ );

  //Swiper の JavaScript ファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider',
    plugins_url( '/assets/swiper.js', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.js" ),
    true
  );

  //Swiper を初期化するためのファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider-init',
    plugins_url( '/assets/init-swiper.js', __FILE__ ),
    //依存ファイルに上記 Swiper の JavaScript を指定
    array('swiper-slider'),
    filemtime( "$dir/assets/init-swiper.js" ),
    true
  );

  //Swiper の CSS ファイルの読み込み（エンキュー）
  wp_enqueue_style(
    'swipe-style',
    plugins_url( '/assets/swiper.css', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.css"  )
  );

}
add_action('enqueue_block_assets', 'add_my_slider_scripts_and_styles');

import { BlockControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import { Toolbar, PanelBody, PanelRow, ToggleControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { useEffect } from '@wordpress/element';
import './editor.scss';

export default function Edit( props ) {
  //分割代入を使って props 経由でプロパティを変数に代入
  const { className, attributes, setAttributes} = props;

  //選択された画像の情報を更新する関数
  const onSelectImage = ( media ) => {
    // media から map で id プロパティの配列を生成
    const media_ID = media.map((image) => image.id);
    // media から map で url プロパティの配列を生成
    const imageUrl = media.map((image) => image.url);
    // media から map で alt プロパティの配列を生成
    const imageAlt = media.map((image) => image.alt);
    // media から map で caption プロパティの配列を生成
    const imageCaption = media.map((image) => image.caption);

    setAttributes( {
      mediaID: media_ID,  //メディア ID の配列
      imageUrl: imageUrl,  // URL の配列
      imageAlt: imageAlt,  // alt 属性の配列
      imageCaption: imageCaption,  // キャプションの配列
    } );
  };

  //URL の配列から画像を生成
  const getImages = ( urls ) => {
    let imagesArray = urls.map(( url ) => {
      return (
        <img
          src={ url }
          className="image"
          alt="アップロード画像"
        />
      );
    });
    return imagesArray;
  }

  //URL とキャプションの配列から画像をキャプション付きで生成（for 文に変更）
  const getImagesWithCaption = ( url, caption ) => {
    let imagesArray = [];
    for(let i = 0 ; i < url.length; i ++) {
      imagesArray.push (
        <figure>
          <img
            src={ url[i] }
            className="image"
            alt="アップロード画像"
          />
          <figcaption className="block-image-caption">
            { caption[i] ? caption[i] : '' }
          </figcaption>
        </figure>
      );
    }
    return imagesArray;
  }

  //URL の配列から画像を生成（スライダー表示用）
  const getSliderImages = ( url, caption ) => {
    let imagesArray = [];
    for(let i = 0 ; i < url.length; i ++) {
      let image = '';
      if(attributes.showCaption) {
        image = (
          <div className="swiper-slide">
            <img
              src={ url[i] }
              className="image"
              alt="アップロード画像"
            />
            <div class="caption">
               { caption[i] ? caption[i] : '' }
            </div>
          </div>
        )
      }else{
        image = (
          <div className="swiper-slide">
            <img
              src={ url[i] }
              className="image"
              alt="アップロード画像"
            />
          </div>
        )
      }

      imagesArray.push ( image );
    }
    return imagesArray;
  }

  const initSwiper = () => {
    let editorSwiper = new Swiper ('.swiper-container', {
      //自動的にスライダーを開始する場合は以下のコメントアウトを削除
      /*autoplay: {
        delay: 4000, //4秒間隔でスライドを自動的に実行
      },*/

      //最後に達したら先頭に戻る
      loop: true,

      //ページネーション表示の設定
      pagination: {
        el: '.swiper-pagination', //ページネーションの要素
        type: 'bullets', //ページネーションの種類
        clickable: true, //クリックに反応させる
      },

      //ナビゲーションボタン（矢印）表示の設定
      navigation: {
        nextEl: '.swiper-button-next', //「次へボタン」要素の指定
        prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
      },

      //スクロールバー表示の設定
      scrollbar: {
        el: '.swiper-scrollbar', //要素の指定
      },
    })
  }

  const getImageButton = (open) => {
    if(attributes.imageUrl.length > 0 ) {
      if(attributes.isEditMode) {
        return (
          <div onClick={ open } className="slider-block-container">
           { attributes.showCaption ? getImagesWithCaption( attributes.imageUrl, attributes.imageCaption ) : getImages( attributes.imageUrl ) }
          </div>
        )
      }else{
        //isEditMode が false ならスライダーを表示
        return (
          <div className="slider-container">
            <div className="swiper-container">
              <div className="swiper-wrapper">
                { getSliderImages(attributes.imageUrl, attributes.imageCaption) }
              </div>
              { attributes.showPagination &&
                <div className="swiper-pagination"></div>
              }
              { attributes.showNavigationButton &&
                <Fragment>
                  <div className="swiper-button-prev"></div>
                  <div className="swiper-button-next"></div>
                </Fragment>
              }
              { attributes.showScrollbar &&
                <div className="swiper-scrollbar"></div>
              }
            </div>
          </div>
        )
      }
    }
    else {
      return (
        <div className="button-container">
          <Button
            onClick={ open }
            className="button button-large"
          >
            画像をアップロード
          </Button>
        </div>
      );
    }
  };

  //画像を削除する（メディアをリセットする）関数
  const removeMedia = () => {
    setAttributes({
      mediaID: [],
      imageUrl: [],
      imageAlt: [],
      imageCaption: [],
    });
  }

  //インスペクターを追加する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title='Slider Settings'
          initialOpen={true}
        >
          <PanelRow>
            <ToggleControl
              label="ナビゲーションボタン"
              checked={attributes.showNavigationButton}
              onChange={(val) => setAttributes({ showNavigationButton: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="ページネーション"
              checked={attributes.showPagination}
              onChange={(val) => setAttributes({ showPagination: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="スクロールバー"
              checked={attributes.showScrollbar}
              onChange={(val) => setAttributes({ showScrollbar: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="キャプション"
              checked={attributes.showCaption}
              onChange={(val) => setAttributes({ showCaption: val })}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  const getBlockControls = () => {
    return (
      <BlockControls>
        <Toolbar>
          <Button
            //属性 isEditMode の値により表示するラベルを切り替え
            label={ attributes.isEditMode ? "Preview" : "Edit" }
            //属性 isEditMode の値により表示するアイコンを切り替え
            icon={ attributes.isEditMode ? "format-image" : "edit" }
            className="my-custom-button"
            //setAttributes を使って属性の値を更新（真偽値を反転）
            onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
          />
        </Toolbar>
      </BlockControls>
    );
  }

  //useEffect フックを使ってスライダーを初期化
  useEffect(() => {
    initSwiper();
  }, [attributes.isEditMode]);

  return (
    [
      getBlockControls(), //プレビューボタン
      getInspectorControls(),  //インスペクター
      <div className={ className }>
        <MediaUploadCheck>
          <MediaUpload
            multiple={ true }
            gallery={ true }
            onSelect={ onSelectImage }
            allowedTypes={ ['image'] }
            value={ attributes.mediaID }
            render={ ({ open }) => getImageButton( open ) }
          />
        </MediaUploadCheck>
        { attributes.imageUrl.length != 0  && attributes.isEditMode &&
          <MediaUploadCheck>
            <Button
              onClick={removeMedia}
              isLink
              isDestructive
              className="removeImage">画像を削除
            </Button>
            <Button
              onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
              isLink
              className="removeImage">スライダーをプレビュー
            </Button>
          </MediaUploadCheck>
        }
      </div>
    ]
  );
}

import { BlockControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import {  Toolbar, PanelBody, PanelRow, ToggleControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { useEffect } from '@wordpress/element';
import ServerSideRender from '@wordpress/server-side-render';
//または import { ServerSideRender } from '@wordpress/editor';
import './editor.scss';

export default function Edit( props ) {
  //分割代入を使って props 経由でプロパティを変数に代入
  const { className, attributes, setAttributes} = props;

  //選択された画像の情報を更新する関数
  const onSelectImage = ( media ) => {
    const media_ID = media.map((image) => image.id);
    const imageUrl = media.map((image) => image.url);
    const imageAlt = media.map((image) => image.alt);
    const imageCaption = media.map((image) => image.caption);

    setAttributes( {
      mediaID: media_ID,  //メディア ID の配列
      imageUrl: imageUrl,  // URL の配列
      imageAlt: imageAlt,  // alt 属性の配列
      imageCaption: imageCaption,  // キャプションの配列
    } );
  };

  //URL の配列から画像を生成
  const getImages = ( urls ) => {
    let imagesArray = urls.map(( url ) => {
      return (
        <img
          src={ url }
          className="image"
          alt="アップロード画像"
        />
      );
    });
    return imagesArray;
  }

  //URL とキャプションの配列から画像をキャプション付きで生成（for 文に変更）
  const getImagesWithCaption = ( url, caption ) => {
    let imagesArray = [];
    for(let i = 0 ; i < url.length; i ++) {
      imagesArray.push (
        <figure>
          <img
            src={ url[i] }
            className="image"
            alt="アップロード画像"
          />
          <figcaption className="block-image-caption">
            { caption[i] ? caption[i] : '' }
          </figcaption>
        </figure>
      );
    }
    return imagesArray;
  }

  //メディアライブラリを開くボタンをレンダリングする関数（上記関数を使って画像をレンダリング）
  const getImageButton = (open) => {
    if(attributes.imageUrl.length > 0 ) {
      return (
        <div onClick={ open } className="slider-block-container">
         { attributes.showCaption ?
             getImagesWithCaption( attributes.imageUrl, attributes.imageCaption ) :
             getImages( attributes.imageUrl ) }
        </div>
      )
    }
    else {
      return (
        <div className="button-container">
          <Button
            onClick={ open }
            className="button button-large"
          >
            画像をアップロード
          </Button>
        </div>
      );
    }
  };

  //画像を削除する（メディアをリセットする）関数
  const removeMedia = () => {
    setAttributes({
      mediaID: [],
      imageUrl: [],
      imageAlt: [],
      imageCaption: [],
    });
  }

  //インスペクターを追加する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title='Slider Settings'
          initialOpen={true}
        >
          <PanelRow>
            <ToggleControl
              label="ナビゲーションボタン"
              checked={attributes.showNavigationButton}
              onChange={(val) => setAttributes({ showNavigationButton: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="ページネーション"
              checked={attributes.showPagination}
              onChange={(val) => setAttributes({ showPagination: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="スクロールバー"
              checked={attributes.showScrollbar}
              onChange={(val) => setAttributes({ showScrollbar: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="キャプション"
              checked={attributes.showCaption}
              onChange={(val) => setAttributes({ showCaption: val })}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  //ツールバーに編集モードとプレビューモードを切り替えるボタンを表示する関数
  const getBlockControls = () => {
    return (
      <BlockControls>
        <Toolbar>
          <Button
            //属性 isEditMode の値により表示するラベルを切り替え
            label={ attributes.isEditMode ? "Preview" : "Edit" }
            //属性 isEditMode の値により表示するアイコンを切り替え
            icon={ attributes.isEditMode ? "format-image" : "edit" }
            className="my-custom-button"
            //setAttributes を使って属性の値を更新（真偽値を反転）
            onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
          />
        </Toolbar>
      </BlockControls>
    );
  }

  //Swiper のスライダーを初期化する関数
  const initSwiper = () => {
    let editorSwiper = new Swiper ('.swiper-container', {
      //自動的にスライダーを開始する場合は以下のコメントアウトを削除
      /*autoplay: {
        delay: 4000, //4秒間隔でスライドを自動的に実行
      },*/

      //最後に達したら先頭に戻る
      loop: true,

      //ページネーション表示の設定
      pagination: {
        el: '.swiper-pagination', //ページネーションの要素
        type: 'bullets', //ページネーションの種類
        clickable: true, //クリックに反応させる
      },

      //ナビゲーションボタン（矢印）表示の設定
      navigation: {
        nextEl: '.swiper-button-next', //「次へボタン」要素の指定
        prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
      },

      //スクロールバー表示の設定
      scrollbar: {
        el: '.swiper-scrollbar', //要素の指定
      },
    })
  }

  //useEffect フックを使ってスライダーの初期化を実行
  useEffect(() => {
    initSwiper();
  });

  return (
    [
      getBlockControls(), //プレビューボタン
      getInspectorControls(),  //インスペクター
      <div className={ className }>
        { attributes.isEditMode &&  // isEditMode が true の場合（編集 モード）
          <Fragment>
            <MediaUploadCheck>
              <MediaUpload
                multiple={ true }
                gallery={ true }
                onSelect={ onSelectImage }
                allowedTypes={ ['image'] }
                value={ attributes.mediaID }
                render={ ({ open }) => getImageButton( open ) }
              />
            </MediaUploadCheck>
            { attributes.imageUrl.length != 0  &&   // imageUrl（配列の長さ）で判定
              <MediaUploadCheck>
                <Button
                  onClick={removeMedia}
                  isLink
                  isDestructive
                  className="removeImage">画像を削除
                </Button>
                <Button
                  onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
                  isLink
                  className="removeImage">スライダーをプレビュー
                </Button>
              </MediaUploadCheck>
            }
          </Fragment>
        }
        { !attributes.isEditMode &&   // isEditMode が false の場合（プレビュー モード）
          <ServerSideRender
            block={props.name}
            attributes={{
              mediaID: attributes.mediaID,
              imageUrl: attributes.imageUrl,
              imageCaption: attributes.imageCaption,
            }}
          />
        }
      </div>
    ]
  );
}

const sliderElems = document.querySelectorAll('.wp-block-wdl-my-slider .swiper-container');

for ( let element of sliderElems ) {
  let elementSpeed = element.getAttribute('data-speed'),
      elementDirection = element.getAttribute('data-direction'),
      elementAutoPlay = element.getAttribute('data-autoplay'),
      elementLoop = element.getAttribute('data-loop'),
      elementEffect = element.getAttribute('data-effect'),
      elementSlidesPerView = element.getAttribute('data-slidesPerView'),
      elementCenteredSlides = element.getAttribute('data-centeredSlides');

  if (!elementSpeed) {
    elementSpeed = 300;
  }
  if (!elementDirection) {
    elementDirection = 'horizontal';
  }
  if (elementAutoPlay) {
    elementAutoPlay = parseInt(elementAutoPlay);
  } else {
    elementAutoPlay = 999999999;
  }
  if (elementLoop == 'true') {
    elementLoop = true;
  } else {
    elementLoop = false;
  }
  if (!elementEffect) {
    elementEffect = 'slide';
  }
  if (!elementSlidesPerView) {
    elementSlidesPerView = 1;
  }
  if (elementCenteredSlides == 'true') {
    elementCenteredSlides = true;
  } else {
    elementCenteredSlides = false;
  }

  let swiperSlider = new Swiper(element, {
    direction: elementDirection,
    speed: parseInt(elementSpeed),
    autoplay: {
      delay: elementAutoPlay
    },
    loop: elementLoop,
    effect: elementEffect,
    slidesPerView: parseInt(elementSlidesPerView),
    centeredSlides: elementCenteredSlides,
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  });
}

<?php
/**
 * Plugin Name:     My Slider
 * Description:     Example block written with ESNext standard and JSX support – build step required.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     my-slider
 *
 * @package         wdl
 */

function wdl_my_slider_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/my-slider" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-my-slider-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-my-slider-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-my-slider-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/my-slider', array(
    'editor_script' => 'wdl-my-slider-block-editor',
    'editor_style'  => 'wdl-my-slider-block-editor',
    'style'         => 'wdl-my-slider-block',
    'render_callback' => 'my_slider_render',
    //属性を追加
    'attributes' => [
      //属性 mediaID（メディア ID の配列）
      'mediaID' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageUrl（URL の配列）
      'imageUrl' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageAlt（alt 属性の配列）
      'imageAlt' => [
        'type' => 'array',
        'default' => []
      ],
      //属性 imageCaption（キャプションの配列）
      'imageCaption' => [
        'type' => 'array',
        'default' => []
      ],
      //ナビゲーションボタンの表示・非表示
      'showNavigationButton' => [
        'type' => 'boolean',
        'default' => true
      ],
      //ページネーションの表示・非表示
      'showPagination' => [
        'type' => 'boolean',
        'default' => true
      ],
      //スクロールバーの表示・非表示
      'showScrollbar' => [
        'type' => 'boolean',
        'default' => true
      ],
      //キャプションの表示・非表示
      'showCaption' => [
        'type' => 'boolean',
        'default' => true
      ],
      //スライダー自動再生
      'slideAutoPlay' => [
        'type' => 'number',
        'default' => 0
      ],
      //スライダースピード
      'slideSpeed' => [
        'type' => 'number',
        'default' => 300
      ],
      //スライダーのループ設定
      'slideLoopEnable' => [
        'type' => 'boolean',
        'default' => true
      ],
      //スライダーのエフェクト
      'slideEffect' => [
        'type' => 'string',
        'default' => 'slide'
      ],
      //スライダーの画像表示枚数
      'slidesPerView' => [
        'type' => 'number',
        'default' => 1
      ],
      //スライダー画像の中央寄せ
      'slideCentered' => [
        'type' => 'boolean',
        'default' => false
      ],
    ]
  ) );
}
add_action( 'init', 'wdl_my_slider_block_init' );

function my_slider_render($attributes, $content) {
  //属性 imageUrl が空なら何も表示しない
  if (empty($attributes['imageUrl'])) {
    return '';
  }

  //スライダーのオプション（attributes の値により data 属性を追加）
  $slider_options = '';

  if($attributes['slideAutoPlay'] !== 0) {
    $slider_options .= 'data-autoplay="' .$attributes['slideAutoPlay'] . '"';
  }

  $slider_options .=  ' data-speed="' .$attributes['slideSpeed'] . '"';

  if($attributes['slideLoopEnable']) {
    $slider_options .=  ' data-loop="true"';
  }

  if($attributes['slideEffect'] !== 'slide') {
    $slider_options .= 'data-effect="' .$attributes['slideEffect'] . '"';
  }

  $slider_options .=  ' data-slidesPerView="' .$attributes['slidesPerView'] . '"';

  if($attributes['slideCentered']) {
    $slider_options .=  ' data-centeredSlides="true"';
  }

  //属性 imageUrl が空でなければスライダーのマークアップを組み立てる
  $output = '<div class="wp-block-wdl-my-slider">';
  $output .= '<div class="swiper-container" '. $slider_options .'>';
  $output .= '<div class="swiper-wrapper">';

  $imageUrl = $attributes['imageUrl'];
  $imageCaption = $attributes['imageCaption'];
  $imageAlt = $attributes['imageAlt'];

  for($i = 0; $i < count($imageUrl); $i ++) {
    $img_url = esc_url($imageUrl[$i]);
    $img_caption = $imageCaption[$i] ? esc_html($imageCaption[$i]): '';
    $img_alt = $imageAlt[$i] ? esc_attr($imageAlt[$i]): '';
    if($img_alt !=="") {
      $output .= '<div class="swiper-slide" ><img className="card_image" src="'
                 . $img_url . '" alt="' . $img_alt . '" />';
    }else {
      $output .= '<div class="swiper-slide" ><img className="card_image" src="'
                 . $img_url . '" alt="" aria-hidden="true" />';
    }
    //キャプションを表示する場合
    if($attributes['showCaption']) {
      if($img_caption) {
        $output .= '<div class="caption">'. $img_caption . '</div>';
      }
    }
    $output .= '</div>';
  }

  $output .= '</div>';
  //ページネーションを表示する場合
  if($attributes['showPagination']) {
    $output .= '<div class="swiper-pagination"></div>';
  }
  //ナビゲーションボタンを表示する場合
  if($attributes['showNavigationButton']) {
    $output .= '<div class="swiper-button-prev"></div><div class="swiper-button-next"></div>';
  }
  //スクロールバーを表示する場合
  if($attributes['showScrollbar']) {
    $output .= '<div class="swiper-scrollbar"></div>';
  }
  $output .= '</div></div>';
  return $output;
}

function add_my_slider_scripts_and_styles() {
  $dir = dirname( __FILE__ );

  //Swiper の JavaScript ファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider',
    plugins_url( '/assets/swiper.js', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.js" ),
    true
  );

  if(! is_admin()) {
    //Swiper を初期化するためのファイルの読み込み（エンキュー）
    wp_enqueue_script(
      'swiper-slider-init',
      plugins_url( '/assets/my-swiper-init.js', __FILE__ ),
      //依存ファイルに上記 Swiper の JavaScript を指定
      array('swiper-slider'),
      filemtime( "$dir/assets/my-swiper-init.js" ),
      true
    );
  }

  //Swiper の CSS ファイルの読み込み（エンキュー）
  wp_enqueue_style(
    'swipe-style',
    plugins_url( '/assets/swiper.css', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.css"  )
  );

}
add_action('enqueue_block_assets', 'add_my_slider_scripts_and_styles');

import { BlockControls, MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import { Toolbar, PanelBody, PanelRow, ToggleControl, RangeControl, SelectControl, CheckboxControl } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import { useEffect } from '@wordpress/element';
import './editor.scss';

export default function Edit( props ) {
  //分割代入を使って props 経由でプロパティを変数に代入
  const { className, attributes, setAttributes} = props;

  //選択された画像の情報を更新する関数
  const onSelectImage = ( media ) => {
    const media_ID = media.map((image) => image.id);
    const imageUrl = media.map((image) => image.url);
    const imageAlt = media.map((image) => image.alt);
    const imageCaption = media.map((image) => image.caption);

    setAttributes( {
      mediaID: media_ID,  //メディア ID の配列
      imageUrl: imageUrl,  // URL の配列
      imageAlt: imageAlt,  // alt 属性の配列
      imageCaption: imageCaption,  // キャプションの配列
    } );
  };

  //URL の配列から画像を生成
  const getImages = ( urls ) => {
    let imagesArray = urls.map(( url ) => {
      return (
        <img
          src={ url }
          className="image"
          alt="アップロード画像"
        />
      );
    });
    return imagesArray;
  }

  //URL とキャプションの配列から画像をキャプション付きで生成
  const getImagesWithCaption = ( url, caption ) => {
    let imagesArray = [];
    for(let i = 0 ; i < url.length; i ++) {
      imagesArray.push (
        <figure>
          <img
            src={ url[i] }
            className="image"
            alt="アップロード画像"
          />
          <figcaption className="block-image-caption">
            { caption[i] ? caption[i] : '' }
          </figcaption>
        </figure>
      );
    }
    return imagesArray;
  }

  //URL の配列から画像を生成（スライダー表示用）
  const getSliderImages = ( url, caption ) => {
    let imagesArray = [];
    for(let i = 0 ; i < url.length; i ++) {
      let image = '';
      if(attributes.showCaption) {
        image = (
          <div className="swiper-slide">
            <img
              src={ url[i] }
              className="image"
              alt="アップロード画像"
            />
            <div class="caption">
               { caption[i] ? caption[i] : '' }
            </div>
          </div>
        )
      }else{
        image = (
          <div className="swiper-slide">
            <img
              src={ url[i] }
              className="image"
              alt="アップロード画像"
            />
          </div>
        )
      }

      imagesArray.push ( image );
    }
    return imagesArray;
  }

  //スライダーを初期化する関数（属性の値をパラメータに指定して動的にオプションを設定）
  const initSwiper = () => {

    let elementSpeed = attributes.slideSpeed,
      elementAutoPlay = attributes.slideAutoPlay,
      elementLoop = attributes.slideLoopEnable,
      elementEffect = attributes.slideEffect,
      elementSlidesPerView = attributes.slidesPerView,
      elementCenteredSlides = attributes.slideCentered;

    //自動再生はインスペクターで 0 の場合は、大きな値を指定して実質的に自動再生しないようにする
    if (elementAutoPlay != 0) {
      elementAutoPlay = parseInt(elementAutoPlay);
    } else {
      elementAutoPlay = 999999999;
    }

    let swiperSlider = new Swiper('.swiper-container', {
      speed: parseInt(elementSpeed),
      autoplay: {
        delay: elementAutoPlay
      },
      loop: elementLoop,
      effect: elementEffect,
      slidesPerView: parseInt(elementSlidesPerView),
      centeredSlides: elementCenteredSlides,
      pagination: {
        el: '.swiper-pagination', //ページネーションの要素
        type: 'bullets', //ページネーションの種類
        clickable: true, //クリックに反応させる
      },
      navigation: {
        nextEl: '.swiper-button-next', //「次へボタン」要素の指定
        prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
      },
      scrollbar: {
        el: '.swiper-scrollbar', //要素の指定
      },
    });
  }

  const getImageButton = (open) => {
    if(attributes.imageUrl.length > 0 ) {
      if(attributes.isEditMode) {
        return (
          <div onClick={ open } className="slider-block-container">
           { attributes.showCaption ? getImagesWithCaption( attributes.imageUrl, attributes.imageCaption ) : getImages( attributes.imageUrl ) }
          </div>
        )
      }else{
        //isEditMode が false ならスライダーを表示
        return (
          <div className="slider-container">
            <div className="swiper-container">
              <div className="swiper-wrapper">
                { getSliderImages(attributes.imageUrl, attributes.imageCaption) }
              </div>
              { attributes.showPagination &&
                <div className="swiper-pagination"></div>
              }
              { attributes.showNavigationButton &&
                <Fragment>
                  <div className="swiper-button-prev"></div>
                  <div className="swiper-button-next"></div>
                </Fragment>
              }
              { attributes.showScrollbar &&
                <div className="swiper-scrollbar"></div>
              }
            </div>
          </div>
        )
      }
    }
    else {
      return (
        <div className="button-container">
          <Button
            onClick={ open }
            className="button button-large"
          >
            画像をアップロード
          </Button>
        </div>
      );
    }
  };

  //画像を削除する（メディアをリセットする）関数
  const removeMedia = () => {
    setAttributes({
      mediaID: [],
      imageUrl: [],
      imageAlt: [],
      imageCaption: [],
    });
  }

  //インスペクターを追加する関数
  const getInspectorControls = () => {
    return (
      <InspectorControls>
        <PanelBody
          title='スライダー表示設定'
          initialOpen={true}
        >
          <PanelRow>
            <ToggleControl
              label="ナビゲーションボタン"
              checked={attributes.showNavigationButton}
              onChange={(val) => setAttributes({ showNavigationButton: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="ページネーション"
              checked={attributes.showPagination}
              onChange={(val) => setAttributes({ showPagination: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="スクロールバー"
              checked={attributes.showScrollbar}
              onChange={(val) => setAttributes({ showScrollbar: val })}
            />
          </PanelRow>
          <PanelRow>
            <ToggleControl
              label="キャプション"
              checked={attributes.showCaption}
              onChange={(val) => setAttributes({ showCaption: val })}
            />
          </PanelRow>
        </PanelBody>
        <PanelBody
          title='スライダー詳細設定'
          initialOpen={false}
        >
          <PanelRow>
            <RangeControl
              label='自動再生'
              value={attributes.slideAutoPlay}
              onChange={(val) => setAttributes({ slideAutoPlay: val })}
              min={0}
              max={8000}
              step={100}
              help="自動生成しない場合は0を指定"
            />
          </PanelRow>
          <PanelRow>
            <RangeControl
              label='スライドスピード'
              value={attributes.slideSpeed}
              onChange={(val) => setAttributes({ slideSpeed: val })}
              min={100}
              max={1000}
              step={100}
            />
          </PanelRow>
          <PanelRow>
            <SelectControl
              label="エフェクト"
              value={attributes.slideEffect}
              options={[
                {label: "Slide", value: 'slide'},
                {label: "Fade", value: 'fade'},
                {label: "Cube", value: 'cube'},
                {label: "Coverflow", value: 'coverflow'},
                {label: "Flip", value: 'flip'},
              ]}
              onChange={(val) => setAttributes({ slideEffect: val })}
            />
          </PanelRow>
          <PanelRow>
            <CheckboxControl
              label="ループ"
              checked={attributes.slideLoopEnable}
              onChange={(val) => setAttributes({ slideLoopEnable: val })}
            />
          </PanelRow>
          <PanelRow>
            <RangeControl
              label='表示枚数'
              value={attributes.slidesPerView}
              onChange={(val) => setAttributes({ slidesPerView: val })}
              min={1}
              max={5}
            />
          </PanelRow>
          <PanelRow>
            <CheckboxControl
              label="中央配置"
              checked={attributes.slideCentered}
              onChange={(val) => setAttributes({ slideCentered: val })}
            />
          </PanelRow>
        </PanelBody>
      </InspectorControls>
    );
  }

  const getBlockControls = () => {
    return (
      <BlockControls>
        <Toolbar>
          <Button
            //属性 isEditMode の値により表示するラベルを切り替え
            label={ attributes.isEditMode ? "Preview" : "Edit" }
            //属性 isEditMode の値により表示するアイコンを切り替え
            icon={ attributes.isEditMode ? "format-image" : "edit" }
            className="my-custom-button"
            //setAttributes を使って属性の値を更新（真偽値を反転）
            onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
          />
        </Toolbar>
      </BlockControls>
    );
  }

  //useEffect フックを使ってスライダーを初期化
  useEffect(() => {
    initSwiper();
  }, [attributes.isEditMode] );

  return (
    [
      getBlockControls(), //プレビューボタン
      getInspectorControls(),  //インスペクター
      <div className={ className }>
      <MediaUploadCheck>
        <MediaUpload
          multiple={ true }
          gallery={ true }
          onSelect={ onSelectImage }
          allowedTypes={ ['image'] }
          value={ attributes.mediaID }
          render={ ({ open }) => getImageButton( open ) }
        />
      </MediaUploadCheck>
      { attributes.imageUrl.length != 0  && attributes.isEditMode &&
        <MediaUploadCheck>
          <Button
            onClick={removeMedia}
            isLink
            isDestructive
            className="removeImage">画像を削除
          </Button>
          <Button
            onClick={() => setAttributes({ isEditMode: !attributes.isEditMode })}
            isLink
            className="removeImage">スライダーをプレビュー
          </Button>
        </MediaUploadCheck>
      }
    </div>
    ]
  );
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType( 'wdl/my-slider', {
  title: 'My Slider',
  description: 'Example block written with ESNext standard and JSX support',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //属性を設定
  attributes: {
    //属性 mediaID（メディア ID の配列）
    mediaID: {
      type: 'array',
      default: []
    },
    //img の src に指定する URL
    imageUrl: {
      type: 'array',
      default: []
    },
    //img の alt 属性の値
    imageAlt: {
      type: 'array',
      default: []
    },
    //ナビゲーションボタンの表示・非表示
    showNavigationButton: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showPagination: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showScrollbar: {
      type: 'boolean',
      default: true
    },
    //img の キャプションの値
    imageCaption: {
      type: 'array',
      default: []
    },
    //キャプションの表示・非表示
    showCaption: {
      type: 'boolean',
      default: true
    },
    //isEditMode を属性として追加
    isEditMode: {
      type: 'boolean',
      default: true
    },
    //スライダー自動再生
    slideAutoPlay: {
      type: 'number',
      default: 0
    },
    //スライダースピード
    slideSpeed: {
      type: 'number',
      default: 300
    },
    //スライダーのループ設定
    slideLoopEnable: {
      type: 'boolean',
      default: true
    },
    //スライダーのエフェクト
    slideEffect: {
      type: 'string',
      default: 'slide'
    },
    //スライダーの画像表示枚数
    slidesPerView: {
      type: 'number',
      default: 1
    },
    //スライダー画像の中央寄せ
    slideCentered: {
      type: 'boolean',
      default: false
    },
  },
  edit: Edit,
  //save 関数で null を返す
  save: () => { return null }
} );

.wp-block-wdl-my-slider .slider-block-container {
  display: flex;
  flex-wrap: wrap;
  margin: 20px;
}

.wp-block-wdl-my-slider .slider-block-container img {
  width: 100%;
  max-width: 160px;
  margin: 10px;
}

.image {
  cursor: pointer;
}

.wp-block-wdl-my-slider figcaption.block-image-caption {
  text-align: center;
  margin-top: 0;
}

$gray: #cccccc;
$off-white: #f1f1f1;

.wp-block-wdl-my-slider {
  background-color: #fefefe;
  color: #666;
  padding: 10px;
  border: 1px solid #ccc;
}

.button-container {
  text-align: center;
  padding: 22% 0;
  background: $off-white;
  border: 1px solid $gray;
  border-radius: 2px;
  margin: 0 0 1.2rem 0;
}

:root {
  --swiper-navigation-color: #B8DCF5;
  --swiper-pagination-color: #B8DCF5;
}

.swiper-container .caption {
  background-color: rgba(0,0,0,0.7);
  color: #fefefe;
  text-align: center;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.swiper-container .swiper-pagination.swiper-pagination-bullets {
  bottom: 30px;
}

{
  "name": "my-slider",
  "version": "0.1.0",
  "description": "Example block written with ESNext standard and JSX support – build step required.",
  "author": "The WordPress Contributors",
  "license": "GPL-2.0-or-later",
  "main": "build/index.js",
  "scripts": {
    "build": "wp-scripts build",
    "format:js": "wp-scripts format-js",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "start": "wp-scripts start",
    "packages-update": "wp-scripts packages-update"
  },
  "devDependencies": {
    "@wordpress/scripts": "^12.3.0"
  }
}

import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';

registerBlockType( 'wdl/my-slider', {
  title: 'My Slider',
  description: 'Example block written with ESNext standard and JSX support',
  category: 'widgets',
  icon: 'smiley',
  supports: {
    html: false,
  },
  //属性を設定
  attributes: {
    //属性 mediaID（メディア ID の配列）
    mediaID: {
      type: 'array',
      default: []
    },
    //img の src に指定する URL
    imageUrl: {
      type: 'array',
      default: []
    },
    //img の alt 属性の値
    imageAlt: {
      type: 'array',
      default: []
    },
    //ナビゲーションボタンの表示・非表示
    showNavigationButton: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showPagination: {
      type: 'boolean',
      default: true
    },
    //ページネーションの表示・非表示
    showScrollbar: {
      type: 'boolean',
      default: true
    },
    //img の キャプションの値
    imageCaption: {
      type: 'array',
      default: []
    },
    //キャプションの表示・非表示
    showCaption: {
      type: 'boolean',
      default: true
    },
    //isEditMode を属性として追加
    isEditMode: {
      type: 'boolean',
      default: true
    },
    //スライダー自動再生
    slideAutoPlay: {
      type: 'number',
      default: 0,
      source: 'attribute',
      selector: '.swiper-container',
      attribute: 'data-autoplay',
    },
    //スライダースピード
    slideSpeed: {
      type: 'number',
      default: 300,
      source: 'attribute',
      selector: '.swiper-container',
      attribute: 'data-speed',
    },
    //スライダーのループ設定
    slideLoopEnable: {
      type: 'boolean',
      default: true,
      source: 'attribute',
      selector: '.swiper-container',
      attribute: 'data-loop',
    },
    //スライダーのエフェクト
    slideEffect: {
      type: 'string',
      default: 'slide',
      source: 'attribute',
      selector: '.swiper-effect',
      attribute: 'data-autoplay',
    },
    //スライダーの画像表示枚数
    slidesPerView: {
      type: 'number',
      default: 1,
      source: 'attribute',
      selector: '.swiper-container',
      attribute: 'data-slidesPerView',
    },
    //スライダー画像の中央寄せ
    slideCentered: {
      type: 'boolean',
      default: false,
      source: 'attribute',
      selector: '.swiper-container',
      attribute: 'data-centeredSlides',
    },
    /* PHP でレンダリングする場合は source プロパティは使えない
    //スライダー自動再生
    slideAutoPlay: {
      type: 'number',
      default: 0
    },
    //スライダースピード
    slideSpeed: {
      type: 'number',
      default: 300
    },
    //スライダーのループ設定
    slideLoopEnable: {
      type: 'boolean',
      default: true
    },
    //スライダーのエフェクト
    slideEffect: {
      type: 'string',
      default: 'slide'
    },
    //スライダーの画像表示枚数
    slidesPerView: {
      type: 'number',
      default: 1
    },
    //スライダー画像の中央寄せ
    slideCentered: {
      type: 'boolean',
      default: false
    }, */
  },
  edit: Edit,
  save,
} );

<?php
/**
 * Plugin Name:     My Slider
 * Description:     Example block written with ESNext standard and JSX support – build step required.
 * Version:         0.1.0
 * Author:          The WordPress Contributors
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:     my-slider
 *
 * @package         wdl
 */

function wdl_my_slider_block_init() {
  $dir = dirname( __FILE__ );

  $script_asset_path = "$dir/build/index.asset.php";
  if ( ! file_exists( $script_asset_path ) ) {
    throw new Error(
      'You need to run `npm start` or `npm run build` for the "wdl/my-slider" block first.'
    );
  }
  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  wp_register_script(
    'wdl-my-slider-block-editor',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  $editor_css = 'build/index.css';
  wp_register_style(
    'wdl-my-slider-block-editor',
    plugins_url( $editor_css, __FILE__ ),
    array(),
    filemtime( "$dir/$editor_css" )
  );

  $style_css = 'build/style-index.css';
  wp_register_style(
    'wdl-my-slider-block',
    plugins_url( $style_css, __FILE__ ),
    array(),
    filemtime( "$dir/$style_css" )
  );

  register_block_type( 'wdl/my-slider', array(
    'editor_script' => 'wdl-my-slider-block-editor',
    'editor_style'  => 'wdl-my-slider-block-editor',
    'style'         => 'wdl-my-slider-block',
  ) );
}
add_action( 'init', 'wdl_my_slider_block_init' );

function add_my_slider_scripts_and_styles() {
  $dir = dirname( __FILE__ );

  //Swiper の JavaScript ファイルの読み込み（エンキュー）
  wp_enqueue_script(
    'swiper-slider',
    plugins_url( '/assets/swiper.js', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.js" ),
    true
  );

  if(! is_admin()) {
    //Swiper を初期化するためのファイルの読み込み（エンキュー）
    wp_enqueue_script(
      'swiper-slider-init',
      plugins_url( '/assets/my-swiper-init.js', __FILE__ ),
      //依存ファイルに上記 Swiper の JavaScript を指定
      array('swiper-slider'),
      filemtime( "$dir/assets/my-swiper-init.js" ),
      true
    );
  }

  //Swiper の CSS ファイルの読み込み（エンキュー）
  wp_enqueue_style(
    'swipe-style',
    plugins_url( '/assets/swiper.css', __FILE__ ),
    array(),
    filemtime( "$dir/assets/swiper.css"  )
  );

}
add_action('enqueue_block_assets', 'add_my_slider_scripts_and_styles');

import { Fragment } from '@wordpress/element';

export default function save( { attributes } ) {
  //画像をレンダリングする関数
  const getImagesSave = ( url, alt, caption ) => {
    let image_elem;
    let imagesArray = [];

    for( let i = 0 ; i < url.length; i ++ ) {
      if( url.length === 0 ) {
        image_elem = null;
      }else{
        if( alt[i] ) {
          image_elem =  (
            <div className="swiper-slide">
              <img
                className="card_image"
                src={ url[i] }
                alt={ alt[i] }
              />
              { attributes.showCaption &&
                <div class="caption">{ caption[i] ? caption[i] : "" }</div>
              }
            </div>
          );
        }else{
          image_elem = (
            <div className="swiper-slide">
              <img
                className="card_image"
                src={ url[i] }
                alt=""
                aria-hidden="true"
              />
              { attributes.showCaption &&
                <div class="caption">{ caption[i] ? caption[i] : "" }</div>
              }
            </div>
          );
        }
      }
      imagesArray.push( image_elem ) ;
    }
    return imagesArray;
  }

  //attributes から data 属性に指定する値を取得
  let elementSpeed = parseInt(attributes.slideSpeed),
      elementAutoPlay = parseInt(attributes.slideAutoPlay),
      elementLoop = attributes.slideLoopEnable ? "true" : "false",
      elementEffect = attributes.slideEffect,
      elementSlidesPerView = parseInt(attributes.slidesPerView),
      elementCenteredSlides = attributes.slideCentered ? "true" : "false";

  //自動再生はインスペクターで 0 の場合は、大きな値を指定して実質的に自動再生しないようにする
  if (elementAutoPlay === 0) {
    elementAutoPlay = 999999999;
  }

  return (
    <div className="slider-container">
      <div
        className="swiper-container"
        data-speed={elementSpeed}
        data-autoplay={elementAutoPlay}
        data-loop={elementLoop}
        data-effect={elementEffect}
        data-slidesPerView={elementSlidesPerView}
        data-centeredSlides={elementCenteredSlides}
      >
        <div className="swiper-wrapper">
          { getImagesSave( attributes.imageUrl, attributes.imageAlt, attributes.imageCaption ) }
        </div>
        { attributes.showPagination &&
          <div className="swiper-pagination"></div>
        }
        { attributes.showNavigationButton &&
          <Fragment>
            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
          </Fragment>
        }
        { attributes.showScrollbar &&
          <div className="swiper-scrollbar"></div>
        }
      </div>
    </div>
  );
}