トップへ戻る
BLOGS

WordPress InnerBlocksを使用した定義リストブロックを作成する

WordPress InnerBlocksを使用した定義リストブロックを作成する

今回もWordPressのブロック作成の記事です

ここは定義のタイトルです

質問形式です
回答です
複数回答にします
更に回答します
再び定義します
最後の回答です

今回作成するブロックです
定義リストに関する設定を設けてインスペクターをなどを駆使して
スタイルを変更、書き換えれるようにするなど少しリッチなのを目指して頑張ってみます

※本記事はMacを使用したWordPressのローカル環境であり、Node.jsのインストール環境での開発を想定した記事です

それではブロック開発の環境構築から

ブロック開発の環境構築

今回は前回よりもさらに楽ちんになるように「 create-block 」を使用していきます

create-block

「 create-block 」はWordPressがサポートする @wordpress/create-block を使ってビルド環境を構築する方法です。

create-block  @wordpress/scripts を使用し、簡単なコマンドでブロック作成に必要なひな形のファイルを自動生成して環境を構築してくれます。

まずはWordPress環境のプラグインディレクトリにターミナルで移動します

ターミナル

npx @wordpress/create-block   //create-block を対話モードで実行

このコマンドでターミナル上でコンピュータとの対話モードが開始し、
プラグイン作成の概要(タイトルや説明)を聞いてきます。
何も入力せずにEnterを押すとデフォルトの設定が反映されます
以下の表の順番です

オプション説明デフォルト
slug作成するディレクトリ名に使用されるスラッグesnext-example
namespace名前空間。ブロックを一意に識別できる文字列create-block
titleプラグインの名前(プラグインヘッダの Plugin Name)及びブロックの表示タイトル(registerBlockType の第2パラメータの title)ESNext Example
descriptionブロックの短い説明を指定。プラグインヘッダの Description 及び registerBlockType の第2パラメータの description。Example block written with ESNext …(省略)
dashiconブロックのアイコン。registerBlockType の第2パラメータの icon。smiley
categoryカテゴリー。registerBlockType の第2パラメータの category。widgets
plugin authorプラグインヘッダに記載されるプラグインの作者。The WordPress Contributors
plugin’s licenseプラグインヘッダに記載されるプラグインのライセンス(short name)GPL-2.0-or-later
link to licenseプラグインヘッダに記載されるライセンスの全文へのリンクhttps://www.gnu.org/licenses/gpl-2.0.html
versionプラグインヘッダに記載されるプラグインのバージョン0.1.0

これで最初に指定したスラッグ名でプラグインディレクトリ直下にファイルが作成されなおかつ
必要事項が簡単に入力されています
詳細な説明は以前の記事をご覧ください

それではターミナルで作業フォルダに移動しファイル監視をスタートさせて作業開始です

ターミナル

$ cd custom-dlblock //スラッグ指定したファイルに移動
$  npm start //監視をスタート

そしてWordPressの管理画面に行って「プラグイン」に今作成したプラグインがあるはずなので有効化して簡単なブロックが追加できるはずなので確認してみます

管理画面でブロックを追加すると
「プラグイン名 – hello from the editor!」なる文字列が確認できます

必要なscriptを登録する

まずは初期のPHPファイルを編集して基本となるscriptの登録を行います

今回はブロック用のJSを3つ以上用意して使い分ける予定で、それぞれコードも面長にならないように完結にするため edit.js も save.js も必要ないので削除します

PHPでscriptの登録を行う

custom-dlblock.php

<?php
/**
 * Plugin Name:       Ojako Custom DLBlock
 * Description:       おジャコ仕様の定義リスト,FAQなどにも対応しています
 * Requires at least: 5.8
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            ojako
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       custom-dlblock
 *
 * @package           ojako
 */

