wpseek.com
A WordPress-centric search engine for devs and theme authors

function wp_render_block_states_support( $block_content, $block ) {
	if ( empty( $block['blockName'] ) || empty( $block_content ) ) {
		return $block_content;
	}

	$block_name = $block['blockName'];
	$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
	if ( ! $block_type ) {
		return $block_content;
	}

	$supported_pseudo_states = WP_Theme_JSON::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
	$style                   = $block['attrs']['style'] ?? array();
	$css_rules               = array();

	foreach ( $supported_pseudo_states as $pseudo_state ) {
		if ( empty( $style[ $pseudo_state ] ) || ! is_array( $style[ $pseudo_state ] ) ) {
			continue;
		}

		$css_rules = array_merge(
			$css_rules,
			wp_get_block_state_style_rules(
				array( $pseudo_state => $style[ $pseudo_state ] ),
				$block_type
			)
		);
	}

	foreach ( WP_Theme_JSON::RESPONSIVE_BREAKPOINTS as $breakpoint => $media_query ) {
		if ( empty( $style[ $breakpoint ] ) || ! is_array( $style[ $breakpoint ] ) ) {
			continue;
		}

		$root_state_style = wp_get_root_state_style(
			$style[ $breakpoint ],
			array_merge( array( 'elements' ), $supported_pseudo_states )
		);

		if ( ! empty( $root_state_style ) ) {
			$css_rules = array_merge(
				$css_rules,
				wp_get_block_state_style_rules(
					array( '' => $root_state_style ),
					$block_type,
					$media_query
				)
			);
		}

		foreach ( $supported_pseudo_states as $pseudo_state ) {
			if ( empty( $style[ $breakpoint ][ $pseudo_state ] ) || ! is_array( $style[ $breakpoint ][ $pseudo_state ] ) ) {
				continue;
			}

			$css_rules = array_merge(
				$css_rules,
				wp_get_block_state_style_rules(
					array( $pseudo_state => $style[ $breakpoint ][ $pseudo_state ] ),
					$block_type,
					$media_query
				)
			);
		}
	}

	if ( empty( $css_rules ) ) {
		return $block_content;
	}

	$unique_class = wp_get_block_state_unique_class( $block_name, $css_rules );

	/*
	 * Register each state's CSS rules with the block-supports style engine store.
	 * The store deduplicates rules by selector — two block instances with identical
	 * state styles share the same hash class and therefore the same selector,
	 * so only one CSS rule is emitted. The store is flushed to the page by
	 * wp_enqueue_stored_styles() rather than injected inline here.
	 *
	 * State declarations need !important to apply reliably over inline styles and
	 * preset utility classes such as .has-accent-3-background-color.
	 *
	 * Layout-driven state styles (responsive layout, blockGap, child layout) are
	 * handled by wp_render_layout_support_flag() so they share a selector with
	 * the base layout and target the correct (inner) wrapper element.
	 */
	$style_rules = array();
	foreach ( $css_rules as $rule ) {
		$declarations = array();
		foreach ( $rule['declarations'] as $property => $value ) {
			$declarations[ $property ] = is_string( $value ) && str_contains( $value, '!important' )
				? $value
				: $value . ' !important';
		}
		$declarations = wp_get_state_declarations_with_fallback_border_styles( $declarations );
		$style_rule   = array(
			'selector'     => wp_build_state_selector(
				".$unique_class",
				$rule['selector'],
				$rule['state']
			),
			'declarations' => $declarations,
		);
		if ( ! empty( $rule['rules_group'] ) ) {
			$style_rule['rules_group'] = $rule['rules_group'];
		}
		$style_rules[] = $style_rule;
	}

	wp_style_engine_get_stylesheet_from_css_rules(
		$style_rules,
		array(
			'context'  => 'block-supports',
			'prettify' => false,
		)
	);

	$processor = new WP_HTML_Tag_Processor( $block_content );
	if ( $processor->next_tag() ) {
		$processor->add_class( $unique_class );
	}
	return $processor->get_updated_html();
}