スタイル

Topics

ブロックスタイルを使用すると、既存のブロックに対して別のスタイルを適用できます。ブロックスタイルは、ブロックのラッパーに 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 です。

Top ↑

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',
    )
);

Top ↑

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を使って登録されたスタイルの登録を解除します。この関数は、クライアントサイドのコードで登録されたスタイルの登録を解除しません。

原文

最終更新日: