Gutenberg Custom Block: supports color

  • Hi there,

    I need background and text color for a custom Gutenberg block. In the supports object of the block I can set color support.

    Is there documentation available on what to do to get this working? Simply adding the support object is not enough:

    supports: {
 color: {
   background: true,
   gradient: false,
   text: true,
 },
}

    In my opinion with the supports object set correctly I don’t have to implement the colors via PanelColorSettings, or am I wrong here?

    Regards,
    Marcus

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @marcuskober ,

    The supports: object already defaults background and text to true and gradient to false. There’s no need to add this to your block register code if you just want the defaults.

    If you wanted to override the defaults to turn off background and text or turn on gradient, then you’d need to add the supports: object with the appropriate property settings.

    To add a colour picker to your InspectorControls (for example), you should be able to add a ColorPicker element to your PanelRow in the editor.

    Here’s an example.

    https://github.com/marklchaves/will-work-for-ko-fi/blob/82b30df264c01a78c8f1856c81b451b9b3185ee1/src/block/block.js#L132

    Cheers,

    mark

    Thread Starter Marcus Kober

    (@marcuskober)

    Hi @mlchaves,

    thanks for your response.

    What bugs me is the fact that when I set anchor to true in supports, my custom block gets the anchor control automatically. So why doesn’t that apply to color support?

    Because color in supports defaults to null. So I thought if I declare color support, Gutenberg will show the color controls automatically too.

    Maybe I was wrong here, but I like to know why it behaves like that…

    Regards,
    Marcus

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gutenberg Custom Block: supports color’ is closed to new replies.