Varia and Blockbase: Configured background color removes hover effect on button block, default color fine

[arunsathiya]

Quick summary

On certain themes, configuring a background color on the button block removes the hover effect that's visible by default. Removing the color brings back the hover effect.

Steps to reproduce

• Start with a WordPress.com site
• Add a button block to a page.
• Use theme Morden, Blank Canvas or Zoologist (tested 3 so far)
• On the button block, hover over it and you can notice an effect (color dims out)
• Set a custom background color.
• Hover over the button block again, color does not dim out

What you expected to happen

Color dims out even when custom background color is set.

What actually happened

Color does not dim out even when custom background color is set.

Context

Customer report: 4604386-zen.

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

• Morden, Blank Canvas or Zoologist (tested 3 so far but there are likely more affected)
• Twenty Twenty-One is fine for example. Setting a custom background color still dims out on hover.

Browser, operating system and other notes

All.

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

Workaround would be to use CSS but I have not explored that option so far.

[Greatdane]

Confirmed, also happens if you simply change the text color;

https://user-images.githubusercontent.com/5075840/146314869-8e6a5903-0706-48f6-9562-d8e473571262.mov

Also happens on Arbutus, Quadrat and Russell. Perhaps all Blockbase child themes?

[jordesign]

OK - confirmed this happens in both BlockBase and Varia themes - with slight differences.

Varia

• Hover effect no longer works with custom background color set
• Hover effect does still work when custom text color set

Blockbase

• Hover effect no longer works if either custom background or custom text color set.

[KirkwallDay]

Another case here: 35080608-hc

Weirdly some of their old buttons show this issue, the newer ones don't dim the backgorund color but make it black instead.

[rw-ye]

Another report: 5642921-zd-woothemes

[github-actions[bot]]

Support References

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

• [ ] 4604386-zen
• [ ] 5642921-zen
• [ ] 5669300-zen
• [ ] 5889427-zen

[sharonlaker19]

• [ ] 5669300-zen

[jorpdesigns]

Reported in 39790096-hc

• [ ] Follow-up ticket: 5889427-zd-woothemes