WordPressでブロックパターンを構築する方法

ブロックパターンがデフォルトのカテゴリーのいずれにも該当しない場合は、register_block_pattern_category を使って新しいカテゴリーを登録することも可能です。この関数は、2つの引数を受け取ります。

• $category_name：名前空間を含むパターンカテゴリー名
• $category_properties：カテゴリープロパティの配列

新規にパターンカテゴリーを登録する例が以下の通りです。

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

ブロックパターンを登録する

パターンカテゴリーを登録したら、次はブロックパターンそのものを登録します。ブロックパターンの登録は、register_block_patternヘルパーを使って、次のように行います。

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

この関数は2つの引数をとります。

• $pattern_name：（namespace/pattern-nameのような形式の）機械が読み取りが可能な名前
• $pattern_properties：パターンのプロパティの配列

現在利用可能なパターンプロパティは以下の通りです。

• title（必須）：人が読みやすいパターン名
• content（必須）：パターンのHTMLマークアップ
• description：パターンを説明するテキスト（説明文は任意ですが、ユーザーによるパターン発見を助けるため推奨されます）
• categories：1つまたは複数のパターンカテゴリー（ここで使用する前に、カテゴリーを登録しておく必要があります ※前のセクションを参照）
• keywords：ユーザーによるパターン発見を助けるキーワード
• viewportWidth：プレビューでのパターンの幅を指定する整数値
• blockTypes：パターンで使用されるブロックタイプ（任意）
• postTypes：パターンの使用を許可する投稿タイプ
• templateTypes：パターンが意味を持つテンプレートタイプ（WordPress 6.2以降で使用可能）
• inserter：ブロック追加画面でパターンを表示するかどうかを決定するブール値（値をfalseに設定すると、パターンが非表示になります。デフォルトでは、すべてのパターンが追加画面で表示されます）
• source（任意）：パターンのソースを識別する文字列（プラグインからパターンを登録する場合はplugin文字列、テーマの場合はtheme文字列を渡します）

以下は、register_block_patternの使用例です。

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

このコードでは、postTypesプロパティを使用して、パターンを通常のブログ記事でのみ利用できるようにしています。また、postTypesに異なる値を設定して、別の投稿タイプで利用できるようにすることもできます。もし、productという投稿タイプがあり、その投稿タイプでのみパターンを利用できるようにしたいのであれば、次のように書きます。

'postTypes' => array( 'product' ),

新しい投稿（またはカスタム投稿タイプ）を作成し、ブロック追加画面を開いて、「パターン」タブをクリックします。新しいパターンカテゴリー（「My Pattern Category」）に、カスタムブロックパターンが表示されているはずです。ブロックパターンをカスタマイズするために、パターンのプロパティを自由に操作してください。

では、もう少し深堀りして、実際にブロックパターンを作ってみましょう。

ブロックパターンの作成例

例えば、見出し、画像、段落、ボタンを含むブロックパターンを作りたいとします。

エディターでブロックパターンのレイアウトを作成し、コードエディターに切り替えてマークアップをコピーします。

この例では、次のようなコードになっています。

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

このコードを最適化することができます。ブロックパターンをプラグインで登録している場合は、画像URLを以下のように変更する必要があります。

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

こうすることで、WordPressは「uploads」の画像ではなく、プラグインの「images」フォルダにある画像を参照するようになります。

そして、viewportWidthプロパティを使用して、ブロック追加画面でのパターンのプレビューを調整することができます。

'viewportWidth' => 800,

また、ユーザーがブロックパターンを簡単に見つけられるように、キーワードを配列で指定することができます。

'keywords' => array( 'cta', 'demo', 'kinsta' ),

検索でブロックを見つけやすくするために、ブロックの種類を追加することもできます。

'blockTypes' => array( 'core/button' ),

こうすることで、ユーザーが指定したブロックのいずれかを検索したときに、ブロックパターンが候補に表示されます。

postTypesプロパティでは、ブロックパターンを特定の投稿タイプでのみ利用できるようにすることができます。例えば、productの投稿タイプに対してのみ、このパターンを表示させるには以下のように記述します。

'postTypes' => array( 'product' ),

最後に、ブロックパターンのラッパーにCSSクラスを追加することができます。

これを行うには、className属性を持つ新しいグループを作成します。

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

なお、同じクラス名を続くdiv要素に追加する必要があります。

ブロックパターンの詳細やコードの例については、WordPress.orgのTheme Handbookの ブロックパターンも参照してください。

ファイルでブロックパターンを作成する

