セレクタ

ブロックセレクタは、ブロックのスタイル生成時に使用される CSS セレクタをカスタマイズするためのAPI です。

ブロックはその CSS セレクタを3つのレベル、「ルート」「フィーチャー」「サブフィーチャー」でカスタマイズできます。

ルートセレクタは、ブロックのプライマリ CSS セレクタです。

すべてのブロックはプライマリ CSS セレクタが必要です。スタイル宣言は、プライマリ CSS セレクタの下に含まれます。ブロックセレクタ API を介してプライマリ CSS セレクタが提供されていない場合は .wp-block-<名前> という形式で生成されます。

{
	...
	"selectors": {
		"root": ".my-custom-block-selector"
	}
}

フィーチャーセレクターは、ブロックサポートのスタイルに関連します。たとえば、border、color、typography など。

ブロックは、ブロック内の異なる要素に対して、特定のフィーチャーのスタイルを適用したい場合があります。例えば、ブロックのラッパーに色を使用する一方、タイポグラフィスタイルは内側の見出しのみに適用する、などです。

{
	...
	"selectors": {
		"root": ".my-custom-block-selector",
		"color": ".my-custom-block-selector",
		"typography": ".my-custom-block-selector > h2"
	}
}

これらのセレクタは、ブロックサポートによって提供される個々のスタイルに関連します。例: background-color

サブフィーチャは自身の固有のセレクタの下で生成されたスタイルを持つことができます。これは特に、あるブロックサポートのサブフィーチャーを、そのサポートの他のサブフィーチャーと同じ要素に適用できない場合に便利です。

この良い例が text-decoration です。ウェブブラウザはこのスタイルを異なる方法でレンダーするため、ラッパー要素に追加しても上書きすることが困難です。text-decoration にカスタムセレクタを割り当てることで、そのスタイルを適用すべき要素のみをターゲットにできます。

{
	...
	"selectors": {
		"root": ".my-custom-block-selector",
		"color": ".my-custom-block-selector",
		"typography": {
			"root": ".my-custom-block-selector > h2",
			"text-decoration": ".my-custom-block-selector > h2 span"
		}
	}
}

すべてのサブフィーチャーに対して CSS セレクタを指定するのではなく、関連するフィーチャーに対して単一のセレクタを文字列値として設定できます。これは、上の例の color フィーチャーで示した方法です。

特定の機能に対して構成されていないセレクタは、ブロックのルートセレクタにフォールバックします。同様に、サブフィーチャーにカスタムセレクタが設定されていない場合、親フィーチャーのセレクタにフォールバックし、それが利用できない場合はさらにブロックのルートセレクタにフォールバックします。

複数のサブフィーチャーのセレクタを繰り返すのではなく、共通のセレクタを親フィーチャーの root セレクタとして設定し、異なるサブフィーチャーの固有セレクタだけを定義できます。

{
	...
	"selectors": {
		"root": ".my-custom-block-selector",
		"color": {
			"text": ".my-custom-block-selector p"
		},
		"typography": {
			"root": ".my-custom-block-selector > h2",
			"text-decoration": ".my-custom-block-selector > h2 span"
		}
	}
}

上の例では、color.background-color サブフィーチャーは明示的に設定されていません。color フィーチャーも rootセレクタを定義していないため、color.background-color は、ブロックのプライマリルートセレクタである .my-custom-block-selector の下に含まれることになります。

typography.font-size のようなサブフィーチャーは、親フィーチャーのセレクタが存在する場合、そのセレクタにフォールバックします。例えば .my-custom-block-selector > h2 です。

原文

最終更新日: 2024年6月23日