公式のマニュアルページである「Variations」にブロックバリエーションの使い方は書かれていますが、ブロックテーマのtheme.jsonで、しかもスタイルバリエーション（スタイルボタンで見た目を切り替える機能）での適用方法が具体的に書かれていなかったので、自作のブロックテーマに実装した際の備忘録を兼ねて公開しておきます。
本ページでは例としてクエリーループブロック内のコンテンツをまとめたグループ（以下コンテンツパネルと呼ぶことにします）に対して以下ののようにしてブロックバリエーションを使う方法を紹介します。
- グループブロックに対するブロックスタイルの登録
- サイトエディター以外ではブロックスタイルの選択ボタンを非表示にする
- theme.jsonにブロックバリエーション用の記述を追加して機能させる
こうしておくことで、ブロックテーマのテンプレートで直接グループに対してスタイルの指定をしなくても、theme.json(スタイルバリエーションであればそのスタイルのtheme.json)からスタイルを引っ張り出して適用させることができ、例えば通常のコンテンツパネルは文字色が黒で、スタイルバリエーション選択時のコンテンツパネルのスタイルは背景が黒で文字が白というようなスタイルをスタイルバリエーションボタン一発で適用させることができるようになります。
theme.jsonでブロックバリエーションを使えるようにする手順
本ページでは私が自作した「HA Canvas」というブロックテーマで実際に使用したコードをそのまま紹介します。コード内の固有名称などについては、コードを見て自身のテーマや環境に合わせて変更してください
ブロックスタイルの追加
恐らく本ページのようなことをしてみたいという方は当然ご存じだとは思いますが、この機構にはブロックスタイル（WordPressコアのブロックにスタイル選択ボタンを付けて、選択されると「追加CSSクラス」にis-style-〇〇が付与される）を使用します。
以下がfunctions.phpへ追加することでグループブロックに「HAC White BG」というボタン表示名で、クリックすると「is-style-ha-canvas-post-content-card」というクラスを付加するコード例です。
function pwcn_group_card_block_style_init(){
register_block_style(
'core/group',
array(
'name' => 'ha-canvas-post-content-card',
'label' => 'HAC White BG',
)
);
}
add_action( 'init', 'pwcn_group_card_block_style_init');これを追加することで、ブロックエディター（サイトエディター・投稿や固定ページ、パターンの編集画面）でグループ化した際のスタイルパネルに「HAC White BG」というボタンが出るようになります。このブロックスタイルの選択をサイトエディターのみに限定したい場合は以下のコードも追加します。
function pwcn_group_card_block_style_hidden_button(){
global $pagenow;
// ボタンを非表示にする属性セレクタCSS
$custom_css = '
.block-editor-block-styles__item[aria-label="HAC White BG"]
{
display: none !important;
}
';
if ( 'site-editor.php' !== $pagenow ) {
wp_add_inline_style( 'wp-edit-blocks', $custom_css );
}
}
add_action( 'enqueue_block_editor_assets','pwcn_group_card_block_style_hidden_button');現在表示しているページがサイトエディターではなく、エディターに出力されるボタンのHTMLで、「aria-label」属性に「HAC White BG」という値がある場合にボタンを非表示にするというコードです。「HAC White BG」という値は、ブロックスタイル追加用コードの「label」の値と同じである必要があります
これでエディター側の準備が整いました。ひとまずサイトエディターで適用させたいグループブロックで「HAC White BG」ボタンをクリックして選択済の状態にしておいてください。
theme.jsonへのブロックバリエーションの追記
テーマ直下のtheme.jsonへ以下のブロックバリエーション用コードを追加します（これがグループで「HAC White BG」が選択された時のスタイルになります）。
"core/group": {
"variations": {
"ha-canvas-post-content-card": {
"border": {
"color": "var(--wp--preset--color--ha-separate)",
"style": "solid",
"width": "1px",
"radius": {
"topLeft": "4px",
"topRight": "4px",
"bottomLeft": "4px",
"bottomRight": "4px"
}
},
"color": {
"background": "#000000",
"text": "#ffffff"
},
"dimensions": {
"minHeight": "100%"
},
"spacing": {
"padding": {
"top": "8px",
"right": "8px",
"bottom": "8px",
"left": "8px"
}
},
"elements": {
"link": {
"color": {
"text": "#ffffff"
},
":hover": {
"color": {
"text": "#eeeeee"
}
}
}
}
}
}
}theme.jsonの構造はテーマによってさまざまです。stylesプロパティの中にエラーなく（特に「,」の扱いなどに注意して）コードを追加してください
追加して保存したら、サイトエディターを開きなおし、スタイルバリエーションを選択しない状態に変更し、先ほど「HAC White BG」を選択したコンテンツを見てみてください。背景が黒で文字が白になっているはずです。
逆に「HAC White BG」ではなく「デフォルト」を選択してみてください。テーマ通常のカラーに従って表示されるはずです。
次に、スタイルバリエーション用のtheme.jsonに以下の記述を追加します。
"core/group": {
"variations": {
"post-content-card": {
"border": {
"color": "var(--wp--preset--color--ha-separate)",
"style": "solid",
"width": "1px",
"radius": {
"topLeft": "4px",
"topRight": "4px",
"bottomLeft": "4px",
"bottomRight": "4px"
}
},
"color": {
"background": "#ffffff",
"text": "#000000"
},
"dimensions": {
"minHeight": "100%"
},
"spacing": {
"padding": {
"top": "8px",
"right": "8px",
"bottom": "8px",
"left": "8px"
}
},
"elements": {
"link": {
"color": {
"text": "#000000"
},
":hover": {
"color": {
"text": "#dddddd"
}
}
}
}
}
}
}そして保存したら、サイトエディターを開きなおし、スタイルバリエーションでコードを追加したスタイルを選択し、グループブロックで「HAC White BG」を選択したり「デフォルト」を選択したりしてみてください。
きちんと機能していれば、「HAC White BG」を選択した場合は背景が白、文字が黒になり、「デフォルト」を選択した場合にはテーマ通常のカラーに従って表示されるはずです。
さらにこれはWordPesss標準の作法に従っていますから、グループが「デフォルト」の場合でも「HAC White BG」でも、スタイルバリエーションが選択されていてもいなくても、そのグループのスタイルパネルで文字や背景の色、枠線、パディングやマージンを指定すればその通りに変化するはずです。
これでスタイルバリエーションを選択した場合、しなかった場合に「HAC White BG」が選択されていれば、一発でスタイルが変更できる環境ができますね。
