Double hashed value for background-color of body.background-color

[hovhanneshovakimyan]

The problem is that body.custom-background has background-color property which gets double hashed value.

So if theme is supporting custom background features, then you'll get wrong (double hashed) background-color value all the time.

I have already found the cause of the problem.

Check this file:

wp-includes/theme.php

on line: 1564

change this:

$style = $color ? "background-color: #$color;" : ;

to this:

$style = $color ? "background-color: $color;" : ;

That will solve the problem.

[joyously]

This still exists in 5.1, although it's only a problem if the theme tries to handle the color separately.

Possible fix (line 1633 of theme.php from 5.1):
$style = $color ? 'background-color: ' . maybe_hash_hex_color( $color ) . ';' : '';

[poena]

To reproduce this issue, add a hashed color code to the background color theme mod, for example in functions.php:

set_theme_mod( 'background_color', '#cc0000' );

I tested with Twent Ten, where the resulting CSS output is

<style type="text/css" id="custom-background-css">
body.custom-background { background-color: ##cc0000; }
</style>

maybe_hash_hex_color is already used to sanitize the value of the color input fields in the customizer, but in this example code the theme mod is set directly.

If a theme developer sets a background color value that uses a hash (#) , WordPress should not add an additional hash when outputting the relevant CSS. Duplicate hash symbols (##) breaks the CSS for the background color.

By replacing the hardcoded hash symbol with ​maybe_hash_hex_color, the hash is only added if it is needed.

Trac ticket: https://core.trac.wordpress.org/ticket/40057

[poena]

Testing instructions:

Add a hashed color code to the background color theme mod, for example in functions.php of your classic test theme:

set_theme_mod( 'background_color', '#cc0000' );

Activate the theme and view the front of the site. Confirm that the background color is used.
Next, activate a different theme, and open the Live Preview of the theme you changed. The background color should be correct also in the live preview.
Activate the theme and open the Customizer. Confirm that it is still possible to adjust the background color using the Customizer option.

[audrasjb]

Thanks for the ticket and patch. Self assigning for final review.

[audrasjb]

In 59813:

Themes: Avoid double hashed value for background-color in custom backgrounds.

This changeset replaces the hardcoded hash symbol with running maybe_hash_hex_color() on the full background-color value provided via the custom background feature, so the hash is only added if it is needed. By doing so, if a theme developer sets a background color value that uses a hash (#), WordPress won't add an additional hash anymore when outputting the relevant CSS. Duplicate hash symbols (##) can break CSS background color declarations.

Props hovhanneshovakimyan, joyously, poena,
Fixes #40057.