前述したとおり、WordPress 6.0では、WordPressテーマにブロックパターンを追加する簡単な方法が導入されました。テーマのルートにある/patternsフォルダの下にPHPファイルとして宣言することで、ブロックパターンを暗示的に登録できるようになっています。

前項で構築したブロックパターンと同じものをテーマに登録したいとします。この例では、テーマにTwenty Twenty-Threeを使用します。

前の方法と同じようにパラメータを設定しますが、ファイルヘッダのコメントに記述します。また、パラメータ名をキャメルケースで表記するのではなく、単語をスペースで区切り、配列の代わりにカンマ区切りのリストを使用します。

まず、前の例でパターンの登録に使用したプラグインを停止します。次に、my-block-pattern.phpファイルを作成し、以下のヘッダを貼り付けます。

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, kinsta
 * Block Types: core/buttons
 */
?>

次に、ブロックパターンのコンテンツを追加します。前の例と同じマークアップを使うことができますが、少しだけ変更する必要があります。

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

マークアップは、基本的に前の例と変わりません。変更したのは2つだけです。

プレースホルダー画像URLは、get_theme_file_uri関数で生成されています。

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

もちろん、最初にplaceholder.jpgの画像をテーマの/assets/imagesフォルダに配置しておく必要があります。

次のコードで、出力したいテキストを指定しています。

<?php echo __( 'View plans', 'text-domain' ); ?>

ファイルを保存して、新しい投稿を作成してみてください。作成したブロックパターンが、「featured」と「banner」カテゴリーに表示されます。

ブロックパターンのサポート解除、登録解除、非表示する方法

状況によっては、ブロックパターンに対して特別な操作を実行したいことがあるかもしれません。例えば、コアブロックパターンを独自のブロックパターンに置き換えたり、特定の条件下でカテゴリーの登録を解除したり。実行可能な操作をご紹介します。

1. すべてのコアブロックパターンのサポートを解除する

テーマ開発の一環として、コアブロックパターンのサポートを削除し、独自のパターンを指定することができます。コアパターンのサポートを解除するには、remove_theme_support関数を以下のように使用します。

remove_theme_support( 'core-block-patterns' );

remove_theme_support関数をafter_setup_themeフックと組み合わせることをお勧めします。

2. 特定のブロックパターンの登録を解除する

特定のブロックパターンの登録を解除することもできます。これは、カスタムの代替案を提供したい場合や、テーマで特定のブロックパターンを使用したくない場合に利用します。

Patterns APIでは、このためにunregister_block_pattern関数があります。

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

コアブロックパターンの登録を解除するには、以下のようにします。

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

unregister_block_patternをinitフックで使用することになります。

3. ブロックパターンカテゴリーの登録を解除する

パターンカテゴリーの登録を解除することもできます。 unregister_block_pattern_category関数をinitにフックします。

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

パターン作成ツールでブロックパターンを作成・共有する方法

無料のオンラインツール「Pattern Creator」を使って、パターンを作成し、コミュニティと共有することもできます。

WordPress.orgのアカウントをお持ちの方は、パターンディレクトリからPattern Creatorにアクセスすることができます。

そこで「Create new pattern」をクリックします。これにより、ブロックパターンを作成するための画面が起動します。

また、Openverseライブラリでホストされている無料の画像も使用できます。

作成できたら、下書きを保存するか、パターンを送信することができます。

次に、ディレクトリに戻りMy patternsを選択すると、すべてのパターンが「All」「Drafts」「Pending Review」の3つのタブで表示されます。

編集が終わったら、パターンをコミュニティと共有することができます。エディターの右上にある「Submit」ボタンをクリックするだけで、パターンを提出可能です（パターンを送信する前に、必ずパターンのガイドラインに従っていることを確認してください）。

まとめ

WordPressは20周年を迎えました。統計によると、2023年5月の時点で63.3%の市場シェアを持ち、依然として世界で最も広く使われているCMSです。

これらの数字は、WordPressが世界中の何千人もの技術者、開発者、ブロガーに使用されている優れたコンテンツ管理ツールであることを証明しています。

WordPress開発の新しいスキルを身につけ、カスタムブロック、再利用ブロック、ブロックパターンなどの高度な機能の学習に時間とリソースを割くことは、マーケター、ウェブデザイナー、出版社のスタッフとして働く方々のキャリアを支えるはずです。

ブロックパターンを作成したことはありますか？また、コミュニティで共有したことはありますか？ブロックパターンに関するお考えとあわせて、是非ご紹介ください。