ブロックにスタイルを追加する (読了想定)

WordPressに標準で用意されているブロックに、独自のスタイル(CSS)を追加する方法を解説します。(WordPress5.3以降)

標準ブロックに、スタイルを追加するコード

例として、画像ブロックを取り上げます。画像ブロックに、「影付き」スタイルを追加してみます。

register_block_style(
    'core/image',
    array(
        'name'         => 'shadow',
        'label'        => '影付き',
        'inline_style' => '.is-style-shadow {
            box-shadow: 10px 5px 5px grey;
        }',
    )
);

画像ブロックは、core/image です。register_block_style()関数を使うと、スタイルを追加できます。 register_block_style()の引数は

1. ブロックをスラッグで指定
2. スタイルの詳細を設定する
   • name: スタイル名(アルファベットで付ける)
   • label: スタイルのラベル(表示される名前。日本語OK)
   • inline_style: 追加するスタイルをインラインで記述する
   • style_handle: 追加するスタイルをCSSファイルに記述する

です。

ブロック編集画面でスタイルを指定すると、is-style-*****というクラス名が追加されます。*****の部分はスタイル名です。スタイル名がshadowなら、.is-style-shadowというクラス名が追加されます。

スタイルの詳細設定でinline_styleが指定できるので、ここで.is-style-shadowにスタイル設定すればOKです。

style_handleを使う場合は、style_handleには、ハンドル名(あらかじめwp_register_style関数で登録しておく)を指定してください。

アクションフック無しで動作する

通常のWordPressのカスタマイズは、add_actionを使い、自分で追加したい処理をフックします。

しかし、このregister_block_style()の場合は、フックの記述は不要です。

既存のスタイル設定を消すことも可能

標準で用意されているスタイル設定が不要な場合、unregister_block_style()関数を使って消すことができます。

unregister_block_style( 'core/image', 'shadow' );

unregister_block_styleの引数は

1. ブロックをスラッグで指定
2. スタイル名

です。

register_block_style() ジェネレータ

下記フォームに入力すると、register_block_style()を生成します。

更新日: 2024年03月08日