ブロックエディター（Gutenberg）ではブロックスタイルという機能があり、これを利用するとブロック毎にあらかじめ用意された装飾を選択可能になります。
使用しているテーマによってはブロックスタイルが用意されているものもありますが、ここではオリジナルのブロックスタイルを実装する手順を紹介します。
ブロックスタイルとは
概要
Gutenbergブロックエディターでは、配置するブロック毎に好みの装飾を選択できる「ブロックスタイル」という機能が備わっています。
ブロックスタイルはテーマによって異なり、用意されていないテーマもありますが、カスタマイズによってオリジナルのブロックスタイルを追加することも可能となっています。
ブロックスタイルの仕組み
記事の編集画面でブロックにスタイルを指定すると、スタイルに対応した “追加CSSクラス” がブロックに付与されます。
そのクラス名をセレクターとしたCSSをあらかじめ用意しておくことで選択したスタイルに応じたCSSが適用され、見栄えが変更される仕組みとなっています。
独自のブロックスタイルを利用するまでの流れ
- JavaScriptでブロックスタイルを定義する。
- 用意したJavaScriptをfunctions.phpで読み込む。
- ブロックスタイル毎にCSSを書く。
編集するファイルは3つで記述内容も少ないので比較的容易に実装できると思います。
手順1. JavaScriptで追加するブロックスタイルを登録する
JavaScriptでブロックスタイルを登録します。今回はテーマフォルダ内にjsフォルダーを用意し、myguten.jsという名前でJSファイルを新規作成しました。
ここではスタイルを追加したいブロック名、name、labelを指定します。
例として段落ブロックにブロックスタイルを追加してみます。段落ブロックにブロックスタイルを追加する場合、ブロック名にcore/paragraphを指定します。
/js/myguten.js
wp.blocks.registerBlockStyle( 'core/paragraph', {
name: 'box-gray',
label: 'ボックス（グレー）',
});
nameに指定した文字列がCSSのセレクター名としてis-style-〇〇〇の形式で利用され、labelに指定した名称が編集画面での表示名として利用されます。
$block_nameで指定可能な主なブロック名は別ページでまとめていますので参考にしてください。
手順2. functions.phpでJSファイルを読み込み
wp_enqueue_script()で手順1で用意したJSファイルを読み込みます。
アクションフックenqueue_block_editor_assetsを使ってブロックエディターの使用時にJSファイルを読み込んでいます。
functions.php
function myguten_enqueue() {
wp_enqueue_script( 'myguten-script', get_theme_file_uri( '/js/myguten.js' ), array(), wp_get_theme()->get( 'Version' ), false );
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
手順3. ブロックスタイルとして適用するCSSを記述する
CSSセレクターは.is-style-〇〇の形で指定します。〇〇の部分はJavaScriptでブロックスタイルを登録した際のnameの値が入ります。
今回の場合はnameがbox-grayなのでセレクターは.is-style-box-grayとなります。
style.css
p.is-style-box-gray {
background: #f5f5f5;
border: 1px solid #d3d3d3;
padding: 1em;
}
my-block-style.cssのような分かりやすい名前で別ファイルにしておくと、ブロックスタイルの増減や修正に伴う編集箇所が分かりやすく管理しやすいのでおすすめです。
追加したブロックスタイルを使う
ここまでの作業で段落ブロックに「ボックス（グレー）」というブロックスタイルの追加は完了です。
段落ブロックの編集時、設定欄に “スタイル” の項目が表示されています。追加されたスタイルを選択すると該当するスタイルが反映されます。
ブロックスタイル “ボックス（グレー）” を選択すると段落ブロックにis-style-box-grayというクラス名が付くため、手順3で用意したCSSが適用される仕組みです。
その他の実装方法
functions.phpのみで実装する場合
functions.php
register_block_style(
'core/paragraph',
array(
'name' => 'box-pink',
'label' => 'ボックス（ピンク）',
'inline_style' => '.is-style-box-pink{
background: #ffc0cb;
border: 1px solid #ff00ff;
padding: 1em;
}',
)
);
functions.phpの編集のみで実装する書き方です。6行目のinline_styleの値としてCSSを直接記述します。JavaScriptのwp.blocks.registerBlockStyle()と違い、register_block_style()となっている点に注意してください。
この方法で記述したCSSは<head>内にインラインCSSとして書き出されます。
ブロックスタイル用のCSSファイルとfunctions.phpで実装する場合
functions.php
wp_register_style( 'my-block-style', get_template_directory_uri() . '/css/my-block-style.css', '', wp_get_theme()->get( 'Version' ) ); register_block_style( 'core/image', array( 'name' => 'border-bold-blue', 'label' => '太枠-青', 'style_handle' => 'my-block-style', ) );
1行目でCSSファイルを読み込み、my-block-styleというハンドル名を付けています。
8行目の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()については下記の記事を参考にしてみてください。
ブロックスタイル追加に関するまとめ
ブロックスタイルの活用例
さいごに
いくつかの方法を紹介しましたが、複数のブロックスタイルを追加したり、今後ブロック関連のカスタマイズを行う可能性がある場合はJavaScriptで登録する方法をおすすめします。
用意したJSファイルにブロック関連のスクリプトをまとめておけば今後の管理も楽になるのではないでしょうか。
最後まで読んでいただきありがとうございました。
参考文献
WordPress.org – スタイル
WordPress.org(en) – register_block_style()
WordPress.org(en) – unregister_block_style()
WordPress Codex – wp_register_style()
WordPress.org – Core Blocks Reference
