ルートセレクタ

ルートセレクタはブロックの主要なCSSセレクタです。

すべてのブロックは、そのスタイル宣言が含まれるための主要なCSSセレクタを必要とします。ブロックセレクタAPIを通じて提供されない場合、.wp-block-<name>の形式でデフォルトが生成されます。

例

  1. {
  2.    ...
  3.    "selectors": {
  4.    "root": ".my-custom-block-selector"
  5.    }
  6. }

フィーチャーセレクタ

フィーチャーセレクタは、ブロックサポートのスタイルに関連しています。例えば、ボーダー、カラー、

タイポグラフィなどです。

ブロックは、特定のフィーチャーのスタイルをブロック内の異なる要素に適用したい場合があります。例えば、ブロックのラッパーに色を使用し、

内部の見出しにのみタイポグラフィスタイルを適用することが考えられます。

例

  1. {
  2.    ...
  3.    "selectors": {
  4.    "root": ".my-custom-block-selector",
  5.    "color": ".my-custom-block-selector",
  6.    "typography": ".my-custom-block-selector > h2"
  7.    }
  8. }

サブフィーチャーセレクタ

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

  2. サブフィーチャーは、その独自のセレクタの下でスタイルを生成することができます。これは、1つのブロックサポートのサブフィーチャーが、  
  4. サポートの他のサブフィーチャーと同じ要素に適用できない場合に特に便利です。  
  6. これの素晴らしい例は`````text-decoration`````です。ウェブブラウザはこのスタイルを異なる方法でレンダリングし、ラッパー要素に追加した場合にオーバーライドが難しくなります。  
  8. `````text-decoration`````にカスタムセレクタを割り当てることで、そのスタイルは適用すべき要素のみにターゲットを絞ることができます。  
  9.  <a name="example-3"></a>
  12. ### 例
  14. ``````bash
  15. {
  16.    ...
  17.    "selectors": {
  18.    "root": ".my-custom-block-selector",
  19.    "color": ".my-custom-block-selector",
  20.    "typography": {
  21.    "root": ".my-custom-block-selector > h2",
  22.    "text-decoration": ".my-custom-block-selector > h2 span"
  23.    }
  24.    }
  25. }
  26. `

ショートハンド

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

上記のcolorフィーチャーのために示されたアプローチです。

フォールバック

特定のフィーチャーのために構成されていないセレクタは、ブロックのルートセレクタにフォールバックします。同様に、サブフィーチャーにカスタムセレクタが設定されていない場合、

それは親フィーチャーのセレクタにフォールバックし、利用できない場合はさらにブロックのルートセレクタにフォールバックします。

複数のサブフィーチャーに対してセレクタを繰り返すのではなく、共通のセレクタを親フィーチャーのrootセレクタとして設定し、

異なるサブフィーチャーのためにユニークなセレクタのみを定義できます。

例

  1. {
  2.    ...
  3.    "selectors": {
  4.    "root": ".my-custom-block-selector",
  5.    "color": {
  6.    "text": ".my-custom-block-selector p"
  7.    },
  8.    "typography": {
  9.    "root": ".my-custom-block-selector > h2",
  10.    "text-decoration": ".my-custom-block-selector > h2 span"
  11.    }
  12.    }
  13. }

上記の例ではcolor.background-colorサブフィーチャーは明示的に設定されていません。colorフィーチャーもrootセレクタを定義していないため、

color.background-colorはブロックの主要なルートセレクタ.my-custom-block-selectorの下に含まれます。

typography.font-sizeのようなサブフィーチャーの場合、存在する限り親フィーチャーのセレクタ、すなわち.my-custom-block-selector > h2にフォールバックします。