Block Selectors 是允许块自定义生成样式时使用的 CSS 选择器的 API。

块可以在三个级别自定义其 CSS 选择器:根、功能和子功能。

根选择器

根选择器是块的主要 CSS 选择器。

所有块都需要一个主要的 CSS 选择器,以便将其样式声明包含在其下。如果未通过 Block Selectors API 提供,则默认生成 .wp-block-<name> 形式的选择器。

示例

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

功能选择器

功能选择器与块支持功能的样式相关,例如边框、颜色、排版等。

块可能希望将特定功能的样式应用于块内的不同元素。一个示例可能是使用颜色在块的包装器上,但仅将排版样式应用于内部标题。

示例

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

子功能选择器

这些选择器与块支持提供的单个样式相关,例如 background-color。

子功能可以在其自身唯一的选