WP_Theme_JSON::get_styles_for_block │ public │ WP 6.1.0

Gets the CSS rules for a particular block from theme.json.

Method of the class: WP_Theme_JSON{}

No Hooks.

Returns

String. Styles for the block.

Usage

$WP_Theme_JSON = new WP_Theme_JSON();
$WP_Theme_JSON->get_styles_for_block( $block_metadata );

$block_metadata(array) (required)

Metadata about the block to get styles for.

Changelog

WP_Theme_JSON::get_styles_for_block() WP Theme JSON::get styles for block code ^{WP 6.8.1}

public function get_styles_for_block( $block_metadata ) {
	$node                 = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
	$use_root_padding     = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
	$selector             = $block_metadata['selector'];
	$settings             = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
	$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
	$is_root_selector     = static::ROOT_BLOCK_SELECTOR === $selector;

	// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
	$style_variation_declarations = array();
	$style_variation_custom_css   = array();
	if ( ! empty( $block_metadata['variations'] ) ) {
		foreach ( $block_metadata['variations'] as $style_variation ) {
			$style_variation_node           = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
			$clean_style_variation_selector = trim( $style_variation['selector'] );

			// Generate any feature/subfeature style declarations for the current style variation.
			$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );

			// Combine selectors with style variation's selector and add to overall style variation declarations.
			foreach ( $variation_declarations as $current_selector => $new_declarations ) {
				/*
				 * Clean up any whitespace between comma separated selectors.
				 * This prevents these spaces breaking compound selectors such as:
				 * - `.wp-block-list:not(.wp-block-list .wp-block-list)`
				 * - `.wp-block-image img, .wp-block-image.my-class img`
				 */
				$clean_current_selector = preg_replace( '/,\s+/', ',', $current_selector );
				$shortened_selector     = str_replace( $block_metadata['selector'], '', $clean_current_selector );

				// Prepend the variation selector to the current selector.
				$split_selectors    = explode( ',', $shortened_selector );
				$updated_selectors  = array_map(
					static function ( $split_selector ) use ( $clean_style_variation_selector ) {
						return $clean_style_variation_selector . $split_selector;
					},
					$split_selectors
				);
				$combined_selectors = implode( ',', $updated_selectors );

				// Add the new declarations to the overall results under the modified selector.
				$style_variation_declarations[ $combined_selectors ] = $new_declarations;
			}

			// Compute declarations for remaining styles not covered by feature level selectors.
			$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
			// Store custom CSS for the style variation.
			if ( isset( $style_variation_node['css'] ) ) {
				$style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
			}
		}
	}
	/*
	 * Get a reference to element name from path.
	 * $block_metadata['path'] = array( 'styles','elements','link' );
	 * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
	 * Skip non-element paths like just ['styles'].
	 */
	$is_processing_element = in_array( 'elements', $block_metadata['path'], true );

	$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;

	$element_pseudo_allowed = array();

	if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
		$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
	}

	/*
	 * Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
	 * This also resets the array keys.
	 */
	$pseudo_matches = array_values(
		array_filter(
			$element_pseudo_allowed,
			static function ( $pseudo_selector ) use ( $selector ) {
				/*
				 * Check if the pseudo selector is in the current selector,
				 * ensuring it is not followed by a dash (e.g., :focus should not match :focus-visible).
				 */
				return preg_match( '/' . preg_quote( $pseudo_selector, '/' ) . '(?!-)/', $selector ) === 1;
			}
		)
	);

	$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;

	/*
	 * If the current selector is a pseudo selector that's defined in the allow list for the current
	 * element then compute the style properties for it.
	 * Otherwise just compute the styles for the default selector as normal.
	 */
	if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
		isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] )
		&& in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
	) {
		$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
	} else {
		$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
	}

	$block_rules = '';

	/*
	 * 1. Bespoke declaration modifiers:
	 * - 'filter': Separate the declarations that use the general selector
	 * from the ones using the duotone selector.
	 * - 'background|background-image': set the html min-height to 100%
	 * to ensure the background covers the entire viewport.
	 */
	$declarations_duotone       = array();
	$should_set_root_min_height = false;

	foreach ( $declarations as $index => $declaration ) {
		if ( 'filter' === $declaration['name'] ) {
			/*
			 * 'unset' filters happen when a filter is unset
			 * in the site-editor UI. Because the 'unset' value
			 * in the user origin overrides the value in the
			 * theme origin, we can skip rendering anything
			 * here as no filter needs to be applied anymore.
			 * So only add declarations to with values other
			 * than 'unset'.
			 */
			if ( 'unset' !== $declaration['value'] ) {
				$declarations_duotone[] = $declaration;
			}
			unset( $declarations[ $index ] );
		}

		if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
			$should_set_root_min_height = true;
		}
	}

	/*
	 * If root styles has a background-image or a background (gradient) set,
	 * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
	 * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
	 * and matches the behavior of the site editor.
	 */
	if ( $should_set_root_min_height ) {
		$block_rules .= static::to_ruleset(
			'html',
			array(
				array(
					'name'  => 'min-height',
					'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
				),
			)
		);
	}

	// Update declarations if there are separators with only background color defined.
	if ( '.wp-block-separator' === $selector ) {
		$declarations = static::update_separator_declarations( $declarations );
	}

	/*
	 * Root selector (body) styles should not be wrapped in `:root where()` to keep
	 * specificity at (0,0,1) and maintain backwards compatibility.
	 *
	 * Top-level element styles using element-only specificity selectors should
	 * not get wrapped in `:root :where()` to maintain backwards compatibility.
	 *
	 * Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so
	 * still need to be wrapped in `:root :where` to cap specificity for nested
	 * variations etc. Pseudo selectors won't match the ELEMENTS selector exactly.
	 */
	$element_only_selector = $is_root_selector || (
		$current_element &&
		isset( static::ELEMENTS[ $current_element ] ) &&
		// buttons, captions etc. still need `:root :where()` as they are class based selectors.
		! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) &&
		static::ELEMENTS[ $current_element ] === $selector
	);

	// 2. Generate and append the rules that use the general selector.
	$general_selector = $element_only_selector ? $selector : ":root :where($selector)";
	$block_rules     .= static::to_ruleset( $general_selector, $declarations );

	// 3. Generate and append the rules that use the duotone selector.
	if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
		$block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
	}

	// 4. Generate Layout block gap styles.
	if (
		! $is_root_selector &&
		! empty( $block_metadata['name'] )
	) {
		$block_rules .= $this->get_layout_styles( $block_metadata );
	}

	// 5. Generate and append the feature level rulesets.
	foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
		$block_rules .= static::to_ruleset( ":root :where($feature_selector)", $individual_feature_declarations );
	}

	// 6. Generate and append the style variation rulesets.
	foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
		$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
		if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
			$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
		}
	}

	// 7. Generate and append any custom CSS rules.
	if ( isset( $node['css'] ) && ! $is_root_selector ) {
		$block_rules .= $this->process_blocks_custom_css( $node['css'], $selector );
	}

	return $block_rules;
}