できる!Snow Monkey カスタマイズ – 第9回 ブロックテンプレート追加

この記事は、不定期連載「できる!Snow Monkey カスタマイズ 」の第9回目。今回の記事の内容は、Snow Monkey Blocksのブロックテンプレート機能について語ります。

Snow Monkeyテーマには、Snow Monkey Blocksと言うブロックエディターをもっとパワフルにするプラグインが用意されています。

このSnow Monkey Blocksには、ブロックテンプレートと言うボタン一つで複数のブロックで作られているテンプレートを挿入する機能があります。

ブロックテンプレートを追加してみよう!

追加する為の仕組みはフック

テネーブル

Snow Monkey Blocksのブロックテンプレート機能でも、テーマカスタマイズと同じようにフックが用意されています。
用意されたフックを使用する事でテーマカスタマイズと同じようにブロックテンプレートも簡単に追加する事が可能になっています!

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

カテゴリーを追加してみよう

ルミェール

ブロックテンプレートのカテゴリーには、標準で
Headings」「Features」「Pricing」「FAQ」の4つがあるよね。(注: 記事公開時点の4.12.0の場合)

新しく「My block templates」と言うカテゴリーを追加してみよう。
ブロックテンプレートのカテゴリー設定を操作する為のフィルターフックは、 snow_monkey_blocks_block_template_categories

次のコードをmy snow monkeyなどのプラグインに書いてみてね!

ルミェール(アイコン01)
add_filter(
	'snow_monkey_blocks_block_template_categories',
	function ( $categories ) {
		$categories[] = [
			'title' => 'My block templates',	// カテゴリーの表示タイトル
			'slug'  => 'my-block-templates',	// カテゴリーのslug
			'isPro' => false,	// Snow Monkeyテーマ専用の場合、true
		];
		return $categories;
	}
);
テネーブル

カテゴリーの設定値は配列です。ブロックテンプレートのカテゴリーの設定は、その配列の値を設定するだけでできます。


配列の要素は連想配列で、 title slug isPro の3つの要素を必ず書く必要があります。正しく設定しなければブロックテンプレートが表示されなくなりますので、必ず書いてください。

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

追加したコードが正しい場合、ブロックテンプレートのカテゴリーに「My block templates」ってカテゴリーが追加されるよ!

ルミェール(アイコン01)

ブロックテンプレートを追加してみよう

テネーブル

カテゴリーを追加しても、そのカテゴリーにブロックテンプレートが無ければ何の意味も持ちません。ブロックテンプレートを追加していきましょう。

テネーブル(アイコン04)
ルミェール

ブロックテンプレート設定を操作する為のフィルターフックは、 snow_monkey_blocks_block_templates

次のコードを my snow monkey などのプラグインに書いてみてね!

ルミェール(アイコン01)
add_filter(
	'snow_monkey_blocks_block_templates',
	function( $block_templates ) {
		$block_templates[] = [
			'category'   => 'my-block-templates',	// カテゴリーのslug
			'title'      => 'Block Templates Sample',	//  ブロックテンプレートの表示タイトル
			'isPro'      => false,	// Snow Monkeyテーマ専用の場合、true
			'screenshot' => null,	// スクリーンショットのPng画像パス(後述)
			'content'    => '<!-- wp:paragraph --><p>ブロックテンプレートのテストです。</p><!-- /wp:paragraph -->',	// ブロックのコンテンツ(後述)
		];
		return $block_templates;
	}
);
ルミェール

確認をしてみよう!可愛い猿のイメージで「Block Templates Sample」と書かれたブロックテンプレートが表示されているはず。

挿入してみると「ブロックテンプレートのテストです。」って段落ブロックが挿入されるよね。

ルミェール(アイコン05)

スクリーンショットを設定しよう

テネーブル

スクリーンショットが 「NO IMAGE」 なのは、ちょっと残念ですね。

記述したコードの 'screenshot' => null, 部分をスクリーンショット画像の画像のフルパスに設定してください。(注: 画像パスです。URLではありません)

画像のPng画像は、横幅 1024 ピクセル × 縦幅 768 ピクセルの大きさで用意しましょう。

テネーブル(アイコン05)
ルミェール

テンプレートが挿入された時の内容(テンプレートコンテンツ)が「ブロックテンプレートのテストです。」って段落ブロックと言うのも残念なので、テンプレートコンテンツの作り方も次にやっていこう!

ルミェール(アイコン05)

テンプレートコンテンツの作り方

ルミェール

まず、テンプレートにする為にブロックエディターで、複数のブロックでテンプレートとなるブロックを組んでいこう。

ブロックを組んだら、ブロックエディター内の 設定 から コードエディター に切り替えよう。

ブロックのコードが出るよね。組んだブロックのコードをコピーして、それをブロックテンプレートのコンテンツにするんだ。

ルミェール(アイコン01)

ブロックテンプレートの配列の content 要素の値に直接文字列を書くより、テンプレート用のPHPを別に生成し、
Snow_Monkey\Plugin\Blocks\App\Api\BlockTemplates\Helper クラスの render ファンクションを使用するのも一つの方法です。

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

もし、 render ファンクションを使用する場合は、

テンプレートコンテンツのコードが記述されたPHPにはコードを直接記述し、テンプレートの設定には

'content' => \Snow_Monkey\Plugin\Blocks\App\Api\BlockTemplates\Helper::render( 'テンプレートコンテンツのコードが記述されたPHPパス' ),

のように書くことができます。

テネーブル

ブロックコンテンツは、正しく記述しなければ動作しないなどの問題がありますので動作がしない場合は記述を見直してみてください。

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

最後に

ブロックテンプレートは、再利用ブロックと似ていますが上手く使用する事で再利用ブロック以上に解りやすくブロックを挿入できる機能でしょう。

Web制作がブロックテンプレートとして用意する事で、コンテンツ制作の方がブロックテンプレート機能を使う事で解りやすく表現豊かなブロックの組み合わせを実現できると思っています。

テネーブル

Snow Monkey Blocks のブロックテンプレート機能は、そう言ったWeb制作企業とコンテンツ制作のお互いの敷居を下げたい思いもあり、作っています。ブロックテンプレートをカスタマイズする事で、コンテンツ制作の方にも使いやすいブロックエディター環境の提供に一つプラスになれば幸いです。


(注: Snow Monkey Blocksのブロックテンプレート機能は、当NotWizのケミがコントリビュータとして開発している部分もあります)

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