wp_get_state_declarations_with_background_resets() │ WP 7.1.0

Adds background reset declarations to prevent gradient/solid color conflicts.

When a state sets a solid background-color, any gradient applied to the default state (via background shorthand or background-image) must be explicitly cleared. Without this, the gradient image layer remains visible on top of the solid hover color even when !important is used, because background-color and background-image are separate CSS properties.

No Hooks.

Returns

array. CSS declarations with background resets applied where needed.

Usage

wp_get_state_declarations_with_background_resets( $declarations );

$declarations(array) (required)

CSS declarations generated by the style engine.

Changelog

wp_get_state_declarations_with_background_resets() wp get state declarations with background resets code ^{WP 7.1}

function wp_get_state_declarations_with_background_resets( $declarations ) {
	if ( ! is_array( $declarations ) ) {
		return $declarations;
	}

	$has_background_color = isset( $declarations['background-color'] ) && '' !== $declarations['background-color'];
	$has_background       = isset( $declarations['background'] ) && '' !== $declarations['background'];
	$has_background_image = isset( $declarations['background-image'] ) && '' !== $declarations['background-image'];

	/*
	 * When the state sets a solid background-color but no gradient of its own,
	 * emit `background-image: unset` to clear any gradient (whether stored as
	 * the `background` shorthand or as `background-image`) that was applied to
	 * the default / normal state via an inline style attribute. The declaration
	 * is marked important when the state rule is registered with the style engine.
	 */
	if ( $has_background_color && ! $has_background && ! $has_background_image ) {
		$declarations['background-image'] = 'unset';
	}

	return $declarations;
}