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

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

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

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

register_block_style(
    'core/image',
    [
        '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を生成します。

ブロック名
スタイル名(name)
名前(label)
スタイルシート

※スタイルシートの構文チェックは行いません。