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

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay