ブロックスタイルを使用すると、既存のブロックに対して別のスタイルを適用できます。ブロックスタイルは、ブロックのラッパーに className を追加することで機能します。ブロックスタイルが選択された場合、このclassName を使用してブロックに代替のスタイルを提供できます。ブロックにスタイルを適用する詳細なサンプルプログラムについては、「スタイルとスタイルシートの利用」を参照してください。
例:
wp.blocks.registerBlockStyle( 'core/quote', {
name: 'fancy-quote',
label: 'Fancy Quote',
} );
上の例では、ブロック core/quote に、ブロックスタイル fancy-quote を登録します。ユーザーがスタイルセレクタからこのブロックスタイルを選択すると、className is-style-fancy-quote が、ブロックのラッパーに追加されます。
登録するブロックスタイルに isDefault: true を追加すると、カスタムクラス名が指定されていない場合にアクティブと認識される対象としてマークできます。この結果、デフォルトとしてマークされたスタイルの HTML 出力には、カスタムクラス名は追加されません。
ブロックスタイルを削除するには、wp.blocks.unregisterBlockStyle() を使用してください。
例:
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
上のコードは、ブロック core/quote から、ブロックスタイル large を削除します。
重要: ブロックスタイルを登録解除する際に、「スタイルの登録」と「スタイルの登録解除」のどちらのコードを先に実行すべきかという 競合状態 が発生します。もちろん登録解除を最後に実行したいところでしょう。それには、スタイルを登録するコンポーネントを依存関係として指定します。ここでは wp-edit-post を指定します。さらに、wp.domReady()を使用することで、domがロードされた後で、登録を解除するコードが実行されます。
JavaScript を次の PHP コードと一緒にエンキューしてください。
function myguten_enqueue() {
wp_enqueue_script(
'myguten-script',
plugins_url( 'myguten.js', __FILE__ ),
array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
filemtime( plugin_dir_path( __FILE__ ) . '/myguten.js' )
);
}
add_action( 'enqueue_block_editor_assets', 'myguten_enqueue' );
myguten.js の JavaScript コードです。
wp.domReady( function () {
wp.blocks.unregisterBlockStyle( 'core/quote', 'large' );
} );
サーバーサイド登録ヘルパー
提供されているサンプルでは、ブロックスタイルを完全にコントロールできますが、かなりの量のコードが必要です。
ブロックスタイルの登録と解除を簡単に行うために、2つのサーバーサイド関数が用意されています。register_block_style と unregister_block_style です。
register_block_style
register_block_style関数は、第1引数にブロックの名前を、第2引数にスタイルのプロパティを記述した配列を受け取ります。
スタイル配列のプロパティには、nameとlabelを含める必要があります。
name: CSSクラスの算出に使用されるスタイルの識別子です。label: スタイルの人間が読めるラベルです。
2つの必須プロパティの他に、スタイルプロパティの配列には、inline_style または style_handle または style_data プロパティも含める必要があります。
inline_style: スタイルに必要なCSSクラスを登録するインラインCSSコードを含みます。style_handle: ブロックスタイルが必要な場所でエンキューされる、既に登録済みのスタイルのハンドルを含みます。style_data: スタイルプロパティの配列内に、theme.json 形式の表記を含みます。
また、ブロックスタイルのいずれかが欠けている場合に備え、is_default プロパティをtrueに設定して、デフォルトのスタイルとしてマークできます。
次のサンプルコードは、引用ブロックにスタイル「Blue Quote」を登録し、「Blue Quote」スタイルで引用ブロックを青くするインラインスタイルを提供します。
register_block_style(
'core/quote',
array(
'name' => 'blue-quote',
'label' => __( 'Blue Quote', 'textdomain' ),
'inline_style' => '.wp-block-quote.is-style-blue-quote { color: blue; }',
)
);
代替として、ブロックスタイルのCSSを含むスタイルシートがすでに登録済みの場合は、register_block_style関数にスタイルシートのハンドルを渡すだけでエンキューできます。
この具体的な例として次のサンプルコードを参照してください。
wp_register_style( 'myguten-style', get_template_directory_uri() . '/custom-style.css' );
// ...
register_block_style(
'core/quote',
array(
'name' => 'fancy-quote',
'label' => __( 'Fancy Quote', 'textdomain' ),
'style_handle' => 'myguten-style',
)
);
別の方法は style_data プロパティを使用する方法です。以下のコード例は画像ブロックに、オレンジ色の枠線とわずかに角が丸くなったブロックスタイルを追加します。
register_block_style(
array( 'core/image' ),
array(
'name' => 'orange-border',
'label' => __( 'Orange Border', 'pauli' ),
'style_data'=> array(
'border' => array(
'color' => '#f5bc42',
'style' => 'solid',
'width' => '4px',
'radius' => '15px'
)
)
)
);
style_data プロパティを使用すると、ユーザーは エディター > スタイル 経由のグローバルスタイル UI で変更できます。style_dataプロパティは WordPress 6.6で追加されました。
詳細については WordPress 6.6 Dev Notes 「セクションスタイル」や WordPress Developer Blog 「WordPress 6.6のブロックスタイルバリエーションでセクションやネストされた要素などをスタイリング」を参照してください。
unregister_block_style
unregister_block_styleでは、register_block_styleでサーバーに登録したブロックスタイルを解除できます。
関数の第1引数にはブロックの登録名、第2引数にはスタイル名を指定します。
次のコードサンプルは、引用ブロックからスタイル「fancy-quote」の登録を解除しています。
unregister_block_style( 'core/quote', 'fancy-quote' );
重要: 関数unregister_block_styleは、サーバー上でregister_block_styleを使って登録されたスタイルの登録を解除します。この関数は、クライアントサイドのコードで登録されたスタイルの登録を解除しません。