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

本記事は、Snow Monkey Blocks の機能の1つ「ブロックテンプレート」機能について解説します。

Snow Monkey Blocks について

Snow Monkey のプロダクトの1つである Snow Monkey Blocks は、ブロックエディターをもっとパワフルにするプラグインです。Snow Monkey Blocks には、様々なブロックと、いくつかの書式フォーマット、ボタン一つで複数のブロックで作られているテンプレートを挿入する「ブロックテンプレート」機能があります。

ブロックテンプレートは、フックで追加可能

テネーブル

Snow Monkey Blocks のブロックテンプレート機能には、Snow Monkey のテーマと同じように、独自のフックが用意されています。用意されている独自のフックに処理を追加することで、ブロックテンプレートを簡単に追加が可能になっています。

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

テネーブル

ブロックテンプレートのカテゴリーには、標準で

Headings」「Features」「Pricing」「FAQ」の4つがあります。(注: 記事公開時点の4.12.0の場合)

ここでは、新しく「My block templates」と言うカテゴリーを追加してみましょう。

テネーブル

ブロックテンプレートのカテゴリー設定を操作するフックは snow_monkey_blocks_block_template_categories と言うフィルターフックが用意されています。

My Snow Monkey プラグインなどで次のようにコードを記述してみましょう。

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;
	}
);
テネーブル

snow_monkey_blocks_block_template_categories フックでは、引数と返却値にカテゴリーの配列をやり取りします。

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

配列の要素は、連想配列で titleslugisPro の 3つの要素となり、必ず記述しなければなりません。ブロックテンプレートのカテゴリーは、正しく設定しなければ表示されません。

ブリエ

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

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

テネーブル

追加したカテゴリーにブロックテンプレートが無ければ、そのカテゴリーは何の意味も持たないままです。

次にブロックテンプレートを追加していきましょう。

テネーブル

ブロックテンプレート設定を操作するフックは、 snow_monkey_blocks_block_templates  と言うフィルターフックが用意されています。

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」と書かれたブロックテンプレートが表示されていますね。ブロックテンプレートを挿入してみると「ブロックテンプレートのテストです。」って段落ブロックが挿入されます。

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

ブリエ

可愛い猿のスクリーンショットですけど、 ブロックテンプレートでどういうブロックが挿入されるのか解らないし「NO IMAGE」 なのは、ちょっと残念ですよね。

テネーブル

そうですね。それではテンプレートのスクリーンショットを設定してみましょうか。

その為に、設定するスクリーンショット画像として PNG 画像を、横幅 1024 ピクセル × 縦幅 768 ピクセルの大きさで用意しましょう。

テネーブル

そうしたら、記述したコードの 'screenshot' => null, 部分に変更を加えます。null の代わりにスクリーンショット画像の画像のフルパスを文字列で設定します。

ルミェール

URL ではなくて、 画像パスなので注意してね!

ブロックテンプレートのコンテンツを設定しよう

ブリエ

ブロックテンプレートが挿入した時の内容(テンプレートコンテンツ)が「ブロックテンプレートのテストです。」って段落ブロックと言うのも残念です。

ルミェール

次に、ブロックテンプレートのコンテンツの作り方を解説するよ!

テネーブル

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

ブロックを組んだ後にブロックエディター内の [設定] から [コードエディター] に切り替えます。編集しているブロックのコードが表示されます。組んだブロックのコードをコピーして、それをブロックテンプレートの配列の content 要素の値に文字列で記述します。

テンプレートを別ファイルにするのもアリ

テネーブル

ブロックテンプレートの配列の content 要素の値に文字列をそのまま記述するのも良いですが、テンプレート用の phpファイル を別に生成し、

Snow_Monkey\Plugin\Blocks\App\Api\BlockTemplates\Helper クラスの render 関数を使用して表示させるのも1つの方法です。

もし、 render 関数を使用する場合、

ブロックテンプレートのコンテンツの文字列が記述された php ファイルには、コードを直接記述し、ブロックテンプレートの配列の content 要素の値には

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

のように render 関数を使用した処理で記述することができます。

注意として

テネーブル

ブロックコンテンツは、正しく記述しなければ挿入されない、または動作しないなどの問題があります。そういった不具合が出る場合は、記述を見直してみてください。

ルミェール

以前使えたけど使えなくなったと言う場合は、ブロックテンプレートのコンテンツの内容と現在のブロックの記述が変更されて一致しなくなった可能性もあるよ。いつの間にか動作しなくなっている場合は、組まれているブロックの記述が変更されていないかも確認してみてね!

最後に

ブロックテンプレートは、再利用ブロックと似ていますが、上手く使用する事で再利用ブロック以上に解りやすく組み合わせたブロックを一度に挿入できる機能です。

ウェブサイト制作担当者がブロックテンプレートとして用意することで、コンテンツ制作をされる担当者がブロックテンプレート機能を使うことで表現豊かなブロックの組み合わせ表現を簡単に実現できると思っています。

ケミ

Snow Monkey Blocks のブロックテンプレート機能は、私がコントリビュータとして開発している部分もあります。

ウェブサイト制作企業とコンテンツ制作担当者・クライアントのお互いの敷居を下げたい思いも込めて作りました。ブロックテンプレート機能が、ブロックエディター環境を使いやすくするプラス要素の1つになれば幸いです。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。