クラシックテーマ制作者の私がブロックテーマ制作で悩んだこと

これからのWordPressの制作の中心となる「ブロックテーマ」
ほぼノーコードで制作するブロックテーマを使った制作手法（FSE：フルサイトエディティング）は、従来のPHPでテンプレートを作成する方法とあまりにも異なっています。

WordPressデフォルトテーマとして初めてのブロックテーマである「Twenty Twenty-Two」が同梱されたWordPress5.9がリリースされたのが2022年1月。
それからすでに2年が経過していますが、未だにチュートリアル的な情報以上のものが少ないのが現状です。

そんな中、クラシックテーマで制作されていた本サイト（Cherry Pie Web）をブロックテーマでリニューアルいたしましたので、制作メモをまとめて記事にいたしました。
ブロックテーマでの制作を始めたいけれど、クラシックテーマに慣れきってしまってどうしようと思っている方に少しでも参考になれば幸いです。

ブロックテーマってどうやって作り始めればいいの？

ブロックテーマに移行するにあたって、まずはチュートリアル記事や動画を見て学習を進めました。同じWordPressなのだから経験を生かして作れるんじゃないかと思っていたのですが、いざ作り始めようとしたときに、どうやって作り始めればいいのかと悩んでしまいました。

編集画面を実際の見た目とほぼ同じにする設定をしよう

ブロックテーマの最大のメリットは、編集画面の見た目がプレビューと非常に近い見た目になることです。

クラシックテーマでは、style.css や editor.css を作成しブロックに追加CSSクラスを適用することでスタイルを反映させていました。
ブロックエディターになってからはある程度CSSを投稿画面に適用できるようになってきましたが、まだまだ実用的とは言えないものでした。

ブロックテーマでは、エディター > スタイル から基本的なスタイルが設定できます。
色のプリセット、段落・見出し・リストなどのスタイルやフォントなどのタイポグラフィーの設定ができるので、ページ作成時に統一感のあるデザインになります。

投稿画面に実際のフォントも反映させることができますので、実際の画面とほぼ変わらない見た目でページを作成することができます。

タイポグラフィーの設定

このサイトではフォントに Adobe Fonts を使用しています。
先に書いた通り、ブロックテーマではウェブフォントを投稿画面に反映させることができます。
その方法については説明が長くなりますので、詳細は下記の記事をご参照ください。

ブロックテーマで（Google Fonts以外の）日本語Webフォントを使う

フォントの設定を行うと、エディター > スタイル > タイポグラフィー の設定でフォントが選択でき編集画面では指定したフォントで表示されます。

テキスト・リンク・見出し・キャプション・ボタンに設定ができます。
それぞれ、使用フォント・フォントサイズ・太さ（外観）・行の高さ・装飾（下線など）を設定していきます。
「テキスト」は、段落ブロックをはじめここで設定がないブロックに適用されます。

さらにブロックごとに指定もできます。
通常は上記の設定が継承されますので、特にブロックごとに設定を行う必要はないのですが、コードブロック、整形済みテキストブロックでは、 ユーザーエージェントスタイルシートが活きてしまって違和感がありましたので、この2つのブロックだけフォントを指定しました。

エディターで設定できない装飾はCSSで設定を行います。
クラシックテーマ同様、functions.php にて add_editor_style() で読み込むことで編集画面に反映できます。

functions.php

/** Editor Style */
function mytheme_support() {
	add_theme_support( 'editor-styles' );
	add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'mytheme_support' );

ちなみに theme.json でもCSSを書くことができますが、改行ができないので非常に見づらくなります。
例えばこんな感じになります。

theme.json

"styles": {
	"blocks": {
		"core/paragraph": {
			"css": "& code{ font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', 'Noto Sans JP', monospace; font-size: 1em; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; }"
		}
	}
}

色の設定

theme.json でカラーパレットを設定します。
エディター > スタイル > 色 でカスタムカラーを設定しても良いのですが、親テーマに設定されている色を使わない場合、それらが色が選択の時に面倒になります。
子テーマの theme.json で指定すれば、ブロックエディターのカラーパレットには指定した色しか出てこなくなります。

