ブロックタイプパターン（Block Type Patterns）

ブロック特有のパターン

ブロックタイプに関連するパターンは、他のパターンと同様に動作することに注意することが重要です。あなたが行っているのは、WordPressに対して、そのパターンが1つ以上のブロックタイプを対象としていることを認識させることです。

多くの場合、特定のブロックを挿入する際の出発点として機能するパターンを作成したいだけかもしれませんが、そこでブロックタイプパターンが非常に役立ちます。

ブロックタイプパターンの登録

パターンの登録で説明されているように、パターンファイルのBlock Typesヘッダーフィールドに値を割り当てる必要があります。このフィールドは、ブロックの名前空間とスラッグを含む1つ以上のカンマ区切りのブロックタイプを受け入れることができます（例：namespace/slug）。

カバー（Cover）ブロックに関連付けられたパターンのファイルヘッダーは次のようになります：

<?php
/**
 * Title: Cover With Contrast Background
 * Slug: themeslug/cover-contrast
 * Categories: banner
 * Block Types: core/cover
 * Viewport Width: 1376
 */
?>

ブロックタイプパターンの作成

これまでに学んだことを活かして、特定のブロックのためのパターンを作成しましょう。この例では、単一のネストされた見出しと、contrast カラープリセットを持つシンプルなカバーブロックを作成します。

テーマの/patternsフォルダーにcover-contrast.phpという名前の新しいファイルを作成し、その中にこのコードを貼り付けます：

<?php
/**
 * Title: Cover With Contrast Background
 * Slug: themeslug/cover-contrast
 * Categories: banner
 * Block Types: core/cover
 * Viewport Width: 1376
 */
?>
<!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base","layout":{"type":"constrained"}} -->
<div class="wp-block-cover alignfull has-base-color has-text-color has-link-color">
    <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span>
    <div class="wp-block-cover__inner-container">
        <!-- wp:heading {"textAlign":"center"} -->
            <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'A simple heading', 'themeslug' ); ?></h2>
        <!-- /wp:heading -->
    </div>
</div>
<!-- /wp:cover -->

パターンファイルを保存すると、それは通常通りインサーターとパターンライブラリに表示されるはずです。しかし、最も重要なことは、それがブロックタイプパターンとして機能していることを確認することです。

WordPress管理の新しい投稿またはページを開き、カバーブロックを挿入しますが、変更は加えないでください。その後、ツールバーのカバーブロックのアイコンをクリックします。パターンメニュー項目が表示され、クリックすると新しいパターンが表示されます：

そこから、登録したパターンを選択すると、挿入したカバーブロックがコンテンツエリア内で変換されます：

これがブロックタイプパターンの基本的な動作です。しかし、WordPressには特定のブロックに対して特別な処理があり、以下で学ぶことになります。

クエリループパターン

クエリループブロックは、カスタムパターンを作成するための最もユニークで便利なブロックの1つです。これにより、あなたとテーマのユーザーは、既存のクエリブロックを迅速に挿入または置き換えて、代替の投稿レイアウトを使用することができます。

技術は他のブロックタイプパターンと同じです。パターンのBlock Typesファイルヘッダーフィールドにcore/queryブロックタイプを追加する必要があります。

各投稿のフィーチャー画像、タイトル、抜粋、日付を表示する基本的な2列グリッドを作成しましょう。もちろん、あなたが望むレイアウトやデザインを使用できます。

今のところ、テーマの/patternsフォルダーに新しいquery-two-columns.phpファイルを作成し、その中にこのコードを貼り付けます：

<?php
/**
 * Title: Query: Two Columns
 * Slug: themeslug/query-two-columns
 * Categories: posts
 * Block Types: core/query
 * Viewport Width: 1376
 */
?>
<!-- wp:query {"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"align":"wide"} -->
<div class="wp-block-query alignwide">
        <!-- wp:post-template {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"grid","columnCount":2}} -->
        <!-- wp:post-featured-image {"isLink":true,"aspectRatio":"4/3","align":"wide"} /-->
        <!-- wp:post-title {"isLink":true,"fontSize":"large"} /-->
        <!-- wp:post-excerpt {"showMoreOnNewLine":false,"excerptLength":26} /-->
        <!-- wp:post-date /-->
    <!-- /wp:post-template -->
</div>
<!-- /wp:query -->

クエリループパターンを活用する方法は2つあります。最初は、ページまたはテンプレートに新しいクエリループブロックを挿入することです：

その時点で、クエリループを追加するためのいくつかのボタンが表示されるはずです。選択ボタンをクリックします。

これにより、パターンを選択モーダルが表示されます。このモーダルでは、あなたのパターンが表示され、選択できます：

選択すると、あなたのパターンが編集しているページまたはテンプレートのキャンバスに挿入されます：

クエリループパターンを使用する2番目の方法はほぼ同じです。ツールバーの置き換えボタンをクリックすることで、既存のパターン（挿入したばかりのものでも）を置き換えることができます。同じパターンを選択モーダルが表示され、パターンを選択するプロセスは同じです。

テンプレートパートパターン

テンプレートパーツは技術的にはブロック自体であるため、パターンのブロックタイプとしても使用できます。1つの制限があります：ヘッダーとフッターのテンプレートパートエリアを使用するパーツのみがサポートされています。しかし、これらは最も一般的なタイプです。

特定のテンプレートパートをターゲットにする場合、そのブロックタイプ名には3番目のコンポーネントがあります：テンプレートパートエリア。したがって、ヘッダーパートをターゲットにしたい場合は、core/template-part/headerのブロックタイプを渡します。フッターパートの場合は、core/template-part/footerを使用します。

中央にロゴ、タイトル、ナビメニューを持つ基本的なヘッダーテンプレートパートを作成しましょう。これを使用して、サイトの既存のヘッダーを置き換えます。

テーマの/patternsフォルダーにheader-centered.phpという名前の新しいファイルを作成します。その後、このコードをコピーして貼り付けます：

<?php
/**
 * Title: Header: Centered
 * Slug: themeslug/header-centered
 * Categories: header
 * Block Types: core/template-part/header
 * Viewport Width: 1376
 */
?>
<!-- wp:group {"align":"wide","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignwide">
    <!-- wp:site-logo {"width":60} /-->
    <!-- wp:site-title {"level":0} /-->
    <!-- wp:navigation {"layout":{"type":"flex","justifyContent":"right","orientation":"horizontal"},"style":{"spacing":{"margin":{"top":"0"},"blockGap":"var:preset|spacing|20"},"layout":{"selfStretch":"fit","flexSize":null}}} /-->
</div>
<!-- /wp:group -->

このファイルを保存したら、WordPress管理の外観 > エディターに移動し、ヘッダーブロックを選択します。

次に、ツールバーのオプションボタン（⋮アイコン）をクリックします。ドロップダウンに置き換えオプションが表示されるはずです：

置き換えドロップダウンメニュー項目をクリックすると、ヘッダーを選択という新しいモーダルが表示され、利用可能なパターングリッドにヘッダー：中央パターンが表示されるはずです：

このパターンまたは別のパターンを選択することで、全体のヘッダーテンプレートパートを置き換えることができます。このプロセスはフッターテンプレートパートでも同様に機能します。

カスタムテンプレートパートエリアのパーツは、この機能をまだ利用できません。この機能を扱うためのオープンチケットがありますが、ヘッダーとフッター以外のエリアにはパッチが適用されていません。