Button: Gradient backgrounds applied in Global Styles cannot be overridden with solid colors at the block level

[ndiego]

Description

If you apply a gradient background to Button blocks in Global Styles → Blocks → Button (or theme.json), users cannot override this gradient background with a solid background color at the block level. They can override it with another gradient background, which makes sense from a technical standpoint but is very unintuitive from a user perspective. You should be able to set the background at the block level, whether you want to apply a gradient or solid color.

Step-by-step reproduction instructions

1. Set a gradient background on the Button block in Global Styles and save.
2. Open a new post and add the Buttons block, and add a Button.
3. Confirm that the Button is displaying the gradient background set in Global Styles.
4. Try setting a block-level solid background color. Confirm nothing changes.
5. Now add a block-level gradient background color. Confirm that the new gradient is applied.

Screenshots, screen recording, code snippet

Global Styles	Block-level (Solid)	Block-level (Gradient)

Environment info

• WordPress 6.7
• With and without Gutenberg

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

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[im3dabasia]

I’ve tested this issue and can confirm it’s a bug. A gradient background set in Global Styles cannot be overridden with a solid color at the block level.