97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
|
# 选择器
|
||
|
|
|
||
|
|
区块选择器是允许区块自定义生成样式时使用的 CSS 选择器的 API。
|
||
|
|
|
||
|
|
区块可在三个层级自定义其 CSS 选择器：根级、功能级和子功能级。
|
||
|
|
|
||
|
|
## 根选择器
|
||
|
|
|
||
|
|
根选择器是区块的主 CSS 选择器。
|
||
|
|
|
||
|
|
所有区块都需要一个主 CSS 选择器来包含其样式声明。如果未通过区块选择器 API 提供，将默认生成格式为 `.wp-block-<名称>` 的选择器。
|
||
|
|
|
||
|
|
### 示例
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
...
|
||
|
|
"selectors": {
|
||
|
|
"root": ".my-custom-block-selector"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 功能选择器
|
||
|
|
|
||
|
|
功能选择器关联区块支持的样式，例如边框、颜色、排版等。
|
||
|
|
|
||
|
|
区块可能希望将特定功能的样式应用到区块内的不同元素。例如在区块包装器上使用颜色样式，但仅将排版样式应用到内部标题。
|
||
|
|
|
||
|
|
### 示例
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
...
|
||
|
|
"selectors": {
|
||
|
|
"root": ".my-custom-block-selector",
|
||
|
|
"color": ".my-custom-block-selector",
|
||
|
|
"typography": ".my-custom-block-selector > h2"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 子功能选择器
|
||
|
|
|
||
|
|
这些选择器关联区块支持提供的独立样式，例如 `background-color`。
|
||
|
|
|
||
|
|
子功能可以在其独有的选择器下生成样式。当某个区块支持子功能无法与应用了该支持其他子功能的元素相同时，这尤其有用。
|
||
|
|
|
||
|
|
`text-decoration` 就是一个很好的例子。网页浏览器对此样式的渲染方式不同，如果将其添加到包装元素，则很难被覆盖。通过为 `text-decoration` 分配自定义选择器，其样式可以仅定位到应应用的元素。
|
||
|
|
|
||
|
|
### 示例
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
...
|
||
|
|
"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` 选择器，并仅为不同的子功能定义独特选择器，而不必为多个子功能重复设置选择器。
|
||
|
|
|
||
|
|
### 示例
|
||
|
|
|
||
|
|
```json
|
||
|
|
{
|
||
|
|
...
|
||
|
|
"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`。
|