Block supports enable built-in WordPress features for your block. They add UI controls and automatically handle CSS generation.

Basic Usage

{
    "supports": {
        "align": true,
        "color": {
            "background": true,
            "text": true
        }
    }
}

Alignment

align

Enable block alignment options:

{
    "supports": {
        "align": true
    }
}

Adds alignment toolbar with: left, center, right, wide, full.

Restrict to specific alignments:

{
    "supports": {
        "align": [ "wide", "full" ]
    }
}

Set default alignment:

{
    "attributes": {
        "align": {
            "type": "string",
            "default": "wide"
        }
    },
    "supports": {
        "align": true
    }
}

alignWide

Allow wide and full alignments (default: true):

{
    "supports": {
        "alignWide": false
    }
}

Note: Theme must also declare wide-alignment support.

Color

color

Enable color controls:

{
    "supports": {
        "color": {
            "background": true,
            "text": true,
            "link": true,
            "gradients": true,
            "heading": true,
            "button": true,
            "enableContrastChecker": true
        }
    }
}

color.background

Background color picker:

{
    "supports": {
        "color": {
            "background": true
        }
    }
}

Applies class: has-{color-slug}-background-color
Applies style: background-color

color.text

Text color picker:

{
    "supports": {
        "color": {
            "text": true
        }
    }
}

Applies class: has-{color-slug}-color
Applies style: color

color.link

Link color picker:

{
    "supports": {
        "color": {
            "link": true
        }
    }
}

color.gradients

Gradient picker:

{
    "supports": {
        "color": {
            "gradients": true
        }
    }
}

Applies class: has-{gradient-slug}-gradient-background

color.heading

Heading text color:

{
    "supports": {
        "color": {
            "heading": true
        }
    }
}

color.button

Button colors:

{
    "supports": {
        "color": {
            "button": true
        }
    }
}

color.enableContrastChecker

Show contrast warnings:

{
    "supports": {
        "color": {
            "background": true,
            "text": true,
            "enableContrastChecker": true
        }
    }
}

Disable specific color support:

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

__experimentalDuotone

Apply duotone filter to images:

{
    "supports": {
        "color": {
            "__experimentalDuotone": "img"
        }
    }
}

Value is a CSS selector within the block.

Typography

typography

Enable typography controls:

{
    "supports": {
        "typography": {
            "fontSize": true,
            "lineHeight": true,
            "textAlign": true,
            "fontFamily": true,
            "fontWeight": true,
            "fontStyle": true,
            "textTransform": true,
            "textDecoration": true,
            "letterSpacing": true,
            "writingMode": true
        }
    }
}

typography.fontSize

Font size picker:

{
    "supports": {
        "typography": {
            "fontSize": true
        }
    }
}

Applies class: has-{size-slug}-font-size
Applies style: font-size

typography.lineHeight

Line height control:

{
    "supports": {
        "typography": {
            "lineHeight": true
        }
    }
}

typography.textAlign

Text alignment buttons:

{
    "supports": {
        "typography": {
            "textAlign": true
        }
    }
}

Restrict alignments:

{
    "supports": {
        "typography": {
            "textAlign": [ "left", "center", "right" ]
        }
    }
}

typography.fontFamily

Font family picker:

{
    "supports": {
        "typography": {
            "fontFamily": true
        }
    }
}

typography.fontWeight

Font weight selector:

{
    "supports": {
        "typography": {
            "fontWeight": true
        }
    }
}

typography.fontStyle

Italic/normal toggle:

{
    "supports": {
        "typography": {
            "fontStyle": true
        }
    }
}

typography.textTransform

Uppercase/lowercase/capitalize:

{
    "supports": {
        "typography": {
            "textTransform": true
        }
    }
}

typography.textDecoration

Underline/strikethrough:

{
    "supports": {
        "typography": {
            "textDecoration": true
        }
    }
}

typography.letterSpacing

Letter spacing control:

{
    "supports": {
        "typography": {
            "letterSpacing": true
        }
    }
}

typography.writingMode

Vertical text support:

{
    "supports": {
        "typography": {
            "writingMode": true
        }
    }
}

Spacing

spacing

Enable spacing controls:

{
    "supports": {
        "spacing": {
            "margin": true,
            "padding": true,
            "blockGap": true
        }
    }
}

spacing.margin

Margin controls:

{
    "supports": {
        "spacing": {
            "margin": true
        }
    }
}

Restrict to specific sides:

{
    "supports": {
        "spacing": {
            "margin": [ "top", "bottom" ]
        }
    }
}

spacing.padding

Padding controls:

{
    "supports": {
        "spacing": {
            "padding": true
        }
    }
}

Restrict to specific sides:

{
    "supports": {
        "spacing": {
            "padding": [ "top", "bottom", "left", "right" ]
        }
    }
}

spacing.blockGap

Gap between child blocks:

{
    "supports": {
        "spacing": {
            "blockGap": true
        }
    }
}

Restrict to axis:

{
    "supports": {
        "spacing": {
            "blockGap": [ "horizontal", "vertical" ]
        }
    }
}

Dimensions

dimensions

Enable dimension controls:

{
    "supports": {
        "dimensions": {
            "minHeight": true,
            "aspectRatio": true
        }
    }
}

dimensions.minHeight

Minimum height control:

{
    "supports": {
        "dimensions": {
            "minHeight": true
        }
    }
}

dimensions.aspectRatio

Aspect ratio selector:

{
    "supports": {
        "dimensions": {
            "aspectRatio": true
        }
    }
}

