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.

Return

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.1.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         = _wp_array_get( $this->theme_json, array( 'settings' ) );

	/*
	 * Process style declarations for block support features the current
	 * block contains selectors for. Values for a feature with a custom
	 * selector are filtered from the theme.json node before it is
	 * processed as normal.
	*/
	$feature_declarations = array();

	if ( ! empty( $block_metadata['features'] ) ) {
		foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
			if ( ! empty( $node[ $feature_name ] ) ) {
				// Create temporary node containing only the feature data
				// to leverage existing `compute_style_properties` function.
				$feature = array( $feature_name => $node[ $feature_name ] );
				// Generate the feature's declarations only.
				$new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );

				// Merge new declarations with any that already exist for
				// the feature selector. This may occur when multiple block
				// support features use the same custom selector.
				if ( isset( $feature_declarations[ $feature_selector ] ) ) {
					foreach ( $new_feature_declarations as $new_feature_declaration ) {
						$feature_declarations[ $feature_selector ][] = $feature_declaration;
					}
				} else {
					$feature_declarations[ $feature_selector ] = $new_feature_declarations;
				}

				// Remove the feature from the block's node now the
				// styles will be included under the feature level selector.
				unset( $node[ $feature_name ] );
			}
		}
	}

	/*
	 * 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();

	// TODO: Replace array_key_exists() with isset() check once WordPress drops
	// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
	if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
		$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,
			function( $pseudo_selector ) use ( $selector ) {
				return str_contains( $selector, $pseudo_selector );
			}
		)
	);

	$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 ] ) &&
		// TODO: Replace array_key_exists() with isset() check once WordPress drops
		// support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
		array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
		&& 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. Separate the declarations that use the general selector
	 * from the ones using the duotone selector.
	 */
	$declarations_duotone = array();
	foreach ( $declarations as $index => $declaration ) {
		if ( 'filter' === $declaration['name'] ) {
			unset( $declarations[ $index ] );
			$declarations_duotone[] = $declaration;
		}
	}

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

	// 2. Generate and append the rules that use the general selector.
	$block_rules .= static::to_ruleset( $selector, $declarations );

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

	// 4. Generate Layout block gap styles.
	if (
		static::ROOT_BLOCK_SELECTOR !== $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( $feature_selector, $individual_feature_declarations );
	}

	return $block_rules;
}