Text over images not readable in Block: Cover Post

[arafatjamil01]

Black-colored text over background images is not always readable. I have fixed CSS to make texts readable.

[arafatjamil01]

Added css to change the text color from black to white.

[arafatjamil01]

Black, almost unreadable text before the patch

[arafatjamil01]

White texts after the patch

[pooja1210]

Hi @arafatjamil01,

Thanks for the patch!

I have cross verified the issue with WordPress 6.1 and also the latest version WordPress 6.2 and found that by default the Text color over the background image on the Cover Block is White. Uploading any kind of media to the cover block, by default the text would appear white.

I have cross verified it with WordPress default themes like Twenty Twenty Three, Twenty Twenty Two, Twenty Twelve etc.,

Attaching visual for reference: ​https://prnt.sc/GD-hxvI0sUq3

Thanks!

[bhupendra2909]

Test Report

Description

I have cross verified the WordPress 6.7.1 and add patch. found that by default the Text color over the background image on the Cover Block is White. patch is working.

Patch tested: REPLACE_WITH_PATCH_URL

Environment

• WordPress: 6.7.1
• PHP: 8.1.29
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.29)
• Browser: Edge 131.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Two 1.9
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Issue resolved with patch.

[ozgursar]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 7.0-alpha-61215-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Chrome 143.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Three 1.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps to Reproduce

1. Create a new post
2. Add a cover block
3. Upload a dark background
4. Type random text
5. Add another cover block
6. Upload a light background
7. Type random text

Actual Results

1. ❌ Error condition does not occur. Text color is automatically adjusted by the block without the need for a patch.
2. By default, cover with the dark background displayed with white text. Similarly, light background cover block displayed with black text.

Supplemental Artifacts

Editor:

Frontend: