WordPressのGutenbergにもなれてきて、Gutenbergのブロックエディタも悪くないな…とか思ってきた今日この頃ですが、Gutenbergの編集画面と実際の表示でスタイルが微妙に違っていることが気になり始めました。
そこで、Gutenbergの編集画面だけに独自のcssを追加して、実際に表示されるレイアウトと近い状態を再現してみました。以下は、その方法の備忘録です。
私の場合は複数のWordPressページ（同じレイアウト設定）をサブドメインを分けて管理しているので、共通化できる部分は1カ所にまとめて管理するようにしています。
Contents
Gutenbergの編集画面に独自cssを読み込ませる方法
ポイントになる部分は、以下の通りです。
- Gutenberg用の独自cssファイルを作成
- 独自cssをロードするphpファイルを作成
- WordPressの
wp-includes/functions.phpに上記phpを読み込むコードを追加
なお、functions.phpに独自cssをロードする処理を記載すれば、上記「2」の手順は不要になります。今回は、functions.phpに追記する内容をできるだけ少なくしたかったので、独自cssをロードする部分を別のphpファイルに外だししています。
ディレクトリ構成
WordPressのfunctions.php以外のファイルは任意の場所に格納できますが、ここでは以下のような配置を前提に解説します。
/home/example/public_html/ # https://example.com で表示されるディレクトリの想定
┣ common
┃ ┣ gutenberg-custom.css # 独自css
┃ ┗ gutenberg-css-loader.php # 独自cssをロードするphp
┗ wordpress
┗ wp-includes
┗ functions.php # WordPressのfunctions.php
Gutenberg用の独自css（gutenberg-custom.css）
Gutenbergの編集画面用のcssを定義します。Chromeなどでスタイルを確認しながら、良い感じになるように調整してください。
利用しているWordPressのテーマによっては、!important付きでスタイル指定がされていて独自cssでスタイルの上書きができない場合があります。
この場合はスタイル設定先を更に絞り込むことで上書きできる場合があります。
例えばテーマ側のcssで.wp-blockに対するスタイルがimportant付きで定義されていた場合、独自cssで.wp-block{～!important}としても上書きされません。
この場合は、.wp-block p{～!important}などと適用範囲を絞り込めばOKです。
独自cssをロードするphp（gutenberg-css-loader.php）
Gutenbergエディタの場合だけ独自cssをロードするphpのコードです。
add_actionの引数でenqueue_block_editor_assetsを指定することで、Gutenbergの編集画面の場合だけ独自cssを読み込むようになります。実際に表示されるページでも独自cssを読み込みたい場合は、この部分をenqueue_block_assetsに変更してください。
<?php
/* enqueue_block_editor_assets はエディタ画面でのみ有効。実際のページではロードされない。 */
add_action( 'enqueue_block_editor_assets', function() {
$custom_css_url = 'https://example.com/common/gutenberg-custom.css';
wp_enqueue_style( 'my-block', $custom_css_url, array( 'wp-block-library' ) );
} );
?>
ここではロードするcssのURLを直接指定していますが、この部分をplugins_url()など、WordPressの関数を使ったパス指定に変更することも可能です。
独自cssロード用のphpをWordPressから呼び出す
WordPressのwp-includes/functions.phpに次のコードを追加して、上記で作成したgutenberg-css-loader.phpが実行されるようにします。
このときincludeに指定するファイルは/home/example/～のようなパス形式で指定する必要があります。https://example.com/common/～のようなURLで指定するとエラーになります。
/** Add custom css to Gutenberg editor. */
include('/home/example/public_html/common/gutenberg-css-loader.php');
