FSE（フルサイト編集）対応のWordPressブロックテーマを開発する手順

2021-08-032021-08-03

Tech

FSEに向けてWordPressのアップデートが進み続ける中で、自分でも開発してみたい！と思っている方は多いハズ...自分の場合はテーマ開発自体初めてですが、ハンドブックと先人達のテーマをみながら手順化できればと思います。

今回はTT1_Blocksテーマのソースコードを参考にしながら進めていきます。

Contents

FSEブロックテーマ開発関連ドキュメント
テーマ開発手順
テーマ開発において検討すべき事項
余談：FSEテーマの現在（どれだけ存在する？）

FSEブロックテーマ開発関連ドキュメント

ブロックエディターハンドブック（ブロックテーマの作成）

テーマ開発手順

今回はSampleThemeというテーマ名で作成を進めていきます。また、TT1_BlocksはVer.0.4.7時点のものを参考にしています。

ディレクトリ・ファイル作成

ひとまず、TT1_Blocksのディレクトリ構成を参考に空ディレクトリを作成し、一番上の階層では空ファイルも作成しました。

ディレクトリ階層サンプル

SampleTheme/
├ assets/
│ ├ css/
│ ├ images/
│ └ js/
├ block-template-parts/
├ block-templates/
├ functions.php
├ inc/
├ index.php
├ LICENSE
├ README.md
├ readme.txt
├ style.css
└ theme.json

style.cssのおまじない

FSEであろうとなかろうと、テーマ作成においては、style.cssへのおまじないコメントを記載する必要があります。

style.cssコメントサンプル

/*
Theme Name: Sample
Author: Healthy Aratani
Author URI: https://one-ap-engineer.com/
Theme URI: 
Version: 1.0.0
Description: FSE theme. You can make various site.
Tags: full-site-editing, blog, one-column, two-columns, editor-style, block-styles
Text Domain: omnibus
Requires at least: 5.8
Requires PHP: 7.2

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

FSE（フルサイト編集）として公式ディレクトリに登録したい場合は、Tags: full-site-editingを指定する必要があります。

functions.phpの実装

TT1_Blocksではfunctions.phpに直書きしてる処理、および/inc/block-patterns.php、/inc/block-styles.phpに分割している処理がありますが、どのような処理をしているか？はここで一覧化しておきます。

functions.php、block-patterns.php、block-styles.phpすべて合わせても300ステップ程度なので全部ソースみるのにもそこまで労力が掛からなさそうです。

after_setup_themeへ登録する処理

after_setup_themeへの登録関数サンプル

if ( ! function_exists( 'sampletheme_blocks_setup' ) ) {
	function sampletheme_blocks_setup() {
		// translate textdomain
		load_theme_textdomain( 'sampletheme-blocks', get_template_directory() . '/languages' );

		// Add default posts and comments RSS feed links to head.
		add_theme_support( 'automatic-feed-links' );

		/*
		 * Enable support for Post Thumbnails on posts and pages.
		 *
		 * @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/
		 */
		add_theme_support( 'post-thumbnails' );
		set_post_thumbnail_size( 1568, 9999 );

		// Add support for Block Styles.
		add_theme_support( 'wp-block-styles' );

		// Add support for editor styles.
		add_theme_support( 'editor-styles' );

		// Enqueue editor styles.
		add_editor_style(
			array(
				'./assets/css/blocks.css',
				'./assets/css/style-shared.css',
			)
		);

		// Add support for responsive embedded content.
		add_theme_support( 'responsive-embeds' );
	}
}
add_action( 'after_setup_theme', 'sampletheme_blocks_setup' );

以下のような処理を登録しています。

翻訳テキストの読み込み
headタグ内へのfeedリンクの追加
投稿へのサムネイル機能追加
サムネイル画像サイズの追加（1568×9999）
ブロックエディタ用のCSSを有効化
ビジュアルエディタ用のCSSを有効化
ビジュアルエディタ用のCSSを登録
埋め込み要素をレスポンシブ化

