Add custom HTML data attributes to core WordPress blocks directly from the block editor sidebar — no coding required.

Saji

Mahdi Yazdani

MyPreview

<p><strong>Block Data Attribute</strong> lets you attach custom <code>data-*</code> attributes to core WordPress blocks straight from the block settings sidebar. No theme edits, no custom code, no block validation errors.</p>
<p>data-* attributes are a standard HTML mechanism for storing extra information on elements. They are widely used for JavaScript interactions, CSS targeting, analytics tagging, accessibility enhancements, and third-party integrations. This plugin brings that capability into the block editor in a clean, structured way.</p>
<h4>Key Features</h4>
<ul>
<li>Add any number of <code>data-*</code> attributes to supported blocks.</li>
<li>Name and value fields with input sanitisation built in.</li>
<li>Drag-and-drop reordering of attributes within the sidebar panel.</li>
<li>Attributes are saved directly in block markup — no post meta, no database overhead.</li>
<li>Fully extensible: register additional allowed block types via a JavaScript filter.</li>
<li>No build step required — ships as a single plain JavaScript file.</li>
<li>Translation-ready.</li>
</ul>
<h4>Supported Blocks</h4>
<p>Out of the box the following core blocks support custom data attributes:</p>
<ul>
<li><code>core/button</code></li>
<li><code>core/column</code></li>
<li><code>core/columns</code></li>
<li><code>core/group</code></li>
<li><code>core/heading</code></li>
<li><code>core/paragraph</code></li>
</ul>


Block Data Attribute

Saved me from having to build it myself. Surprised this still isn't built into native block functionality. Thank you!

Alternatives to Block Data Attribute

Top alternatives