Aki Hamano

Gutenberg関連のCSSまとめ

はじめに

Gutenberg（ブロックエディタ）対応のテーマを作成するために、CSSを設計しようと思ったのですが、

  • 読み込まれるCSSの数が多い
  • どのように読み込む/読み込まれるのか
  • フロント側、エディタ側どちらで読み込まれるのか

などこんがらがるポイントが多かったので、まとめてみました。

style.min.css

フロント側で自動的に読み込まれる最初のCSS。

各ブロックの基本的なレイアウトを定義しており、特にブロックエディタ用のCSSを用意していなくても、ある程度いい感じに表示してくれるのはこのCSSのおかげ。

以下のように、wp_dequeue_style で無効化する事も出来ます。

function mytheme_enqueue() {
    wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );

ただし、例えばテキストの中央寄せ（ .has-text-align-center ）などの基本的なスタイルすら適用されなくなるので、全ブロックをフルカスタマイズしてやろうという本気の方以外は、有効にしたままの方が良いです。

theme.min.css

フロント側で読み込まれる二つ目のCSS。

style.min.css に加え、もう少し見栄え良くスタイルを整えてくれます。

こちらは style.min.css と異なり、add_theme_support( 'wp-block-styles' ); で手動で読み込む必要があります。

コードもそれほど多くないので、読み込まずに自前でスタイルを用意してもよいと思います。

load-styles.php

エディタ側で自動的に読み込まれる最初のCSS。

ブロックエディタ含め、管理画面全体のCSSが定義されています。

style-both.css

※ファイル名は任意

アクションフック enqueue_block_assets を使うと、フロント側・エディタ側両方で読み込まれます。

function mytheme_enqueue_both() {
    wp_enqueue_style( 'style-both', get_template_directory_uri() . '/style-both.css' );
}
add_action( 'enqueue_block_assets', 'mytheme_enqueue_both' );

フロント側・エディタ側を同時にスタイリング出来るので便利そうですが、前述した通り、

  • フロント側で読み込まれるCSSは style.min.css （＋ theme.min.css ）
  • エディタ側で読み込まれるCSSは load-styles.php

と、標準で読み込まれるCSSが違います。

スタイリングのされ方も若干異なるので、一つのCSSプロパティ・値で見え方を完全に統一させることは難しいです。

また、エディタ側のエディタ部はeditor-styles-wrapperというクラス名でラップされており、フロント側のコンテンツ部は独自のセレクタ（ .post-content とか）でラップするはずなので、共通のセレクタを使う事が出来ません。

とはいえ、セレクタに要素名（ h1 とか）を使うと、エディタ側・フロント側とも想定外のパーツにスタイルが当たってしまう懸念があります。

一つの用途として、ブロックにスタイルを適用した時に「is-style-XXX」といったクラス名がエディタ・フロントともに自動付与されるので、双方のブロックスタイルの見え方を共通のCSSで管理したい、といったケースに使えるのではないかと思います。

style.css

※ファイル名は任意

フロント側で読み込まれるCSS。

アクションフック wp_enqueue_scripts を使って読み込みます。

function mytheme_enqueue() {
    wp_enqueue_style( 'mytheme-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue');

フロント側で、 style.min.css （＋ theme.min.css ）の次に読み込まれるCSSです。

一般的に、ヘッダー・フッター・サイドバー等のコンテンツ部以外をスタイリングするためのサイトのベースとなるCSSや、リセットCSS、各種ライブラリのCSSなどを読み込みます。

block-editor-style.css

※ファイル名は任意

アクションフック enqueue_block_editor_assets を使うと、エディタ側で読み込まれます。

function mytheme_enqueue_block_editor() {
    wp_enqueue_style( 'mytheme-block-editor-style', get_template_directory_uri() . '/block-editor-style.css' );
}
add_action( 'enqueue_block_editor_assets', 'mytheme_enqueue_block_editor' );

読み込み順は、

  • load-styles.phpの後
  • enqueue_block_assets で読み込んだCSS（ style-both.css 等）の前

となります。

また、enqueue_block_assets と名前が似ているので紛らわしいですが、

  • enqueue_block_assets で読み込み → フロント側・エディタ側両方で読み込まれる
  • enqueue_block_editor_assets で読み込み → エディタ側で読み込まれる

という違いがあります。

エディタ側のブロックをスタイリングするためのCSSとして使われます。

editor-style.css

※ファイル名は任意

クラシックエディタでも使われるエディタ側のCSSで、以下のコードで読み込みます。

add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' );

読み込み順は、

  • load-styles.phpの後
  • enqueue_block_assets で読み込んだCSS（ style-both.css 等）の後
  • enqueue_block_editor_assets で読み込んだCSS（ block-editor-style.css 等）の後

と、一番最後に読み込まれます。

特徴として、各セレクターの直前にブロックエディタ全体を囲っている .editor-styles-wrapper というクラスが自動的に挿入されます。 （ セレクタがbodyの場合は、 .editor-styles-wrapper に置き換わる ）

このCSSいついては使い所がまだ分かっていませんが、クラシックエディタ向けのスタイルを書いたりしたら良いんじゃないかと思います。

まとめ

フロント側

順番ファイル名自動/手動読み込み方・特徴
1style.min.css自動wp_dequeue_style( 'wp-block-library' ); で無効化出来る
2theme.min.css手動add_theme_support( 'wp-block-styles' ); で読み込む
3style-both.css （ファイル名は任意）手動アクションフック（enqueue_block_assets）内で読み込む
4style.css （ファイル名は任意）手動アクションフック（wp_enqueue_scripts）内で読み込む

エディタ側

順番ファイル自動/手動読み込み方・特徴
1load-styles.php自動–
2block-editor-style.css （ファイル名は任意）手動アクションフック(enqueue_block_editor_assets)内で読み込む
3style-both.css （ファイル名は任意）手動アクションフック(enqueue_block_assets)内で読み込む
4editor-style.css （ファイル名は任意）手動add_editor_style( 'editor-style.css' ) で読み込む ※各セレクタの先頭に、editor-styles-wrapperというclassが自動で付与される

Categories

Events