wp_enqueue_scriptsへ登録する処理

wp_enqueue_scriptsへの登録関数サンプル

function sampletheme_blocks_scripts() {
    wp_enqueue_style( 'sampletheme-blocks-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'sampletheme_blocks_scripts' );

wp_enqueue_scriptsは、Webサイトに適用するスタイル・スクリプトを変更するためのアクションフックです。

上記の例では、テーマフォルダ直下のstyle.cssを読み込んでいます。

enqueue_block_editor_assetsへ登録する処理

enqueue_block_editor_assetsへの登録関数サンプル

function sampletheme_blocks_block_editor_script() {
	wp_enqueue_script( 'sampletheme-blocks-unregister-block-style', get_theme_file_uri( '/assets/js/unregister-block-style.js' ), array( 'wp-blocks', 'wp-dom' ), wp_get_theme()->get( 'Version' ), true );
}
add_action( 'enqueue_block_editor_assets', 'sampletheme_blocks_block_editor_script' );

enqueue_block_editor_assetsはブロックエディター向けのスタイル・スクリプトを変更するためのアクションフックです。

TT1_Blocksでは、コアブロック：seperater（区切り）のスタイル『wide』を削除する処理を追加しています。（これは、/assets/js/unregister-block-style.jsに実装されています。）JS側の処理はこれを真似て書けば良さそうですね。

デフォルトのブロックスタイルから不要そうなものがあれば削除しておきましょう。

register_block_pattern_categoryでブロックカテゴリー登録

ブロックカテゴリーはブロックパターンを束ねるグループです。

例えばTT1_Blocksテーマでは、『TT1 Blocks』というブロックカテゴリーが追加されています。

register_block_pattern_category関数を利用することでブロックカテゴリーを登録することができます。

ブロックカテゴリーの登録サンプル

if ( function_exists( 'register_block_pattern_category' ) ) {

	register_block_pattern_category(
		'sampletheme',
		array( 'label' => esc_html__( 'SampleTheme', 'sampletheme' ) )
	);
}

register_block_patternでブロックパターン登録

指定したブロックカテゴリーに紐づける形でブロックパターンを登録できます。TT1_Blocksテーマでは、『TT1 Blocks』カテゴリーは以下に8つのブロックパターンが登録されています。（画像赤枠はその８つのうちの１つ『大きな文字』）

テーマ独自のブロックパターンを登録する場合にregister_block_patternを利用します。

ブロックパターン登録サンプル

if ( function_exists( 'register_block_pattern' ) ) {

	// Large Text.
	register_block_pattern(
		'sampletheme/large-text',
		array(
			'title'         => esc_html__( 'Large Text', 'sampletheme' ),
			'categories'    => array( 'sampletheme' ),
			'viewportWidth' => 1440,
			'content'       => '<!-- wp:heading {"align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.1"}}} --><h2 class="alignwide has-text-align-wide has-gigantic-font-size" style="line-height:1.1">' . esc_html__( 'A new portfolio default theme for WordPress', 'sampletheme' ) . '</h2><!-- /wp:heading -->',
		)
	);
}

initへ登録するブロックスタイル登録処理

ブロックには、スタイルを登録することができます。例えば、TT1_Blocksでは区切りブロックに対して『厚みのある』というスタイルを追加しています。

ブロックスタイルを登録する場合は、register_block_style()関数を利用します。

ブロックスタイル登録サンプル

if ( function_exists( 'register_block_style' ) ) {
	function sampletheme_register_block_styles() {
		// Separator: Thick.
		register_block_style(
			'core/separator',
			array(
				'name'  => 'sampletheme-separator-thick',
				'label' => esc_html__( 'Thick', 'sampletheme' ),
			)
		);
	}
	add_action( 'init', 'sampletheme_register_block_styles' );
}

デフォルトのブロックスタイルだけでは補えない・追加したいスタイルがあれば上記の要領で登録しましょう。

theme.jsonの実装

theme.jsonは以下のようなブロックエディターの設定やスタイル設定を一括で管理できるファイルです。

ブロックエディターの設定
設定をブロックごとに制御
スタイルの管理
CSSカスタムプロパティの設定

また、theme.jsonを作成しておくことで、add_theme_support( 'block-templates' )を実行しなくても『テンプレート』や『テンプレートパーツ』のメニューが表示されるようになります。

theme.jsonのサンプルコード

{
	"version": 1,
	"templateParts": [
		{
			"name": "header",
			"area": "header"
		},
		{
			"name": "footer",
			"area": "footer"
		}
	],
	"settings": {
		"color": {
			"link": true,
			"palette": [
				{
					"slug": "black",
					"color": "#000000",
					"name": "Black"
				},
				{
					"slug": "dark-gray",
					"color": "#28303D",
					"name": "Dark Gray"
				},
				{
					"slug": "gray",
					"color": "#39414D",
					"name": "Gray"
				},
				{
					"slug": "green",
					"color": "#D1E4DD",
					"name": "Green"
				},
				{
					"slug": "blue",
					"color": "#D1DFE4",
					"name": "Blue"
				},
				{
					"slug": "purple",
					"color": "#D1D1E4",
					"name": "Purple"
				},
				{
					"slug": "red",
					"color": "#E4D1D1",
					"name": "Red"
				},
				{
					"slug": "orange",
					"color": "#E4DAD1",
					"name": "Orange"
				},
				{
					"slug": "yellow",
					"color": "#EEEADD",
					"name": "Yellow"
				},
				{
					"slug": "white",
					"color": "#FFFFFF",
					"name": "White"
				}
			],
			"gradients": [
				{
					"slug": "purple-to-yellow",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--yellow))",
					"name": "Purple to Yellow"
				},
				{
					"slug": "yellow-to-purple",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--purple))",
					"name": "Yellow to Purple"
				},
				{
					"slug": "green-to-yellow",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--yellow))",
					"name": "Green to Yellow"
				},
				{
					"slug": "yellow-to-green",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--green))",
					"name": "Yellow to Green"
				},
				{
					"slug": "red-to-yellow",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--yellow))",
					"name": "Red to Yellow"
				},
				{
					"slug": "yellow-to-red",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--yellow), var(--wp--preset--color--red))",
					"name": "Yellow to Red"
				},
				{
					"slug": "purple-to-red",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--purple), var(--wp--preset--color--red))",
					"name": "Purple to Red"
				},
				{
					"slug": "red-to-purple",
					"gradient": "linear-gradient(160deg, var(--wp--preset--color--red), var(--wp--preset--color--purple))",
					"name": "Red to Purple"
				}
			]
		},
		"layout": {
			"contentSize": "610px",
			"wideSize": "1240px"
		},
		"typography": {
			"customLineHeight": true,
			"fontSizes": [
				{
					"slug": "extra-small",
					"size": "16px",
					"name": "Extra small"
				},
				{
					"slug": "small",
					"size": "18px",
					"name": "Small"
				},
				{
					"slug": "normal",
					"size": "20px",
					"name": "Normal"
				},
				{
					"slug": "large",
					"size": "24px",
					"name": "Large"
				},
				{
					"slug": "extra-large",
					"size": "40px",
					"name": "Extra large"
				},
				{
					"slug": "huge",
					"size": "96px",
					"name": "Huge"
				},
				{
					"slug": "gigantic",
					"size": "144px",
					"name": "Gigantic"
				}
			],
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"slug": "system-font",
					"name": "System Font"
				},
				{
					"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
					"slug": "helvetica-arial"
				},
				{
					"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
					"slug": "geneva-verdana"
				},
				{
					"fontFamily": "Cambria, Georgia, serif",
					"slug": "cambria-georgia"
				},
				{
					"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
					"slug": "hoefler-times-new-roman"
				}
			]
		},
		"spacing": {
			"customPadding": true,
			"units": [
				"px",
				"em",
				"rem",
				"vh",
				"vw"
			]
		},
		"border": {
			"customColor": true,
			"customRadius": true,
			"customStyle": true,
			"customWidth": true
		},
		"custom": {
			"font-primary": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
			"line-height": {
				"body": 1.7,
				"heading": 1.3,
				"page-title": 1.1
			},
			"spacing": {
				"unit": "20px",
				"horizontal": "25px",
				"vertical": "30px"
			},
			"font-weight":{
				"light": "300",
				"normal": "normal"
			}
		}
	},
	"styles": {
		"color": {
			"background": "var(--wp--preset--color--green)",
			"text": "var(--wp--preset--color--dark-gray)"
		},
		"typography": {
			"fontSize": "var(--wp--preset--font-size--normal)",
			"lineHeight": "var(--wp--custom--line-height--body)"
		},
		"elements": {
			"link": {
				"color": {
					"text": "var(--wp--preset--color--dark-gray)"
				}
			},
			"h1": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--gigantic)",
					"lineHeight": "var(--wp--custom--line-height--page-title)",
					"fontWeight": "var(--wp--custom--font-weight--normal)"
				}
			},
			"h2": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-large)",
					"lineHeight": "var(--wp--custom--line-height--heading)",
					"fontWeight": "var(--wp--custom--font-weight--normal)"
				}
			},
			"h3": {
				"typography": {
					"fontSize": "calc(1.25 * var(--wp--preset--font-size--large))",
					"lineHeight": "var(--wp--custom--line-height--heading)",
					"fontWeight": "var(--wp--custom--font-weight--normal)"
				}
			},
			"h4": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)",
					"lineHeight": "var(--wp--custom--line-height--heading)"
				}
			},
			"h5": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)",
					"lineHeight": "var(--wp--custom--line-height--heading)"
				}
			},
			"h6": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-small)",
					"lineHeight": "var(--wp--custom--line-height--heading)"
				}
			}
		},
		"blocks": {
			"core/site-tagline": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--small)",
					"lineHeight": 1.4
				}
			},
			"core/button": {
				"border": {
					"radius": "0px"
				},
				"color": {
					"background": "var(--wp--preset--color--gray)",
					"text": "var(--wp--preset--color--green)"
				},
				"typography": {
					"fontSize": "var(--wp--preset--font-size--normal)",
					"fontWeight": 500
				}
			},
			"core/post-author": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-small)",
					"lineHeight": "var(--wp--custom--line-height--body)"
				}
			},
			"core/post-date": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-small)",
					"lineHeight": "var(--wp--custom--line-height--body)"
				}
			},
			"core/post-terms": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--extra-small)",
					"lineHeight": "var(--wp--custom--line-height--body)"
				}
			},
			"core/site-title": {
				"typography": {
					"fontSize": "var(--wp--preset--font-size--large)",
					"fontWeight": "var(--wp--custom--font-weight--normal)",
					"textTransform": "uppercase"
				}
			},
			"core/code": {
				"spacing": {
					"padding": {
						"top": "var(--wp--custom--spacing--unit)",
						"bottom": "var(--wp--custom--spacing--unit)",
						"left": "var(--wp--custom--spacing--unit)",
						"right": "var(--wp--custom--spacing--unit)"
					}
				},
				"border": {
					"radius": "0px",
					"color": "var(--wp--preset--color--dark-gray)",
					"style": "solid",
					"width": "1.5px"
				}
			}
		}
	},
	"customTemplates": [
		{
			"name": "page-home",
			"title": "Page without title"
		}
	]
}

