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!

Time saver

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

Markup by Attribute for WooCommerce vs Block Data Attribute