Border

__experimentalBorder

Enable border controls:

{
    "supports": {
        "__experimentalBorder": {
            "color": true,
            "radius": true,
            "style": true,
            "width": true
        }
    }
}

Shorthand for all:

{
    "supports": {
        "__experimentalBorder": true
    }
}

Applies styles:

• border-color
• border-radius
• border-style
• border-width

Position

position

Enable position controls:

{
    "supports": {
        "position": {
            "sticky": true
        }
    }
}

position.sticky

Sticky positioning:

{
    "supports": {
        "position": {
            "sticky": true
        }
    }
}

Layout

layout

Enable layout controls for child blocks:

{
    "supports": {
        "layout": true
    }
}

With specific options:

{
    "supports": {
        "layout": {
            "allowSwitching": true,
            "allowEditing": true,
            "allowInheriting": true,
            "allowSizingOnChildren": true,
            "allowVerticalAlignment": true,
            "allowJustification": true,
            "allowOrientation": true,
            "allowCustomContentAndWideSize": true,
            "default": {
                "type": "flex",
                "flexWrap": "nowrap"
            }
        }
    }
}

Layout types:

• constrained – Width-constrained with content/wide sizes
• flex – Flexbox layout
• grid – CSS Grid layout (experimental)

Interactivity

interactivity

Enable Interactivity API:

{
    "supports": {
        "interactivity": true
    }
}

With interactive namespace:

{
    "supports": {
        "interactivity": {
            "clientNavigation": true,
            "interactive": true
        }
    }
}

HTML Features

html

Allow editing block as HTML (default: true):

{
    "supports": {
        "html": false
    }
}

customClassName

Allow custom CSS class (default: true):

{
    "supports": {
        "customClassName": false
    }
}

className

Add default block class (default: true):

{
    "supports": {
        "className": false
    }
}

anchor

Enable HTML anchor/ID field:

{
    "supports": {
        "anchor": true
    }
}

Other Supports

multiple

Allow multiple instances (default: true):

{
    "supports": {
        "multiple": false
    }
}

reusable

Allow converting to reusable block (default: true):

{
    "supports": {
        "reusable": false
    }
}

lock

Allow locking the block (default: true):

{
    "supports": {
        "lock": false
    }
}

inserter

Show in block inserter (default: true):

{
    "supports": {
        "inserter": false
    }
}

renaming

Allow renaming the block (default: true):

{
    "supports": {
        "renaming": false
    }
}

splitting

Allow splitting block with Enter (WordPress 6.5+):

{
    "supports": {
        "splitting": true
    }
}

background

Enable background image controls (WordPress 6.4+):

{
    "supports": {
        "background": {
            "backgroundImage": true,
            "backgroundSize": true
        }
    }
}

shadow

Enable box shadow controls:

{
    "supports": {
        "shadow": true
    }
}

filter

Enable CSS filter controls:

{
    "supports": {
        "filter": {
            "duotone": true
        }
    }
}

Selectors for Supports

Override which element receives support styles:

{
    "supports": {
        "color": {
            "text": true,
            "background": true
        },
        "typography": {
            "fontSize": true
        }
    },
    "selectors": {
        "root": ".wp-block-my-plugin-card",
        "color": {
            "text": ".wp-block-my-plugin-card__content"
        },
        "typography": {
            "root": ".wp-block-my-plugin-card__title"
        }
    }
}

Complete Example

{
    "supports": {
        "align": [ "wide", "full" ],
        "anchor": true,
        "className": true,
        "color": {
            "background": true,
            "text": true,
            "link": true,
            "gradients": true,
            "enableContrastChecker": true
        },
        "spacing": {
            "margin": [ "top", "bottom" ],
            "padding": true,
            "blockGap": true
        },
        "typography": {
            "fontSize": true,
            "lineHeight": true,
            "textAlign": true,
            "fontFamily": true
        },
        "__experimentalBorder": {
            "color": true,
            "radius": true,
            "style": true,
            "width": true
        },
        "dimensions": {
            "minHeight": true
        },
        "layout": {
            "default": {
                "type": "constrained"
            }
        },
        "shadow": true,
        "html": false,
        "multiple": true
    }
}

Using Block Props

Support styles are automatically applied via useBlockProps:

import { useBlockProps } from '@wordpress/block-editor';

export default function Edit( { attributes } ) {
    const blockProps = useBlockProps();
    
    // blockProps includes:
    // - className (with support classes)
    // - style (with support inline styles)
    
    return (
        <div { ...blockProps }>
            Content here
        </div>
    );
}

export function Save( { attributes } ) {
    const blockProps = useBlockProps.save();
    
    return (
        <div { ...blockProps }>
            Content here
        </div>
    );
}

Dynamic Blocks

For dynamic blocks, use get_block_wrapper_attributes():

<?php
// render.php
$wrapper_attributes = get_block_wrapper_attributes();
?>
<div <?php echo $wrapper_attributes; ?>>
    <?php echo esc_html( $attributes['content'] ); ?>
</div>

With additional classes:

<?php
$wrapper_attributes = get_block_wrapper_attributes( [
    'class' => 'my-custom-class',
    'data-id' => $attributes['id'],
] );
?>

Checking Support Values in PHP

$block_type = WP_Block_Type_Registry::get_instance()->get_registered( 'my-plugin/block' );

// Check if block supports color
if ( $block_type->supports['color']['background'] ?? false ) {
    // Block supports background color
}

// Get all supports
$supports = $block_type->supports;