How to Create and Use Custom supports in Gutenberg Blocks

[theaminuli]

Hello Gutenberg Team 👋,

I'm exploring the extensibility of the supports API in Gutenberg and I have a question regarding the creation and usage of custom block supports.

From the documentation (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/), I understand how core-supported features like align, color, or typography work.

However, I want to go a step further and define my own custom support, for example:

supports: { myCustomSupport: true, }

I’d like to:

• Register and hook into this custom support.
• Handle it similarly to how __experimentalBorder or typography is handled internally.
• Access the support value in both the editor and front-end rendering logic.

Could you please guide me on:

• Whether this is currently supported?
• If yes, how can I implement a custom block support handler?
• If no, is this feature being considered for future support?

A code example or reference to any internal implementation would be incredibly helpful.
Thanks for your amazing work on Gutenberg and for making WordPress development so powerful! 🙌
Best regards,
@theaminuli

[Mamaduka]

I think similar types of questions are more suitable for GitHub discussions.

[talldan]

@theaminuli I think it is possible for you to implement custom supports, but unfortunately I'm not aware of any guides.

My understanding is that most of the block supports features are implemented in this folder:
https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/hooks

So looking at the source code might be the best way of learning.

In the past, a lot of these have used regular editor block filters (https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#editor) like:

• blocks.registerBlockType to add extra attributes to a block (https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-registerblocktype)
• editor.BlockEdit to add extra UI to blocks (https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-getblockattributes)
• blocks.getSaveElement to modify the saved markup (https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/#blocks-getsaveelement)

And probably others too, so there's no reason you can't do the same. I think there might be a slightly newer API now, I don't know it as well or whether it's available for extenders. Maybe others can help answer.

[t-hamano]

@theaminuli Core blocks and custom blocks are essentially the same. This also applies to block support, and it's possible to add your own support.

However, to make your custom block support work properly in the same way as core blocks, you need to take advantage of a wide range of APIs and hooks, which requires deep knowledge of the block architecture, and, as far as I know, no tutorials exist.

You'll need to understand the sources and documentation presented in this comment.