Title: Block Data Attribute Author: Mahdi Published: 2020 年 2 月 10 日 Last modified: 2026 年 6 月 10 日 --- 搜尋外掛 ![](https://ps.w.org/block-data-attribute/assets/banner-772x250.jpg?rev=2243297) ![](https://ps.w.org/block-data-attribute/assets/icon-256x256.jpg?rev=2242125) # Block Data Attribute 由 [Mahdi](https://profiles.wordpress.org/mahdiyazdani/) 開發 [下載](https://downloads.wordpress.org/plugin/block-data-attribute.2.1.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/block-data-attribute/#description) * [使用者評論](https://tw.wordpress.org/plugins/block-data-attribute/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/block-data-attribute/#installation) * [開發資訊](https://tw.wordpress.org/plugins/block-data-attribute/#developers) [技術支援](https://wordpress.org/support/plugin/block-data-attribute/) ## 外掛說明 **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` ## 螢幕擷圖 [⌊Block Data Attribute panel in the block editor sidebar showing name/value pairs with drag-to-reorder handles and the Add attribute button.⌉⌊Block Data Attribute panel in the block editor sidebar showing name/value pairs with drag-to-reorder handles and the Add attribute button.⌉[ Block Data Attribute panel in the block editor sidebar showing name/value pairs with drag-to-reorder handles and the Add attribute button. ## 安裝方式 #### 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. ## 常見問題集 ### 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: ```

Your content here.

``` ### 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. ## 使用者評論 ![](https://secure.gravatar.com/avatar/396905029dadc9b0fcf5bc9f2f6daec67a440fb67a1f11fba089ee00a83b8a39? s=60&d=retro&r=g) ### 󠀁[Would love this to cover images](https://wordpress.org/support/topic/would-love-this-to-cover-images/)󠁿 [johnlewisdesign](https://profiles.wordpress.org/johnlewisdesign/) 2021 年 5 月 6 日 Great plugin, would be even greater if it did images too for animation on scroll( AOS) reasons. ![](https://secure.gravatar.com/avatar/85dfc3c1cc6cc86271cdd685842bf699528239bac18994b1fbc75ff76a024bf5? s=60&d=retro&r=g) ### 󠀁[Time saver](https://wordpress.org/support/topic/time-saver-272/)󠁿 [tv360](https://profiles.wordpress.org/tv360/) 2020 年 10 月 8 日 Saved me from having to build it myself. Surprised this still isn’t built into native block functionality. Thank you! ![](https://secure.gravatar.com/avatar/189988bb7d8de836a88a79b0d7d19a05550e597c6b688c03655f66e1e1158934? s=60&d=retro&r=g) ### 󠀁[Good but I just need one more thing](https://wordpress.org/support/topic/good-but-i-just-need-one-more-thing/)󠁿 [Amanda](https://profiles.wordpress.org/rocketkiddo/) 2020 年 8 月 15 日 I have to add a data attribute to one my of blocks and I’ve found this plugin developed by you. Unfortunately, the plugin doesn’t allow me to type slash (/) or backslash(\) in the Value field. I know this is blocked with Javascript but I wasn’t able to figure out which line of the code is causing this. Thank you! ![](https://secure.gravatar.com/avatar/3f031c46db80da474af6cf945a77597709d0d70bd19fc382aa2bd94debe12836? s=60&d=retro&r=g) ### 󠀁[Does what I needed it to do](https://wordpress.org/support/topic/does-what-i-needed-it-to-do-3/)󠁿 [kevingarubba](https://profiles.wordpress.org/kevingarubba/) 2020 年 6 月 23 日 Saved me from a lot of setup and code involved in block registration by just adding the simple field I needed. [ 閱讀全部 4 則使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Block Data Attribute〉的開發相關工作。 參與者 * [ Mahdi ](https://profiles.wordpress.org/mahdiyazdani/) * [ Saji ](https://profiles.wordpress.org/gookaani/) [將〈Block Data Attribute〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/block-data-attribute) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/block-data-attribute/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/block-data-attribute/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/block-data-attribute/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/block-data-attribute/)。 ## 變更記錄 #### 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. ## 中繼資料 * 版本 **2.1.0** * 最後更新 **2 週前** * 啟用安裝數 **300+** * WordPress 版本需求 ** 6.0 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/block-data-attribute/) * 標籤: * [block settings](https://tw.wordpress.org/plugins/tags/block-settings/)[block-editor](https://tw.wordpress.org/plugins/tags/block-editor/) [gutenberg](https://tw.wordpress.org/plugins/tags/gutenberg/) * [進階檢視](https://tw.wordpress.org/plugins/block-data-attribute/advanced/) ## 評分 5 星，滿分為 5 星 * [ 4 個 5 星使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/block-data-attribute/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-data-attribute/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/block-data-attribute/reviews/) ## 參與者 * [ Mahdi ](https://profiles.wordpress.org/mahdiyazdani/) * [ Saji ](https://profiles.wordpress.org/gookaani/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/block-data-attribute/)