Title: Attributes for Blocks Author: ska-dev Published: 25. August 2021 Last modified: 20. Mai 2026 --- Plugins suchen ![](https://ps.w.org/attributes-for-blocks/assets/icon-256x256.png?rev=2588242) # Attributes for Blocks Von [ska-dev](https://profiles.wordpress.org/skadev/) [Herunterladen](https://downloads.wordpress.org/plugin/attributes-for-blocks.1.0.14.zip) [Live-Vorschau](https://de.wordpress.org/plugins/attributes-for-blocks/?preview=1) * [Details](https://de.wordpress.org/plugins/attributes-for-blocks/#description) * [Rezensionen](https://de.wordpress.org/plugins/attributes-for-blocks/#reviews) * [Installation](https://de.wordpress.org/plugins/attributes-for-blocks/#installation) * [Entwicklung](https://de.wordpress.org/plugins/attributes-for-blocks/#developers) [Support](https://wordpress.org/support/plugin/attributes-for-blocks/) ## Beschreibung Dieses Plugin fügt Gutenberg-Blöcken zusätzliche erweiterte Inspektorsteuerelemente hinzu, mit denen beliebige individuelle HTML-Attribute zur Frontend-Ausgabe des Blocks hinzugefügt werden können. Auf diese Weise kannst du Inline-Stile hinzufügen, um das Erscheinungsbild des Blocks zu optimieren, Aria-Attribute festlegen, um die Barrierefreiheit deiner Website zu verbessern, Datenattribute hinzufügen, um sie in beliebige JavaScript-Module zu integrieren, oder sogar JavaScript-DOM-Ereignisattribute wie `onclick`, `onchange` oder `onload` hinzufügen. [Demo](https://playground.wordpress.net/?plugin=attributes-for-blocks&url=%2Fwp-admin%2Fpost.php%3Fpost%3D2%26action%3Dedit&language=de_DE) ## Screenshots * [[ * Hinzufügen eines Stilattributs zum Absatzblock ## Installation #### Installation über Admin-Dashboard 1. Gehe zu deinen **WordPress-Admin-Dashboard -> Plugins**. 2. Klicke auf „Plugin hinzufügen“. 3. Klicke auf „Plugin hochladen“. 4. Wähle die Datei `attributes-for-blocks.zip` aus. 5. Klicke auf „Jetzt installieren“. 6. Aktiviere das Plugin über **WordPress-Admin-Dashboard -> Plugins**. #### Manuelle Installation per FTP-Upload 1. Lade den Ordner „attributes-for-blocks” aus der Datei `attributes-for-blocks.zip` in den Ordner `../wp-content/plugins` deiner WordPress-Installation hoch. 2. Aktiviere das Plugin über **WordPress-Admin-Dashboard -> Plugins**. ## FAQ ### Wie füge ich ein Attribut hinzu? Scrolle in den Inspektor-Steuerelementen deines ausgewählten Blocks (Block-Einstellungen) ganz nach unten und klicke auf „Erweitert“. Dort sollte ein Abschnitt namens „Zusätzliche Attribute“ zu finden sein. Gib einen Attributnamen in das Feld „Attribut hinzufügen” ein und klicke auf „Hinzufügen”, um ein Attribut für den Block hinzuzufügen. Darunter sollte ein neues Eingabefeld mit dem Namen des Attributs erscheinen, in das du optional den Attributwert eingeben kannst. Beispielattribute: `style`, `title`, `target`,` class`, `id`, `onclick`, `data-*`, `aria-*`. ### Wieso ist die Eingabe deaktiviert? Wenn der aktuelle Benutzer nicht über die Berechtigung `unfiltered_html` verfügt, können keine Attribute hinzugefügt werden, und alle vorhandenen Attribute werden bei der Aktualisierung des Beitrags entfernt. ### Wie funktioniert es? Bei regulären Blöcken werden Attribute zum Stammelement des gespeicherten Blockinhalts hinzugefügt, was bedeutet, dass sie nur im Frontend und nicht im Editor dargestellt werden. Bei dynamischen Blöcken werden die Attribute über die Funktion `render_callback` hinzugefügt und können auch im Editor angewendet werden, je nachdem, ob der Block serverseitig oder clientseitig gerendert wird. ### Funktioniert das bei jedem Block? Es sollte mit normalen Blöcken funktionieren, die ein gültiges WP-Element darstellen, das den Filter `blocks.getSaveContent.extraProps` verwenden kann, sowie mit dynamischen Blöcken, die einen `render_callback` verwenden. Blöcke von Drittanbietern, die etwas Unorthodoxes tun, funktionieren möglicherweise nicht. [Bekannte nicht unterstützte Blöcke](https://plugins.trac.wordpress.org/browser/attributes-for-blocks/trunk/includes/unsupported-blocks.php) ### Verwendung mit Alpine.js Das Präfix @ in einem Attributnamen wird im Modus „Überschreiben” dieses Plugins verwendet. Für Alpine.js-Attribute verwendest du `x-on:click` anstelle von `@click` oder verwende die Kurzschreibweise mit zwei `@`-Zeichen anstelle von einem: `@@click`. ### Blockunterstützung deaktivieren Der Filter `afb_unsupported_blocks` kann in der Datei `functions.php` deines untergeordneten Themes verwendet werden, um die Blockunterstützung für das Hinzufügen zusätzlicher Attribute zu deaktivieren. ``` add_filter('afb_unsupported_blocks', function($blocks) { $blocks[] = 'core/button'; return $blocks; }); ``` ### Was passiert, wenn ich dieses Plugin deaktiviere? Blöcke mit individuellen Attributen können ungültig werden, je nachdem, welche Attribute du hinzugefügt hast. Von dort aus kannst du den Block ohne die individuellen Attribute wiederherstellen, indem du auf „Blockwiederherstellung versuchen“ klickst, oder den Block mit den individuellen Attributen als HTML behalten, indem du „In HTML umwandeln“ auswählst. Wenn du nicht riskieren möchtest, dass Blöcke ungültig werden, musst du alle individuellen Attribute entfernen, bevor du das Plugin deaktivierst. ### Wie füge ich Benutzerrollen die Berechtigung „unfiltered_html“ hinzu? Du kannst festlegen, welche Rollen über die Berechtigung `unfiltered_html` verfügen, indem du individuellen Code in der Datei `functions.php` deines Themes oder über ein individuelles Plugin verwendest. Gewähre diese Berechtigung nur, wenn du darauf vertraust, dass die aktuellen und zukünftigen Benutzer dieser Rolle keine böswilligen Handlungen vornehmen. ``` add_action('init', function() { if($role = get_role('contributor')) { $role->add_cap('unfiltered_html'); } }); ``` ## Rezensionen ![](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/) 17. Oktober 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! ![](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/) 14. Dezember 2024 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/) 6. November 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! ![](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/) 18. Juli 2024 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/) 14. Februar 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! ![](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/) 4. Januar 2024 I absolutely love this plugin! Does what it says easily and reliably, doesn’t add any bloat. Amazing. [ Alle 21 Rezensionen lesen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/) ## Mitwirkende und Entwickler „Attributes for Blocks“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt: Mitwirkende * [ ska-dev ](https://profiles.wordpress.org/skadev/) * [ jimedwards ](https://profiles.wordpress.org/jimedwards/) „Attributes for Blocks“ wurde in 5 Sprachen übersetzt. Danke an [die Übersetzer](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks/contributors) für ihre Mitwirkung. [Übersetze „Attributes for Blocks“ in deine Sprache.](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks) ### Interessiert an der Entwicklung? [Durchstöbere den Code](https://plugins.trac.wordpress.org/browser/attributes-for-blocks/), sieh dir das [SVN-Repository](https://plugins.svn.wordpress.org/attributes-for-blocks/) an oder abonniere das [Entwicklungsprotokoll](https://plugins.trac.wordpress.org/log/attributes-for-blocks/) per [RSS](https://plugins.trac.wordpress.org/log/attributes-for-blocks/?limit=100&mode=stop_on_copy&format=rss). ## Änderungsprotokoll #### 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. ## Meta * Version **1.0.14** * Zuletzt aktualisiert **vor 2 Wochen** * Aktive Installationen **4.000+** * WordPress-Version ** 6.2 oder höher ** * Getestet bis **7.0** * PHP-Version ** 7.4 oder höher ** * Sprachen * [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/) und [Spanish (Spain)](https://es.wordpress.org/plugins/attributes-for-blocks/). * [Übersetze in deine Sprache](https://translate.wordpress.org/projects/wp-plugins/attributes-for-blocks) * Schlagwörter * [ARIA](https://de.wordpress.org/plugins/tags/aria/)[attributes](https://de.wordpress.org/plugins/tags/attributes/) [blocks](https://de.wordpress.org/plugins/tags/blocks/)[gutenberg](https://de.wordpress.org/plugins/tags/gutenberg/) [style](https://de.wordpress.org/plugins/tags/style/) * [Erweiterte Ansicht](https://de.wordpress.org/plugins/attributes-for-blocks/advanced/) ## Bewertungen 5 von 5 Sternen. * [ 21 5-Sterne-Rezensionen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=5) * [ 0 4-Sterne-Rezensionen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=4) * [ 0 3-Sterne-Rezensionen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=3) * [ 0 2-Sterne-Rezensionen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=2) * [ 0 1-Sterne-Rezensionen ](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/#new-post) [Alle Rezensionen anzeigen](https://wordpress.org/support/plugin/attributes-for-blocks/reviews/) ## Mitwirkende * [ ska-dev ](https://profiles.wordpress.org/skadev/) * [ jimedwards ](https://profiles.wordpress.org/jimedwards/) ## Support Möchtest du etwas mitteilen? Brauchst du Unterstützung? [Support-Forum anzeigen](https://wordpress.org/support/plugin/attributes-for-blocks/) ## Spenden Möchtest du die Weiterentwicklung dieses Plugins unterstützen? [ Für dieses Plugin spenden ](https://buymeacoffee.com/skadev)