WordPress.org

以下は、Beatriz Fialho が書いた WordPress.org 公式ブログの記事「So you want to make block patterns?」を訳したものです。

誤字脱字誤訳などありましたらフォーラムまでお知らせください。

テーマやプラグインなど、WordPress のブロックエディターで何かを作ったことがある人は、ブロックパターンについても聞いたことがあるかもしれません。

WordPress に同梱されているパターンを眺めていて、これについて短い記事を書くのも良いかなと思いました。パターンは知っているととても便利なショートカットなのですが、一体何なのかとか、使う場面を知らない方も多いと思います。

ブロックパターンとは

パターンはあらかじめ配置されたブロックの集まりで、多様に組み合わせたり配置を変えることができるので、美しいコンテンツをもっと簡単に作れるようになります。レイアウトをスタートするためのツールとして、必要に応じてコンテンツに追加してすぐに使うことがで、1個のブロックのようなシンプルなものから、全ページのレイアウトのような複雑なものまであります。

パターンは、ブロックライブラリのタブに格納されています。クリックしたりドラッグしたりすると、サイトのスタイルでプレビューできます。

基本的にブロックパターンとは、あらかじめ束ねられた単なるブロックです。

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->

ブロックエディターを使っていくつかのブロックを好きなように設定するだけで、難しい作業の部分は終了です。

ブロックライブラリに入れるには

ハンドブックにはもっと詳しい説明がありますが、結論から言うと以下のとおりです。

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

👆 これは PHP のスニペットですので、WordPress のプラグインに落とし込んだり、もっと簡単に言えば、テーマのfunctions.php ファイルに貼り付けたりすることができます。完了すると、以下のようになります。

画像を含むパターンでは、画像をどこに保存するかを考える時間を割く価値があります。TT1 Blocks テーマ (“TwentyTwentyOne Blocks” の略) では、画像をテーマライブラリに保存しています。

次のステップ

ブロックパターンは、ブロックライブラリから挿入した時点でユニットとしてのまとまりを失ってしまいます。作ったパターンから切り離された単なるブロックの寄せ集めになり、好みに合わせてカスタマイズできるものになるのです。パターンはテンプレートではなく、あくまでもショートカットです。これはつまり、テーマの切り替えやパターンプラグインの無効化を気にする必要はないということでもあります。挿入済みのブロックがどこかに行ってしまうこともありません。

とはいえ、あるパターンをとても気に入って、まったくカスタマイズせずに何度も使いたい場合は、再利用ブロックにすることもできます。

再利用ブロックは、その名の通り、再利用するために作成されます。この機能を使うのに良い場面は、よく使うちょっとしたスニペットを保存しておいて、一箇所で編集することで挿入したものすべてを更新するといった時です。「Twitter でフォロー」、「シリーズに含まれる記事一覧」、「メルマガ購読」などがその好例です。

良いブロックパターンとは

現在 WordPress コアに含まれるパターンは、利用できる機能によって制限されます。ブロックエディター上で文字間隔をカスタマイズできない場合、ブロックパターンでもそれは実現できません。グローバルスタイルプロジェクトではブロックの機能を拡張していく予定ですが、それまでは、利用可能なツールを使っていくしかありません。

それでも、色、画像、タイポグラフィといった最も基本的な要素があれば、多くのことが可能になります。

これらのパターンは、WordPress のコアに採用される可能性があるものとしてデザインしたのですが、すべてに共通するいくつかの特性があります。

テーマが共通している。

パターンは、サイトの一部と考えることができます。パターンは全体の一部であるため、同じテーマを共有する他のパターンの文脈の中で存在するのが最も効果的です。上のパターンには、「自然」、「アート」、「建築」といったテーマを共有したものなどがいくつかあります。このように、複数のパターンを組み合わせることで、サイトの複数のページを一度にまとめることが可能になります。

ミニマルなカラーパレットが共通している。

全体を構成するパーツであるパターンは、必然的に異なる色を使ったコンテキストで使われます。色数を減らすことで調和の可能性が高まると同時に、ジャストフィットさせるためのカスタマイズも少なくて済みます。

最高のパターンは、それなくしてはできないようなことを実現する。

画像をオフセットしてユニークなシルエットを作ったり、目立たない機能 (カバーブロックの固定配置など) を利用したりすることで、創造性を発揮することができます。

ヒント: プラグイン由来のブロックも含めて、どんなブロックでもパターンに使うことができます。また、そのブロックがブロックディレクトリにあって、まだお使いの WordPress に存在しない場合は、ワンクリックでインストールするよう促されます。

こちらのプラグインをどうぞ

<?php 
/*
Plugin Name: Quote Pattern Example Plugin
*/

register_block_pattern(
	'my-plugin/my-quote-pattern',
	array(
		'title'       => __( 'Quote with Avatar', 'my-plugin' ),
		'categories'  => array( 'text' ),
		'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ),
		'content'     => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I\'m being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":" s-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->',
	)
);

?>

パターンを作りたい場合のために、このサンプルプラグインでは、上でご紹介したパターンのうち2つを採用しています。プラグインのフォルダーに入れれば、ブロックライブラリに表示されます。

自由に調整し、カスタマイズして、お好みのようにしてください。結局のところ、これは GPL ですから !