Make WordPress Core

Opened 8 weeks ago

Last modified 7 weeks ago

#61077 new defect (bug)

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

Reported by: viralsampat's profile viralsampat Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.5
Component: Bundled Theme Keywords: dev-feedback has-patch has-testing-info changes-requested
Focuses: ui, css Cc:

Description

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,

Attachments (6)

CleanShot 2024-04-25 at 12.51.15@2x.png (184.7 KB) - added by viralsampat 8 weeks ago.
Back-end
CleanShot 2024-04-25 at 12.50.58@2x.png (142.2 KB) - added by viralsampat 8 weeks ago.
Front-end
61077.patch (422 bytes) - added by viralsampat 8 weeks ago.
I have checked above mentioned issue and I have resolved it and added patch. Also, I have attached screenshot after resolved this issue.
CleanShot 2024-04-25 at 15.07.22@2x.png (186.8 KB) - added by viralsampat 8 weeks ago.
Back-end
CleanShot 2024-04-25 at 15.07.06@2x.png (138.3 KB) - added by viralsampat 8 weeks ago.
Front-end
61077.1.patch (933 bytes) - added by pitamdey 7 weeks ago.
Updated Patch

Download all attachments as: .zip

Change History (8)

@viralsampat
8 weeks ago

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

#1 @devsahadat
8 weeks ago

  • Keywords has-patch has-testing-info added

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

#2 @sabernhardt
7 weeks ago

  • Keywords changes-requested added

[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
7 weeks ago

Updated Patch

Note: See TracTickets for help on using tickets.