gutenbergのスタイルを削除して、子テーマのスタイルを適用する方法。

概要

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

子テーマのfunctions.phpの変更

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

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

style.cssの書き方の変更

ポイントとしては、「親テーマよりも優先されるような条件で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は未対応のプラグインも多いので、自分用はまだ旧エディタです。

質問・コメントなどあればどうぞ