wp_enqueue_block_style() 関数は、特定のブロックに対応するスタイルを読み込むための関数です。

wp_enqueue_block_style() 関数とは

特定のブロックで使用する CSS ファイルを読み込むことができます。

$args['path'] にもファイルへの絶対パスを設定することで、CSS ファイルサイズが一定以下であればインラインで出力し、一定以上であれば $args['src'] で指定しているファイルを読み込みます。

パラメーター

handle

スタイルシートのハンドル名

src

スタイルシートの URL

deps

このスタイルシートが依存するスタイルシートのハンドル名を配列で指定

ver

スタイルシートのバージョン番号

media

このスタイルシートが定義されているメディア（通常は all ）

path

スタイルシートへの絶対パス。インライン化したい場合には入力する。

使い方

以下のように記述することで、段落ブロックが利用されているページでスタイルを読み込むことができます。

add_action(
	'init',
	function () {
		wp_enqueue_block_style(
			'core/paragraph',
			array (
				'handle' => 'sample-paragraph-styles',
				'src' => get_theme_file_uri( '/css/sample-paragraph-styles.css' ),
				'path' => get_theme_file_path( '/css/sample-paragraph-styles.css' )
			)
		);
	}
);

上のソースコードでは、css/sample-paragraph-styles.css にあるファイルを読み込んでいます。適宜変更してお試しください。

実際にフロントエンドで表示を確認し、ソースコードでハンドル名を検索するとインラインで出力されているかリンクで表示されているか確認することができます。

まとめ

一般的にスタイルやスクリプトを読み込む際には、wp_enqueue_style() や wp_enqueue_script() を使用します。

しかし、これらを利用する場合、特に条件を指定しない限り全てのページで読み込まれます。

こちらで紹介した wp_enqueue_block_style() を活用することで、特定のブロックに対してスタイルを用意し読み込み、利用している場合にのみ出力・リンクさせることができます。

結果として、不要なスタイルの読み込みを防ぐことにも繋がります。ぜひご活用ください。

wp_enqueue_block_style() – Function | Developer.WordPress.org

Enqueues a stylesheet for a specific block.

developer.wordpress.org