function ojako_custom_dlblock_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`'
    );
  }
  // Gutenbergが入っていない場合
  if ( ! function_exists( 'register_block_type' ) ) {
    return;
  }

  $index_js     = 'build/index.js';
  $script_asset = require( $script_asset_path );
  //ブロック用のスクリプトの登録
  wp_register_script(
    'description_list_script',
    plugins_url( $index_js, __FILE__ ),
    $script_asset['dependencies'],
    $script_asset['version']
  );

  //エディタ用のスタイルの登録
  wp_register_style(
    'dlblock-editor-style',
    plugins_url( 'build/index.css', __FILE__ ),
    array(),
    filemtime( "$dir/build/index.css" )
  );
  //フロントエンド及びエディタ用のスタイルの登録
  wp_register_style(
    'dlblock-style',
    plugins_url( 'build/style-index.css', __FILE__ ),
    array(),
    filemtime( "$dir/build/style-index.css" )
  );

  //ブロックを登録
  register_block_type(
    //名前空間/ブロック名
    'ojako/custom-dlblock',
    //スクリプトやスタイルをブロックに関連付け
    array(
      'editor_script' => 'description_list_script',
      'editor_style'  => 'dlblock-editor-style',
      'style'         => 'dlblock-style',
    )
  );
}
add_action( 'init', 'ojako_custom_dlblock_init' );

プラグインディレクトリ直下のPHPファイルにはプラグイン情報と
init するアクションフックでscriptの登録関数を定義しておきます

ここまでメインのJSファイルとPHPファイルの編集はほぼテンプレートみたいなものです

これでプラグインの登録処理、メインのブロックスクリプトの登録、さらに管理画面上のCSSファイルの設定と管理画面とフロントエンド側共通のCSSファイルの設定を登録処理しました

JSでブロック登録関数を設定

index.js を編集してついでに自動生成されたブロック登録関数を書き換えます

src/index.js

import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import "./editor.scss";
// definition list
import Dl from "./blocks/dl.js";
import Dt from "./blocks/dt.js";
import Dd from "./blocks/dd.js";

registerBlockType(Dl.name, Dl);
registerBlockType(Dt.name, Dt);
registerBlockType(Dd.name, Dd);

簡単に説明を

文頭でregisterBlockType を使えるようにインポートします

またCSSを反映させるためにそれぞれのCSSファイルもimportします

// definition list
import Dl from "./blocks/dl.js";
import Dt from "./blocks/dt.js";
import Dd from "./blocks/dd.js";

それではメインのブロックファイルを登録していきます
上記を定義しておきます
そして src ディレクトリに新たに blocks ファイルを作成し上記の3つのファイルを作成します

それをregisterBlockType()関数で登録します

親ブロックとなるのは dl.js ですが

最終的にはその dl.js ブロックの中で任意で <dt><dd> を追加出力してブロックを追加で増やせるようにします

dt.jsを編集

ここからは中に挿入するブロックを登録する処理からです

blocks/dt.js

const { RichText } = wp.editor;
export default {
  name: "custom-block/dt",
  title: "質問(definition term)",
  icon: "editor-alignleft",
  category: "common",
  parent: ["ojako/custom-dlblock"],
  attributes: {
    content: {
      type: "string",
      default: "",
      selector: "dt",
    },
  },
  edit({ attributes, setAttributes, className }) {
    return (
      <RichText
        className={className}
        tagName="dt"
        value={attributes.content}
        onChange={(content) => setAttributes({ content })}
      />
    );
  },

  save({ attributes }) {
    return <dt className="accordion__title">{attributes.content}</dt>;
  },
};

特段変わったことはしていませんが、特筆するのは

parent: ["ojako/custom-dlblock"],

上記の記述でこのブロック(<dt>タグ)の親ブロックを指定しています

同じ要領で<dd>タグのブロックも作成します

dd.jsを編集

blocks/dd.js

const { RichText } = wp.editor;
export default {
  name: "custom-block/dd",
  title: "回答(definition description)",
  icon: "editor-alignleft",
  category: "common",
  parent: ["ojako/custom-dlblock"],
  attributes: {
    content: {
      type: "string",
      default: "",
      selector: "dd",
    },
  },
  edit({ attributes, setAttributes, className }) {
    return (
      <RichText
        className={className}
        tagName="dd"
        value={attributes.content}
        onChange={(content) => setAttributes({ content })}
      />
    );
  },

  save({ attributes }) {
    return <dd className="accordion__content">{attributes.content}</dd>;
  },
};

これで子ブロックは完成です

やっていることはそれぞれ親ブロックを指定してそれぞれがattriburesの属性値を持ちそれに保存するようにsave処理を書いておいてます

最後にメインとなる親ブロックを編集していきます

dl.js を編集

まずはInnerBlocksとして<dt><dd> を追加出力できるようにしていきます

blocks/dl.js

const { InnerBlocks } = wp.editor;

export default {
  name: "ojako/custom-dlblock",
  title: "定義リスト(definition list)",
  description: "「質問〜回答」 や 「名称〜説明」 などの定義リストを追加します",
  icon: "editor-alignleft",
  category: "common",
  keywords: [],
  edit({ attributes, className, setAttributes }) {
    // 許可されるブロックを登録
    const allowedBlocks = ["custom-block/dt", "custom-block/dd"];

    return [
      <div className="oja_dl_wrap">
        <TextControl
          label="リストのタイトル"
          value={attributes.dlTitle}
          onChange={(newText) => setAttributes({ dlTitle: newText })}
        />
        <dl className={className}>
          <InnerBlocks allowedBlocks={allowedBlocks} templateLock={false} />
        </dl>
      </div>,
    ];
  },
  save({
    className,
  }) {
    return (
      <div className="oja_dl_wrap">
        {dlTitle}
        <dl className={addDlClass(className)}>
          <InnerBlocks.Content />
        </dl>
      </div>
    );
  },
};

簡単に説明を

const { InnerBlocks } = wp.editor;

InnerBlocksはこのブロック(dlタグ)の中に子要素のタグを出力するためのコンポーネントです

ポイントなるのは以下の部分です

const allowedBlocks = ["custom-block/dt", "custom-block/dd"]; //あらかじめ定義
<InnerBlocks allowedBlocks={allowedBlocks} templateLock={false} /> //editメソッドの中で定義

これを edit.js で登録することで、このブロックの中のInnerBlockを挿入することが出来ます

また save.js でも<InnerBlocks.Content />を返すように設定することでここの部分は挿入したブロックが保存され反映されます

これでブロックの追加挿入が可能なブロックの作成が出来ました

ここまでのまとめ

ここまでで管理画面から何もないブロックを挿入して<dt><dd>タグのブロックを追加挿入できるようになっているはずです

ここからは設定パネルから質問形式にしたり吹き出し形式にしたりと、
さらにリッチなブロックにするためのコンテンツを書いていきます

インスペクターを設置

まずはインスペクターと呼ばれる設定パネルを実装します

必要なコンポーネントをimport

import { InspectorControls } from "@wordpress/block-editor";
import {
	PanelBody,
	PanelRow,
	ToggleControl,
	TextControl,
	CheckboxControl,
} from "@wordpress/components";
import { Fragment } from '@wordpress/element';

今回作成するブロックの設定パネルを作成するためにimportして使用します
次にその設定パネルの設定を保存する属性値をattributesとして定義しておきます

attributesを定義

attributes: {
    dlTitle: {
      type: "string",
      default: "",
      selector: "h1",
    },
    isFaq: {
      type: "boolean",
      default: false,
    },
    isQaBalloon: {
      type: "boolean",
      default: false,
    },
    isPanelOpen: {
      type: "boolean",
      default: true,
    },
  },

今回はコンテンツ全体のカテゴリやタイトルを表示するためのテキストも設定するため、
dlTitle 属性も設定しておきます
その他はトグルボタンかチェックボックスで設定するためすべてboolean型で設定しておきます

そしてその属性値を使用してInspectorを設定してみます

edit.js を編集

dl.jsの抜粋(edit:)

edit({ attributes, className, setAttributes }) {
  // 許可されるブロックを登録
  const allowedBlocks = ["custom-block/dt", "custom-block/dd"];

  return [
    <InspectorControls>
      <PanelBody title="定義リストの使用変更" initialOpen={true}>
        <PanelRow>
          <ToggleControl
            label={attributes.isFaq ? "Q&A形式" : "定義説明形式"}
            help="リストの形式を選択します"
            checked={attributes.isFaq}
            onChange={(val) => setAttributes({ isFaq: val })}
          />
        </PanelRow>
        {attributes.isFaq && (
          <Fragment>
            <PanelRow>
              <ToggleControl
                label={
                  attributes.isPanelOpen
                    ? "クリックでオープン(非表示)"
                    : "最初から展開 ( 表示 )"
                }
                help="回答パネルの初期状態"
                checked={attributes.isPanelOpen}
                onChange={(val) => setAttributes({ isPanelOpen: val })}
              />
            </PanelRow>
            <PanelRow>
              <CheckboxControl
                label="Q&Aを吹き出しにする"
                checked={attributes.isQaBalloon}
                onChange={(val) => setAttributes({ isQaBalloon: val })}
              />
            </PanelRow>
          </Fragment>
        )}
      </PanelBody>
    </InspectorControls>,
    <div className="oja_dl_wrap">
      <TextControl
        label="リストのタイトル"
        value={attributes.dlTitle}
        onChange={(newText) => setAttributes({ dlTitle: newText })}
      />
      <dl className={className}>
        <InnerBlocks allowedBlocks={allowedBlocks} templateLock={false} />
      </dl>
    </div>,
  ];
},

次にこの管理画面で設定した項目を用いて、保存用のメソッドである saveメソッドを書き換えていきます

save.js を編集

dl.js抜粋(save:)

save({ className, attributes: { isFaq, isPanelOpen, dlTitle, isQaBalloon } }) {
  const addDlClass = (className) => {
    //Q&Aの形式Classを付与する
    let dlClassName;
    if (isFaq) {
      dlClassName = className + " faq";
    } else {
      return className;
    }
    if (isPanelOpen) {
      //質問の開閉を行うClassを付与する
      dlClassName += " panelOpen";
    }
    if (isQaBalloon) {
      //質問の開閉を行うClassを付与する
      dlClassName += " qaBalloon";
    }
    return dlClassName;
  };

  dlTitle = dlTitle ? <h1>{dlTitle}</h1> : null;

  return (
    <div className="oja_dl_wrap">
      {dlTitle}
      <dl className={addDlClass(className)}>
        <InnerBlocks.Content />
      </dl>
    </div>
  );
},

addDlClass(className)は先に設定したインスペクターの設定値によってそれぞれのクラス名を追加する関数です

クラスを追加する関数

const addDlClass = (className) => {
    //Q&Aの形式Classを付与する
    let dlClassName;
    if (isFaq) {
      dlClassName = className + " faq";
    } else {
      return className;
    }
    if (isPanelOpen) {
      //質問の開閉を行うClassを付与する
      dlClassName += " panelOpen";
    }
    if (isQaBalloon) {
      //質問の開閉を行うClassを付与する
      dlClassName += " qaBalloon";
    }
    return dlClassName;
  };

これでフロントエンド側で設定したクラスに対してCSSとJSを設定して各挙動を実装していきます

クラス別のCSSを指定

まずはSCSSから書いていきます
ちょっと長いですが全文です

src/style.scss

@charset "utf-8";
.wp-block-ojako-custom-dlblock {
  dl {
    overflow: hidden;
    font-size: 14px;
    margin-bottom: 4%;
    margin-top: 3%;
    font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
    dt {
      padding: 15px 20px;
      box-sizing: border-box;
      background-color: #f1f1f1;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
    }
    dd {
      margin-left: 0em;
      padding: 15px 20px;
      background-color: #fff;
      box-sizing: border-box;
      @media screen and (max-width: 768px) {
        width: 100%;
      }
    }
  }
} //.wp-block-ojako-custom-dlblock


.oja_dl_wrap *, .oja_dl_wrap *:after, .oja_dl_wrap *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.oja_dl_wrap {
	margin: 0 0 2em 10px;
	padding: 1em 1em 0.5em 1em;
	background: #e1f5fe;
  h1 {
    font-size: 1.5em;
    position: relative;
    margin-right: 2em;
    margin-left: -26px;
    padding: 0.3em;
    padding-left: 3%;
    color: #ffffff;
    background-color: #0b048f;
    box-shadow: 0 1px 1px rgb(0 0 0 / 20%);
    margin-bottom: 3%;
    margin-top: 1%;
    &::after {
      position: absolute;
      bottom: -10px;
      left: 0;
      display: inline-block;
      width: 0;
      height: 0;
      content: '';
      border-width: 0 10px 10px 0;
      border-style: solid;
      border-color: transparent #1976d2 transparent transparent;
    }
  }

  /* 質問形式CSS */
  .faq {
    dl {
      margin: 0;
    }
    dt {
      margin-bottom: 0.5em;
      padding: 0.2em 0.5em 0.5em 2em;
      border-radius: 0.2em;
      background: #00bcd4;
      &::before {
        margin: 0.3em 0.3em 0 -1em;
        content: 'Q';
      }
    }
    dd {
      margin-bottom: 1em;
      margin-left: 0;
      padding: 0.5em 1em 1.5em 3em;
      background: #e1f5fe;
      &::before {
        margin: 0 0.5em 0 -2em;
        padding: 0.2em 0.4em;
        content: 'A';
        border-radius: 0.2em;
        background: #8006d9;
      }
    }
    /* QAアイコン */
    dt::before,dd::before{
      font-size: 1.5em;
      color: #ffffff;
    }
  } //.faq

  /* 吹き出しCSS */
  .qaBalloon {
    dt, dd {
      position: relative;
      padding: 1em;
      box-shadow: 0px 1px 1px rgba(0,0,0,0.2);
      border-radius: 0.3em;
      &::before {
        position: absolute;
        z-index: 99;
        top: 0.5em;
        display: inline-block;
        width: 0;
        height: 0;
        content: '';
        border-style: solid;
        margin: 0;
        padding: 0;
        background: none;
        font-size: 1.2em;
      }
      &::after {
        font-size: 1.2em;
        position: absolute;
        top: 0;
        color: #ffffff;
        border-radius: 50%;
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        line-height: 1.2em;
      }
    }
    dt {
      margin: 0 5em 1em 3em;
      background: #ffe0b2;
      &::before {
        left: -0.5em;
        border-width: 5px 8.7px 5px 0;
        border-color: transparent #ffe0b2 transparent transparent;
      }
      &::after {
        left: -2.5em;
        margin: 0 0.5em 0 0;
        padding: 0.2em 0.4em;
        content: '\f128';
        background: #f57c00;
      }
    }
    dd {
      margin: 0 3em 3em 5em;
      background: #b2ebf2;
      &::before {
        right: -0.5em;
        border-width: 5px 0 5px 8.7px;
        border-color: transparent transparent transparent #b2ebf2;
      }
      &::after {
        right: -2.5em;
        margin: 0 0 0 0.5em;
        padding: 0.2em 0.55em;
        content: '\f12a';
        background: #0097a7;
      }
    }
  } //.qaBalloon

  /* アコーディオンのコンテンツ */
  .panelOpen {
    .accordion__title {
      cursor: pointer;
    }
    .accordion__content {
      display: none;
      cursor: pointer;
    }
    .accordion__content.is-open {
      display: block;
    }
  } //.panelOpen

} //.oja_dl_wrap

ここのデザインはお好みで変更ください
やっていることとしては追加したクラスに応じてそれぞれのスタイルの指定を変えています

アコーディオンタブ用のスタイルも同様です
次はアコーディオンタブに変更された際にうまく開閉するように別でJavaScriptを定義して、それ用の関数を組んでいきます

アコーディオンタブの実装

まずはPHP側でJSファイルの読み込みからです

オリジナルのJSをエンキュー

custom-dlblock.php

function add_dlblock_scripts() {
  $dir = dirname( __FILE__ );
  //管理画面以外(フロントエンド側でのみ読み込む)
  if(! is_admin()) {
    wp_enqueue_script(
      'custom_dlblock_script',
      plugins_url( '/js/main.js', __FILE__ ),
      array(),
      filemtime( "$dir/js/main.js" ),
      true
    );
  }
}
add_action('enqueue_block_assets', 'add_dlblock_scripts');

これで定義した関数 wp_enqueue_script()の引数で指定したパスの場所にディレクトリを作成します
今回の例では /js/main.js を作成しました

アコーディオン関数作成

以下は参考サイトから見つけてきたアコーディオン関数です

js/main.js

/* =================================================== */
// slideUp, slideDown, slideToggle関数を定義
/* =================================================== */

// 要素をスライドしながら非表示にする関数(jQueryのslideUpと同じ)
const slideUp = (el, duration = 300) => {
	el.style.height = el.offsetHeight + "px";
	el.offsetHeight;
	el.style.transitionProperty = "height, margin, padding";
	el.style.transitionDuration = duration + "ms";
	el.style.transitionTimingFunction = "ease";
	el.style.overflow = "hidden";
	el.style.height = 0;
	el.style.paddingTop = 0;
	el.style.paddingBottom = 0;
	el.style.marginTop = 0;
	el.style.marginBottom = 0;
	setTimeout(() => {
		el.style.display = "none";
		el.style.removeProperty("height");
		el.style.removeProperty("padding-top");
		el.style.removeProperty("padding-bottom");
		el.style.removeProperty("margin-top");
		el.style.removeProperty("margin-bottom");
		el.style.removeProperty("overflow");
		el.style.removeProperty("transition-duration");
		el.style.removeProperty("transition-property");
		el.style.removeProperty("transition-timing-function");
		el.classList.remove("is-open");
	}, duration);
};

// 要素をスライドしながら表示する関数(jQueryのslideDownと同じ)
const slideDown = (el, duration = 300) => {
	el.classList.add("is-open");
	el.style.removeProperty("display");
	let display = window.getComputedStyle(el).display;
	if (display === "none") {
		display = "block";
	}
	el.style.display = display;
	let height = el.offsetHeight;
	el.style.overflow = "hidden";
	el.style.height = 0;
	el.style.paddingTop = 0;
	el.style.paddingBottom = 0;
	el.style.marginTop = 0;
	el.style.marginBottom = 0;
	el.offsetHeight;
	el.style.transitionProperty = "height, margin, padding";
	el.style.transitionDuration = duration + "ms";
	el.style.transitionTimingFunction = "ease";
	el.style.height = height + "px";
	el.style.removeProperty("padding-top");
	el.style.removeProperty("padding-bottom");
	el.style.removeProperty("margin-top");
	el.style.removeProperty("margin-bottom");
	setTimeout(() => {
		el.style.removeProperty("height");
		el.style.removeProperty("overflow");
		el.style.removeProperty("transition-duration");
		el.style.removeProperty("transition-property");
		el.style.removeProperty("transition-timing-function");
	}, duration);
};

// 要素をスライドしながら交互に表示/非表示にする関数(jQueryのslideToggleと同じ)
const slideToggle = (el, duration = 300) => {
	if (window.getComputedStyle(el).display === "none") {
		return slideDown(el, duration);
	} else {
		return slideUp(el, duration);
	}
};

すごく丁寧に jQuery メソッドをJavaScriptで書いてくれている記事を見つけました

素のJavaScriptでアニメーション付きアコーディオンを実装する方法【3通り】

さてここからは上で定義した関数を使用してクリックイベントを実装していきます

js/main.js

// アコーディオンを全て取得
const accordions = document.querySelectorAll(".panelOpen");
// 取得したアコーディオンをArrayに変換(IE対策)
const accordionsArr = Array.prototype.slice.call(accordions);

accordionsArr.forEach((accordion) => {
  // Triggerを全て取得
  const accordionTriggers = accordion.querySelectorAll(".accordion__title");
  // TriggerをArrayに変換(IE対策)
  const accordionTriggersArr = Array.prototype.slice.call(accordionTriggers);

  accordionTriggersArr.forEach((trigger) => {
    // Triggerにクリックイベントを付与
    trigger.addEventListener("click", () => {
      // '.is-active'クラスを付与or削除
      trigger.classList.toggle("is-active");
      // 開閉させる要素を取得
      const content = trigger.nextElementSibling;
      // 要素を展開or閉じる
      slideToggle(content);
      // 次の要素が<dd>なら更に展開する
      isNextElement = content.nextElementSibling;
      while (isNextElement.tagName === "DD") {
        slideToggle(isNextElement);
        isNextElement = isNextElement.nextElementSibling;
      }
    });
  });
});

これでインスペクターで設定したクラス名がついているときのみ、クリックイベントを登録しておくことが出来ました
内容的にはシンプルに is-active クラスを付け替えするだけですが、CSSで設定しておいたためこれで完成です

まとめです

駆け足ですが InnerBlocks を使用してブロック同士を入れ子にできるブロックを作成し、

そしてインスペクターを設置して登録するブロックの挙動を変更させれるように設定値を保存し、
それに応じてCSSとJSでブロックの動きをコントロールするということをしてきました

便利なブロックは多いですが少しづつできることを増やして行こうと思います

コメントをお待ちしております

お気軽にコメントをどうぞ。

CAPTCHA