Gutenberg cheatsheet – Block's `supports` property

Gutenberg cheatsheet – Block's `supports` property

·

3 min read

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 color. 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