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.

[carolinan]

Could we solve this everywhere instead of for one block?
#47391
#42105

[yogeshbhutkar]

Could we solve this everywhere instead of for one block?
#47391

Thanks for the suggestion @carolinan, I'll try to solve it everywhere and update the PR.

[yogeshbhutkar]

@carolinan, The default gradient override bug has now been fixed for all the blocks in the latest patch of the PR.

[carolinan]

@yogeshbhutkar I don't think that adding a new class name to a block when there is a background color but no background gradient is the ideal solution.

• This class name is present on the block even if there was no gradient set in the global styles.
• This class name is present on the block even if the theme disables gradients.
• The CSS added to the class name breaks the background image setting (Tested with the group block)

[yogeshbhutkar]

Thank you for pointing that out, @carolinan. I believe I agree with your perspective on the class names approach. Could you suggest any alternative or improved methodologies that I could implement?

[carolinan]

I don't have a solution. There are past discussions here: #32787