概要

gutenbergのデフォルトのエディタのスタイルって、無駄に字が大きいし、実際のサイトと見た目が違うので、一致させる方法を紹介します。手順としては「子テーマのfunctions.phpの変更」と、「style.cssの書き方」の2つを変更することで実現できます。

子テーマのfunctions.phpの変更

子テーマ内のfunction.phpに、下記のようなコードを追加します。

/* 子テーマのfunctions.php */

// 親テーマのエディタースタイルを削除して、
// 子テーマのエディタースタイルを適用する関数。
function theme_enqueue_block_editor_assets()
{
    // ブロックスタイルエディタをオーバーライドして削除
    wp_deregister_style('wp-block-library');
    wp_register_style('wp-block-library', '');

    // コアテーマスタイルをオーバーライドして削除
    wp_deregister_style('wp-block-library-theme');
    wp_register_style('wp-block-library-theme', '');

    // 子テーマのスタイルを読み込み
    wp_enqueue_style('child', get_stylesheet_directory_uri() . '/style.css', null, null);
}
add_action('enqueue_block_editor_assets', 'theme_enqueue_block_editor_assets', 1000);

何をしているかというと、アクションフック「enqueue_block_editor_assets」のタイミングで、デフォルトのCSSを空にして、最後に子テーマのスタイルシートを読み込んでます。

style.cssの書き方の変更

/* 例えば、本文中のh2にスタイルを適用する場合 */
.entry .entry-content h2, .edit-post-visual-editor.editor-styles-wrapper h2 {
  color: #c00;
  font-size: 1.5rem;
}

ポイントとしては、「親テーマよりも優先されるような条件でCSSを設定する」というものです。親テーマの多くが、「.editor-styles-wrapper」以下にCSSを書いているので、もう少し厳しめの条件「.edit-post-visual-editor.editor-styles-wrapper」などで書くと、優先的に適用されるので意図通りの見た目になると思います。

イマドキはsaasとかlessで書く人が多いと思いますので、適用したいスタイル全体をセレクタ「.entry .entry-content, .edit-post-visual-editor.editor-styles-wrapper」なんかで囲ってしまえばいいと思います。

以上です。参考になれば幸いです。

とかいいつつ

この記事は旧エディタで書いているという…。gutenbergは未対応のプラグインも多いので、自分用はまだ旧エディタです。