How to Create and Use Custom supports in Gutenberg Blocks

[theaminuli]

WordPress/gutenberg#71012

[bph]

Hi there @theaminuli Thank you so much for your topic idea. Please elaborate on your idea for this tutorial. Maybe you can post an outline and what the goal is of such an article. It might also help if you had a certain use case in mind that could be made into code examples.

[theaminuli]

@bph Thanks for the feedback! Here's an outline for a comprehensive tutorial on custom block supports:

Tutorial Outline: Creating Custom Block Supports in Gutenberg
Goal:
Teach developers how to create reusable, support-like functionality for blocks using WordPress's existing infrastructure, following core patterns.

Use Case Example:
A "Reveal Animation" support that adds entrance animations to blocks:

supports: { "__experimentalRevealAnimation": { "enabled": true, "types": ["fadeIn", "slideUp", "bounce"] } }

Tutorial Structure:
1. Understanding Block Supports Architecture

• How core supports work (using the position.php example
• The two-filter pattern: render_block + pre_render_block
• Block support detection with block_has_support()

2. Building a Custom Support Handler

• Following the core pattern from your position.php file
• Attribute handling and validation
• CSS class generation and HTML manipulation

3. Editor Integration

• Adding inspector controls for the custom support
• Using hasBlockSupport() in JavaScript
• Conditional rendering based on support

4. Advanced Features

• Dynamic CSS generation (like the Theme JSON approach in position.php)
• Support inheritance and scoping
• Performance considerations

5. Real-World Implementation Complete code for the "Reveal Animation" support with:

• PHP backend processing
• JavaScript editor controls
• CSS generation
• Block registration examples

This would give developers a practical framework for extending Gutenberg's capabilities while following WordPress best practices. The position.php file is a perfect reference since it shows the exact pattern used by core!

Would this approach work for the tutorial content you're looking for?

[bph]

The topic was approved, and conversation continues on the issue.

• How to Create and Use Custom supports in Gutenberg Blocks #413