Button hover color doesn't work in block color settings

[poonam279]

Description:

I have checked this issue with cover block, heading, and paragraph.

The colors that we set in customizer settings for link, link hover, button color, and button hover color, etc appear as the recent color options in a block. When we create a block and choose a color from the available color options, all the colors work fine except the button hover color.
It shows the chosen color in the backend but the color is black on the frontend/

How to reproduce:

1. Go to Appearance > Customize > Buttons and choose button and button hover color
2. Create a page and use any block where you can use the color settings option. Here for example, I am using a cover block.
3. Use button hover color as the background of cover block
4. Publish the page and check the output on the front page.

Expected behaviour:

The right color should appear on the frontpage.

Current behaviour:

If button hover color is chosen, it shows black color on the frontpage

Reference:

Screencast >> https://www.loom.com/share/39748c7b8613406b98fcadef0e0bd234

Technical info

• WordPress version: 5.4.2
• Theme version: 2.7.2

[rodica-andronache]

@cristian-ungureanu saw something related to this ( that's happening on development too)
If I create a Cover with the default blue color, and go over to Buttons and add a custom Background color for the Primary Button, the Cover automatically changes its color to that one.
https://www.loom.com/share/3a1c64ac6236426abbdca8bf30b73d63

[cristian-ungureanu]

@rodica-andronache that's how those colors work. @abaicus suggested that we can add a notice or something explaining how those colors work. It's a cool feature if you know how to work with it but I agree it can be confusing.