WordPressの公式テーマ Twenty Twenty-Twoをみて思うこと

公式テーマであるTwenty Twenty-Twoがブロックテーマとして公開されました。
現状のWordPressの機能をフルで使うためには、ブロックテーマとして作るしかないわけですから当然の流れではありますが、ブロックテーマへの移行がいよいよ本格的に始まるのかと考えると、ちょっと気が重くなります。

ブロックテーマへの移行でクローズアップされるのはもちろん、Full Site Editing（FSE / フルサイト編集）です。しかし、Twenty Twenty-Twoを眺めていくと、本当に頭が痛いことになるのは、Global Stylesだということが見えてきます。
WordPress 5.9の機能がちょっとモヤッとした流れになったのも、Global Stylesが整っていないことが原因の一端であることは明確です。

WordPress 5.9 Feature Go/No-Go | October 14, 2021 – Make WordPress Core
https://make.wordpress.org/core/2021/10/15/wordpress-5-9-feature-go-no-go-october-14-2021/

そもそも、Global Stylesとは何なのでしょう？
それを理解するためには、ブロックエディタ、そして、Gutenbergの特異性を理解する必要があります。

ブロックエディタ

ブロックエディタは「直感的で、軽快で、ドキュメントの作成に非常に適したもの」です。ブロックエディタ＝Gutenbergな方にとっては、何の話をしているんだと言われそうですけど。

Gutenberg以外のブロックエディタを調べてみると、以下のようなものを見つけることができます。

• Editor.js
  https://editorjs.io/
• MediumEditor
  https://yabwe.github.io/medium-editor/
• Notionのエディタ
  https://www.notion.so/ja-jp/product?utm_medium=social&utm_source=twitter&utm_campaign=2021q3_jplaunch_jp
• Ghostのエディタ
  https://ghost.org/

どのエディタも実際に触れる環境が用意されていますので、試してみるのをオススメします。
ブロックエディタは「直感的で、軽快で、ドキュメントの作成に非常に適したもの」なのです。
そして、Gutenbergの異質さが認識できると思います。

---

ブロックエディタは、従来のリッチテキストエディタに置き換わるものとして登場してきており、WYSIWYGが基本というのは、Gutenbergを含むどのブロックエディタでも共通しています。

しかし、レイアウトに関しての考え方は大きく異なります。
Gutenberg以外のブロックエディタのレイアウト機能は、マークダウンのドキュメントレベルしか求めていません。

それに対してGutenbergが求めているのは、完全に自由なレイアウト。

ドキュメントの作成なのか、ページの作成なのか。その目的が根本的に違います。そして、Gutenbergは自由なレイアウトの実現のためにCSSを完全に開放しています。

Gutenbergの扱いづらさの根源はここにあります。自由すぎて手にあまるのです。

ですから、Gutenbergを使いやすくするために、自分に合わせて制限をかける必要があります。その制限のために用意されているのが、これらの機能です。

おや？と思うかもしれません。ブロックの追加などは機能の拡張ではないかと。
一面としては、もちろんその通りです。しかし、一方では、コードの定型化、簡素化といった役割もあり、エディタ環境の秩序を維持するための制限でもあるのです。

このあたりのバランスをとってうまくまとめるのが現在のテーマに求められていることなのでしょう。

ただ、このあたりのさじ加減の難しさはご存知のとおりです。絶妙なバランスに仕上げた有料テーマが注目されるのも納得です。

また、こうした状況はWordPressへやってくるビギナーには本当に厳しいと思います。目的がはっきりしていれば有料テーマからのスタートを選択できますが、WordPressそのものを学ぶというのが目的であれば、素のGutenbergを味わうところから始めるしかありません。ファーストコンタクトで心が折れないことを祈ります。

このあたりを対応してくれる無料のテーマは？とも思いますが、無茶振りを続ける発展途上なGutenbergの追従がどれほど過酷かと考えると、そんな贅沢なことも言えません。4.xの頃のテーマとは根本的に違います。

ブロックテーマ

いよいよブロックテーマの登場です。大雑把に言ってしまえば、FSEによって実現する、コンテンツ以外の部分もブロックで構成したテーマです。もっとも、FSEやブロックテーマそのものは、これまでにGutenbergを使いこなしてきた方であれば、それほど難しいものではないでしょう。

問題なのは、Global Styles なのです。

Gutenbergの自由に対して、ブロックやテーマのCSSによって制限を掛けるという話をしましたが、すべてテーマ製作者の裁量にまかされてきたため、無秩序だったといえます。

これまでであれば、それらはテーマの中で閉じていましたので問題になることはありませんでした。しかし、ブロックとブロックテーマの登場によって状況が変わります。

そのため、一定の秩序としてのCSSの標準化が求められました。

さらに、Global Stylesを策定していく中でテーマ制作の合理化の流れが加わります。

その結果として出来上がりつつあるのが、Global Stylesなのです。

今一つピンとこない方には、Twenty Twenty-Twoの Tips for Contributors が参考になるかもしれません。

As stated above, a goal for the theme is to have as little CSS as possible. Much of the theme's visual treatments should be handled by the Block Editor and Global Styles. As a general rule, if multiple themes would benefit from the CSS you're considering adding, it might reasonably be provided by Gutenberg instead. Let's include clear code comments for any CSS we do include.

前述のとおり、このテーマの目標は、CSSをできるだけ少なくすることです。テーマのビジュアル処理の多くは、ブロックエディタとグローバルスタイルズによって処理されるべきです。一般的なルールとして、追加を検討しているCSSが複数のテーマから恩恵を受ける場合は、代わりにGutenbergで提供するのが妥当でしょう。追加するCSSには明確なコードコメントを付けましょう。

WordPress/twentytwentytwo: Twenty Twenty-Two, the default WordPress theme that will launch with WordPress 5.9.
https://github.com/WordPress/twentytwentytwo
（翻訳： DeepL）

「各テーマに共通なCSSはGlobal Stylesに押し込んで、それ以外のCSSは最小限にしていくよ」と。

つまり、今後のWordPressのテーマにおける、最も重要な存在がGlobal Stylesになるということです。

単純にこれまでのワークフローに当てはめようとすると、デザインカンプからスタイルガイドを作成して、サイトやページを作成していくような形にもっていくという形になるわけですが、ちょっと手軽な感じではありません。
従来の、HTML&CSSでページを作成してからのWordPrss化というスタイルとは、最悪な相性にさえ思えます。

Global Stylesを中心に据えたワークフローの根本的な見直しが求められそうです。WordPress 5.9では、このあたりを試せる環境がやっと整いそうですので、じっくりと検討してみるしかありません。

FSEが目指しているのは、HTML&CSSの知識がなくても簡単にテーマを作成・カスタマイズできるノーコードな環境…ということになっているのですから。

やっと実体が見えてきたFSEとGlobal Stylesですが、最初の話からは、ずいぶんと形を変え、壮大なものになっている気がします。
ここまでのものになってくると、WordPress 5.xは6以降のための実験期間だったようにさえ思えてきます。Global StylesにJSONを採用するのを揉めていたくらいですから、そんなことはないと思うのですが…。

FSEの次のフェーズでは、共同編集なんてことも予定されているようですから、最終的にどこまで行くのか本当に楽しみです。
ただ目先の話、どこから手を付けたものでしょうか？