Title: Attributes for Blocks
Author: ska-dev
Published: <strong>2021년 8월 25일</strong>
Last modified: 2026년 8월 20일

---

플러그인 검색

![](https://ps.w.org/attributes-for-blocks/assets/icon-256x256.png?rev=2588242)

# Attributes for Blocks

 작성자: [ska-dev](https://profiles.wordpress.org/skadev/)

[다운로드](https://downloads.wordpress.org/plugin/attributes-for-blocks.1.0.15.zip)

[실시간 미리보기](https://ko.wordpress.org/plugins/attributes-for-blocks/?preview=1)

 * [세부사항](https://ko.wordpress.org/plugins/attributes-for-blocks/#description)
 * [평가](https://ko.wordpress.org/plugins/attributes-for-blocks/#reviews)
 *  [설치](https://ko.wordpress.org/plugins/attributes-for-blocks/#installation)
 * [개발](https://ko.wordpress.org/plugins/attributes-for-blocks/#developers)

 [지원](https://wordpress.org/support/plugin/attributes-for-blocks/)

## 설명

This plugin adds additional advanced inspector controls to Gutenberg blocks that
allow to add any custom HTML attributes to the block’s front-end output. This allows
you to add inline styles to fine-tune the block’s appearance, set aria attributes
to improve your site’s accessibility, add data attributes to integrate with any 
JavaScript modules or even JavaScript DOM event attributes such as `onclick`, `onchange`
or `onload`.

[Demo](https://playground.wordpress.net/?plugin=attributes-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit)

## 스크린샷

[⌊Adding style attribute to paragraph block⌉⌊Adding style attribute to paragraph
block⌉[

Adding style attribute to paragraph block

## 설치

#### Install via admin dashboard

 1. Go to your **WordPress admin dashboard -> Plugins**.
 2. Click “Add New”.
 3. Click “Upload Plugin”.
 4. Select the `attributes-for-blocks.zip` file.
 5. Click “Install Now”.
 6. Activate the plugin from **WordPress admin dashboard -> Plugins**.

#### Manual install via FTP upload

 1. Upload the folder “attributes-for-blocks” from `attributes-for-blocks.zip` file
    to your WordPress installations `../wp-content/plugins` folder.
 2. Activate the plugin from **WordPress admin dashboard -> Plugins**.

## FAQ

### How do I add an attribute?

In your selected block’s inspector controls (Block settings) scroll all the way 
to the bottom and click on “Advanced”. It should contain a section called “Additional
attributes”.
 Type an attribute name into the “Add attribute” field and press “Add”
to add an attribute for the block. A new input with the attribute’s name should 
appear below, into which you can optionally insert the attribute value. Example 
attributes: `style`, `title`, `target`, `class`, `id`, `onclick`, `data-*`, `aria-*`.

### Why is the input disabled?

When the current user doesn’t have `unfiltered_html` capabilities attributes cannot
be added and all existing attributes are stripped when the post is updated.

### How does it work?

For regular blocks, attributes are added to the block save content’s root element,
meaning they will be rendered only on the front end and not in the editor. For dynamic
blocks the attributes are added via `render_callback` function and they may also
be applied in the editor, depending if the block is rendered server or client side.

### Does it work for every block?

It should work with normal blocks that render a valid WP Element that can utilize
the `blocks.getSaveContent.extraProps` filter as well as dynamic blocks that utilize
a `render_callback`. Third party blocks that do something unorthodox may not work.

[Known unsupported blocks](https://plugins.trac.wordpress.org/browser/attributes-for-blocks/trunk/includes/unsupported-blocks.php)

### Usage with Alpine.js

@ prefix in an attribute name is used for “override” mode in this plugin, for Alpine.
js attributes use `x-on:click` instead of `@click` or use the shorthand syntax with
two `@` characters instead of one: `@@click`.

### Disable block support

The `afb_unsupported_blocks` filter can be used in your child theme’s `functions.
php` file to disable block support for adding additional attributes.

    ```
    add_filter('afb_unsupported_blocks', function($blocks) {
        $blocks[] = 'core/button';
        return $blocks;
    });
    ```

### What happens when I disable this plugin?

Blocks with custom attributes may become invalid, depending on which attributes 
you’ve added. From there you can recover the block without the custom attributes
by clicking “Attempt Block Recovery” or keep the block with custom attributes as
HTML by choosing “Convert to HTML”. If you don’t want to risk blocks becoming invalid
you need to remove all custom attributes before disabling the plugin.

### How do I add unfiltered_html capability to user roles?

You can modify which roles have the `unfiltered_html` capability using custom code
in your theme’s `functions.php` file or via a custom plugin. Only grant this capability
if you trust the current and future users of that role to not do anything malicious.

    ```
    add_action('init', function() {
        if($role = get_role('contributor')) {
            $role->add_cap('unfiltered_html');
        }
    });
    ```

## 후기

![](https://secure.gravatar.com/avatar/df445ecea9cca33d322bc9011daf5cd75f38c65ca1e4ee4b80ee3a62994b82fb?
s=60&d=retro&r=g)

### 󠀁[A must-have plugin that brings true flexibility to the block editor](https://wordpress.org/support/topic/a-must-have-plugin-that-brings-true-flexibility-to-the-block-editor/)󠁿

 [Germán](https://profiles.wordpress.org/germanfrelo/) 2025년 10월 17일

Thank you so much for creating this plugin! It adds a level of versatility to the
block editor that WordPress really needed. Being able to easily add custom attributes—
like data-*, aria-*, or other HTML attributes — makes it incredibly useful for developers
and site builders alike. It works exactly as expected, saves tons of time, and feels
lightweight and reliable. Perfect for anyone who wants finer control over blocks
without having to write extra code or rely on complex workarounds. Huge thanks to
the authors for keeping it simple, powerful, and developer-friendly — I truly hope
this continues to be maintained for future WordPress versions. Highly recommended!

![](https://secure.gravatar.com/avatar/3a0d4408354ac7f1fddc273366daae9126187a427e91b7798e3502d2ba499b4d?
s=60&d=retro&r=g)

### 󠀁[Thank you, this is gold for improving accessibility!](https://wordpress.org/support/topic/thank-you-this-is-gold-for-improving-accessibility/)󠁿

 [Anne-Mieke Bovelett](https://profiles.wordpress.org/annebovelett/) 2024년 12월
14일

Thank you so much for creating this!

![](https://secure.gravatar.com/avatar/11e6b9c29a68f8735b51fbf2e58b90d6c26e96b1887199c5df40b65f68143d50?
s=60&d=retro&r=g)

### 󠀁[Saved me tons of work](https://wordpress.org/support/topic/saved-me-tons-of-work-3/)󠁿

 [Dunkan](https://profiles.wordpress.org/dunkanmccloud/) 2024년 11월 6일

This is perfect, it saved me tons of work. I am used it for adding the view-transition-
classes to query block elements.websevendev & jimedwards million thanks to you!

![](https://secure.gravatar.com/avatar/de46ac8aba3c1e3cf6e476d77765d6cdba0803016583b8575033d3297b66a9cf?
s=60&d=retro&r=g)

### 󠀁[Worked great!](https://wordpress.org/support/topic/worked-great-279/)󠁿

 [dallinchase](https://profiles.wordpress.org/dallinchase/) 2024년 7월 18일

Worked exacltly as needed, I recomend it!

![](https://secure.gravatar.com/avatar/cc6790afcae10f85481e673c9127c4b502d5af9b056d9b0b4f2a2e488c799c1b?
s=60&d=retro&r=g)

### 󠀁[Very nice and useful](https://wordpress.org/support/topic/very-nice-and-useful-21/)󠁿

 [mauri01](https://profiles.wordpress.org/mauri01/) 2024년 2월 14일

Thank you very much for providing this plugin, I have been able to use SAL scroll
animation library with it works perfectly! Hope you keep going with this Plugin 
for future Wordpress versions. Thank YOU!

![](https://secure.gravatar.com/avatar/45e3dfb5e418c9d670a2c0b158440b929e2d64bf3a0f63c002d7ef1141e8e83a?
s=60&d=retro&r=g)

### 󠀁[Awesome plugin!](https://wordpress.org/support/topic/awesome-plugin-7070/)󠁿

 [Nazar Hotsa](https://profiles.wordpress.org/bugnumber9/) 2024년 1월 4일

I absolutely love this plugin! Does what it says easily and reliably, doesn't add
any bloat. Amazing.

 [ 모든 21 평가 읽기 ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/)

## 기여자 & 개발자

“Attributes for Blocks”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에
기여하였습니다.

기여자

 *   [ ska-dev ](https://profiles.wordpress.org/skadev/)
 *   [ jimedwards ](https://profiles.wordpress.org/jimedwards/)

“Attributes for Blocks”(이)가 5 개 언어로 번역되었습니다. 기여해 주셔서 [번역자](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks/contributors)
님께 감사드립니다.

[자국어로 “Attributes for Blocks”(을)를 번역하세요.](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks)

### 개발에 관심이 있으십니까?

[코드 탐색하기](https://plugins.trac.wordpress.org/browser/attributes-for-blocks/)
는, [SVN 저장소](https://plugins.svn.wordpress.org/attributes-for-blocks/)를 확인하시거나,
[개발 기록](https://plugins.trac.wordpress.org/log/attributes-for-blocks/)을 [RSS](https://plugins.trac.wordpress.org/log/attributes-for-blocks/?limit=100&mode=stop_on_copy&format=rss)
로 구독하세요.

## 변경이력

#### 1.0.15

 * Tweaked UI for WordPress 7.1.

#### 1.0.14

 * Tweaked UI for WordPress 7.0.

#### 1.0.13

 * Tested with WordPress 6.9.

#### 1.0.12

 * Added a donate link on the plugin page – supporters get a 50% off coupon for 
   my brand new WordPress theme.
 * Fix potential duplication when merging style attribute values.
 * Update `@wordpress/*` packages.
 * Tested with Gutenberg 21.7.0.

#### 1.0.11

 * WP 6.8.

#### 1.0.10

 * Added `afb_get_attributes` filter, allowing to dynamically modify attributes.

#### 1.0.9

 * Try fix issue with `current_user_can` check in `pre_kses` when `SECURE_AUTH_COOKIE`
   isn’t defined.

#### 1.0.8

 * Try fix issue with `current_user_can` check in `pre_kses` when WP pluggable functions
   aren’t loaded.

#### 1.0.7

 * Security update: users without `unfiltered_html` capability can no longer add
   attributes. When a user without the capability updates a post all existing attributes
   are stripped. Issue discovered by Francesco Carlucci (CVE ID: CVE-2024-8318, 
   CVSS Severity Score: 6.4 (Medium)). The vulnerability made it possible for authenticated
   attackers, with Contributor-level access and above, to inject arbitrary web scripts
   in pages that will execute whenever a user accessed an injected page.
 * Tested up to WordPress 6.6.
 * Update `@wordpress/*` packages.

#### 1.0.6

 * Tested up to WordPress 6.5.
 * Fix PHP notice when rendering a block that doesn’t have any attributes.
 * Update `@wordpress/*` packages.

#### 1.0.5

 * Use `WP_HTML_Tag_Processor` for adding HTML attributes.
 * Remove `afb_sanitize_attribute_key` and `afb_sanitize_attribute_value` filters(
   now handled by `WP_HTML_Tag_Processor`).
 * Use `render_block` filter to apply attributes instead of overriding block’s `
   render_callback`.
 * Move all PHP code to main file for simplicity.
 * Add `$attribute` param to `afb_attribute_separator` filter.
 * Remove uppercase text transform from attribute input labels, use monospace font
   for value.
 * Add button to edit attributes in a modal for more space.
 * Update `@wordpress/*` packages.
 * Regression: for blocks that render multiple root elements attributes are only
   applied to the first one.

#### 1.0.4

 * Add `afb_sanitize_attribute_key` and `afb_sanitize_attribute_value` filters.
 * Catch errors when using invalid characters in attribute name/value.
 * Update `@wordpress/*` packages.

#### 1.0.3

 * Update `@wordpress/*` packages.
 * Test with WordPress 6.0.
 * Convert advanced style attribute editor to TypeScript and refactor.
 * Fix duplicate attribute values being output when the block has both JS and PHP
   render functions.
 * Add GitHub link.
 * Remove `src` folder from plugin.

#### 1.0.2

 * Add advanced editor for style attribute.
 * Remove jQuery.

#### 1.0.1

 * Fix special character encoding for dynamic blocks.

## 기초

 *  버전 **1.0.15**
 *  최근 업데이트: **1개월 전**
 *  활성화된 설치 **4,000+**
 *  워드프레스 버전 ** 6.2 또는 그 이상 **
 *  다음까지 시험됨: **7.1.2**
 *  PHP 버전 ** 7.4 또는 그 이상 **
 *  언어
 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/attributes-for-blocks/), 
   [English (US)](https://wordpress.org/plugins/attributes-for-blocks/), [German](https://de.wordpress.org/plugins/attributes-for-blocks/),
   [Japanese](https://ja.wordpress.org/plugins/attributes-for-blocks/), [Spanish (Chile)](https://cl.wordpress.org/plugins/attributes-for-blocks/),
   그리고 [Spanish (Spain)](https://es.wordpress.org/plugins/attributes-for-blocks/).
 *  [자국어로 번역하기](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks)
 * 태그:
 * [ARIA](https://ko.wordpress.org/plugins/tags/aria/)[attributes](https://ko.wordpress.org/plugins/tags/attributes/)
   [blocks](https://ko.wordpress.org/plugins/tags/blocks/)[gutenberg](https://ko.wordpress.org/plugins/tags/gutenberg/)
   [style](https://ko.wordpress.org/plugins/tags/style/)
 *  [고급 보기](https://ko.wordpress.org/plugins/attributes-for-blocks/advanced/)

## 평점

 별 5점 만점에 5점.

 *  [  21/5-별점 후기     ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=5)
 *  [  0/4-별점 후기     ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=4)
 *  [  0/3-별점 후기     ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=3)
 *  [  0/2-별점 후기     ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=2)
 *  [  0/1-별점 후기     ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/#new-post)

[모든  리뷰 보기](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/)

## 기여자

 *   [ ska-dev ](https://profiles.wordpress.org/skadev/)
 *   [ jimedwards ](https://profiles.wordpress.org/jimedwards/)

## 지원

할 말 있으신가요? 도움이 필요하신가요?

 [지원 포럼 보기](https://wordpress.org/support/plugin/attributes-for-blocks/)

## 기부

이 플러그인이 발전하도록 도우시겠습니까?

 [ 이 플러그인에 기부하기 ](https://buymeacoffee.com/skadev)