register_block_style()


WordPressのregister_block_style()関数は、ブロックにカスタムスタイルを登録するために使用されます。この関数を使うことで、ブロックエディタ内で選択可能な新しいスタイルを追加できます。

構文

register_block_style( string $block_name, array $style_properties );

引数の説明:

  • $block_name (string) — スタイルを追加するブロックの名前（例: ‘core/paragraph’）
  • $style_properties (array) — スタイルのプロパティを含む配列
  • name (string) — スタイルのスラッグ
  • label (string) — エディタで表示されるスタイル名
  • inline_style (string) — 追加するインラインCSS
  • style_handle (string) — 登録済みCSSハンドル

例1: 段落ブロックに赤いテキストスタイルを追加

段落ブロックに新しいスタイルを追加し、テキストを赤くします。

register_block_style( 'core/paragraph', array( 'name' => 'red-text', 'label' => '赤いテキスト', 'inline_style' => '.wp-block-paragraph.is-style-red-text { color: red; }' ) );

例2: ボタンブロックに丸い角スタイルを追加

ボタンブロックに角丸スタイルを適用します。

register_block_style( 'core/button', array( 'name' => 'rounded', 'label' => '丸い角', 'inline_style' => '.wp-block-button.is-style-rounded .wp-block-button__link { border-radius: 25px; }' ) );

例3: 見出しブロックに下線スタイルを追加

見出しブロックに下線付きスタイルを追加します。

register_block_style( 'core/heading', array( 'name' => 'underlined', 'label' => '下線付き', 'inline_style' => '.wp-block-heading.is-style-underlined { border-bottom: 2px solid #000; padding-bottom: 5px; }' ) );

例4: 画像ブロックに影付きスタイルを追加

画像ブロックにドロップシャドウ効果を追加します。

register_block_style( 'core/image', array( 'name' => 'shadow', 'label' => '影付き', 'inline_style' => '.wp-block-image.is-style-shadow img { box-shadow: 0 4px 8px rgba(0,0,0,0.2); }' ) );

例5: グループブロックに枠線スタイルを追加

グループブロックに枠線スタイルを設定します。

register_block_style( 'core/group', array( 'name' => 'bordered', 'label' => '枠線付き', 'inline_style' => '.wp-block-group.is-style-bordered { border: 1px solid #ddd; padding: 20px; }' ) );

例6: カラムブロックに間隔スタイルを追加

カラムブロックの間隔を広げるスタイルを追加します。

register_block_style( 'core/columns', array( 'name' => 'wide-gap', 'label' => '広い間隔', 'inline_style' => '.wp-block-columns.is-style-wide-gap { gap: 4em !important; }' ) );

例7: リストブロックに番号なしスタイルを追加

リストブロックにカスタムのマーカーを追加します。

register_block_style( 'core/list', array( 'name' => 'no-bullets', 'label' => '番号なし', 'inline_style' => '.wp-block-list.is-style-no-bullets { list-style-type: none; padding-left: 0; }' ) );

注意点

  • スタイルはテーマのfunctions.phpファイルかプラグインで登録する必要があります
  • スタイル名は一意である必要があります
  • 登録したスタイルはブロックエディタで即座に反映されます

関連機能：