Gutenberg(ブロックエディタ)メモ: 自動で出力されるブロック用のCSSを取除く

Cat WEBサイト構築Tag , by cubismer
WordPressのGutenberg
WordPressのGutenberg

Gutenbergでは2種類のCSSが用意されていて、内１つは自動でhead内に出力されます。

インラインでCSSを出力させている場合には外部スタイルシートの形だとよろしくないことがあるので、一旦無効化する手段が必要になり調べたことを記載します。

構築環境
WordPress5.0-beta3-43876
PHP7.2.6
JavaScriptJSX/ESNext
Gutenberg4.3.0

実現したいこと

  • /wp-includes/css/dist/block-library/style.cssのようなパスを持って出力されているCSSをremoveする
  • /wp-includes/css/dist/block-library/theme.min.cssのようなパスを持って出力されているCSSをremoveする

対応策

上記に以下の記述がありました。


// Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
    wp_dequeue_style( 'wp-block-library' ); // WordPress core
    wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce
    wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}

上記はWooCommerceなども入っていますが、その中にある2つを使った以下の記述で取除けます。


//関数名などは任意で
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
    wp_dequeue_style( 'wp-block-library' ); // WordPress core
    wp_dequeue_style( 'wp-block-library-theme' ); // WordPress core
}

結び

AMPフォーマットのようにlinkタグによるCSSの読み込みが禁止されていると、自動で出力されたこれらのCSSは問題発生の原因になりえます。

確認できていませんがおそらく公式ディレクトリにあるAMP用のプラグインなどであれば対応済み(あるいは対応予定)だとは思いますが、自作している場合は注意が必要になるかもしれません。

なお、自サイトで使っている仕組みに関する記事も書きました。

関連記事

Gutenberg(ブロックエディタ)に関連する記事一覧。

1人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