フロントへのデフォルトスタイル適用やエディタ上で任意のスタイル適用など、Gutenberg用のCSSを読み込んだり設定する方法です。
フロントでGutenbergのデフォルトスタイルを適用
Gutenbergには一部ブロック(例えば「引用」や「テーブル」など)に適用させるデフォルトスタイルとしてCSSがあらかじめ用意されているのですが、それをフロント(公開記事)にも適用させたい場合は、下記のようにfunctions.php
へadd_theme_support( 'wp-block-styles' );
を追記します。
フロント・エディタともに見栄えはすべて自身で作るのであれば必要ないとは思いますが、ある程度はデフォルトをそのまま使用する場合向けです。
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
の部分を任意に変更してください。
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
に下記のようなスタイルを記述したとします。
body {
background: black;
}
.test {
color: black;
}
これらは実際の出力時には下記のようにそれぞれ変換され、body
と記述したはずの部分は.editor-styles-wrapper
になり、.test
しか記述しなかったはずの部分には頭に.editor-styles-wrapper
が付与されるようになります。
自身の目で確認したい場合は、デベロッパーツールなどでbody
閉じタグ手前辺りを確認してください。
.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
にネストして書くだけですむので楽に対応できると思います。