Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
908 stars 358 forks source link

Donations block "is-selected" class not grabbing the right color variable on Varia themes #5243

Open AtrumGeost opened 2 years ago

AtrumGeost commented 2 years ago

Quick summary

When having a Varia theme active, the donations block won't provide visual feedback about the selected amount

Steps to reproduce

  1. Activate a Varia-child theme like Morden or Shawburn
  2. Add a Donations block to a page or post
  3. View the page
  4. Notice selecting a donation amount doesn't provide any visual feedback

Notice the CSS code:

Screen Shot on 2021-12-18 at 13:11:03

What you expected to happen

For the box-shadow color to show up: Screen Shot on 2021-12-18 at 13:12:28

What actually happened

No visual cue is provided, maybe the block is pointing to the wrong variable (var(--wp-admin-theme-color))? Screen Shot on 2021-12-18 at 13:13:43

Context

User report: 4618974-zd-woothemes

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

Was able to reproduce on two Varia Child themes:

Browser, operating system and other notes

Tested on:

macOS Monterey 12.0.1 (21A559)

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, easy to implement

Workaround details

Add the following CSS code, be sure to replace HEX-COLOR-CODE with the respective color:

/* Make selection visible on the Donations block | XXXXX-zen/hc */
.wp-block-jetpack-donations .donations__amount.is-selected {
  box-shadow: 0 0 0 1px #fff,0 0 0 3px #HEX-COLOR-CODE;
}
Gustavo-Hilario commented 1 year ago

Another user had this issue here: 6085970-zen. I can also reproduce this on FSE themes now. The user thinks the selected amount should be better highlighted, like the active tabs above them. I also agree with them.

github-actions[bot] commented 1 year ago

Support References

This comment is automatically generated. Please do not edit it.