Block Variations（ブロックバリエーション）は「設定済みのブロックを1クリックで挿入する入口」、Block Styles（ブロックスタイル）は「挿入後に切り替えられる見た目の選択肢」です。2つを組み合わせ、バリエーションの初期値にスタイルのクラスを入れておくと、編集者は挿入した瞬間から正しい見た目のブロックを使え、あとからスタイル欄で切り替えることもできます。この記事では、子テーマにコードを置いて「お知らせカード」を作る手順を例に、登録方法、CSSの読み込み、つまずきやすい点を説明します。
2つの機能の違いを整理する
まず役割の違いを押さえておくと、どちらに何を任せるかを迷わずに済みます。
Block Styles は、既存ブロックに is-style-{名前} というクラスを付けるだけの仕組みです。ブロックを選んだときのサイドバーに「スタイル」の選択肢として表示されます。属性や中身の構造は変わらず、CSSで見た目を変えます。PHP の register_block_style()、JavaScript の wp.blocks.registerBlockStyle() で登録します。
Block Variations は、ブロックの属性や中に入るブロック（innerBlocks）をあらかじめ決めた「別名のブロック」をインサーターに追加する仕組みです。たとえばコアの「埋め込み」ブロックの YouTube や X なども、内部ではバリエーションとして実装されています。JavaScript の wp.blocks.registerBlockVariation() で登録します。
組み合わせると、次の分担になります。
- 構造（見出し＋本文、余白、配置）はバリエーションで決める
- 見た目（背景色、枠線、角丸）はスタイルで決める
- バリエーションの
attributes.classNameにスタイルのクラスを入れて、挿入時にスタイルが選ばれた状態にする
見た目をバリエーションの属性（背景色など）で直接持たせることもできますが、その値は投稿ごとに保存されます。後からデザインを変えたいとき、スタイル経由ならCSSを1か所直すだけで済むのが大きな違いです。
作業前の準備
- コードは子テーマ（またはサイト用の小さなプラグイン）に置きます。親テーマを直接編集すると更新で消えます。
- ステージング環境で確認してから本番に反映します。
- 以下のファイル構成を例にします。
my-child-theme/
├── functions.php
└── assets/
├── css/group-card.css
└── js/block-variations.js手順1: ブロックスタイルをPHPで登録する
スタイルはPHPで登録しておくと、サーバー側でも存在が分かり、翻訳関数も使えます。CSSは wp_enqueue_block_style() で読み込むと、対象ブロックがページにあるときだけ読み込まれる設定にできます（関数は WordPress 5.9 で追加）。
<?php
// 子テーマの functions.php
add_action( 'init', function () {
register_block_style(
'core/group',
array(
'name' => 'mytheme-card',
'label' => __( 'カード', 'mytheme' ),
)
);
wp_enqueue_block_style(
'core/group',
array(
'handle' => 'mytheme-group-card',
'src' => get_theme_file_uri( 'assets/css/group-card.css' ),
'path' => get_theme_file_path( 'assets/css/group-card.css' ),
'ver' => filemtime( get_theme_file_path( 'assets/css/group-card.css' ) ),
)
);
} );/* assets/css/group-card.css */
.wp-block-group.is-style-mytheme-card {
border: 1px solid currentColor;
border-radius: 8px;
padding: 1.25rem 1.5rem;
}
.wp-block-group.is-style-mytheme-card > :first-child {
margin-top: 0;
}name はクラス名になるため、半角英数字とハイフンで、他のテーマやプラグインと重なりにくい接頭辞を付けます。get_theme_file_uri() は子テーマにファイルがあればそちらを優先して返します。
ブロックテーマを使っている場合、WordPress 6.6 以降は theme.json の styles.blocks 内の variations や、テーマの styles フォルダに置くJSONでもブロックスタイルの見た目を定義でき、サイトエディターのスタイル画面から編集者が調整できるようになりました。JSONで定義できる範囲は theme.json の設定項目に限られるため、細かいセレクター指定が必要ならCSSファイルを併用します。
手順2: バリエーションをJavaScriptで登録する
次に、エディター用のスクリプトでバリエーションを登録します。attributes.className に手順1のクラスを入れるのが組み合わせの要点です。
// assets/js/block-variations.js
( function ( blocks, domReady, i18n ) {
const { __ } = i18n;
domReady( function () {
blocks.registerBlockVariation( 'core/group', {
name: 'mytheme-notice-card',
title: __( 'お知らせカード', 'mytheme' ),
description: __( '見出しと本文が入ったカード型の枠です。', 'mytheme' ),
icon: 'megaphone',
keywords: [ 'notice', 'お知らせ' ],
scope: [ 'inserter' ],
attributes: {
className: 'is-style-mytheme-card',
layout: { type: 'constrained' },
},
innerBlocks: [
[ 'core/heading', { level: 3, placeholder: __( 'お知らせの見出し', 'mytheme' ) } ],
[ 'core/paragraph', { placeholder: __( '本文を入力します', 'mytheme' ) } ],
],
isActive: function ( blockAttributes ) {
const classes = ( blockAttributes.className || '' ).split( ' ' );
return classes.includes( 'is-style-mytheme-card' );
},
} );
} );
} )( window.wp.blocks, window.wp.domReady, window.wp.i18n );<?php
// 子テーマの functions.php（続き）
add_action( 'enqueue_block_editor_assets', function () {
$path = get_theme_file_path( 'assets/js/block-variations.js' );
wp_enqueue_script(
'mytheme-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ),
array( 'wp-blocks', 'wp-dom-ready', 'wp-i18n' ),
filemtime( $path ),
true
);
wp_set_script_translations( 'mytheme-block-variations', 'mytheme' );
} );各項目の意味は次のとおりです。
scope: バリエーションを表示する場所。inserter（ブロック追加画面）、block（ブロックを置いた直後の選択肢）、transform（変換メニュー）を指定できます。innerBlocks: 挿入時に中に入るブロックの配列です。見出しレベルやプレースホルダーもここで決めます。isActive: 置かれたブロックが「このバリエーションかどうか」を判定する関数です。これがあると、ブロックツールバーやリスト表示にバリエーション名とアイコンが出ます。classNameには他のクラスも入ることがあるため、文字列の完全一致ではなく分割して含まれるかを確認しています。
動作確認
- 投稿エディターでブロック追加（＋）を開き、「お知らせカード」で検索して挿入します。
- 挿入したブロックを選び、サイドバーのスタイル欄で「カード」が選ばれていることを確認します。
- スタイルを「デフォルト」に切り替えると枠が消え、リスト表示の名前が「グループ」に戻れば
isActiveが働いています。 - 公開画面で
is-style-mytheme-cardのクラスが付き、CSSが読み込まれているかを開発者ツールで確認します。
つまずきやすい点
エディターにCSSが効かない: 投稿エディターは、ブロックテーマなどの条件で iframe の中に本文を表示します。enqueue_block_editor_assets で読み込んだCSSは iframe の外側に入るため、本文の見た目には効かないことがあります。本文用のCSSは wp_enqueue_block_style()、enqueue_block_assets フック、または add_editor_style() で読み込みます。
スクリプトの読み込み順: 依存配列に wp-blocks を入れ忘れると、wp.blocks が未定義でエラーになります。ブラウザの開発者ツールのコンソールを確認してください。
既存の投稿にはバリエーションの変更が反映されない: バリエーションは「挿入時の初期値」です。後から innerBlocks を変えても、すでに置かれたブロックは変わりません。見た目の変更はスタイル側（CSS）で行うと、既存の投稿にも反映されます。
コアのスタイルやバリエーションを減らしたい: 選択肢が多すぎて迷う場合は、wp.blocks.unregisterBlockStyle( 'core/image', 'rounded' ) や wp.blocks.unregisterBlockVariation() で隠せます。コアのスタイルはエディター側で登録されるものがあるため、domReady の中で実行します。PHP の unregister_block_style() は、PHPで登録されたスタイルにしか効きません。
PHP側でバリエーションを登録したい: WordPress 6.5 以降では get_block_type_variations フィルターで、サーバー側からバリエーションを追加する方法もあります。登録できる項目やエディターでの動きはバージョンで差があるため（2026年10月現在）、Block Editor Handbook の該当ページで対応状況を確かめてから使ってください。
クラシックテーマの場合: クラシックテーマでもブロックエディターを使っていれば、ここまでの手順は同じように動きます。theme.json や styles フォルダでの定義はブロックテーマ（または theme.json を持つテーマ）向けの機能です。
まとめ
- Block Variations は「構造と初期値を決めた挿入の入口」、Block Styles は「クラスで切り替える見た目」と役割を分ける
- バリエーションの
attributes.classNameにis-style-{名前}を入れると、挿入時からスタイルが選ばれた状態になる isActiveを書いておくと、リスト表示やツールバーでバリエーション名が分かる- 本文に効かせるCSSは iframe を考慮して読み込み、見た目の変更はスタイル側で行うと既存の投稿にも反映される
- 子テーマかサイト用プラグインに置き、ステージングで確認してから本番へ