Gutenberg のブロックエディターは便利なんですけど、カラーの選び方がデフォルトのままではあまり柔軟ではないですよね。

例えば「カスタムカラー」を使えば好きな色を設定できますけど、別のブロックでも同じ色を使いたい場合は、また「カスタムカラーを選んで同じ色を選ぶ」ってところからスタートしてしまいます。この作業、地味に手間がかかる・・・

というわけで、ここを改善するために「選んだカラーを保存できたり、カスタムカラーを選ばなくても、あらかじめ一覧に作ったカラーを表示しとけばいいんじゃないか」など、いろいろ考えていました。

そんな中、先日開催した Nishiki もくもく勉強会 でも同様の要望がありましたので「これは早急にやらないとな！」と思って機能を実装しました。

目次

• 管理画面でカラーを作成できる機能を作りました
  • カラーを編集する
  • カラーを新しく追加する
  • カラーを削除する
  • ごちゃごちゃになってきたら初期化しよう

管理画面でカラーを作成できる機能を作りました

ワードプレスの管理画面から「Nishiki Pro」→「ブロックエディター管理」を選択してください。

次に「カラー」タブの中に「カラーパレット設定」がありますので、ここで使いたい色を設定してください。

カラーパレット設定で作った色が、ブロックエディターで使用できます。

カラーを編集する

カラーは編集できます。必要に応じて、お好みで色、名前、クラス名を変更してください。

カラーを新しく追加する

新しくカラーを追加する場合はカラーを追加ボタンを押してください。無制限で追加できます。

カラーを削除する

必要ないカラーは削除ボタンを押して消してください。ただし、消したカラーを使ったブロックがある場合は、カラーが適用されなくなるので注意してください。

ごちゃごちゃになってきたら初期化しよう

色々触ってみて、こんがらがってきたらカラーを初期設定に戻すボタンを押してください。カラーを初期化できます。

というわけで、欲しいカラーは自分で好き勝手作ってみよう！