• このエントリーをはてなブックマークに追加

まずは、GutenbergのCSSを読み込む。
functions.phpに記述する。※ifやfunction・フックなどを行わずそのまま記載するだけで、基本CSSが読み込まれる。

add_theme_support( 'wp-block-styles' ); 

リセットしたいところ・リセットされていないところをリセットするのは、自分で設定するCSS(リセット用CSSや共通CSS)で行う。

識別接頭辞

.wp-***
.has-****

こういったクラス名とかぶらないように作成すればOK。
リセットCSSや共通では、HTMLタグ自体をリセット・初期化してしまうため、タグ自体にスタイルが適用される。その時にGutenbergのクラスが付与されるタグも適用されるので、都合の悪い指定をしていると、レイアウトや装飾がうまくいかなくなるので、注意。うまく行かなくなった状態をコンフリクトと呼ぶ。

JavaScriptなどでは得に発生しやすいものだが、CSSでも注意したいぽおいんと。

テーマを一から作成するとき

まずはGutenbergを読み込むための記述である、add_theme_supportを使って、読み込んでおいて、一からテーマを作成するのが良い。どこをどうリセットしてしまうとどういった問題が起きるのかを把握できる。

また、確認する際は、できればすべてのブロックをサンプルとして投稿したページを持とにして作成するのが良い。

他のシステムも考え方は同じ

コンフリクトをしないように考えられて設計されているシステムならばまだしも、そうでないものもたくさんある。Gutenbergは、そういったシステム・スタイルの一つで、同じクラスだと影響を受けてしまうことがあるため、同じ名称にならないように工夫する必要がある。

かといって、何行も続くGutenberg用のCSSを解読して、自分の今から記述するCSSをチェックしていくのは大変。

そう難しく考えずに、単純にGutenbergを先に読み込んでおいてから自分の独自の記述を追記するのが良い。そうすることで、かぶらなければ表示は意図したものになるし、同時に重複のチェック・コンフリクトのチェックが可能。非常にシンプル。

乱暴にも無視するという考え方

GutenbergのCSSを読み込ませずに、機能を制限して使わないという考えもじつはあり。特に使わないという機能はこれだけ、たくさんのブロックがあると出てくるもの。すべて使えればいいが、使わないことのほうが多いし、それに時間を割くことを考えれば、機能をオフにする、あるいは無視するという方向で済ませてしまうというのも選択肢としてはありなのではないかとは思う