WordPressのエディターからワンクリックでブロックにスタイルを適用できるブロックスタイルを登録する方法を見ていきます。

register_block_style()を使用する方法

function custom_block_my_block_styles() {
	register_block_style(
		"core/heading",			//ブロック名
		array(
			"name"	=>	"heading-small",	// 識別名
			"label" =>	"Heading Small",	// スタイル名
			'inline_style' => '.wp-block-heading.is-style-heading-small { color: red; }',	// スタイル
		)
	);
}
add_action('init', 'custom_block_my_block_styles');

“name”で指定した識別名を含むis-style-heading-smallをクラスが生成され、ブロックのラッパーに適用される。inline_styleは別ファイルに記述しても良い。

.wp-block-heading.is-style-heading-small {
  color: red;
}

ブロックスタイル適用前のコードエディター

<!-- wp:heading -->
<h2 class="wp-block-heading">これは見出しです</h2>
<!-- /wp:heading -->

ブロックスタイル適用後のコードエディター

<!-- wp:heading {"className":"is-style-heading-small"} -->
<h2 class="wp-block-heading is-style-heading-small">これは見出しです</h2>
<!-- /wp:heading -->

ブロックスタイル適用前のフロントエンドのマークアップ

<h2 class="wp-block-heading">これは見出しです</h2>

ブロックスタイル適用後のフロントエンドのマークアップ

<h2 class="wp-block-heading is-style-heading-small">これは見出しです</h2>

デフォルトスタイルとして設定

is_default プロパティを記述すると、ブロックのデフォルトのスタイルとして定義できます。この場合、既存のデフォルトブロックスタイルは表示されなくなります。

function custom_block_my_block_styles() {
	register_block_style(
		"core/heading",			//ブロック名
		array(
			"name"	=>	"heading-small",	// 識別名
			"label" =>	"Heading Small",	// スタイル名
			"is_default"	=> true,		// デフォルトに設定
			'inline_style' => '.wp-block-heading.is-style-heading-small { color: red; }',	// スタイル
		)
	);
}
add_action('init', 'custom_block_my_block_styles');

wp_enqueue_block_style()を使用する方法

開発ブロックのスタイルシート登録に便利そうな関数です。

function custom_block_my_block_styles() {
	wp_enqueue_block_style(
		"core/heading",	// ブロック名
		array(
			"handle" =>	"custom_block_my-heading-small",	// ハンドル名
			"src"	=>	plugin_dir_url(__FILE__) . "styles/my-heading-small.css", // スタイルシートURL
			"path"	=> 	plugin_dir_path(__FILE__) . "styles/my-heading-small.css", // スタイルシート絶対パス
		)
	);
}
add_action('init', 'custom_block_my_block_styles');

登録済みのスタイルシートをCSSとして適用

wp_enqueue_script()などのスタイルシート読み込み関数にCSSを記述している場合、register_block_style関数にスタイルシートのハンドルを渡すだけでエンキューできます。

function custom_block_my_block_styles() {
	register_block_style(
		"core/heading",			//ブロック名
		array(
			"name"	=>	"heading-small",	// 識別名
			"label"	=>	"Heading Small",	// スタイル名
			'style_handle' => 'my-style',	// スタイルシートのハンドル
		)
	);
}
add_action('init', 'custom_block_my_block_styles');