概要

以下の続き ( 補足 ) :

ブロックテンプレートにパターンを配置する

以下のチュートリアルの
Introduction to block patterns > In this lesson > How to place patterns in block templates
の部分に該当する内容として、WordPress Developer Resources のハンドブックをおこなう。

テンプレートにパターンを使う理由

PHP機能の活用：テンプレートはHTML形式ですが、動的な処理にはPHPが必要です。パターン内でPHPを使うことでダイナミックな機能が使える
DRY原則（Don't Repeat Yourself）：同じコードを繰り返すのではなく、パターンとして再利用することで作業効率が上がり、バグの発生も減ります。

方法

テンプレートにパターンを追加する

ここは概要に貼ったリンク ( 【初心者部】WordPressテーマのフルサイト編集 ( 3 ) ブロックパターンを登録する方法の紹介 ) に書いたことと同じ。

wp-contents/themes/your-theme-folder/patterns/hero.php

<?php
/**
 * Title: Hero
 * Slug: themeslug/hero
 * Categories: featured
 */
?>
<!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"align":"full"} -->
<div class="wp-block-cover alignfull">
	<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( 'Welcome to My Site', 'themeslug' ); ?></h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph {"align":"center"} -->
		<p class="has-text-align-center"><?php esc_html_e( 'This is my little home away from home.', 'themeslug' ); ?></p>
		<!-- /wp:paragraph -->

		<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
		<div class="wp-block-buttons">
			<!-- wp:button {"className":"wp-block-button is-style-outline"} -->
			<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button A', 'themeslug' ); ?></a></div>
			<!-- /wp:button -->
		</div>
		<!-- /wp:buttons -->

	</div>
</div>
<!-- /wp:cover -->

上の php スクリプトを作成した結果、

パターンエクスプローラー ( Patterns explorer/ Site editor > Patterns > + icon> "Explore all patterns" ) の
featured カテゴリにパターンが追加されました

テンプレートにパターンを追加する
上で追加したパターンをテンプレートに追加する。

ここでは Indexテンプレート ( index.html ) にパターンを追加。

wp-content/themes/templates/index.html

+ <!-- wp:pattern {"slug":"themeslug/hero"} /-->

なお index.htmlは、この投稿で作成したものを使用しています。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+ <!-- wp:pattern {"slug":"themeslug/hero"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
	<!-- wp:query {"layout":{"inherit":true}} -->
	<div class="wp-block-query">
		<!-- wp:post-template -->
		<!-- wp:group -->
		<div class="wp-block-group">
			<!-- wp:post-title {"isLink":true} /-->
			<!-- wp:post-featured-image {"isLink":true} /-->
			<!-- wp:group {"layout":{"type":"flex"},"style":{"typography":{"fontSize":"14px"}}} -->
			<div class="wp-block-group" style="font-size:14px">
				<!-- wp:post-author {"showAvatar":false,"showBio":false} /-->
				<!-- wp:post-date {"isLink":true} /-->
				<!-- wp:post-terms {"term":"category"} /-->
				<!-- wp:post-terms {"term":"post_tag"} /-->
				<!-- wp:post-excerpt /-->
			</div>
			<!-- /wp:group -->
			<!-- wp:spacer {"height":40} -->
			<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
			<!-- /wp:spacer -->
		</div>
		<!-- /wp:group -->
		<!-- /wp:post-template -->
		<!-- wp:group {"layout":{"inherit":true}} -->
			<div class="wp-block-group">
			<!-- wp:query-pagination -->
				<!-- wp:query-pagination-previous /-->

				<!-- wp:query-pagination-numbers /-->

				<!-- wp:query-pagination-next /-->
			<!-- /wp:query-pagination -->
			</div>
			<!-- /wp:group -->
		</div>
	<!-- /wp:query -->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

と、ここまでテンプレートにパターンを追加しましたが、パターンに含まれるブロック ( 見出し、段落、ボタン ) が UI から確認できません。

WordPress Developer Resources ハンドブックに書いてあるとおりにやっているはずなんですが。ブロックパターンってまだまだバグ多いんですかね。

参考サイト:

WordPress Developer Resources