WordPress:Gutenberg用CSSを読み込んだり設定する方法

WordPress:Gutenberg用CSSを読み込んだり設定する方法

フロントへのデフォルトスタイル適用やエディタ上で任意のスタイル適用など、Gutenberg用のCSSを読み込んだり設定する方法です。

WordPress:Gutenberg用CSSを読み込んだり設定する方法 目次

  1. フロントでGutenbergのデフォルトスタイルを適用
  2. Gutenbergにスタイルを適用 #1
  3. Gutenbergにスタイルを適用 #2

フロントでGutenbergのデフォルトスタイルを適用

Gutenbergには一部ブロック(例えば「引用」や「テーブル」など)に適用させるデフォルトスタイルとしてCSSがあらかじめ用意されているのですが、それをフロント(公開記事)にも適用させたい場合は、下記のようにfunctions.phpadd_theme_support( 'wp-block-styles' );を追記します。
フロント・エディタともに見栄えはすべて自身で作るのであれば必要ないとは思いますが、ある程度はデフォルトをそのまま使用する場合に。

functions.php

add_action( 'after_setup_theme', 'nxw_setup_theme' );
function nxw_setup_theme() {
  add_theme_support( 'wp-block-styles' );
}

Gutenbergにスタイルを適用 #1

Gutenbergで独自のスタイルを適用したい場合は、これまでエディタにスタイル適用させたいときに使用していたadd_editor_style()に加え、下記のようにadd_theme_support( 'editor-styles' );を追記することで可能になり、記述された内容はstyle要素としてインラインで挿入されます。
使用するCSSの格納場所やファイル名が異なっている場合は、editor-style.cssの部分を任意に変更してください。

functions.php

add_action( 'after_setup_theme', 'nxw_setup_theme' );
function nxw_setup_theme() {
  add_theme_support( 'editor-styles' );
  add_editor_style( 'editor-style.css' );
}

CSSの記述について

これまでのエディタでスタイルを適用させたい場合、CSSのセレクタの頭に#tinymceとか.mce-content-bodyを付けて指定していた方も多いと思いますが、Gutenbergの場合はそれらが基本的に不要になり、記述されたセレクタの頭に.editor-styles-wrapperというclassが自動で付与、またはbodyが記述されていたら.editor-styles-wrapperに置換して出力されるようになっています。

例えば、先ほど読み込むように指定したeditor-style.cssに下記のようなスタイルを記述したとします。

editor-style.css

body {
  background: black;
}
.test {
  color: black;
}

これらは実際の出力時には下記のようにそれぞれ変換され、bodyと記述したはずの部分は.editor-styles-wrapperになり、.testしか記述しなかったはずの部分には頭に.editor-styles-wrapperが付与されるようになります。
自身の目で確認したい場合は、デベロッパーツールなどでbody閉じタグ手前辺りを確認してください。

inline style

.editor-styles-wrapper {
  background: black;
}

.editor-styles-wrapper .test {
  color: black;
}

ちなみに、.editor-styles-wrapper { background: black; }のように記述してしまうとそのまま置換処理などされずに出力ということではなく、.editor-styles-wrapper .editor-styles-wrapper { background: black; }のように出力されるので注意してください。

Gutenbergにスタイルを適用 #2

上で紹介した方法はインラインで適用させるものでしたが、何らかの理由で外部ファイルとして読み込みたい場合は、下記のようにenqueue_block_editor_assets()を用いる形で記述することで可能になります。

add_action( 'enqueue_block_editor_assets', 'add_block_editor_style' );
function add_block_editor_style() {
  wp_enqueue_style( 'block-editor-style', get_theme_file_uri( 'editor-style.css' ) );
}

CSSの記述について

こちらの方法の場合は、先ほどとは違って.editor-styles-wrapperが自動で付与されるなどの動きはないので、CSSを記述する際には各セレクタの頭に.editor-styles-wrapperを書いておくことで意図しない部分へスタイルが適用されてしまうのを防ぐことができます。
大量のセレクタがあった場合に生CSSだと少し面倒ですが、Sassとか使っているのであれば各スタイルを.editor-styles-wrapperにネストして書くだけですむので楽に対応できると思います。

Close the search window,
please press close button or esc key.