How to Use Custom Attributes

Custom Attributes will give you the ability to add custom HTML attributes on Stackable blocks. This feature is useful for adding:

  • Custom data-* attributes
  • Accessibility attributes like title, aria-label, or aria-labelledby

How to Use Custom Attributes

Add a Stackable block to your page / post, and then navigate to the Advanced tab, then look for the Custom Attributes option

To add a custom attribute, type in the attribute name, followed by the value. For example: aria-label=“Label”

You can also add multiple attributes (separated by spaces)The attributes provided will be added to the parent HTML document of the block. The field automatically sanitizes the input, so invalid attributes will not be included.

Using Block Attributes as Values in your Custom Attributes

Block attribute values can be used in your Custom Attributes. To do this, type in the block attribute wrapped in % signs.

For example, adding aria-label="%text%" will display the current text attribute of the block. 

To get the list of possible attributes for each Stackable block, you will need to enter this command in your browser's developer console. For example, to get all the possible attributes of our card block, you can type in:'core/blocks').getBlockType('ugb/card').attributes

Restricted Attribute Names

There are a few attribute names which are not allowed. The following attribute names cannot be used in this option since they might interfere with how the block or editor work:

  • class
  • className
  • style
  • id
  • ref
  • dangerouslySetInnerHTML

Custom Attribute Examples

  • You can add an id to a heading block (e.g. product-features, then reference it in a container block aria-labelledby="product-features"
  • You can add any custom data (e.g. data-id="12345" or data-my-custom-attribute="some-value"
  • You can use it in conjunction with CSS's attr() function to create some great looking effects
  • You can add aria-label="something"