wp_get_block_css_selector()
云策文档标注
概述
wp_get_block_css_selector() 函数用于根据提供的块类型和目标属性,确定并返回对应的 CSS 选择器。它支持根选择器、功能选择器和子功能选择器的查找,并允许回退到更宽泛的选择器。
关键要点
- 函数接受三个参数:$block_type(WP_Block_Type 类型,必需)、$target(字符串或数组,必需,指定目标如 'root' 或路径)、$fallback(布尔值,可选,控制是否回退到更宽泛选择器,默认 false)。
- 返回值为字符串(CSS 选择器)或 null(如果无可用选择器)。
- 函数优先使用块类型中的 selectors API,其次尝试 __experimentalSelector 支持属性,最后生成默认的块类选择器。
- 支持目标为 'root'、功能(单一路径)或子功能(嵌套路径),并根据 $fallback 参数决定是否回退到父功能或根选择器。
- 内部使用 _wp_array_get() 函数访问数组路径,并可能调用 WP_Theme_JSON::scope_selector() 来限定选择器范围。
代码示例
function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = false ) {
// 函数实现代码,包括参数处理、选择器查找逻辑和返回逻辑。
}注意事项
- 该函数从 WordPress 6.3.0 版本引入,是处理块 CSS 选择器的核心工具。
- 在开发块主题或自定义样式时,应确保块类型正确配置 selectors 或 supports 属性,以利用此函数的功能。
- 回退机制有助于在特定选择器不可用时提供备用样式方案,但需谨慎使用以避免样式冲突。
原文内容
Determines the CSS selector for the block type and property provided, returning it if available.
Parameters
$block_typeWP_Block_Typerequired-
The block’s type.
$targetstring|arrayrequired-
The desired selector’s target,
rootor array path. $fallbackbooleanoptional-
Whether to fall back to broader selector.
Default:
false
Source
function wp_get_block_css_selector( $block_type, $target = 'root', $fallback = false ) {
if ( empty( $target ) ) {
return null;
}
$has_selectors = ! empty( $block_type->selectors );
// Root Selector.
// Calculated before returning as it can be used as fallback for
// feature selectors later on.
$root_selector = null;
if ( $has_selectors && isset( $block_type->selectors['root'] ) ) {
// Use the selectors API if available.
$root_selector = $block_type->selectors['root'];
} elseif ( isset( $block_type->supports['__experimentalSelector'] ) && is_string( $block_type->supports['__experimentalSelector'] ) ) {
// Use the old experimental selector supports property if set.
$root_selector = $block_type->supports['__experimentalSelector'];
} else {
// If no root selector found, generate default block class selector.
$block_name = str_replace( '/', '-', str_replace( 'core/', '', $block_type->name ) );
$root_selector = ".wp-block-{$block_name}";
}
// Return selector if it's the root target we are looking for.
if ( 'root' === $target ) {
return $root_selector;
}
// If target is not `root` we have a feature or subfeature as the target.
// If the target is a string convert to an array.
if ( is_string( $target ) ) {
$target = explode( '.', $target );
}
// Feature Selectors ( May fallback to root selector ).
if ( 1 === count( $target ) ) {
$fallback_selector = $fallback ? $root_selector : null;
// Prefer the selectors API if available.
if ( $has_selectors ) {
// Look for selector under `feature.root`.
$path = array( current( $target ), 'root' );
$feature_selector = _wp_array_get( $block_type->selectors, $path, null );
if ( $feature_selector ) {
return $feature_selector;
}
// Check if feature selector is set via shorthand.
$feature_selector = _wp_array_get( $block_type->selectors, $target, null );
return is_string( $feature_selector ) ? $feature_selector : $fallback_selector;
}
// Try getting old experimental supports selector value.
$path = array( current( $target ), '__experimentalSelector' );
$feature_selector = _wp_array_get( $block_type->supports, $path, null );
// Nothing to work with, provide fallback or null.
if ( null === $feature_selector ) {
return $fallback_selector;
}
// Scope the feature selector by the block's root selector.
return WP_Theme_JSON::scope_selector( $root_selector, $feature_selector );
}
// Subfeature selector
// This may fallback either to parent feature or root selector.
$subfeature_selector = null;
// Use selectors API if available.
if ( $has_selectors ) {
$subfeature_selector = _wp_array_get( $block_type->selectors, $target, null );
}
// Only return if we have a subfeature selector.
if ( $subfeature_selector ) {
return $subfeature_selector;
}
// To this point we don't have a subfeature selector. If a fallback
// has been requested, remove subfeature from target path and return
// results of a call for the parent feature's selector.
if ( $fallback ) {
return wp_get_block_css_selector( $block_type, $target[0], $fallback );
}
return null;
}
Changelog
| Version | Description |
|---|---|
| 6.3.0 | Introduced. |