"settings": {
	"color": {
		"palette": [
			{
				"color": "#F4F0E6",
				"name": "Base",
				"slug": "base"
			},
			{
				"color": "#000",
				"name": "Contrast",
				"slug": "contrast"
			},
			{
				"color": "#FF3C00",
				"name": "Contrast / 2",
				"slug": "contrast-2"
			},

また、ここで設定した色はCSS変数として出力されます。
style.css など他のCSSファイルで使いまわせるのでかなり便利です。

var(--wp--preset--color--base)
var(--wp--preset--color--contrast)
var(--wp--preset--color--contrast-2)

クラシックテーマ制作者がブロックテーマに移行する際につまづくポイント

従来のテーマ制作とはあまりに異なるブロックテーマ制作ですが、私がつまづきそうになったり困ってしまったポイントはこのようなことでした。
（TT4テーマの設定によるものも含みます）

• ウイジェットエリアが無い
  というか、ウィジェットが無い
• メニューが無い
• サイドバーをどうやって作るのかがわからない
• パンくずリストが無い
• フォントサイズの設定が変
• パターンがいっぱいあるけど、ほとんど使わなさそうで正直うざい
• theme.json でウェブフォントを使用するときは、自分のサーバーでホストする必要がある？
  その場合、セルフホスティングが許可されていないウェブフォント（ほとんどの日本語フォント）が使えないのでは？　（あとで誤解と判明）

メニューはナビゲーションに

「メニュー」は「ナビゲーションブロック」に変わりました。

ナビゲーションブロック

ブロックテーマのエディターには「ナビゲーション」というメニューがあります。
ここから項目を編集する場合は、リストビューで行うのがやりやすいです。
「前に追加／後に追加」から、ナビゲーション項目のブロックを追加できます。

ナビゲーション項目として、投稿やページへのリンク、アーカイブへのリンク、カスタムリンクはもちろん、アイコン、検索窓、スペーサーなどのブロックも追加できます。
また、クラシックテーマで作成したメニューをインポートすることもできます。

"fontSizes": [
	{
		"fluid": false,
		"name": "Small",
		"size": "0.9rem", -> "0.75rem"
		"slug": "small"
	},
	{
		"fluid": false,
		"name": "Medium",
		"size": "1.05rem", -> "1rem"
		"slug": "medium"
	},
	{
		"fluid": {
			"min": "1.39rem", -> "1.5rem"
			"max": "1.85rem"  -> "1.25rem"
		},
		"name": "Large",
		"size": "1.85rem", -> "1.5rem",
		"slug": "large"
	},

（以下省略）

CSSの適用

タイポグラフィーの設定のところで style.css をエディターに読み込みましたので、編集画面にもCSSが反映されています。

ただ、編集画面で適用されると編集しづらくなるスタイルなどは、適用されないようにエディター用CSSから外してフロント側にだけ適用されるようにします。（Sassのインポートを使う、セレクタで工夫するなど）

また、タイポグラフィー・色・レイアウトなどの基本設定は、テーマのデザイン設定や theme.json で行うため、CSSから外します。
ウィジェットからパターンに作り直した部分、サイドバーをカラムで作り直した部分などはセレクターが変わりますのでCSSを編集します。

このあたりは、ブラウザーの開発者ツールなどを使いながら地道に調整していきます。

ブロックエディタを使いやすくしよう

使わないパターンを非表示に

WordPressにはデフォルトでパターンが入っています。
また、既存のテーマを親テーマにすると、多くのブロックパターンがついてきます。
これらはWordPressをノーコードツールとして使用する場合は非常に便利なのですが、いったんデザインが決まってしまえば使っていないパターンが毎回出てくるのは邪魔になります。

使わないパターンを非表示にするために、下記のコードを functions.php に書きました。
パターンを個別に非表示にすることは出来ないようなので、パターンカテゴリーごと非表示にします。
エディター > パターン でカテゴリーを選択するとURLに &categoryId=page のようなパラメーターがつきます。
&categoryid= の後の文字列がパターンカテゴリーのスラッグですので、これを指定します。

functions.php

/** Disable Default Patterns */
function disable_default_patterns() {
	remove_theme_support( 'core-block-patterns' ); // WordPressコア
	unregister_block_pattern_category( 'page' ); // Pages: TT4.
	unregister_block_pattern_category( 'call-to-action' ); // CTA.
	unregister_block_pattern_category( 'testimonials' ); // お客様の声.
	unregister_block_pattern_category( 'gallery' ); // ギャラリー.

（以下省略）

};
add_action( 'init', 'disable_default_patterns', 999 );

ブロックテーマとして書き出して本番に反映

テスト環境での調整作業が終わったら、「Create Block Theme」プラグインでテーマを書き出します。

本番環境では、親テーマの「Twenty Twenty-Four」と、テスト環境から書き出した子テーマをインストールします。

その後、子テーマを有効にすれば移行作業は完了です。

クラシックテーマをブロックテーマに移行する必要性は？

この記事を書いている2024年4月現在、クラシックテーマで問題なく動作しているサイトをブロックテーマに移行する必要はないと思います。
先日リリースされた WordPress 6.5 でも、ブロックテーマに実装された機能がクラシックテーマでも使えるようになるアップデートが行われているからです。

ただ、サイトのフルリニューアルをするのであれば、ブロックテーマへの移行を検討したほうがいいと思います。
今後のWordPressの開発はフルサイトエディティング（ブロックテーマ）を中心に進められていきます。
新しいウェブ技術や流行などを取り入れていきたいのであれば、ブロックテーマに移行したほうが絶対有利だと思われるからです。

それに、ブロックテーマで制作するのは、かなり楽しいです。
ブロックエディターでも楽しいと感じましたが、ブロックテーマでの楽しさは桁違いです。

ただし、既存のブロックで作れないようなカスタマイズが発生した場合、ブロックテーマだと対応が難しいこともあります。
そのような場合、カスタムブロックを作成できるスキルがあれば対応できますが、逆にその部分はクラシックテーマの時よりも技術的なハードルが上がっていると感じます。
とはいえ、カスタマイズ部分をPHPで書いてショートコードにするとか、カスタムブロックをPHPで作ることができるプラグインを使うことで対応可能なことが多いので、クラシックテーマのカスタマイズがそれなりにできるのであれば、ブロックテーマへの移行は難しくないと思います。

2024年はフルサイトエディティングを実案件に取り入れる制作者がかなり増えると考えています。
それにより手法がより充実し、情報もたくさん出てきて、サイト構築のノウハウも蓄積されていくでしょう。

私も現在、実案件でブロックテーマでのサイト構築を行っている最中です。
わからないことも多くて大変ですが、それ以上にワクワクしています。

ブロックテーマ、ぜひみなさんもチャレンジしてみてください！
そしてわかったことを共有して、より楽しいWordPressを作っていきましょう！