Twenty Twenty-One: Code block text color is not change in front-end when we changed its color using block setting.

[viralsampat]

Hello,

I have reviewed the "Code block" and found that its text color is not same in editor & front-end sides. When we trying to change text color using block setting, It applies only on editor site, Not in front-end.

I think that it should be same on both editor & front-end sides.

I have checked this issue with Gutenberg plugin and without Gutenberg plugin.

Here, I have provided issue link for reference.
Issue: ​https://share.cleanshot.com/4pH5vdbrkRLJVdxV5ttm

Also, I have attached its screenshots at below.

Environment info:

---

• WordPress version: WordPress 6.5.2 running,
• Twenty Twenty-One Version: 2.2
• Browser: Google Chrome, Version 124.0.6367.62 (Official Build) (arm64)
• Device: MacBook Air M1
• OS: macOS 14.4.1 (23E224)
• Gutenberg plugin: Version 18.1.2

Thanks,

[viralsampat]

Back-end

[viralsampat]

Front-end

[viralsampat]

I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.

[viralsampat]

Back-end

[viralsampat]

Front-end

[devsahadat]

Test Report

I just Checked and found that replacing the global color with inherit in theme style.css (line 1855) worked fine.

Before:

.wp-block-code code { color: var(--global--color-primary); }

After:

color:inherit

removing the global color css from .wp-block-code code also work well for me.

Environment

• WordPress: 6.5.2
• PHP: 8.1.23
• Server: Apache/2.4.43 (Unix)
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 123.0.0.0 (macOS)
• Theme: Twenty Twenty-One 2.2
• MU-Plugins: None activated
• Plugins:
  • Gutenberg 18.2.0
  • WordPress Beta Tester 3.5.5

Expected Results

1. ✅ code block text color change when set custom color

Actual Results

1. ✅ code block text color changed when set custom color

[sabernhardt]

[49825] purposely added a color within the Code block to override Gutenberg's theme.css in dark mode. However, that only affected the front end and ​PR 37816 removed the troublesome block style for WordPress 6.0.

Removing the color from Twenty Twenty-One now could break the front end in rare cases, but that should only happen if the site

• uses Twenty Twenty-One
• updates to the next theme version or later
• keeps an older WordPress version (before 6.0)
• enables the theme's dark mode (and visitors indicate a preference for it)
• includes at least one Code block

The patch still needs a change in the SCSS: assets/sass/05-blocks/code/_style.scss

[pitamdey]

Updated Patch