{"id":117155,"date":"2020-02-10T23:18:13","date_gmt":"2020-02-10T23:18:13","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/block-data-attribute\/"},"modified":"2026-06-10T14:06:03","modified_gmt":"2026-06-10T14:06:03","slug":"block-data-attribute","status":"publish","type":"plugin","link":"https:\/\/bal.wordpress.org\/plugins\/block-data-attribute\/","author":14490511,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.1.0","stable_tag":"2.1.0","tested":"7.0","requires":"6.0","requires_php":"7.4","requires_plugins":null,"header_name":"Block Data Attribute","header_author":"Mahdi Yazdani","header_description":"This plugin designed with extensibility in mind for data that should be associated with a particular block type but need not have any defined meaning.","assets_banners_color":"272822","last_updated":"2026-06-10 14:06:03","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/mahdiyazdani.com","rating":5,"author_block_rating":0,"active_installs":300,"downloads":6647,"num_ratings":4,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"mahdiyazdani","date":"2020-02-10 23:18:54"},"1.0.1":{"tag":"1.0.1","author":"mahdiyazdani","date":"2020-02-12 16:26:59"},"1.0.2":{"tag":"1.0.2","author":"mahdiyazdani","date":"2020-04-24 23:38:33"},"1.0.3":{"tag":"1.0.3","author":"mahdiyazdani","date":"2020-05-05 17:47:08"},"1.0.4":{"tag":"1.0.4","author":"mahdiyazdani","date":"2020-08-14 11:53:06"},"1.0.5":{"tag":"1.0.5","author":"mahdiyazdani","date":"2020-08-18 19:23:49"},"2.0.0":{"tag":"2.0.0","author":"mahdiyazdani","date":"2022-08-18 19:15:48"},"2.0.1":{"tag":"2.0.1","author":"mahdiyazdani","date":"2022-08-18 19:56:24"},"2.0.2":{"tag":"2.0.2","author":"mahdiyazdani","date":"2026-04-28 09:15:47"},"2.1.0":{"tag":"2.1.0","author":"mahdiyazdani","date":"2026-06-10 14:06:03"}},"upgrade_notice":{"2.1.0":"<p>UI and drag-and-drop improvements; no data migration required when upgrading from 2.x.<\/p>","2.0.0":"<p>Underlying code was refactored significantly. Upgrading from 1.x requires manual data migration.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":4},"assets_icons":{"icon-128x128.jpg":{"filename":"icon-128x128.jpg","revision":2242125,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.jpg":{"filename":"icon-256x256.jpg","revision":2242125,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.jpg":{"filename":"banner-1544x500.jpg","revision":2243297,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.jpg":{"filename":"banner-772x250.jpg","revision":2243297,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2","1.0.3","1.0.4","1.0.5","2.0.0","2.0.1","2.0.2","2.1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":2772255,"resolution":"1","location":"assets","locale":"","width":2658,"height":1898}},"screenshots":{"1":"Block Data Attribute panel in the block editor sidebar showing name\/value pairs with drag-to-reorder handles and the Add attribute button."}},"plugin_section":[],"plugin_tags":[241314,148857,266519,266518,148076],"plugin_category":[],"plugin_contributors":[129056,127215],"plugin_business_model":[],"class_list":["post-117155","plugin","type-plugin","status-publish","hentry","plugin_tags-block-settings","plugin_tags-block-editor","plugin_tags-custom-attribute","plugin_tags-data-attribute","plugin_tags-gutenberg","plugin_contributors-gookaani","plugin_contributors-mahdiyazdani","plugin_committers-mahdiyazdani"],"banners":{"banner":"https:\/\/ps.w.org\/block-data-attribute\/assets\/banner-772x250.jpg?rev=2243297","banner_2x":"https:\/\/ps.w.org\/block-data-attribute\/assets\/banner-1544x500.jpg?rev=2243297","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/block-data-attribute\/assets\/icon-128x128.jpg?rev=2242125","icon_2x":"https:\/\/ps.w.org\/block-data-attribute\/assets\/icon-256x256.jpg?rev=2242125","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/block-data-attribute\/assets\/screenshot-1.png?rev=2772255","caption":"Block Data Attribute panel in the block editor sidebar showing name\/value pairs with drag-to-reorder handles and the Add attribute button."}],"raw_content":"<!--section=description-->\n<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>\n\n<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>\n\n<h4>Key Features<\/h4>\n\n<ul>\n<li>Add any number of <code>data-*<\/code> attributes to supported blocks.<\/li>\n<li>Name and value fields with input sanitisation built in.<\/li>\n<li>Drag-and-drop reordering of attributes within the sidebar panel.<\/li>\n<li>Attributes are saved directly in block markup \u2014 no post meta, no database overhead.<\/li>\n<li>Fully extensible: register additional allowed block types via a JavaScript filter.<\/li>\n<li>No build step required \u2014 ships as a single plain JavaScript file.<\/li>\n<li>Translation-ready.<\/li>\n<\/ul>\n\n<h4>Supported Blocks<\/h4>\n\n<p>Out of the box the following core blocks support custom data attributes:<\/p>\n\n<ul>\n<li><code>core\/button<\/code><\/li>\n<li><code>core\/column<\/code><\/li>\n<li><code>core\/columns<\/code><\/li>\n<li><code>core\/group<\/code><\/li>\n<li><code>core\/heading<\/code><\/li>\n<li><code>core\/paragraph<\/code><\/li>\n<\/ul>\n\n<!--section=installation-->\n<h4>Requirements<\/h4>\n\n<ul>\n<li>WordPress 6.0 or later<\/li>\n<li>PHP 7.4 or later<\/li>\n<li>MySQL 5.6 \/ MariaDB 10.0 or later<\/li>\n<\/ul>\n\n<h4>Automatic installation (recommended)<\/h4>\n\n<ol>\n<li>Log in to your WordPress dashboard and go to <strong>Plugins \u2192 Add New<\/strong>.<\/li>\n<li>Search for <strong>Block Data Attribute<\/strong>.<\/li>\n<li>Click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n<h4>Manual installation<\/h4>\n\n<ol>\n<li>Download the plugin zip from the <a href=\"https:\/\/wordpress.org\/plugins\/block-data-attribute\/\">WordPress plugin directory<\/a>.<\/li>\n<li>Go to <strong>Plugins \u2192 Add New \u2192 Upload Plugin<\/strong>.<\/li>\n<li>Upload the zip file and click <strong>Install Now<\/strong>, then <strong>Activate<\/strong>.<\/li>\n<\/ol>\n\n<p>Alternatively you can upload the unzipped plugin folder to <code>\/wp-content\/plugins\/<\/code> via FTP and activate it from the Plugins screen.<\/p>\n\n<h4>Updating<\/h4>\n\n<p>Automatic updates work via the WordPress dashboard. We still recommend taking a backup before any update.<\/p>\n\n<!--section=faq-->\n<dl>\n<dt id=\"how%20do%20i%20add%20a%20data%20attribute%20to%20a%20block%3F\"><h3>How do I add a data attribute to a block?<\/h3><\/dt>\n<dd><ol>\n<li>Open a page or post in the block editor.<\/li>\n<li>Select a supported block (e.g. a Paragraph or Button block).<\/li>\n<li>Open the block settings sidebar by clicking the <strong>\u2699 Settings<\/strong> icon in the top-right toolbar.<\/li>\n<li>Scroll down to the <strong>Block Data Attribute<\/strong> panel and expand it.<\/li>\n<li>Fill in the <strong>Name<\/strong> and <strong>Value<\/strong> fields. The name will automatically be prefixed with <code>data-<\/code> in the saved HTML.<\/li>\n<li>Click <strong>+ Add attribute<\/strong> to add more pairs as needed.<\/li>\n<li>Save or publish your post.<\/li>\n<\/ol><\/dd>\n<dt id=\"what%20does%20the%20saved%20html%20look%20like%3F\"><h3>What does the saved HTML look like?<\/h3><\/dt>\n<dd><p>A paragraph block with a <code>data-highlight=\"true\"<\/code> attribute would produce:<\/p>\n\n<pre><code>&lt;p data-highlight=\"true\"&gt;Your content here.&lt;\/p&gt;\n<\/code><\/pre><\/dd>\n<dt id=\"which%20blocks%20are%20supported%3F\"><h3>Which blocks are supported?<\/h3><\/dt>\n<dd><p>By default: <code>core\/button<\/code>, <code>core\/column<\/code>, <code>core\/columns<\/code>, <code>core\/group<\/code>, <code>core\/heading<\/code>, and <code>core\/paragraph<\/code>.<\/p><\/dd>\n<dt id=\"can%20i%20add%20support%20for%20other%20blocks%3F\"><h3>Can I add support for other blocks?<\/h3><\/dt>\n<dd><p>Yes. Use the <code>mypreview.blockDataAttributeAllowedBlocks<\/code> JavaScript filter:<\/p>\n\n<pre><code>wp.hooks.addFilter(\n    'mypreview.blockDataAttributeAllowedBlocks',\n    'my-plugin\/extend-allowed-blocks',\n    ( allowedBlocks ) =&gt; [ ...allowedBlocks, 'core\/image', 'core\/list' ]\n);\n<\/code><\/pre><\/dd>\n<dt id=\"will%20adding%20attributes%20break%20my%20blocks%3F\"><h3>Will adding attributes break my blocks?<\/h3><\/dt>\n<dd><p>No. Attributes are stored as part of the block's serialised markup. The plugin uses the <code>blocks.getSaveContent.extraProps<\/code> filter, which is the officially supported WordPress API for this purpose.<\/p><\/dd>\n<dt id=\"is%20the%20plugin%20compatible%20with%20full-site%20editing%20%28fse%29%3F\"><h3>Is the plugin compatible with full-site editing (FSE)?<\/h3><\/dt>\n<dd><p>Yes. The plugin works in any context where the block editor is used, including the Site Editor.<\/p><\/dd>\n\n<\/dl>\n\n<!--section=changelog-->\n<h4>2.1.0<\/h4>\n\n<ul>\n<li>Rewritten as a single-file plain JavaScript build \u2014 no bundler or Composer required.<\/li>\n<li>Improved sidebar UI: consistent field widths, full-width Add attribute button, reserved space for the remove button so layout does not shift.<\/li>\n<li>Fixed drag-and-drop reordering: only the handle icon triggers dragging, leaving text inputs and the remove button fully interactive.<\/li>\n<li>Updated drag handle to a standard 6-dot grid icon.<\/li>\n<li>Bumped minimum WordPress requirement to 7.0.<\/li>\n<\/ul>\n\n<h4>2.0.2<\/h4>\n\n<ul>\n<li>Compatibility with WordPress 6.1.<\/li>\n<\/ul>\n\n<h4>2.0.1<\/h4>\n\n<ul>\n<li>Added missing <code>data-<\/code> prefix to the attribute name output.<\/li>\n<\/ul>\n\n<h4>2.0.0<\/h4>\n\n<ul>\n<li>Support for defining an unlimited number of attributes per block.<\/li>\n<li>Compatibility with WordPress 6.0.<\/li>\n<li>Updated dependencies.<\/li>\n<\/ul>\n\n<h4>1.0.5<\/h4>\n\n<ul>\n<li>Fixed incorrect escaping applied to the data attribute value.<\/li>\n<\/ul>\n\n<h4>1.0.4<\/h4>\n\n<ul>\n<li>Updated dependencies.<\/li>\n<li>Compatibility with WordPress 5.5.<\/li>\n<\/ul>\n\n<h4>1.0.3<\/h4>\n\n<ul>\n<li>Code standards improvements.<\/li>\n<li>Compatibility with WordPress 5.4.1.<\/li>\n<\/ul>\n\n<h4>1.0.2<\/h4>\n\n<ul>\n<li>Code standards improvements.<\/li>\n<li>Compatibility with WordPress 5.4.0.<\/li>\n<\/ul>\n\n<h4>1.0.1<\/h4>\n\n<ul>\n<li>Fixed GitHub repository link.<\/li>\n<li>Updated plugin banner image.<\/li>\n<\/ul>\n\n<h4>1.0.0<\/h4>\n\n<ul>\n<li>Initial release.<\/li>\n<\/ul>","raw_excerpt":"Add custom HTML data attributes to core WordPress blocks directly from the block editor sidebar \u2014 no coding required.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/117155","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=117155"}],"author":[{"embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/mahdiyazdani"}],"wp:attachment":[{"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=117155"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=117155"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=117155"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=117155"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=117155"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/bal.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=117155"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}