概要
wp_common_block_scripts_and_styles フィルタは、標準ブロック向けのスクリプトとスタイルを出力用のキューに入れる際に使用されます。このフィルタは、標準ブロックに関連するリソースを追加や変更するために便利です。このフィルタを利用することで、ユーザーは共通のブロックに対して独自のスクリプトやスタイルを組み込むことが可能になります。
このフィルタは以下のような機能を実装する際によく使われます。
- ブロックエディタ用のカスタムスタイルを追加する
- 特定のブロックに対して専用のスクリプトを読み込む
- デフォルトのブロックスタイルを変更する
- スクリプトやスタイルのバージョン管理
- プラグインによるブロック機能の拡張
- スタイルの依存関係を管理する
- 特定の条件下でのみリソースを読み込む
- テーマカスタマイザーへカスタムCSSを追加する
構文
apply_filters( 'wp_common_block_scripts_and_styles', $scripts_and_styles, $block_type );
パラメータ
$scripts_and_styles: スクリプトまたはスタイルの配列。$block_type: 対象となるブロックタイプの情報。
戻り値
- 変更されたスクリプトやスタイルの配列。
関連する関数
使用可能なバージョン
- WordPress 5.0 以降で使用可能。
コアファイルのパス
/wp-includes/blocks.php
この関数のアクションでの使用可能性
| アクション | 使用可能性 |
|---|---|
| mu_plugin_loaded | |
| registered_post_type | |
| plugins_loaded | |
| wp_roles_init | |
| setup_theme | |
| after_setup_theme | |
| set_current_user | |
| init | |
| register_sidebar | |
| wp_loaded | |
| send_headers | |
| parse_query | |
| pre_get_posts | |
| wp | |
| template_redirect | |
| get_header | |
| wp_head |
サンプルコード
サンプル1: カスタムスタイルを追加する
add_filter( 'wp_common_block_scripts_and_styles', function( $scripts_and_styles, $block_type ) {
if ( 'core/paragraph' === $block_type['name'] ) {
$scripts_and_styles[] = 'my-custom-paragraph-style.css';
}
return $scripts_and_styles;
});
このコードは、段落ブロックにカスタムスタイルシートを追加する例です。
サンプル2: ブロック用スクリプトを追加
add_filter( 'wp_common_block_scripts_and_styles', function( $scripts_and_styles, $block_type ) {
if ( 'core/image' === $block_type['name'] ) {
$scripts_and_styles[] = 'my-custom-image-script.js';
}
return $scripts_and_styles;
});
このコードは、画像ブロックに特定のスクリプトを追加する例です。
サンプル3: スタイルの依存関係を管理
add_filter( 'wp_common_block_scripts_and_styles', function( $scripts_and_styles, $block_type ) {
if ( 'core/quote' === $block_type['name'] ) {
$scripts_and_styles['my-quote-style'] = array( 'dependency1', 'dependency2' );
}
return $scripts_and_styles;
});
このコードは、引用ブロックに対して依存関係のあるスタイルを追加する例です。
サンプル4: 条件に基づくリソースの読み込み
add_filter( 'wp_common_block_scripts_and_styles', function( $scripts_and_styles, $block_type ) {
if ( is_page_template( 'custom-template.php' ) && 'core/button' === $block_type['name'] ) {
$scripts_and_styles[] = 'my-custom-button-style.css';
}
return $scripts_and_styles;
});
このコードは、特定のページテンプレートでボタンブロックにスタイルを追加する例です。
サンプル5: テーマカスタマイザーにカスタムCSSを追加
add_filter( 'wp_common_block_scripts_and_styles', function( $scripts_and_styles, $block_type ) {
if ( 'core/separator' === $block_type['name'] ) {
$scripts_and_styles[] = 'my-custom-separator-style.css';
}
return $scripts_and_styles;
});
このコードは、セパレータブロックにカスタムスタイルを追加する例です。