Block Supports is the API that allows blocks to declare support for certain features. When enabled, these features register additional attributes and provide UI controls in the editor.
How supports work
Features enabled via supports automatically:
- Add attributes to the block
- Provide UI controls in the editor
- Apply generated properties to the block wrapper
To apply supports, use useBlockProps in JavaScript or get_block_wrapper_attributes() in PHP.
JavaScript
import { useBlockProps } from '@wordpress/block-editor';
function BlockEdit() {
const blockProps = useBlockProps();
return <div { ...blockProps }>Hello World!</div>;
}
function BlockSave() {
const blockProps = useBlockProps.save();
return <div { ...blockProps }>Hello World!</div>;
}
PHP
function render_block() {
$wrapper_attributes = get_block_wrapper_attributes();
return sprintf(
'<div %1$s>%2$s</div>',
$wrapper_attributes,
'Hello World!'
);
}
Available supports
align
Type: boolean | string[]
Default: false
Enables alignment controls. Options: left, center, right, wide, full
{
"supports": {
"align": true
}
}
Or specific alignments:
{
"supports": {
"align": ["left", "right", "full"]
}
}
anchor
Type: boolean
Default: false
Adds a field to define an HTML anchor ID for the block.
{
"supports": {
"anchor": true
}
}
color
Type: object
Default: null
Enables color controls.
color.background
Type: boolean
Default: true (when color is enabled)
{
"supports": {
"color": {
"background": true
}
}
}
color.text
Type: boolean
Default: true (when color is enabled)
{
"supports": {
"color": {
"text": true
}
}
}
color.gradients
Type: boolean
Default: false
{
"supports": {
"color": {
"gradients": true,
"background": false,
"text": false
}
}
}
color.link
Type: boolean
Default: false
{
"supports": {
"color": {
"link": true
}
}
}
Type: boolean
Default: false
Since: WordPress 6.5
{
"supports": {
"color": {
"button": true
}
}
}
color.heading
Type: boolean
Default: false
Since: WordPress 6.5
{
"supports": {
"color": {
"heading": true
}
}
}
spacing
Type: object
Default: null
Enables spacing controls for margin, padding, and block gap.
{
"supports": {
"spacing": {
"margin": true,
"padding": true,
"blockGap": true
}
}
}
Control specific sides:
{
"supports": {
"spacing": {
"margin": ["top", "bottom"],
"padding": true,
"blockGap": ["horizontal", "vertical"]
}
}
}
typography
Type: object
Default: null
typography.fontSize
Type: boolean
Default: false
{
"supports": {
"typography": {
"fontSize": true
}
}
}
typography.lineHeight
Type: boolean
Default: false
{
"supports": {
"typography": {
"lineHeight": true
}
}
}
typography.textAlign
Type: boolean | string[]
Default: false
Since: WordPress 6.6
{
"supports": {
"typography": {
"textAlign": true
}
}
}
Or specific alignments:
{
"supports": {
"typography": {
"textAlign": ["left", "right"]
}
}
}
dimensions
Type: object
Default: null
Since: WordPress 6.2
Enables dimension controls.
{
"supports": {
"dimensions": {
"aspectRatio": true,
"height": true,
"minHeight": true,
"width": true
}
}
}
background
Type: object
Default: null
Since: WordPress 6.5
{
"supports": {
"background": {
"backgroundImage": true,
"backgroundSize": true
}
}
}
shadow
Type: boolean
Default: false
Since: WordPress 6.5
{
"supports": {
"shadow": true
}
}
position
Type: object
Default: null
Since: WordPress 6.2
{
"supports": {
"position": {
"sticky": true
}
}
}
Sticky position only works for root-level blocks.
filter
Type: object
Default: null
filter.duotone
Type: boolean
Default: false
{
"supports": {
"filter": {
"duotone": true
}
},
"selectors": {
"filter": {
"duotone": ".wp-block-image img"
}
}
}
layout
Type: boolean | object
Default: null
Enables layout controls for container blocks.
{
"supports": {
"layout": {
"default": {
"type": "flex"
},
"allowSwitching": true,
"allowVerticalAlignment": true
}
}
}
className
Type: boolean
Default: true
Adds .wp-block-{name} class to the block wrapper.
{
"supports": {
"className": false
}
}
customClassName
Type: boolean
Default: true
Adds a field for users to define a custom className.
{
"supports": {
"customClassName": false
}
}
html
Type: boolean
Default: true
Allows editing the block’s HTML markup.
{
"supports": {
"html": false
}
}
inserter
Type: boolean
Default: true
Shows the block in the Inserter.
{
"supports": {
"inserter": false
}
}
multiple
Type: boolean
Default: true
Allows inserting the block multiple times.
{
"supports": {
"multiple": false
}
}
reusable
Type: boolean
Default: true
Allows converting the block to a reusable block.
{
"supports": {
"reusable": false
}
}
lock
Type: boolean
Default: true
Allows locking/unlocking the block.
{
"supports": {
"lock": false
}
}
renaming
Type: boolean
Default: true
Since: WordPress 6.5
Allows renaming the block.
{
"supports": {
"renaming": false
}
}
visibility
Type: boolean
Default: true
Since: WordPress 6.9
Allows hiding the block.
{
"supports": {
"visibility": false
}
}
interactivity
Type: boolean | object
Default: false
Indicates Interactivity API usage.
{
"supports": {
"interactivity": {
"clientNavigation": true,
"interactive": true
}
}
}
autoRegister
Type: boolean
Default: false
Enables PHP-only blocks to auto-register in the editor.
register_block_type( 'my-plugin/server-block', array(
'render_callback' => 'render_callback',
'supports' => array(
'autoRegister' => true
)
) );
listView
Type: boolean
Default: false
Since: WordPress 7.0
Enables List View panel in the block inspector.
{
"supports": {
"listView": true
}
}
Complete example
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "my-plugin/card",
"title": "Card",
"category": "design",
"supports": {
"align": ["wide", "full"],
"anchor": true,
"color": {
"background": true,
"text": true,
"link": true
},
"spacing": {
"margin": true,
"padding": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"shadow": true
}
}