WordPressのブロックテーマの、サイトエディタ (ver.6.2~)には、主に「追加CSS」「グローバルブロックスタイル」の2種類の、設定フィールドがあります。
2つの設定フィールドは、記述可能なCSSが異なり
私には「よく理解していないと困惑の種になりやすい」特性があると思われました。
コアの公開された情報に基づくものではありませんが、私自身の整理を兼ねてメモを残しておこうと思います
「独自の CSS を追加して、見出しブロックの外観をカスタマイズできます。CSS セレクタを含める必要はなく、プロパティと値を追加するだけで設定できます。」
この説明文が添付されているのが、グローバルブロックスタイル
サイトの外観とレイアウトをカスタマイズするには、CSS を追加してください。
この説明文が添付されているのが、追加CSS
この2種類のCSS設定フィールドは、どのような場合にどちらを使用するべきなのか 検索してみても、なかなか腑に落ちるものはありません。
私自身も「どうすればいいんだろう」といった悩みの中にいますが、わかっていることについてまとめていきたいと思います。
歴史
ブロックテーマが出現する以前のテーマ（クラッシックテーマ）のCSSの違いについて見ていきます。
クラッシックテーマでは、一部のCSS設定を除いて、CSSはテーマ製作者や、ユーザーがほとんどのスタイルを定義していた。
CSSセレクターは、要素名に対応するクラスはルール化されていなかったので、要素で指定されるケースが多かった。
ブロックテーマでは、ブロックに対応するスタイルはコアで事前定義されるようになり、テーマ製作者は、theme.jsonでデフォルト値をCSS変数を使って定義するように変更された。
CSSセレクターは、ブロック毎の固有のクラスを使用されることになった。
ブロックテーマでは、CSSのデフォルト値がHTMLドキュメント用のものから、ブロック用のデフォルト値に置き換わったため、ブロックテーマでHTMLを記述した場合に、ブロック用のCSSとコンフリクトして、意図しないレイアウトになるようなケースがたびたび発生するようになった。
例
margin のデフォルトは、0が指定されることが多いですが、ブロックテーマでは、多くがmargin-left:auto ! important, margin-right:auto ! important コアが自動設定します。
テーマの機能の中で、CSSを設定して見栄えを整えるという作業は最も頻繁に行われる作業です。この作業を行う場合にはどうしてもHTMLをベースにしたCSSの記述になりがちで、WordPressのブロックをベースにしたCSSの記述に見直す必要がありますが、
HML+CSSは、WEB上で最も標準的ですが、WordPress Block + CSSは、WordPressに限ったものなのでカスタマイズには様々な知識や経験が必要そうですが、リソースは現在そう多くはありません。
ユーザーは、見栄えを調整するためのCSSの設定がうまくいかないことを嘆き、また、コアのグローバルブロックスタイル にも、いくつかのクリティカルなポイントも存在し、それらをうまく調整するノーハウも少ないといった現実が、WordPressに混乱を招いているのだろうと思います。
サイトエディタが出現する前の、投稿エディタではカスタムCSSをどのように設定していたのかを振り返る。
投稿エディタでは、テーマにもよりますが、ブロックによっては、「スタイル」という項目があります。これは、テーマ製作者があらかじめ定義したスタイルをブロックに適用するものですが、この「block style」のいずれかを選択すると、高度な設定/追加CSSクラスに、特有のクラスが追加されます。
テーマ開発者は、ブロックに追加されたクラスに応じたCSSをあらかじめ追加しておくことで、「見栄えの変更」を実現します。
このことから、「見栄えの変更」を行う場合には、特定のクラスをブロックに追加するということで、ブロックのスタイルバリエーションを作ってきました。
この、ブロックごとに追加したクラスや、その他の設定をいちいちブロックを使うたびに、再入力するのは大変面倒なので、そのブロックのパターンを作成しておくことで、特定のスタイルバリエーションや、背景、色、タイポグラフィーなどを定義済みにすることができ、通常のブロックのように再利用することができるようになります。
グローバルブロックスタイルとは何か
何らかのブロックを、投稿や固定ページにセットした場合にセットされるデフォルトスタイルになります。コードブロックを例に見ていきます。
このデフォルトスタイルを設定するのが、theme.json と template ファイルになります。
<?php echo 'hello world' ?>
投稿エディタでコードブロックを選択すると、右サイドバーにこのようなスタイルの設定が表示されます。すたいるだーくをせんた