【WordPress】独自のブロックスタイルを追加する方法
WordPressのブロックをワンクリックでスタイル変更できる「ブロックスタイル」の登録方法を解説します。
ブロックスタイル登録の基本
以下のコードをfunctions.phpに記述。
function custom_block_styles() {
register_block_style(
'core/button', // ブロック名
array(
'name' => 'btn-primary', // スタイルの識別子（CSSクラスに反映）
'label' => 'プライマリー', // 表示名
'inline_style' => '.wp-block-button.is-style-btn-primary .wp-block-button__link {
background-color: #3B82F6;
color: #ffffff;
}', // インラインCSS
)
);
}
add_action('init', 'custom_block_styles');nameで指定した識別子は、is-style-{name}というクラス名として出力されます。
register_block_style()で必須なのはnameとlabelだけなので、inline_styleは外部CSSファイルに記述しても問題ありません。
正しいブロック名を見つけるには、ブロックエディタを開き、ブラウザコンソールを起動し、wp.blocks.getBlockTypes()と入力します。
外部CSSから読み込む
外部CSSファイルでは、ブロックスタイルを適用するためにis-style-{name}クラスを使ってスタイルを指定します。
.wp-block-button.is-style-btn-primary .wp-block-button__link {
background-color: #3B82F6;
color: #ffffff;
}このスタイルシートを読み込むためのいくつかの方法がありますが、今回のコード例ではプラグインからCSSを読み込む想定で記述しています。
テーマから読み込む場合は、以下の関数に置き換えてください。
// プラグインの場合
plugin_dir_url(__FILE__) // CSS の URL
plugin_dir_path(__FILE__) // CSS のファイルパス
// テーマの場合
get_template_directory_uri() // CSS の URL
get_template_directory() // CSS のファイルパスケース１：wp_enqueue_style()で読み込む
wp_enqueue_style()を使って、フロントとエディター両方にCSSを読み込む基本的な方法です。
// ブロックスタイル用CSS（フロント、エディター共有）
function register_custom_block_styles() {
wp_enqueue_style(
'custom-block-style',
plugin_dir_url(__FILE__) . 'css/custom-block-style.css',
array(),
filemtime( plugin_dir_path(__FILE__) . 'css/custom-block-style.css' )
);
}
add_action( 'wp_enqueue_scripts', 'register_custom_block_styles' );
add_action( 'enqueue_block_editor_assets', 'register_custom_block_styles' );ケース２：ブロック単位で読み込む
wp_enqueue_block_style()は、ブロック単位でスタイルシートを登録できる便利な関数です。
function custom_block_styles() {
// 外部CSSファイルを登録
wp_enqueue_block_style(
"core/button", // ブロック名
array(
"handle" => "my-custom-block-style",
"src" => plugin_dir_url(__FILE__) . "css/custom-block-style.css",
"path" => plugin_dir_path(__FILE__) . "css/custom-block-style.css",
)
);
}
add_action('init', 'custom_block_styles');ブロックテーマでは、対象のブロックがページ内に存在する時にのみCSSが読み込まれるため、無駄な読み込みが発生せずパフォーマンスが向上します。
クラシックテーマにおいては、対象ブロックの有無関わらずフロントとエディターの両方で読み込まれます。
クラシックテーマでも有効にするフィルター
クラシックテーマでも以下のコードを追加することでブロックごとの読み込みも可能になります。
add_filter( 'should_load_separate_core_block_assets', '__return_true' );ただしheadタグではなくbody閉じタグあたりでインライン出力されるため、読み込み順序が変わっってしまい、上書きスタイルが反映されないなどの影響がある恐れがあります。
使用する場合は、詳細度の注意が必要です。
複数のブロックをまとめる場合
複数のブロックをまとめて読み込む場合は、以下のように記述することもできます。
function custom_block_styles() {
$blocks = array('core/button', 'core/image', 'core/heading'); // ボタン・画像・見出し
foreach ($blocks as $block) {
wp_enqueue_block_style(
$block,
array(
'handle' => 'my-custom-block-style',
'src' => plugin_dir_url(__FILE__) . 'css/custom-block-style.css',
'path' => plugin_dir_path(__FILE__) . 'css/custom-block-style.css',
)
);
}
}
add_action('init', 'custom_block_styles');ケース３：ハンドルを紐づけて読み込む
登録済みの外部 CSS ファイルをregister_block_style()のstyle_handleに渡して読み込む方法もありますが、現状ではフロントに反映されない不具合があるため却下です。
https://developer.wordpress.org/themes/features/block-style-variations/#registering-blocks-styles-with-php
style_handle現在、エディタでスタイルシートをキューに入れるだけで、フロントエンドではキューに入れないバグがあります。リンクされたチケットが処理されるまで、その使用は推奨されません。
style_dataでCSSを登録
WordPress 6.6では、新しくstyle_dataが追加され、theme.jsonと同じ構造でスタイルを指定できるようになりました。
function custom_block_styles() {
register_block_style(
'core/button',
array(
'name' => 'custom-button',
'label' => 'カスタム',
'style_data' => array(
'color' => array(
'background' => '#3B82F6',
'text' => '#ffffff',
),
'border' => array(
'radius' => '14px',
),
'spacing' => array(
'padding' => array(
'top' => '0.75em',
'bottom' => '0.75em',
'left' => '1.25em',
'right' => '1.25em',
),
),
'typography' => array(
'fontSize' => '1em',
'fontWeight' => '700',
),
),
)
);
}
add_action('init', 'custom_block_styles');style_dataプロパティを使用すると、ブロックテーマのグローバルスタイル（「エディター」＞「スタイル」）に統合され、ユーザーが配色や余白などをUIから直接変更できるようになります。
まだ、発展途上であったり、書き方に癖があるためブロックテーマを積極的に開発している人くらいしか理想通りに指定するのは難しいかもしれません。
１つでも指定しておけばグローバルスタイルUIに反映されるため、最低限のスタイルだけ指定しておき、複雑なスタイルは別のスタイルシートに記載するというのも手です。
まとめて登録
関数の中にregister_block_style()をまとめて記述しておけば、ブロックスタイルを複数登録できます。
function custom_block_styles() {
// プライマリーボタン
register_block_style(
'core/button',
array(
'name' => 'btn-primary',
'label' => 'プライマリー',
)
);
// アウトラインボタン
register_block_style(
'core/button',
array(
'name' => 'btn-outline',
'label' => 'アウトライン',
)
);
}
add_action('init', 'custom_block_styles');あとは別のスタイルシートでis-style-{name}クラスを指定する方法が、最もシンプルです。
ちょっとしたカスタムに便利
ブロックスタイルを登録しておけば、頻繁に使うスタイルをワンクリックで変更できるので、クライアントにも喜ばれます。
ブロック開発していない人でも、積極的に実装できるかと思います。
参考記事：
カスタマイズに困ったらお気軽にご相談を！
- 「ちょっとしたCSSの調整だけお願いしたい」
- 「不具合を直してほしい」
料金は3,000円〜、お支払いは銀行振込・Amazonギフトカードなど柔軟に対応してます🤔
お気軽にコメントどうぞ