Add custom HTML attributes to any Gutenberg block: data-*, class, id, aria, fetchpriority. Dynamic {{variables}} on the front end.

Midnay

NEERAJ K

HTML Attributes Customizer for Blocks adds an HTML attributes panel in the block sidebar. Enter one attribute per line as <code>name="value"</code> (double quotes), or a boolean attribute as a single name (for example <code>inert</code>).
Attributes are stored on the block as JSON objects: <code>htmlbacAttributes</code> and <code>htmlbacInnerAttributes</code> (for example <code>{"fetchpriority":"high","data-nolazy":"0"}</code>). Boolean flags use <code>true</code>.
Merging: Duplicate names on multiple lines are combined. Values merge with spaces (semicolons for <code>style</code>). <code>class</code> merges with the block’s existing classes instead of replacing them.
Variables: Use tokens such as <code>{{post.title}}</code> or <code>{{user.auth_status}}</code> inside quoted values. They are replaced when the block renders on the front end.

Alternatives to HTML Attributes Customizer for Blocks

Top alternatives