Cover block gradient overlay has a black background color

[webmandesign]

Description

When a theme preset gradient is set as an overlay, the overlay background color is set to black by default Cover block styles.

This causes issues, when a gradient is set with a (semi)transparent color stop and gradient is provided as a theme preset. (An example can be seen in the intro section of the page at https://themedemos.webmandesign.eu/francesca/)

When gradient is user defined in editor, this issue does not occur as inline background: gradient(here) style is being applied, which effectively overrides Cover block default styles.

Step-by-step reproduction instructions

1. Use a theme that contains gradient presets with transparent color stops. Or add such preset to your theme (not FSE theme) following https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-gradient-presets instructions.
2. Create a page and add Cover block in its content.
3. Set a background image for the Cover block and set an overlay to use a theme gradient with a transparent color stop.
4. You should see black color instead of the transparent stop in the Cover block overlay both in editor and in front-end.

Screenshots, screen recording, code snippet

Environment info

• WordPress 5.9
• No Gutenberg plugin

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