Skip to content

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

Open

Description

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)
Image Image Image

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Block] ButtonsAffects the Buttons Block[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions