Attributes for Blocks

by ska-dev

Description

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

Installation

Install via admin dashboard

Go to your WordPress admin dashboard -> Plugins.
Click “Add New”.
Click “Upload Plugin”.
Select the attributes-for-blocks.zip file.
Click “Install Now”.
Activate the plugin from WordPress admin dashboard -> Plugins.

Manual install via FTP upload

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

Screenshots

Adding style attribute to paragraph block

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

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');
    }
});

Reviews

A must-have plugin that brings true flexibility to the block editor

By Germán Freixinós (germanfrelo) on October 17, 2025

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!

Thank you, this is gold for improving accessibility!

By Anne-Mieke Bovelett (annebovelett) on December 14, 2024

Thank you so much for creating this!

Saved me tons of work

By Dunkan (dunkanmccloud) on November 6, 2024

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!

Worked great!

By dallinchase on July 18, 2024

Worked exacltly as needed, I recomend it!

Very nice and useful

By mauri01 on February 14, 2024

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!

Awesome plugin!

By Nazar Hotsa (bugnumber9) on January 4, 2024

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

Yep. Amazing

By Tecca on November 21, 2023

This adds considerable versatility to the WordPress blocks editor — I wanted to use Bootstrap in my current custom theme, but didn't want to integrate Bootstrap fully, only using it within blocks when needed. Things like the dark mode (data-bs-theme="dark") can be added in, you can use onClick to utilize JavaScript (I used that to click open Bootstrap cards, etc), and really much more. Saved me a lot of time having to do things in a much more manual way.

Highly recommend this plugin, works great.

This is just Gold

By Azragh on November 3, 2023

Thanks!

Please, bring this to core!

By António Carreira (StreetDog1971) on April 10, 2023

Using it on all my block based themes! Amazing plugin.

Fa ciò che dice

By robertorefresh on November 13, 2023

Ottimo lavoro

Changelog

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.