WordPressのブロックスタイルを追加する方法（register_block_styleと削除の手順）

ブロックスタイルは、ブロックの見た目の種類を、ブロックの設定サイドバーの「スタイル」の欄から選べるようにする仕組みです。スタイルを選ぶと、ブロックの一番外側の要素に is-style-スタイル名 というクラスが付きます。そのクラスに CSS を書いておけば、編集する人はクラス名を知らなくても見た目を切り替えられます。

この記事の関数とフックの動きは、WordPress 本体のソースコード（6.9）と、ブロックエディターのハンドブックで確認しています。

コアのブロックに最初からあるスタイル

いくつかのコアブロックには、最初からスタイルが登録されています。同じ名前でスタイルを登録すると重なるため、独自のスタイルには別の名前を付けます。WordPress 6.9 の各ブロックの block.json に書かれているスタイル名は次のとおりです。

ボタンの枠線だけの見た目（outline）や、画像の角丸（rounded）は、登録しなくても使えます。

register_block_style でスタイルを登録する

テーマの functions.php（またはプラグイン）で、init フックの中で register_block_style() を呼びます。1番目の引数がブロック名、2番目の引数がスタイルの設定です。

inline_style で CSS を一緒に渡すと、WordPress がサイトの表示側とブロックエディターの両方に CSS を読み込みます。少量の CSS ならこの方法が簡単です。

<?php
// functions.php
add_action( 'init', function () {
	// ボタン: 影付き
	register_block_style( 'core/button', array(
		'name'         => 'shadow',
		'label'        => '影付き',
		'inline_style' => '.wp-block-button.is-style-shadow .wp-block-button__link { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }',
	) );

	// 引用: 左に太い線
	register_block_style( 'core/quote', array(
		'name'         => 'bordered',
		'label'        => '左線',
		'inline_style' => '.wp-block-quote.is-style-bordered { border-left: 4px solid currentColor; padding-left: 1.5rem; font-style: normal; }',
	) );

	// グループ: カード
	register_block_style( 'core/group', array(
		'name'         => 'card',
		'label'        => 'カード',
		'inline_style' => '.wp-block-group.is-style-card { background: #fff; border: 1px solid #dcdcdc; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 2rem; }',
	) );

	// 画像: 円形
	register_block_style( 'core/image', array(
		'name'         => 'circle',
		'label'        => '円形',
		'inline_style' => '.wp-block-image.is-style-circle img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }',
	) );
} );

保存したら、投稿の編集画面でボタンなどのブロックを選び、サイドバーの「スタイル」に追加したスタイルが表示されること、選ぶと見た目が変わることを確かめます。

WordPress 6.6 以降では、1番目の引数にブロック名の配列を渡して、複数のブロックに同じスタイルを一度に登録できます。

<?php
add_action( 'init', function () {
	register_block_style( array( 'core/group', 'core/columns' ), array(
		'name'         => 'boxed',
		'label'        => '枠付き',
		'inline_style' => '.is-style-boxed { border: 1px solid #dcdcdc; padding: 1.5rem; }',
	) );
} );

CSS をファイルに分ける（style_handle）

CSS が長くなる場合は、ファイルに分けて wp_register_style() で登録し、そのハンドル名を style_handle に渡します。この場合も、表示側とエディターの両方に読み込まれます。

<?php
add_action( 'init', function () {
	wp_register_style(
		'mytheme-block-styles',
		get_theme_file_uri( 'assets/css/block-styles.css' ),
		array(),
		wp_get_theme()->get( 'Version' )
	);

	register_block_style( 'core/button', array(
		'name'         => 'shadow',
		'label'        => '影付き',
		'style_handle' => 'mytheme-block-styles',
	) );
} );

/* assets/css/block-styles.css */
.wp-block-button.is-style-shadow .wp-block-button__link {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wp-block-button.is-style-shadow .wp-block-button__link:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}

is-style-{name} のクラスは、ブロックの一番外側の要素に付きます。ボタンブロックなら外側の div.wp-block-button に付き、実際のボタンはその中の .wp-block-button__link です。セレクターを書くときは、ブラウザの開発ツールで実際の HTML を確かめます。

ブロックごとのスタイルシートは wp_enqueue_block_style()（WordPress 5.9 以降）でも読み込めます。ブロックのスタイルを必要なときだけ読み込む設定のサイト（ブロックテーマなど）では、そのブロックが表示されるページだけに CSS が読み込まれます。

スタイルを削除する

PHP で登録したスタイルを削除する

unregister_block_style() で消せるのは、PHP の register_block_style() で登録されたスタイルだけです。プラグインや親テーマが PHP で登録したスタイルを消す場合は、そのスタイルが登録された後（init の遅い優先度など）に呼びます。

<?php
add_action( 'init', function () {
	unregister_block_style( 'core/button', 'shadow' );
}, 20 );

コアのスタイルを削除する（JavaScript）

コアブロックに最初からあるスタイル（引用の plain など）は block.json で定義されているため、PHP の unregister_block_style() では消せません。JavaScript の wp.blocks.unregisterBlockStyle() を使います。ハンドブックでは、登録との順番の問題を避けるため、wp.domReady() の中で実行し、依存に wp-blocks・wp-dom-ready・wp-edit-post を指定する方法が示されています。

// assets/js/block-styles.js
wp.domReady( function () {
	// 引用の「plain」スタイルを消す
	wp.blocks.unregisterBlockStyle( 'core/quote', 'plain' );

	// 区切りの「dots」スタイルを消す
	wp.blocks.unregisterBlockStyle( 'core/separator', 'dots' );
} );

<?php
add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_script(
		'mytheme-block-styles',
		get_theme_file_uri( 'assets/js/block-styles.js' ),
		array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
		wp_get_theme()->get( 'Version' ),
		true
	);
} );

このファイルはビルドせずにそのまま読み込むため、import 文は使わず、グローバルの wp.blocks を使います。import { registerBlockStyle } from '@wordpress/blocks'; の形で書く場合は、@wordpress/scripts などでビルドしてから読み込みます。

JavaScript で wp.blocks.registerBlockStyle() を使ってスタイルを追加することもできますが、PHP の register_block_style() と違い、CSS は別に読み込む必要があります。

注意点

• スタイルを消しても、すでにそのスタイルを使っているブロックの HTML には is-style-… のクラスが残ります。CSS を消すと、その部分の見た目が変わります。
• スタイル名を後から変えると、すでに使われているブロックのクラス名とずれます。公開後はスタイル名を変えないようにします。
• ブロックスタイルは1つのブロックに1つだけ選べます。組み合わせたい見た目は、1つのスタイルにまとめるか、ブロックの色や余白の設定を使います。

ブロックエディターの見た目をサイトの表示に合わせる方法は「WordPressのエディタースタイル（editor-style.css）を設定する」で説明しています。

まとめ

• init で register_block_style( 'ブロック名', array( 'name' => …, 'label' => …, 'inline_style' => … ) ) を呼ぶと、「スタイル」の欄に選択肢が増え、is-style-{name} クラスが付く
• inline_style か style_handle で CSS を渡すと、表示側とエディターの両方に読み込まれる
• コアにある outline や rounded などの名前とは重ならない名前を付ける
• PHP で登録したスタイルは unregister_block_style() で、コアのスタイルは wp.blocks.unregisterBlockStyle() で消す