ブロックエディター（Gutenberg）ではブロックスタイルという機能があり、これを利用するとブロック毎に異なる装飾で表示できます。
使用しているテーマによってはブロックスタイルが用意されているものもありますが、ここではオリジナルのブロックスタイルを実装する手順を紹介します。
ブロックスタイルとは
概要
Gutenbergブロックエディターでは、配置するブロック毎に好みの装飾を選択できる「ブロックスタイル」という機能が備わっています。
ブロックスタイルはテーマによって異なり、用意されていないテーマもありますが、カスタマイズによってオリジナルのブロックスタイルを追加することも可能となっています。
ブロックスタイルの仕組み
記事の編集画面でブロックにスタイルを指定すると、スタイルに対応した “追加CSSクラス” がブロックに付与されます。
そのクラス名をセレクターとしたCSSをあらかじめ用意しておくことで選択したスタイルに応じたCSSが適用され、見栄えが変更される仕組みとなっています。
独自のブロックスタイルを利用するには
register_block_style()でブロックスタイルを登録する
functions.phpにregister_block_style()を使って設定します。
スタイルを追加したいブロック名を指定し、スタイルの詳細を設定することでオリジナルのブロックスタイルが利用できるようになります。
register_block_style( $block_name, // ブロック名 array( 'name' => '〇〇〇' // スタイル名 'label' => '〇〇〇' // 表示名 ) )
nameに指定した文字列がセレクター名としてis-style-〇〇〇の形式で利用され、labelに指定した名称が編集画面での表示名として利用されます。
$block_nameで指定可能な主なブロック名は別ページでまとめていますので参考にしてください。
ブロックスタイルとして適用するCSSを記述する
スタイルとなるCSSはfunctions.phpに直接書くか、別ファイルに書く方法があります。
register_block_style() の設定例
[サンプル] functions.phpの編集のみで実装する場合
register_block_style(
'core/paragraph',
array(
'name' => 'box-gray',
'label' => 'ボックス（グレー）',
'inline_style' => '.is-style-box-gray{
background: #f5f5f5;
border: 1px solid #d3d3d3;
padding: 1em;
}',
)
);
functions.phpの編集のみで実装する書き方です。6行目のinline_styleの値としてCSSを直接記述します。
この方法で記述したCSSは<head>内にインラインCSSとして書き出されます。
この例では段落ブロック（paragraph）に “ボックス（グレー）” というブロックスタイルが追加されます。それが選択された場合は is-style-box-gray というクラス名が付くため、inline_style で用意したCSSが適用されます。
[サンプル] ブロックスタイル用のCSSファイルを別途用意する場合
functions.php
$theme_version = wp_get_theme()->get( 'Version' ); wp_register_style( 'my-block-style', get_template_directory_uri() . '/css/my-block-style.css', '', $theme_version ); register_block_style( 'core/image', array( 'name' => 'border-bold-blue', 'label' => '太枠-青', 'style_handle' => 'my-block-style', ) );
1～2行目でCSSファイルを読み込み、my-block-styleというハンドル名を付けています。
9行目のstyle_handleでハンドル名を指定すると2行目で読み込んだファイルが参照されます。
この場合は<head>内に<link>タグでCSSファイルが読み込まれます。
/css/my-block-style.css
.is-style-border-bold-blue img {
border: 5px solid #0000ff;
}
[サンプル] add_editor_style()で読み込んだファイルを利用する場合
add_editor_style()でサイト用のCSSをブロックエディターに読み込んでいる場合はそのファイルに追記する形でも実装できます。
functions.php
register_block_style( 'core/image', array( 'name' => 'border-bold-red', 'label' => '太枠-赤', ) );
add_editor_style()で読み込み済みのCSSファイル
.is-style-border-bold-red img {
border: 5px solid #ff0000;
}
add_editor_style()については下記の記事を参考にしてみてください。
ブロックエディター関連のCSSを1つのファイルにまとめていた際にこの方法を使いました。
制作規模やファイル構成によって管理しやすい方法を選択すると良いかと思います。
参考リンク
WordPress.org (en)
register_block_style() / unregister_block_style()
WordPress Codex
wp_register_style()
追加したブロックスタイルを使う
段落ブロックに「ボックス（グレー）」というスタイルを追加した場合の例です。
段落ブロックの編集時、設定欄に “スタイル” の項目が表示されています。追加されたスタイルを選択すると該当するスタイルが反映されます。
私はmy-block-style.cssのような分かりやすい名前で別ファイルにすることが多いです。
増減や修正に伴う編集箇所が分かりやすく管理しやすいです。