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

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

wp_enqueue_block_style() とは？

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

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

基本的な使い方

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) に影付きスタイルを付与する

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 の中身はシンプルに以下のような指定で構いません。

.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 6.1 以降では、wp_should_load_separate_core_block_assets フィルタが true のときにのみ個別ロードが有効になります。フックで明示的に false を返すか、プラグインの影響を確認してください。

まとめ

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