.has-very-dark-gray-color{color:#313131}.has-small-font-size{font-size:13px}.has-normal-font-size,.has-regular-font-size{font-size:16px}.has-medium-font-size{font-size:20px}.has-large-font-size{font-size:36px}.has-huge-font-size,.has-larger-font-size{font-size:42px}.has-text-align-center{text-align:center}.has-text-align-left{text-align:left}.has-text-align-right{text-align:right}WEB制作お役立ちまとめ・便利ツールCocoonテーマコピペ・カスタマイズWordPressカスタマイズ・Gutenbergブログ運営トラブル・ノウハウホームカスタマイズWordPressGutenbergでサイドバーに選択式のCSSクラス設定を追加するTwitterFacebook0はてブ6Pocket0LINEコピー2020-01-24Gutenbergで独自に追加したい事が多くなってきたので最近カスタマイズの勉強をはじめました。今回はクリック操作だけで既存ブロックや自作ブロックに独自のクラスを設定出来るようにしたいと思います。「高度な設定」から自由に追加出来るのですが、いちいち文字を打つのが面倒なので選択式(セレクトボックス)で設定する方法です。この記事は今までjQueryを雰囲気で書いてきた未熟な筆者が(Reactってなんぞ...?)ってとこから実践してみた試行錯誤過程の記事となっております。間違いやスマートではない箇所が含まれる場合がありますが、その点ご理解の上読み進めていただけると幸いです。Chrome目次に戻る実現したいことまず、大元はこちらの記事を参考にさせていただきました。Gutenbergで既存のブロックにカスタム設定を追加する方法Gutenbergはサイドバーに「高度な設定」というクラス名を入力できる欄があるのですが、これだとクラス名を覚えていなくてはいけなくて、制作者以外の人に入力してもらうのが難しいですよね。自分の完成イメージとしては次のような選択式の設定項目です。完成イメージ参考記事の内容から変更したい点attributeに独自項目を追加せず既存のclassNameだけで完結するブロックの種類毎に違うクラス名のリストを設定する※セレクトボックスの選択式に変更する以上を目指しました。※<pre>と<ul>に設定したいクラス名はそれぞれ違うのでブロックの種類毎に別のクラス名リストに切り替えたかった。目次に戻る完成したコード「実現したいこと」を踏まえた上で完成したコードがこちらです。);拡張するブロックとオプション設定baseOptionはすべての拡張するブロックに表示するオプション。拡張するブロックは「ソースコード」と「リスト」それぞれ設定したいオプション(クラス名)を設定。高度な設定からCSSクラス名を追加しても、設定した項目が選択される。cのように追加しても「ABC」が選択済みになる。一致するクラス名が多い順>配列順が優先で(外見上)選択される。選択をする度myClassSettingで設定したリストに含まれているクラスは一旦すべて削除され選択したクラスに変更される。オプションで次のように設定したとする。zzz」書いたとする。「EF」「AB」が当てはまる。この場合はオプションで設定した配列順で「AB」が優先され選択される。