How to Create and Use Custom supports in Gutenberg Blocks

[theaminulai]

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.

[theaminulai]

Thank you so much @talldan and @t-hamano for your valuable guidance and explanations 🙌

After exploring the Gutenberg internals, hooks, and support architecture deeply, I successfully completed a full custom block support implementation and documented the entire process as a complete development guide/tutorial.

This guide covers the full workflow — from registering custom supports to editor integration, UI controls, front-end rendering, and animation handling.

Task:
Developer Blog Content Issue #413

Repository:
animate-support

Special thanks again to both of you for pointing me in the right direction. Your comments helped me understand the Gutenberg architecture much more deeply ❤️

I would really appreciate it if you could review the task and share your feedback.