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.

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.

• block-editor

• to the text or the background? Have you tried wrapping it in a cover or group block? – Tom J Nowell ♦ Commented 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. – Karolína Vyskočilová Commented 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 ♦ Commented 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. – Karolína Vyskočilová Commented 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 ♦ Commented 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.