As WordPress developers and site creators, we love the flexibility the Block Editor (Gutenberg) offers us. Whether we’re building custom blocks or fine-tuning user experiences, understanding how Block Supports work is essential.

In this blog, we’ll explore what Block Supports are, how to use them, and how can someone implement it in our own custom blocks.

What Are Block Supports?

Block Supports are built-in features provided by the WordPress Block Editor that we can opt into when developing our custom blocks. These supports allow us to enable additional UI controls — like typography, color, spacing, borders, and more — directly in the editor sidebar for our blocks.

This means we don’t have to manually code UI panels or handle CSS ourselves for many of these features — WordPress does that for us when we enable supports.

Why Use Block Supports?

• We save development time.
• We make our blocks consistent with core WordPress blocks.
• We give users a better editing experience with built-in controls.

How to Use Block Supports in a Custom Block

Let’s walk through how to add block supports to a custom block. This involves registering our block using registerBlockType and adding the supports key.

// my-custom-block.js
import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType('myplugin/my-custom-block', {
    title: __('My Custom Block', 'myplugin'),
    icon: 'smiley',
    category: 'design',
    supports: {
        color: {
            text: true,
            background: true,
        },
        spacing: {
            margin: true,
            padding: true,
        },
        typography: {
            fontSize: true,
            lineHeight: true,
        },
        border: true,
        align: ['wide', 'full'],
    },
    edit({ attributes }) {
        const blockProps = useBlockProps();

        return (
            <div {...blockProps}>
                <p>This is our custom block with block supports.</p>
            </div>
        );
    },
    save({ attributes }) {
        const blockProps = useBlockProps.save();
        return (
            <div {...blockProps}>
                <p>This is our custom block with block supports.</p>
            </div>
        );
    }
});

Common Block Supports We Can Use

Here’s a quick overview of common supports:

Support	Description
color	Enables text/background color controls
typography	Adds font size and line-height controls
spacing	Adds padding and margin settings
border	Allows setting border radius, width, etc
align	Enables block alignment (wide/full)
html	Allows editing the block’s HTML

CSS Variables: When using block supports, the editor outputs inline styles or CSS variables. Always check the frontend for consistent rendering.

Opt-Out: If we want to disable certain supports for a core block (e.g., removing color options from the Paragraph block), we can use block filters like blocks.registerBlockType.

// Disable color support for Paragraph block
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'myplugin/remove-paragraph-supports',
    (settings, name) => {
        if (name === 'core/paragraph') {
            settings.supports = {
                ...settings.supports,
                color: false,
            };
        }
        return settings;
    }
);

Conclusion

Block supports are a powerful and underused part of the WordPress block development toolkit. By enabling them, we create more flexible, future-proof, and user-friendly blocks — without reinventing the wheel.