私のブックマーク
ブックマークを追加
ブックマークを削除ユースケース
ブロックがブロックサポートにオプトインしている場合、フロントエンドHTMLでレンダリングされる際に「class」と「style」の値がブロック要素の「class」と「style」属性に適用されます。これはサーバーサイドでレンダリングされたブロックにのみ適用されることに注意してください。例えば、サイトタイトルブロックです。
コールバックは$block_typeと$block_attributesを引数として受け取ります。style内の$block_attributes属性は、ブロックに設定されたスタイルがある場合、原始的なスタイルオブジェクトのみを含み、ブロックのHTML要素に適用されるCSSやクラス名は含まれません。
ここでwp_style_engine_get_stylesが役立ちます：これはCSSを生成し、適切であれば、最終的にレンダリングされたブロックマークアップの「style」と「class」HTML属性に追加されるクラス名を生成します。
以下は、カラー ブロック サポートがどのように機能するかの非常に簡略化されたバージョンです:
function gutenberg_apply_colors_support( $block_type, $block_attributes ) {// Get the color styles from the style object.$block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;// Since we only want the color styles, pass the color styles only to the Style Engine.$styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );// Return the generated styles to be applied to the block's HTML element.return array('style' => $styles['css'],'class' => $styles['classnames']);}// Register the block support.WP_Block_Supports::get_instance()->register('colors',array('register_attribute' => 'gutenberg_register_colors_support','apply' => 'gutenberg_apply_colors_support',));
現時点では、スタイルエンジンは以下のコアブロックサポートのスタイルのみを生成することに注意してください：
- ボーダー
- カラー
- スペーシング
- タイポグラフィ
将来のリリースでは、このリストを拡張することが可能になります。
ブロックサポートの確認とシリアル化のスキップ
スタイルエンジンにブロックスタイルオブジェクトを渡す前に、考慮すべき点があります：
- 1. テーマが特定のブロックスタイルをサポートすることを選択したかどうか、
- 2. ブロックがその特定のブロックスタイルの「シリアル化をスキップする」ことを選択したかどうか、つまり、ブロックの要素にスタイルを自動的に適用することをオプトアウトしたかどうか（通常はブロックの内部を介して行うため）。詳細については、ブロックAPIドキュメントを参照してください。
ブロックが次のいずれかの場合：
- スタイルのサポートがない、または
- そのスタイルのシリアル化をスキップする
スタイルエンジンに渡す前に、スタイルオブジェクトからこれらのスタイル値を削除したいと思うでしょう。これには、次の2つの関数を使用します：
- wp_should_skip_block_supports_serialization()
- block_has_support()
これで、ブロックがサポートを持ち、シリアル化をスキップしない場合にのみ「style」と「class」を返すように、上記の「apply」コールバックコードを更新できます：
function gutenberg_apply_colors_support( $block_type, $block_attributes ) {// The return value.$attributes = array();// Return early if the block skips all serialization for block supports.if ( gutenberg_should_skip_block_supports_serialization( $block_type, 'color' ) ) {return $attributes;}// Checks for support and skip serialization.$has_text_support = block_has_support( $block_type, array( 'color', 'text' ), false );$has_background_support = block_has_support( $block_type, array( 'color', 'background' ), false );$skips_serialization_of_color_text = wp_should_skip_block_supports_serialization( $block_type, 'color', 'text' );$skips_serialization_of_color_background = wp_should_skip_block_supports_serialization( $block_type, 'color', 'background' );// Get the color styles from the style object.$block_color_styles = isset( $block_attributes['style']['color'] ) ? $block_attributes['style']['color'] : null;// The mutated styles object we're going to pass to wp_style_engine_get_styles().$color_block_styles = array();// Set the color style values according to whether the block has support and does not skip serialization.$spacing_block_styles['text'] = null;$spacing_block_styles['background'] = null;if ( $has_text_support && ! $skips_serialization_of_color_text ) {$spacing_block_styles['text'] = $block_color_styles['text'] ?? null;}if $has_background_support && ! $skips_serialization_of_color_background ) {$spacing_block_styles['background'] = $block_color_styles['background'] ?? null;}// Pass the color styles, excluding those that have no support or skip serialization, to the Style Engine.$styles = wp_style_engine_get_styles( array( 'color' => $block_color_styles ) );// Return the generated styles to be applied to the block's HTML element.return array('style' => $styles['css'],'class' => $styles['classnames']);}
プリセットからのクラス名とCSSカスタムセレクタの生成
theme.jsonの多くのプリセットは、フロントエンドでCSSカスタムプロパティとCSSルール（セレクタとCSS宣言から成る）を生成します。
これらのプリセットを使用してブロックにスタイルを適用するには、通常、セレクタをブロックの「className」属性に追加します。
テキストカラーやフォントファミリーなど、プリセット値を持つスタイルの場合、スタイルエンジンはプリセットスラッグを使用してクラス名を構築する方法を知っています。
プリセット値とCSS値を区別するために、スタイルエンジンは特別なフォーマットを期待します。
プリセット値はvar:preset|<PRESET_TYPE>|<PRESET_SLUG>のパターンに従う必要があります。
スタイルエンジンがこれらの値に遭遇すると、それを解析し、var(--wp--preset--font-size--small)のCSS値を作成し、必要に応じてクラス名を生成します。
例：
// Let's say the block attributes styles contain a fontSize preset slug of "small".// $block_attributes['fontSize'] = 'var:preset|font-size|small';$preset_font_size = "var:preset|font-size|{$block_attributes['fontSize']}";// Now let's say the block attributes styles contain a backgroundColor preset slug of "blue".// $block_attributes['backgroundColor'] = 'var:preset|color|blue';$preset_background_color = "var:preset|color|{$block_attributes['backgroundColor']}";$block_styles = array('typography' => array( 'fontSize' => $preset_font_size ),'color' => array( 'background' => $preset_background_color ),'spacing' => array( 'padding' => '10px', 'margin' => array( 'top' => '1em') ),);$styles = wp_style_engine_get_styles($block_styles);print_r( $styles );/*array('css' => 'background-color:var(--wp--preset--color--blue);padding:10px;margin-top:1em;font-size:var(--wp--preset--font-size--small);','declarations' => array('background-color' => 'var(--wp--preset--color--blue)','padding' => '10px','margin-top' => '1em','font-size' => 'var(--wp--preset--font-size--small)',),'classnames' => 'has-background has-blue-background-color has-small-font-size',)*/
スタイルエンジンが生成されたCSS文字列にCSSカスタム変数を出力しないようにしたい場合、つまり、CSSルールとクラス名の両方をブロック要素に適用する場合は、オプション配列に'convert_vars_to_classnames' => trueを渡すことができます。
このフラグは「変数をクラス名に変換し、CSSに変数を出力しない」という意味です。したがって、スタイルエンジンは必要なクラス名のみを生成し、CSS内のCSSカスタム変数を省略します。
上記の例のコードを使用して、オプションを渡したときの異なる出力を観察してください：
$options = array('convert_vars_to_classnames' => true,);$styles = wp_style_engine_get_styles($block_styles,$options);print_r( $styles );/*array('css' => 'padding:10px;margin-top:1em;','declarations' => array('padding' => '10px','margin-top' => '1em',),'classnames' => 'has-background has-blue-background-color has-small-font-size',)*/
グローバルスタイルや[https://developer.wordpress.org/block-editor/how-to-guides/themes/global-settings-and-styles.md#css-custom-properties-presets-custom]のプリセットCSSカスタムプロパティ、[テーマサポート](/read/wordpress/a79eb3e4eb9df7a2.md)についてさらに詳しく読む。
