ブロックスタイルを使用すると、既存のブロックに対して別のスタイルを適用できます。ブロックスタイルは、ブロックのラッパーに className を追加することで機能します。ブロックスタイルが選択された場合、このclassName を使用してブロックに代替のスタイルを提供できます。詳細は、「JavaScript 入門」を参照してください。
例:
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
のプロパティも含める必要があります。
inline_style
: スタイルに必要なCSSクラスを登録するインラインCSSコードを含みます。style_handle
: ブロックスタイルが必要な場所でエンキューされる、既に登録済みのスタイルのハンドルを含みます。
また、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',
)
);
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
を使って登録されたスタイルの登録を解除します。この関数は、クライアントサイドのコードで登録されたスタイルの登録を解除しません。