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.
Installation
Installation über Admin-Dashboard
- Gehe zu deinen WordPress-Admin-Dashboard -> Plugins.
- Klicke auf „Plugin hinzufügen“.
- Klicke auf „Plugin hochladen“.
- Wähle die Datei
attributes-for-blocks.zipaus. - Klicke auf „Jetzt installieren“.
- Aktiviere das Plugin über WordPress-Admin-Dashboard -> Plugins.
Manuelle Installation per FTP-Upload
- Lade den Ordner „attributes-for-blocks” aus der Datei
attributes-for-blocks.zipin den Ordner../wp-content/pluginsdeiner WordPress-Installation hoch. - 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_htmlverfü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_callbackhinzugefü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.extraPropsverwenden kann, sowie mit dynamischen Blöcken, die einenrender_callbackverwenden. 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:clickanstelle von@clickoder verwende die Kurzschreibweise mit zwei@-Zeichen anstelle von einem:@@click. -
Blockunterstützung deaktivieren
-
Der Filter
afb_unsupported_blockskann in der Dateifunctions.phpdeines 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_htmlverfügen, indem du individuellen Code in der Dateifunctions.phpdeines 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
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_attributesfilter, allowing to dynamically modify attributes.
1.0.9
- Try fix issue with
current_user_cancheck inpre_kseswhenSECURE_AUTH_COOKIEisn’t defined.
1.0.8
- Try fix issue with
current_user_cancheck inpre_kseswhen WP pluggable functions aren’t loaded.
1.0.7
- Security update: users without
unfiltered_htmlcapability 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_Processorfor adding HTML attributes. - Remove
afb_sanitize_attribute_keyandafb_sanitize_attribute_valuefilters (now handled byWP_HTML_Tag_Processor). - Use
render_blockfilter to apply attributes instead of overriding block’srender_callback. - Move all PHP code to main file for simplicity.
- Add
$attributeparam toafb_attribute_separatorfilter. - 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_keyandafb_sanitize_attribute_valuefilters. - 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
srcfolder from plugin.
1.0.2
- Add advanced editor for style attribute.
- Remove jQuery.
1.0.1
- Fix special character encoding for dynamic blocks.
