Blockにスタイルを!サムネイルで解りやすく選択できるようにしてみる

Gutenberg公式で用意されている基本ブロック内の「引用ブロック」では、インスペクタにスタイルと言うパネルがあります。

引用ブロックのスタイル

このサムネイルで解りやすく選択が可能となっているスタイルのパネルについて、この記事では解説していきます。

スタイルの設定方法

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

雪々南

意外と簡単だよ!

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つだけ設定しましょう。

保存される値について

<!-- ブロックのタイプ {"className":"is-style-スタイルの名前"} -->

となります。

雷々北

is-style-の後にnameが付与されたclassNameと言う値が、保存されると言う事ですね。

保存された値を使う場合、

edit( { attributes, setAttributes, className } ) {

のようにclassNameをattributes等と同様に記述して使います。

defaultで設定していてもスタイルを一度も変更していない場合はclassNameは代入されていません。

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

編集時、自分で付与する

edit時は、classnamesを使うなどで付与を自分で行い、結果を反映させるようにします。

雪々南

リアルタイムで表示結果を表示する為に自分で付与が必要みたいだね。

保存時、自動でclass付与されます。

saveの場合は、

const { className } = attributes;

で保存されている値を取得しなければ使えません。
しかし、保存されている値ですので、編集時と同様の代入された値とは異なり、is-style-ClassNameの値となります。

save時は、returnで返却する最初のDOM要素に自動で付与されます。

項目のサムネイルは自動で作られている

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

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

現在調査していますが、スタイルのように簡単に使えるものでもないようです。
解り次第、また記事にします。

この記事を書いた人

kmix-39

kmix-39

主に日本の関西に出没する。
小学時代にWindows 95に触れ、BASICを始めて以来、HTML、Perl、Java(JSP, Servlet)、COBOL、C++、C#、PHP、Objective-C、Swift…と、数々の言語を地獄の現場を経験しながら覚えていった元IT社畜。
「好きな時に 好きなことを 好きなだけ」をしたい。