Gutenberg cheatsheet – Block's `supports` property

Gutenberg's documentation has come a long way and it's getting better and better. However, now and then I find myself missing a quick overview of the properties. Thus the idea of a cheatsheet…

Here's a short overview of the individual properties of the supports object for details refer to developer's documentation:

• anchor - boolean: false. It doesn't work with dynamic blocks (yet).
• align - boolean/array: false No default alignment is assigned. If you need to set a default value, declare the align attribute with its default.
• alignWide - boolean: false Disable wide alignment for a single block.
• className - boolean: true By default, the class .wp-block-your-block-name is added to the root element of your saved markup.
• color - Object: null This value signals that a block supports some of the properties related to colour. When it does, the block editor will show UI controls for the user to set their values.
• customClassName - boolean: true Controls whether the field for custom class name is displayed in the panel inspector.
• defaultStylePicker - boolean: true When the style picker is shown, the user can set a default style for a block type based on the block’s currently active style.
• html - boolean: true By default, a block’s markup can be edited individually.
• inserter - boolean: true To hide a block so it can only be inserted programmatically, set the inserter: false.
• multiple - boolean: true If you want a block to be inserted into each post only once.
• reusable - boolean: true You can prevent a block from being converted into a reusable block.
• spacing - Object: null You can enable some of the CSS style properties related to spacing. Good for margin and padding overrides, if the theme declares support. Subproperties:
  • margin - boolean/array: false
  • padding - boolean/array: false
• typography - Object: null When enabled, the block editor will show a typography UI. Subproperties:
  • fontSize - boolean: false
  • lineHeight - boolean: false

The values of the attributes added by the supports object will be added to the object returned from the useBlockProps() hook.

Within the Edit function:

function Edit() {
    const blockProps = useBlockProps();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

Save function:

function Save() {
    const blockProps = useBlockProps.save();
    return (
        <div {...blockProps}>Lorem ipsum</div>
    );
}

For dynamic and server-side rendered blocks these extra attributes can get rendered in the render_callback in PHP using the function get_block_wrapper_attributes(). It returns a string containing all the generated properties and needs to get output in the opening tag of the wrapping block element.

function render_block() {
    $wrapper_attributes = get_block_wrapper_attributes();
    return sprintf(
        '<div %1$s>%2$s</div>',
        $wrapper_attributes,
        'Lorem ipsum'
    );
}

Cover image by Emma Plunkett – The Missing Peace