TL;DR

In diesem Beitrag gehe ich darauf ein, wie man wiederverwendbare WordPress Blöcke erstellt, deren Inhalt dennoch individualisierbar ist.

Ganz allgemein gesprochen, ist Wiederverwendbarkeit ein wichtiges Qualitätsmerkmal von Software-Bestandteilen, welches zu gut wartbarem Quellcode führt. Im weiteren Sinne, hat Wiederverwendbarkeit aber noch andere Gesichter, z.B. dass man Blöcke in WordPress, die über mehrere Beiträge hinweg ein konsistentes Aussehen haben sollen, nicht in jedem Beitrag einzeln formatieren muss. Stattdessen sollte es eine zentrale Vorlage für solche Blöcke geben. Änderungen an dieser Vorlage werden dann an allen Stellen wirksam, wo die Vorlage Verwendung findet. Dieser Aufgabe habe ich mich kürzlich gestellt, als ich den obigen TL;DR-Block in unseren Blog integriert habe.¹

Aber wo war eigentlich das Problem? Erstmal braucht man die richtigen Suchbegriffe, welche man dann noch ins Englische übersetzen muss. Wonach suche ich jetzt also? Nach einer Block-Vorlage („Block Template“) oder einem Block-Muster („Block Pattern“)? Zudem brauche ich einen Platzhalter („Placeholder“) oder eine Art Variable… Jedenfalls fand ich grundsätzlich zwei verschiedene Ansätze:

• „Normale“ Block Patterns: Hierbei handelt es sich um fertig designte Blöcke, welche an jeder Stelle ihrer Verwendung durch Copy-Paste eingefügt werden. Ändert man später etwas an der Vorlage, muss man alle Vorkommen des Blocks von Hand nachbessern. Das ist keine Wiederverwendung und definitiv nicht wartbar. Details in der Fußnote.²
• Synced Patterns / Reusable Blocks: Diese Art von Blöcken entspricht schon eher dem Prinzip der Wiederverwendbarkeit. Alle Block-Instanzen sind hierbei mit der Vorlage verknüpft, sodass sich Änderungen an der Vorlage auch direkt auf die Instanzen auswirken. Sobald man aber Inhalte eines solchen Blocks je Beitrag individualisieren möchte, wird es unschön: „After inserting the Synced Pattern you want to use, make sure to select ‘Detach pattern‘ […] if you wish to make any changes to the block on that page or post only.“³ Das ist dann wieder Copy-Paste…

Keiner der beiden Ansätze erfüllte meine Anforderungen. Also musste ich selbst kreativ werden. In diesem Beitrag hatte ich bereits etwas mit Shortcodes und PHP-Programmierung in WordPress experimentiert. Ein Shortcode in Kombination mit einem Reusable Block würde eigentlich genau das leisten, was ich brauche: Die Vorlage bleibt mit all ihren Vorkommen verknüpft, wodurch sich einfach Anpassungen vornehmen lassen. Ein Shortcode an sich wäre ein Inhalt, der über alle Beiträge hinweg gleich ist. Lediglich das, wozu der Shortcode expandiert, also der eigentliche TL;DR-Text, müsste abhängig vom jeweiligen Beitrag sein, z.B. als zusätzliches Metadatum.

Eine kurze Recherche brachte mich hier schnell weiter: WordPress bietet die Möglichkeit, einem Beitrag beliebige Metadaten als Key-Value-Paar hinzuzufügen. Allerdings muss man diese Einstellung erst aktivieren.⁴ Im Block-Editor geht das unter dem Punkt Voreinstellungen im Optionsmenü (drei Punkte oben rechts). Dort muss man in der Rubrik Allgemein ganz unten bei Erweitert die Einstellung Individuelle Felder aktivieren. Anschließend tauchen die Individuellen Felder ganz unten im Block-Editor auf. Hier lässt sich nun z.B. der TL;DR-Text eintragen. (Auf Screenshots verzichte ich hier, da die angegebene Quelle das Ganze ausreichend bebildert.)

Jetzt müssen wir das Metadatum nur noch per Shortcode innerhalb des Synced Patterns abfragen. Wenig überraschend gibt es hierfür eine PHP-Funktion.⁵ Die Nutzung ist denkbar einfach:

add_shortcode("tldr", function($atts = array(), $content = null, $tag = "") {	global $post;	return get_post_meta($post->ID, "tldr", true);});

Und dennoch: So richtig begeistert war ich von meiner Lösung nicht. War ich wirklich der Einzige mit diesem Problem? Gibt es denn nichts out-of-the-box? Doch, gibt es! Wie ich eingangs aber geschrieben habe, sind die richtigen Suchbegriffe eben essentiell. Die Lösung heißt Synced Pattern Override.⁶ Man baut ein Synced Pattern und wählt dann den Block im Pattern aus, welcher je Beitrag individualisierbar sein soll. Anschließend aktiviert man in der rechten Sidebar des Block-Editors im Reiter Block unter der Rubrik Erweitert die Option Überschreibungen aktivieren. Fertig – an jeder Stelle, wo das Pattern verwendet wird, lässt sich der Block-Inhalt jetzt individuell überschreiben!

Der Shortcode und die Metadaten können dann natürlich wieder entfernt werden.

Foto von Iker Urteaga auf Unsplash

1. Infos zu TL;DR gibt es hier. ↩︎
2. https://wordpress.com/de/support/wordpress-editor/block-vorlagen/ ↩︎
3. https://wordpress.org/documentation/article/reusable-blocks/ ↩︎
4. https://www.wpdownloadmanager.com/post-meta-in-wordpress/ ↩︎
5. https://developer.wordpress.org/reference/functions/get_post_meta/ ↩︎
6. https://github.com/WordPress/gutenberg/issues/20240
   https://kinsta.com/blog/wordpress-block-patterns/#synced-pattern-overrides ↩︎