【WordPress】wp_enqueue_block_style() で特定ブロックにだけ CSS を適用する方法

WordPress 5.9 から導入された wp_enqueue_block_style() を使うと、ブロックエディタ（Gutenberg）で特定のブロックだけにカスタム CSS を読み込み、そのままフロントエンドにも反映できます。テーマ・プラグインを問わず安全にスタイルをバインドできるため、ブロック単位のデザイン微調整や UI ライブラリの拡張に最適です。

wp_enqueue_block_style() とは？
基本的な使い方
実践例：段落ブロック (core/paragraph) に影付きスタイルを付与する
よくあるハマりどころと対処法
関連記事
よくある質問（FAQ）
まとめ

wp_enqueue_block_style() とは？

wp_enqueue_block_style( string $block_name, array $args ) は「ブロック名」をキーにして CSS を登録し、エディタとフロントの両方へ自動出力する関数です。

従来は add_editor_style() と wp_enqueue_style() の二段構えで行っていた処理を、ワンライナーで完結できる点が最大の利点です。

基本的な使い方

functions.php：core/paragraphブロックにCSSを適用

function mytheme_enqueue_block_style() {
    wp_enqueue_block_style(
        'core/paragraph',               // 対象ブロック
        array(
            'handle' => 'mytheme-paragraph-style',        // 一意なハンドル
            'src'    => get_theme_file_uri( 'css/paragraph-style.css' ),
            // 'path' => get_theme_file_path( 'css/paragraph-style.css' ), // 省略可
            // 'version' => '1.0.0',                        // キャッシュ対策に任意で指定
        )
    );
}
add_action( 'init', 'mytheme_enqueue_block_style' );

block_name: スタイルを適用したいブロックの名前。コアブロックなら core/paragraph、カスタムブロックなら namespace/block-name の形式で記述します。
handle: CSS を一意に識別するハンドル名。他のテーマ・プラグインと衝突しないよう、プレフィックスを付けておくと安全です。
src: 読み込むスタイルシートの URL を指定します。テーマなら get_theme_file_uri()、プラグインなら plugins_url() を使うのが一般的です。
path: src とペアで渡すローカルパス（省略可）。設定するとファイルの存在チェックが行われます。
version: CSS のバージョン番号。更新時のキャッシュクリア用に指定すると便利です。

実践例：段落ブロック (core/paragraph) に影付きスタイルを付与する

functions.php：影付きスタイルを段落ブロックに登録

function mytheme_paragraph_shadow_style() {
    wp_enqueue_block_style(
        'core/paragraph',
        array(
            'handle' => 'mytheme-paragraph-shadow',
            'src'    => get_theme_file_uri( 'css/paragraph-shadow.css' ),
        )
    );
}
add_action( 'init', 'mytheme_paragraph_shadow_style' );

paragraph-shadow.css の中身はシンプルに以下のような指定で構いません。

css/paragraph-shadow.css

.wp-block-paragraph.is-style-shadow {
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  padding: 1.2em;
  border-radius: .5em;
}

ブロックエディタでは、段落ブロックの「スタイル」パネルから影付きスタイルを選択でき、公開ページでも同じ装飾が反映されます。

よくあるハマりどころと対処法

①　エディタ用だけ読み込みたい
エディタ専用にしたい場合は enqueue_block_editor_assets フック内で wp_enqueue_style() を使う方法が推奨です。wp_enqueue_block_style() はフロントにも出力される点に注意してください。

②　複数ブロックに同一 CSS を適用したい
同じ CSS ファイルを別々のブロックへ登録しても問題ありません。handle を統一すれば重複ロードは発生しません。

③　コアブロックの CSS を上書きできない
WordPress 5.8 で導入された should_load_separate_core_block_assets フィルター（wp_プレフィックスは付きません）が true を返すときのみ、コアブロックのCSSがブロックごとに個別ロードされます。ブロックテーマではデフォルトで有効ですが、クラシックテーマでは既定で無効なため、コアブロックのスタイルを狙って上書きしたい場合は明示的に有効化してください。

functions.php：コアブロックのCSSを個別ロードに切り替える

add_filter( 'should_load_separate_core_block_assets', '__return_true' );

よくある質問（FAQ）

Qwp_enqueue_block_style()の基本的な使い方は？

wp_enqueue_block_style('core/paragraph', array('handle' => 'my-paragraph-style', 'src' => get_stylesheet_directory_uri() . '/block-styles/paragraph.css'))

のように使います。指定ブロックが使われているページにのみCSSが読み込まれます。

Qwp_enqueue_block_style()とwp_enqueue_style()の使い分けは？

Awp_enqueue_block_style()は特定のブロックが使用されているページにのみCSSを読み込むため、パフォーマンスが向上します。wp_enqueue_style()は全ページに読み込まれます。ブロック固有のスタイルにはwp_enqueue_block_style()が推奨です。

Qカスタムブロックのスタイルを登録するにはどのフックを使いますか？

Ainitアクションフック内でwp_enqueue_block_style()を呼び出します。ブロック名は名前空間/ブロック名の形式で指定します（例: my-plugin/my-block）。

QコアブロックのCSSを個別に上書きしたいのに反映されません

AクラシックテーマではコアブロックのCSSが1つの結合スタイルシートで読み込まれるのが既定のため、個別のブロックだけを狙った上書きが効きにくいことがあります。add_filter('should_load_separate_core_block_assets', '__return_true')でブロックごとの個別ロードに切り替えてから上書きしてください。

まとめ

wp_enqueue_block_style() を活用すると、ブロック単位でのデザイン調整が安全かつ効率的になります。テーマ開発では UI ライブラリを階層ごとに整理でき、プラグイン開発ではユーザーのテーマを汚さず機能スタイルを提供できます。ぜひ自作テーマやカスタムブロックに取り入れて、編集画面とフロントのデザイン統一を図りましょう。