Gutenbergブロック用のデフォルトスタイル（wp-block-library-css）を読み込まないようにする方法

WordPress5からブロックエディター（Gutenberg）が導入されました。

これに合わせて、WordPressコアに標準搭載されている各ブロックのデフォルトスタイルが記述されたCSSファイルが自動的に読み込まれるようになっているようです。

実際には以下のようなlinkタグが出力されていることが確認できるかと思います。

head内に追加された記述を確認してみる

<link rel='stylesheet' id='wp-block-library-css' href='//example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.2' type='text/css' media='all' />

今回は、このCSSファイルを読み込まないようにする方法をメモしておきます。

Gutenbergブロック用のCSSファイルを読み込まないようにするコード

wp_deregister_style()を使って、登録されたブロック用のCSSファイルを削除してあげればOKです。

head内に出力されていたlinkタグを確認するとハンドル名は'wp-block-library'で登録されていることが分かりますので、このハンドル名を指定して削除していきます。

functions.phpに記述

add_action('wp_enqueue_scripts', function() {
    wp_deregister_style('wp-block-library');
});

これによって、ブロックコンテンツ用のCSSが読み込まれなくなります。

なんでこんなことするかというと、個人的にはWordPressのバージョンアップによる仕様変更でいきなり過去記事の表示が崩れないようにしたかったのと、デフォルトのCSSを少し書き換えたかったからです。

なので、ブロック用のCSSファイルは別で用意して読み込ませています。（圧縮して他のCSSファイルト統合している）

何か変更があればすぐに修正する必要はあるので、今後常に管理していけるサイトでだけ、このようにするのはありかなと思っています。