=== Block Data Attribute ===
Contributors: mahdiyazdani, gookaani
Tags: data attribute, block editor, gutenberg, custom attribute, block settings
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
Stable tag: 2.1.0
License: GPLv3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

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

== Description ==

**Block Data Attribute** lets you attach custom `data-*` attributes to core WordPress blocks straight from the block settings sidebar. No theme edits, no custom code, no block validation errors.

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.

= Key Features =

* Add any number of `data-*` attributes to supported blocks.
* Name and value fields with input sanitisation built in.
* Drag-and-drop reordering of attributes within the sidebar panel.
* Attributes are saved directly in block markup — no post meta, no database overhead.
* Fully extensible: register additional allowed block types via a JavaScript filter.
* No build step required — ships as a single plain JavaScript file.
* Translation-ready.

= Supported Blocks =

Out of the box the following core blocks support custom data attributes:

* `core/button`
* `core/column`
* `core/columns`
* `core/group`
* `core/heading`
* `core/paragraph`

== Installation ==

= Requirements =

* WordPress 6.0 or later
* PHP 7.4 or later
* MySQL 5.6 / MariaDB 10.0 or later

= Automatic installation (recommended) =

1. Log in to your WordPress dashboard and go to **Plugins → Add New**.
2. Search for **Block Data Attribute**.
3. Click **Install Now**, then **Activate**.

= Manual installation =

1. Download the plugin zip from the [WordPress plugin directory](https://wordpress.org/plugins/block-data-attribute/).
2. Go to **Plugins → Add New → Upload Plugin**.
3. Upload the zip file and click **Install Now**, then **Activate**.

Alternatively you can upload the unzipped plugin folder to `/wp-content/plugins/` via FTP and activate it from the Plugins screen.

= Updating =

Automatic updates work via the WordPress dashboard. We still recommend taking a backup before any update.

== Frequently Asked Questions ==

= How do I add a data attribute to a block? =

1. Open a page or post in the block editor.
2. Select a supported block (e.g. a Paragraph or Button block).
3. Open the block settings sidebar by clicking the **⚙ Settings** icon in the top-right toolbar.
4. Scroll down to the **Block Data Attribute** panel and expand it.
5. Fill in the **Name** and **Value** fields. The name will automatically be prefixed with `data-` in the saved HTML.
6. Click **+ Add attribute** to add more pairs as needed.
7. Save or publish your post.

= What does the saved HTML look like? =

A paragraph block with a `data-highlight="true"` attribute would produce:

`<p data-highlight="true">Your content here.</p>`

= Which blocks are supported? =

By default: `core/button`, `core/column`, `core/columns`, `core/group`, `core/heading`, and `core/paragraph`.

= Can I add support for other blocks? =

Yes. Use the `mypreview.blockDataAttributeAllowedBlocks` JavaScript filter:

`wp.hooks.addFilter(
    'mypreview.blockDataAttributeAllowedBlocks',
    'my-plugin/extend-allowed-blocks',
    ( allowedBlocks ) => [ ...allowedBlocks, 'core/image', 'core/list' ]
);`

= Will adding attributes break my blocks? =

No. Attributes are stored as part of the block's serialised markup. The plugin uses the `blocks.getSaveContent.extraProps` filter, which is the officially supported WordPress API for this purpose.

= Is the plugin compatible with full-site editing (FSE)? =

Yes. The plugin works in any context where the block editor is used, including the Site Editor.

== 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.

== Changelog ==

= 2.1.0 =
* Rewritten as a single-file plain JavaScript build — no bundler or Composer required.
* Improved sidebar UI: consistent field widths, full-width Add attribute button, reserved space for the remove button so layout does not shift.
* Fixed drag-and-drop reordering: only the handle icon triggers dragging, leaving text inputs and the remove button fully interactive.
* Updated drag handle to a standard 6-dot grid icon.
* Bumped minimum WordPress requirement to 7.0.

= 2.0.2 =
* Compatibility with WordPress 6.1.

= 2.0.1 =
* Added missing `data-` prefix to the attribute name output.

= 2.0.0 =
* Support for defining an unlimited number of attributes per block.
* Compatibility with WordPress 6.0.
* Updated dependencies.

= 1.0.5 =
* Fixed incorrect escaping applied to the data attribute value.

= 1.0.4 =
* Updated dependencies.
* Compatibility with WordPress 5.5.

= 1.0.3 =
* Code standards improvements.
* Compatibility with WordPress 5.4.1.

= 1.0.2 =
* Code standards improvements.
* Compatibility with WordPress 5.4.0.

= 1.0.1 =
* Fixed GitHub repository link.
* Updated plugin banner image.

= 1.0.0 =
* Initial release.

== Upgrade Notice ==

= 2.1.0 =
UI and drag-and-drop improvements; no data migration required when upgrading from 2.x.

= 2.0.0 =
Underlying code was refactored significantly. Upgrading from 1.x requires manual data migration.
