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

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

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

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!
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!
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!
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

Mitwirkende und Entwickler

„Attributes for Blocks“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

„Attributes for Blocks“ wurde in 5 Sprachen übersetzt. Danke an die Übersetzer für ihre Mitwirkung.

Übersetze „Attributes for Blocks“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN-Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

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.