ブロックの設定だけではデザインを再現できず、CSSでのスタイリングが必要になるブロックがある時に独自のブロックスタイルを追加する方法のメモです。
スタイルを当てるだけなら「追加 CSS クラス」にクラスを書けばいいという話ではありますが…ブロックスタイルを追加しておけばエディタ上での操作も楽になるのでオススメです！
独自のブロックスタイルを追加する
例えば標準の「ボタンブロック」。これに新しくブロックスタイルを追加してみます。
ブロックの設定の「スタイル」タブに表示されるやつです。
ボタンブロックだとデフォルトで「塗りつぶし」と「輪郭」があります。
今回はこのスタイルに「ボタン-メイン」という名前で追加してみました。
ブロックスタイル追加のサンプルコード
ブロックスタイル追加のコードはこちら▼
add_action( 'init', 'my_register_block_style' );
function my_register_block_style() {
register_block_style(
'core/button',
array(
'name' => 'button-main',
'label' => 'ボタン-メイン',
'inline_style' => '
.is-style-button-main .wp-block-button__link {
font-size: 1.25em;
color: #fff;
background-color: #0073aa;
border: 4px solid #0073aa;
padding: 0.5em 1em;
}
',
)
);
}register_block_style関数でブロックのスタイルを追加できます。
第1引数にスタイルを追加するブロックの名前を指定します。例：core/button,core/paragraphなど
第2引数にスタイルのプロパティを記述した配列を指定します。
スタイルのプロパティはnameとlabelが必須。そのほかにinline_styleかstyle_handleかstyle_dataのいずれかが必要になります。
「CSSでカスタマイズしたくてブロックスタイルを追加している」…という状況ではstyle_handle、もしくはinline_styleの指定が良いかなと思います。
inline_styleではそのブロックスタイルに適用するCSSを書きます。
style_handleはwp_register_style等で登録したCSSのハンドル名を指定します。
追加されるクラス名のルール is-style-*
先ほどの例では「button-main」という名前のスタイルを追加しました。
ブロックエディターでこのスタイルを選択すると、HTMLには is-style-button-main というクラスが付きます。
ブロックの名前がそのままクラスになるのではなく、is-style-*という形式のクラスが付きます。
これを知らない or 忘れてスタイル名のクラスにCSSを書いていると、いつまでもCSSが当たらなくて時間が溶けるみたいなことになってしまうのでご注意ください！
ブロックの名前の調べ方
ブロックの名前は、エディターをコードエディターにすると簡単に調べられます。
ブロックエディターの右上の縦の「…」でメニューを開いて、「コードエディター」を選べばOKです！
するとブロックを構成するHTMLが表示されます。
ブロックの開始・終了にはHTMLコメントが挿入されているので、そのコメントから知ることができます。
WordPressコアブロックであれば記載されている名前の手前にcore/をつけたものがブロック名になります。core/buttonやcore/paragraphなどです。
プラグインで追加したブロックなどは pluginname/blockname のような形式でブロック名がwp:の後に入っているのではないかなと思います。
まとめ
デザインをブロックを使って実装する時、毎回自分で追加CSSクラスを入力するのは大変なので、この方法で作っておくと何かと便利です。
また、もしクライアントがページを作るような要件がある場合はボタンをポチポチクリックするだけで決まったデザインのボタンが追加できる…というような形にしておくと使いやすいですよね！
パターンや再利用ブロックなどいろいろやり方はありますが、いろんなやり方の中の一つとして知っておくと便利かもしれません。
ではまた。