DEV Community

Cover image for Gutenberg cheatsheet – Block's `supports` property
Honza
Honza

Posted on • Originally published at crs1138.me

2 2

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>
    );
}
Enter fullscreen mode Exit fullscreen mode

Save function:

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

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'
    );
}
Enter fullscreen mode Exit fullscreen mode

Cover image by Emma Plunkett – The Missing Peace

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay