Directory

Style icon for link, heading and caption needs improvement when Maelstrom style is applied from editor · Issue #59338 · WordPress/gutenberg · GitHub
Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style icon for link, heading and caption needs improvement when Maelstrom style is applied from editor #59338

Closed
kjnanda opened this issue Feb 24, 2024 · 4 comments · Fixed by #59347
Closed

Style icon for link, heading and caption needs improvement when Maelstrom style is applied from editor #59338

kjnanda opened this issue Feb 24, 2024 · 4 comments · Fixed by #59347
Assignees
@t-hamano
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@kjnanda
Copy link

kjnanda commented Feb 24, 2024

Description

When the Maelstrom style is applied there seems an issue with bg style for Link, heading and caption. 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 that they are missed.

Step-by-step reproduction instructions

  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 for the link, heading and caption

Screenshots, screen recording, code snippet

Screenscap Screenshot
https://github.com/WordPress/gutenberg/assets/15173772/36d55565-00cf-4987-bb7a-25cae4b41517 Links, heading and caption (1)

Environment info

  • 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

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes
@kjnanda kjnanda added the [Type] Bug An existing feature does not function as intended label Feb 24, 2024
@t-hamano
Copy link
Contributor

Thanks for the report. This problem can also be reproduced with the "Onyx" style:

elements

This shouldn't be a theme style specific issue. Perhaps if the element is anything other than "Text", no actual background color is applied to the icon, so if it's white text, the text isn't visible.

I think the background color should be applied to the Links, Headings, Captions elements as well as the "Text" element.

@t-hamano t-hamano added the Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json label Feb 24, 2024
@t-hamano t-hamano mentioned this issue Feb 25, 2024
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Feb 25, 2024
@annezazu
Copy link
Contributor

annezazu commented Feb 26, 2024 •
edited

I can replicate this with 6.5 beta 2 so adding to the 6.5 board.

@t-hamano
Copy link
Contributor

Note: This issue was not first introduced in WP6.5 and can be reproduced in WP6.4.3.

@colorful-tones
Copy link
Member

I’m assuming that “Maelstrom” is a Style Variation for the Twenty Twenty-Four theme? If so, maybe we can update the testing instructions to explicitly call this out and save a little confusion and additional cognitive friction please?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@t-hamano t-hamano

Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Global Syles: Apply fallback background color to typography elements WordPress/gutenberg
4 participants
@colorful-tones @kjnanda @annezazu @t-hamano