後述するblock-template-partsやblock-templatesにファイル追加する場合は、theme.jsonに設定を記述しないと反映されないためご注意ください。

block-template-partsの実装

ブロックテンプレートから呼び出し可能なテンプレートパーツを追加することができます。このテンプレートは、後述するブロックテンプレートと同様にブロック文法と呼ばれる記法で実装します。

テンプレートパーツを追加するときは

theme.jsonにtemplatePartsという項目を追加する必要があります。

TT1_Blocksでは以下の２ファイル（header.htmlとfooter.html）が配置されています。

block-template-parts配下のファイル

SampleTheme/
└ block-template-parts/
  ├ header.html
  └ footer.html

また、各ファイルの実装は以下の通りです。

header.htmlの実装サンプル

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /-->

<!-- wp:site-tagline /--></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} /-->
</div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

footer.htmlの実装サンプル

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="mailto:#">example@example.com<br></a>T. +00 (0)1 22 33 44 55</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">2, Rue Louis-Boilly<br>Paris, France</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"align":"right"} -->
<ul class="wp-block-social-links alignright"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://www.facebook.com/WordPress/","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/WordPress","service":"twitter"} /-->
<!-- wp:social-link {"url":"https://www.youtube.com/wordpress","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:separator {"align":"wide","className":"is-style-twentytwentyone-separator-thick"} -->
<hr class="wp-block-separator alignwide is-style-twentytwentyone-separator-thick"/>
<!-- /wp:separator -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right">Proudly powered by <a href="https://wordpress.org/">WordPress</a>.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

block-templatesの実装

block-templatesフォルダ配下には、ブロックテンプレートと呼ばれる雛形を格納します。ここにファイルを格納することで、管理画面にて『サイトエディター』のメニューが有効化されるようです。

FSE以前のWordPressテーマでいうところのindex.phpやsingle.phpなどが対応するかと思います。

TT1_Blocksでは以下の5ファイルを作成してあります。このうち、『page-home.html』のみテーマ独自のテンプレートとなります。その他のテンプレートはindex.phpなどこれまでのWordPressと同様に予約されたファイル名のようです。

独自テンプレートを追加するときは

theme.jsonにcustomTemplatesという項目を追加する必要があります。

block-templates配下のファイル

SampleTheme/
└ block-templates/
  ├ 404.html
  ├ index.html
  ├ page-home.html
  ├ page.html
  └ single.html

上記のhtmlファイルには、以下の３つを実装することができます。

HTMLタグ
block-template-partsの呼び出し（ブロック文法）
wpブロック（ブロック文法）

最も簡単なindex.htmlの実装例は以下の通りです。

index.htmlの実装例

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

TT1_Blocksでは以下のような実装となっています。

TT1_Blocks

<!-- wp:template-part {"slug":"header","tagName":"header","className":"site-header","layout":{"inherit":true}} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
	<!-- wp:query {"queryId":1,"query":{"perPage":"10","pages":"100","offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","sticky":"","inherit":true}} -->
	<!-- wp:query-loop -->

	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:post-title {"isLink":true} /-->
	</div>
	<!-- /wp:group -->

	<!-- wp:post-content {"layout":{"inherit":true}} /-->

	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:spacer {"height":70} -->
		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:separator {"align":"center","className":"is-style-twentytwentyone-separator-thick"} -->
		<hr class="wp-block-separator aligncenter is-style-twentytwentyone-separator-thick"/>
		<!-- /wp:separator -->

		<!-- wp:columns -->
		<div class="wp-block-columns"><!-- wp:column -->
		<div class="wp-block-column"><!-- wp:post-date /-->

		<!-- wp:post-author {"showAvatar":false} /--></div>
		<!-- /wp:column -->

		<!-- wp:column -->
		<div class="wp-block-column"><!-- wp:post-terms {"term":"category","textAlign":"right"} /-->

		<!-- wp:post-terms {"term":"post_tag","textAlign":"right"} /--></div>
		<!-- /wp:column --></div>
		<!-- /wp:columns -->

		<!-- wp:spacer {"height":70} -->
		<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->
	</div>
	<!-- /wp:group -->
	<!-- /wp:query-loop -->

	<!-- wp:group {"layout":{"inherit":true}} -->
	<div class="wp-block-group">
		<!-- wp:query-pagination -->
		<div class="wp-block-query-pagination"><!-- wp:query-pagination-previous /-->

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

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

<!-- wp:template-part {"slug":"footer","tagName":"footer","className":"site-footer","layout":{"inherit":true}} /-->