Blockにサムネイルで解りやすいスタイル選択を!スタイルパネルの設定方法

ブロックエディター(Gutenberg)の「一般ブロック」内に用意されている「引用ブロック」では、サイドバーの設定パネルにスタイルと言うパネルがあります。

ブロックのスタイル

スタイルパネルの設定を行ってみよう

スタイルのパネルを使用する場合は、registerBlockTypestylesを設定するだけです。

registerBlockType( 'ブロックのタイプ', {
  title: 'ブロックのタイトル',
  icon: 'ブロックのアイコン',
  category: 'ブロックのカテゴリ',
  description: 'ブロックの説明',
  styles: [
    { name: 'default', label: 'Regular', isDefault: true },
    { name: 'large', label: 'Large' },
  ],
  attributes: {
...略...

上記のようにstylesと言った要素に配列で設定を行うだけで、自動でスタイルパネルが追加表示されるようになっています。

styles要素の各項目と値の説明

name

実際にブロックに保存されるスタイルの名前になります。詳しくは後述しています。

label

サイドバーのスタイル項目に表示されるラベル名となります。

isDefault

値をtrueで設定した項目がデフォルトで選択されている状態になります。2つ以上設定していると不具合が出てしまいますので、設定を行う場合は必ず1項目に対して設定を行ってください。

スタイルを選択された際の値について

.is-style-選択されたスタイルのname

と言うCSSクラスが追加されます。

保存された値をブロックの処理内で使う場合は、

edit( { attributes, setAttributes, className } ) {
  ...略...
}

のように、classNameattributes等と同様に記述して使います。

但し、スタイルにisDefault: trueでデフォルト設定をしていたとしても、スタイルを一度も変更していない場合にはclassNameは代入されていません。

classNameに代入される値は、edit時はwp-block-ブロックのタイプ 高度な設定のclass名 is-style-ClassNameの値と言った形になり、実際に保存される値とは異なります。
この際、ブロックのタイプで使われている/(スラッシュ)は、-(ハイフン)に置換されていますのでご注意ください。

編集(edit)時には、自分で付与しよう

edit時には、classnamesを使うなどで付与する為の処理を記述し、正しく結果を反映させるようにしなければなりません。

テネーブル

リアルタイムで表示結果を表示する為に、自分で付与する処理を設定する仕様になっているようですね。

テネーブル(アイコン01)

保存(save)時には、自動でclassが付与されます。

save時は、returnで返却される最初のDOM要素にis-style-選択されたスタイル名が自動で付与されます。

saveの処理内で選択されたスタイル名の値を使用する場合は、

const { className } = attributes;

で、保存されているclassName値を取得する事で使用が可能です。
しかし、保存される値ですので、編集時と同様の代入された値とは異なり、is-style-ClassNameの値のみが返却となります。

スタイルパネルの項目のサムネイルは自動で作られる

項目のサムネイルは、自動でスタイルが適用されたものが生成されるようです。

テネーブル

実は、この生成の仕様の問題でInnerBlocksが存在するブロックにスタイルパネルを設定するとブロックにエラーが出る不具合が、Gutenberg 5.7までに存在していますのでInnerBlocksが存在するブロックにスタイルの設定は出来ない状態です。(記事執筆時の現在、修正について議論が進んでいるようです)

スタイルパネル以外にもこのサムネイルの選択コンポーネントは使えるの?

調査をしてみましたが、スタイルのように配列を追加するなどだけで簡単にサムネイルも作られたりしてすぐに使えると言うのは存在しません。また、使用や選択するとエラーになる等の問題もあった為、正しく使うには至っておりません。
使う方法が解り次第、また記事で紹介をいたします。