実用はまだ先だろうと思っていたブロックテーマですが、WordPress 6 のリリース以降、WordPress の開発がブロックテーマを中心にする形で加速したことで、制作環境が一気に整いました。
Create Block Themeプラグインが登場したことで、フルスクラッチでテンプレートや theme.json を作成する必要もなくなり、快適なノーコードな環境でテーマを作成できます。
こんな快適な環境を使いこなすためには、これまでのテーマとは全く異なる、ブロックテーマを理解する必要があります。
もちろん、テキストエディターで手を加えなければならない部分は残っています。ただ、実装が追いついていないからというよりも、簡単にさわれないようにする方法が定まっていないから後回しにされているかな、と思えるレベルには整っています。
ブロックテーマとは
ブロックテーマは、これまでの WordPress のテーマとは全く異なり、ブロック（コンポーネント）ベースのフレームワークと言えるでしょう。そして、そのテーマはノーコードな環境であるサイトエディターを使って作成します。
ノーコードな環境ですから、もちろん UI を使って作成していくことになります。直接コードを書くような自由はなく、結果として、UI がフレームワークのルールの一部を構成しています。
Gutenberg はノーコードな環境の実現のために、コンテンツのマークアップに関してはブロックエディターを採用しました。しかし、スタイリングに関してはブロック固有のスタイル以外はテーマ任せでした。これは、クラシックテーマの構成上仕方がないことではありますが。
ブロックテーマ（サイトエディター）では、このスタイリングもマークアップと同様に管理することを選択します。
ただし、サイトエディターはノーコードな環境ですから CSS の膨大な組み合わせをすべて扱うことはできません。UI で扱えるレベルの CSS に限定する必要があります。そこで、サイトエディターにはスタイリングのモデルが必要となり、用意されます。
スタイリングのモデルとtheme.json
サイトエディターにはこのスタイリングのモデルを効率よく扱うために、デザインシステムとレイアウトシステムが組み込まれています。そして、この 2 つのシステムを実現し、管理しているのが theme.json です。
theme.json で管理されているスタイルがサイトエディターの UI へと反映され、選択肢やプリセットになります。同時に、それらのスタイルはグローバルスタイルとして出力され、UI を使ってこの出力されたグローバルスタイルを使ったスタイリングを行うことになります。
たったこれだけの CSS でどうすればいいのか…と思える theme.json ですが、このスタイリングのモデルが見えてくれば、必要十分であることも理解できます。
さらに、テーマの作成では、テーマの theme.json だけですべてを実現していくわけではありません。コア、テーマ、ユーザー、ブロックの 4 つの theme.json を使って、必要なスタイルを用意し、それらをテーマの theme.json へ統合したり、テンプレートやブロックパターンの中へ埋め込みならがテーマを構成していきます。
そのため、この 4 つの theme.json がどこで管理され、どのように扱われ、どのような形で出力できるかを理解しておく必要があります。
スタイルの最適化とテーマの互換性
WordPress 6.1 で導入されたスタイルエンジンによって、スタイルの最適化が始まりました。その効果は素晴らしく、これまでの冗長であった CSS はコンパクトでシンプルなものへ劇的に置き換わっています。セマンティックなクラスへの置き換えも、この最適化を加速しています。
そして、このセマンティックなクラスに応えるようにレイアウトのためのコンテナの機能も整い、レイアウトシステムが形になりました。
ですから、このレイアウトシステムを使いこなすためにも、セマンティックなクラスの背後にあるスタイルを意識しておかなければなりません。
さらに、テーマを制作する上で、テーマの互換性にも気を配る必要があります。テーマを切り替えた際に表示が崩れたり、公開されているブロックパターンを導入した際にスタイルがうまく適用されないといった問題を回避するためです。
すでに、このあたりのルールも存在しています。
「ブロックテーマを制作する」ということ
ブロックテーマを制作するというのは、サイトエディターというノーコードな環境を目的に合わせて構築することです。そのため、環境に関して知っておくことはもちろん、コードに関する知識やスキルは一定レベル以上のものを求められます。ノーコードな環境を使うのとは全く別次元の話です。
ブロックテーマやサイトエディターに関する情報は、現時点ではまとまったものもなく、そのほとんどが機能や話題のきっかけとなった Githubのissueの中にあるだけです。一部は公式のドキュメントとしてまとめられ始めましたが、議論の流れの中でしか見えない部分も多く、あちこちに散らばっている情報をWordPressの挙動を確認しながら自分で紡いでいくしかありません。なかなかのハードルの高さです。
さらに、ブロックテーマでは、スタイリングに関する情報が多くを占めます。Internet Explorer のサポートを早い段階で打ち切ったWordPressですから、モダンCSS やコンポーネントベースな環境で使われるスタイリングテクニックが盛り沢山です。そこへ、スタイルエンジンの導入です。最適化されたスタイルが出力されるようになったのは喜ばしいことですが、コードを検証する側からすれば、ストレートなCSSが見えなくなるブラックボックス化です。ハードルがどんどん高くなってきます。
ブロックテーマの制作に関する資料や書籍がなかなか登場してこないのが不思議でしたが、今回、追いかけてみて納得するしかありませんでした。完成へ近づくに連れてブラックボックス化が進み、ハードルがどんどん高くなっていくわけですから。
となると、どこかのタイミングでブロックテーマやサイトエディターにしっかりとチャレンジしておかないと、厳しいことになるかも…。と考えていたタイミングで、スタイルエンジンを中心として次のステージへと進んだ WordPress 6.1 が見えてきました。そこで、一気にまとめて出来上がったのが、今回の『作って学ぶ WordPress ブロックテーマ』です。
タイトルのとおり、ブロックテーマを制作するためのもろもろを、現時点で見える限りを詰め込みました。
この本では、ブロックテーマを制作しながら、
- ブロックテーマの作成の流れ
- サイトエディターを含む、ブロックエディターの使い方
- theme.json の作成方法とその目的
- theme.json を中心とした、これからの WordPress のスタイリング
といった、ブロックテーマを作成する上で必要なことをしっかりと解説しています。もちろん、デザインシステムやレイアウトシステムに関しても解説しています。
また、ブロックテーマの作成を理解しやすくするための準備として、theme.json の構造はもちろん、レイアウトシステムの中心である「コンテナ」という考え方につながる Gutenberg のレイアウトの変化なども実例をベースまとめています。
theme.json が本書の中心となりますので CSS が中心となる構成です。これまでの WordPress の本とは大きく異なります（いつものエビスコムの本ではありますが…）。
ステップバイステップな構成ですが、決して初心者に優しい本ではありません。その点はご注意をお願いします（WordPress のテーマ制作の経験がある方を想定しています）。
ハイブリッドテーマ
クラシックテーマにブロックテーマの要素を取り込んだものを、ハイブリッドテーマと呼びます。
現在の WordPress のテーマの中心は、theme.json を取り込む形でのハイブリッドテーマでしょう。ただ、クラシックテーマの側から theme.json を見ていても、その実像は見えてはきません。やはり、theme.json の真価が発揮されるのは、ブロックテーマであり、サイトエディターなのです。ですから、ハイブリッドテーマを作成するためにも、ブロックテーマを理解するのは重要です。
Gutenberg が投稿エディターから始まったこともあり、投稿エディターだけが独立しているような印象があります。しかし、現在の投稿エディターはサイトエディターの一部なのです。このあたりは、ブロックテーマを制作してみると実感します。
そして、サイトエディターの一部だという事実は、クラシックテーマやハイブリッドテーマでも変りません。ただ、そこで扱うものが存在しないからサイトエディターが意識されていないだけです。しかし、WordPress 6.1 でクラシックテーマでもサイトエディターの機能の一部が使えるようになり、状況が変わってきました。
そこで、ブロックテーマをベースにすることで見えてくる、これからのハイブリッドテーマに関しても、PDF で解説しています。
PHP ベースのテーマであっても、ブロックテーマ側で設定を済ませてしまうことで、デザインシステムとレイアウトシステムを使って、自然でシンプルな形でテーマを作成できます。
すでに、WordPress のテーマ制作の中心はブロックテーマになっているようです。『作って学ぶ WordPress ブロックテーマ』をこれからの WordPress のテーマ制作に活用していただければ幸いです。
