WP_Theme_JSON::scope_selector() │ public static │ WP 5.9.0

Function that scopes a selector with another one. This works a bit like SCSS nesting except the & operator isn't supported.

$scope = '.a, .b .c';
$selector = '> .x, .y';
$merged = scope_selector( $scope, $selector );
// $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'

Method of the class: WP_Theme_JSON{}

No Hooks.

Return

String. Scoped selector.

Usage

$result = WP_Theme_JSON::scope_selector( $scope, $selector );

$scope(string) (required)

Selector to scope to.

$selector(string) (required)

Original selector.

Changelog

WP_Theme_JSON::scope_selector() WP Theme JSON::scope selector code ^{WP 6.6.2}

public static function scope_selector( $scope, $selector ) {
	if ( ! $scope || ! $selector ) {
		return $selector;
	}

	$scopes    = explode( ',', $scope );
	$selectors = explode( ',', $selector );

	$selectors_scoped = array();
	foreach ( $scopes as $outer ) {
		foreach ( $selectors as $inner ) {
			$outer = trim( $outer );
			$inner = trim( $inner );
			if ( ! empty( $outer ) && ! empty( $inner ) ) {
				$selectors_scoped[] = $outer . ' ' . $inner;
			} elseif ( empty( $outer ) ) {
				$selectors_scoped[] = $inner;
			} elseif ( empty( $inner ) ) {
				$selectors_scoped[] = $outer;
			}
		}
	}

	$result = implode( ', ', $selectors_scoped );
	return $result;
}