【WordPress】ブロックエディタで特定ブロックのスタイルを設定する方法

wp_enqueue_block_style() 関数を使用すると、WordPressブロックエディターの特定のブロックに対してスタイルシートを登録し、そのスタイルをフロントエンドとエディターに適用できます。この関数を利用することで、テーマやプラグインの開発者は、特定のブロックにカスタムスタイルを簡単に追加できます。

wp_enqueue_block_style() の使い方

wp_enqueue_block_style() 関数は、以下のように使用します。

wp_enqueue_block_style( 
    'block-name', 
    array(
        'handle' => 'custom-style-handle',
        'src'    => get_theme_file_uri( 'path/to/custom-style.css' ),
    )
);

• block-name: スタイルを適用するブロックの名前です。例として、core/paragraph は段落ブロックを指します。
• handle: スタイルのハンドル名です。これは、スタイルシートの識別子となります。
• src: 読み込むスタイルシートのパスです。get_theme_file_uri() を使ってテーマフォルダからの相対パスを指定します。

実際の例

たとえば、段落ブロック (core/paragraph) に特定のスタイルシートを追加する場合、次のように記述します。

function enqueue_paragraph_block_style() {
    wp_enqueue_block_style( 
        'core/paragraph', 
        array(
            'handle' => 'paragraph-custom-style',
            'src'    => get_theme_file_uri( 'css/paragraph-style.css' ),
        )
    );
}
add_action( 'init', 'enqueue_paragraph_block_style' );

ポイント

• ブロックの名前は、WordPressのブロックエディタに組み込まれているブロックである必要があります。カスタムブロックの場合は、そのブロックの名前を指定します。
• スタイルシートは、テーマやプラグインのディレクトリ内に配置します。get_theme_file_uri() はテーマ内のパスを生成し、plugins_url() はプラグイン内のパスを生成します。
• ハンドル名は一意である必要があります。他のスクリプトやスタイルと衝突しないようにするためです。

まとめ

wp_enqueue_block_style() を使うと、WordPressブロックごとにカスタムスタイルを適用することができます。これにより、特定のブロックの見た目をカスタマイズしやすくなり、テーマやプラグインの柔軟性が向上します。