Missing style icon for link, heading and caption when Maelstrom style is applied

[krupajnanda]

Bug Report

Description

Missing style icon for link, heading and caption when Maelstrom style is applied.

Environment

• WordPress: 6.4.3
• PHP: 8.0.30-dev
• Server: PHP.wasm
• Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
• Browser: Chrome 121.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.0
• MU Plugins:
  • 0-playground.php
  • 0-sqlite.php
  • WordPress WXZ Exporter 0.1
• Plugins:
  • Create Block Theme 1.13.8
  • Debug Bar 1.1.4
  • Health Check & Troubleshooting 1.7.0
  • Test Reports 1.1.0
  • User Switching 1.7.3
  • WordPress Importer Git loader 0.8.2

Steps to Reproduce

1. Go to Themes > Editor
2. Click on any heading or paragraph
3. Now, open a style
4. Click on Browse Style
5. Select Maelstrom style
6. Now, go back
7. Click on Typography
8. Observe that style icons are missing for the link, heading and caption

Expected Results

1. ✅ It should show the style icons

Actual Results

1. ❌ The style icons should be present regardless of any style being selected

Additional Notes

• This only happens with Maelstrom style. However, when I inspect it using DevTools, I see it has a white colour to it and hence they are not visible. It should be made in such a way that it does not seem they are missed.

Supplemental Artifacts

Add as Attachment

[sabernhardt]

The preview squares are not missing with Maelstrom, but they have white text without a background color. The same issue can occur in other theme styles that have light text against a dark background.

• Twenty Twenty-Four's Onyx style is not much more visible with a #f9f9f9 text color.
• Twenty Twenty-Three's Aubergine style has white text without a background for the Text and Link previews. The Text tries to add a background with an undefined CSS custom property, and the Link preview does not have any background property.

[sabernhardt]

light text without background for Links and Headings in Twenty Twenty-Four's Onyx style

[sabernhardt]

white text without background for Text and Links in Twenty Twenty-Three's Aubergine style

[krupajnanda]

Hi @sabernhardt 👋

Thank you for taking the time to verify and share details regarding the other themes as well.

As I mentioned in the issue description as well it has some issues with the bg. When it is inspected it is visible. Shouldn't we consider adding a fix for it?

[sabernhardt]

The background color seems to need a fix in the editor. Could you open an issue in the Gutenberg repository?
​https://github.com/WordPress/gutenberg/issues/new/choose

[krupajnanda]

@sabernhardt

Thank you for suggesting to open a new issue on Gutenberg repo.

Here is the link - ​https://github.com/WordPress/gutenberg/issues/59338

[sabernhardt]

Thanks! I'll close this as reported-upstream.