Make WordPress Core

Opened 3 months ago

Closed 3 months ago

#60617 closed defect (bug) (reported-upstream)

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

Reported by: krupajnanda's profile krupajnanda Owned by:
Milestone: Priority: normal
Severity: minor Version: 6.4.3
Component: Editor Keywords: has-testing-info has-screenshots
Focuses: ui Cc:

Description

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

Attachments (4)

Links, heading and caption.jpg (232.4 KB) - added by krupajnanda 3 months ago.
missing style icons.mov (4.3 MB) - added by krupajnanda 3 months ago.
2024-Onyx-typography-elements.png (3.9 KB) - added by sabernhardt 3 months ago.
light text without background for Links and Headings in Twenty Twenty-Four's Onyx style
2023-Aubergine-typography-elements.png (3.3 KB) - added by sabernhardt 3 months ago.
white text without background for Text and Links in Twenty Twenty-Three's Aubergine style

Change History (9)

#1 @sabernhardt
3 months ago

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
3 months ago

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

@sabernhardt
3 months ago

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

#2 @krupajnanda
3 months ago

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?

#3 @sabernhardt
3 months ago

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

#4 @krupajnanda
3 months ago

@sabernhardt

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

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

#5 @sabernhardt
3 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

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

Note: See TracTickets for help on using tickets.