is there a way to add gradients support for background in the core/heading block?

I've tried to

  • extend settings.supports with gradients: true
  • add gradients to theme json:
"blocks": {
      "core/heading": {
        "color": {
          "gradients": [
              "slug": "dark-gradient-with-stripes",
              "name": "Dark gradient with stripes",
              "gradient": "linear-gradient(to left bottom, rgba(125, 134, 152, .2) 15%, rgba(0, 0, 0, 0) 92.5%)"

Your help is really appreciated.

  • to the text or the background? Have you tried wrapping it in a cover or group block?
    – Tom J Nowell
    Feb 9, 2022 at 19:45
  • To the background. I don't want to wrap it I'd rather modify the block settings - it's a custom design and it would be not too user-friendly. And to be honest, why I can set up a solid background, but not a gradient? It doesn't make any sense. Feb 10, 2022 at 10:06
  • 1
    because nobody implemented the gradient, the options in theme.json aren't generic interchangeable features that can be applied to any block, and declaring that a block has gradient support in theme.json doesn't enable or insert that functionality into a block, code needs writing at the other end to read and use that configuration, it's purely a configuration file
    – Tom J Nowell
    Feb 10, 2022 at 10:55
  • Yeah, I see, that's the problem of Gutenberg - every component is developed on its own instead of having a source class with those features that will be applied to the child component... I'll note it down, if I have some remaining time on the project, I'll try to add it to core/heading block. Feb 10, 2022 at 13:16
  • 1
    blocks already share a lot of components, but what you seek is not feasible, and in some cases undesirable, as I mentioned assemble/compose your blocks, don't modify them. One could argue the solution here if UX is a concern is to provide a block pattern
    – Tom J Nowell
    Feb 10, 2022 at 13:59

1 Answer 1


No, currently gradient support in the heading block has not been implemented.

You can declare that it supports it in theme.json or via supports, but there is nothing in the block to read that data in and use it. Gradient support has to be built into a block, it can't be inserted arbitrarily.

The closest you can get is with predefined variants or styles, a custom block, or wrapper the heading in a group/cover block. Composition not modification.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.