Twenty Sixteen: Code block is not reflecting selected background color in frontend

[pitamdey]

In theme Twenty Sixteen, The code Block Background color is not being reflected in the Frontend side

[pitamdey]

Editor View

[pitamdey]

Frontend View

[pitamdey]

Patch for this issue

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue. I think that add inherit instead of removed background color from code block.

[sabernhardt]

sets code element background to transparent when the Code block has a background, retains default gray background when user does not select background color

[sabernhardt]

The code element needs to keep the light gray background when it is used outside of a Code block or when the Code block does not have a user-defined background color.

[viralsampat]

Hello @sabernhardt

Thank you so much for your feedback.

I read your last comment and I have made the changes accordingly.

Here, I have attached my latest patch.

Thanks,

[viralsampat]

I have added another patch

[karmatosed]

We seem to have two patches here with slightly different approaches. @sabernhardt and @viralsampat I would love to add either of them but I would love to get some feedback first.

[sudipatel007]

Test Report

I have tested with following patch and it is working fine for me.

@viralsampat - https://core.trac.wordpress.org/attachment/ticket/61287/61287.4.patch

Environment

• WordPress: 6.6-RC1-58590
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 client: mysqlnd 8.1.23)
• Browser: Chrome 126.0.0.0 (macOS)
• Theme: Twenty Sixteen 3.2

Screenshot or Video
​https://www.loom.com/share/82338852a3174cacb4d3abdaeea979de?sid=07c77792-aa81-4b08-9f25-f62c2072625f

[sabernhardt]

We seem to have two patches here with slightly different approaches.

A hybrid of both might be a better direction than either of those two.

61287.3.patch

• I focused on the Code block, and the patch only removes the background color when that specific block has a background.
• The theme's (block) editor styles would include the same rule, for consistency and for backward compatibility. That technically is not necessary starting with WordPress 6.1, when the Code block removed any background from the code element with background: none (GB43599).

61287.4.patch

• In addition to the Code block, any other block that can add a has-background class to a pre element—with a code element inside it—might benefit from the second approach.
• Other blocks with a custom background would still have the gray code element background within the editor, however.
• I would prefer transparent instead of inherit for background color (though both seem to work).
• The property-value pair needs to be on its own line to meet ​CSS Coding Standards (and for consistency with the rest of the stylesheet).

[sabernhardt]

with 61287.4.patch: editor shows correct background color for Code blocks, code elements in Preformatted and Verse blocks still have gray background

[sabernhardt]

with 61287.4.patch: front end uses correct background color for Code blocks, and code elements in Preformatted and Verse blocks inherit selected background colors too