Der WordPress eigene Gutenberg Editor spaltet die WordPress Gemeinde wie keine Neuerung vor ihm. Ich gehöre zu den Leuten, die ihm gegenüber eher aufgeschlossen sind, auch wenn nicht alles Gold ist, was glänzt. Bis er mit den entsprechenden Erweiterungen ein ernsthafter Konkurrent zu etablierten Pagebuildern wie Elementor, BeaverBuilder oder Divi ist, müssen noch einige Kinderkrankheiten ausgemerzt und dringend benötigte Features eingeführt werden.
Ein wirklich nützliches Feature in Gutenberg sind die wiederverwendbaren Blöcke. Wiederverwendbare Blöcke in Gutenberg erachte ich als elementare Bestandteile einer modernen Blockverwaltung. Bei richtiger Handhabe sparen sie Zeit und Aufwand und führen zu mehr inhaltlicher Konsistenz auf der WordPress Webseite.
Was sind wiederverwendbare Blöcke in WordPress?
Die Arbeit mit Blöcken dürfte angesichts der Verbreitung von Visuellen Editoren oder entsprechenden WordPress-Themes niemandem mehr fremd sein. Überall ist alles nur noch ein Container, Modul oder eben ein Block.
Wiederverwendbare Blöcke werden einmal erstellt und können dann immer wieder verwendet werden. Zentral verwaltet und auf beliebig vielen Seiten und Beiträgen verteilt. Ein Beispiel: Statt immer und immer wieder einen Textabsatz mit denselben Kontaktdaten zu erstellen und auf den Seiten einzubauen, wird dieser Textabsatz nur einmal als wiederverwendbarer Block erstellt. Er steht dann unter seinem individuellen Namen in der Blockauswahl zur Verfügung und kann aus dieser heraus auf den gewünschten Seiten eingefügt werden.
Das bedeutet aber auch, dass diese „Kopien“ in direkter Beziehung zum „Original“ stehen. Und das bedeutet wiederum, dass Änderungen an auch nur einer dieser Instanzen von allen anderen Instanzen und dem Original automatisch übernommen werden. Das ist Fluch und Segen zugleich. Die Vorteile überwiegen aber die Nachteile. Ausgehend von unserem Beispiel reicht es aus, nur eine Instanz des wiederverwendbaren Blocks zu bearbeiten, wenn sich beispielsweise die Telefonnummer auf allen Kopien ändern soll. Diese Änderung wird 1:1 von allen anderen Instanzen dieses wiederverwendbaren Blockes übernommen. Das erspart einem die separate Bearbeitung sämtlicher Seiten auf denen ein Textabsatz mit Kontaktdaten hinterlegt war.
Problematisch wird es, wenn nicht alle Instanzen diese generelle Änderung mitmachen sollen. So ist es vorstellbar, dass eine Seite zwar dieselben Kontaktdaten wie alle anderen Seiten hat, aber eine ganz andere Telefonnummer. Hier kann man diese Instanz in einen normalen Block umwandeln und dann bearbeiten, ohne dass die anderen wiederverwendbaren Block-Instanzen davon betroffen sind.
Im WordPress Backends gibt es keinen Menüpunkt, der einem die zentrale Arbeit an den wiederverwendbaren Blöcken erlaubt. Aber wie basteln uns einen. Fügt in die Datei functions.php des aktiven Themes den nun folgenden Codeschnipsel ein. Achtet darauf, dass ihr ein Child Theme einsetzt, denn sonst sind diese Anpassungen beim nächsten Theme-Update weg. Bei Premium Themes gibt es oftmals auch die Möglichkeit, eigene Codeschnipsel in den Theme-Settings zu hinterlegen. Oder ihr macht es wie ich und benutzt das Plugin Code Snippets. In der letztgenannten Variante lasst ihr dann das führende <?php weg.
<?php
function be_reusable_blocks_admin_menu() {
add_menu_page( 'Reusable Blocks', 'Reusable Blocks', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}
add_action( 'admin_menu', 'be_reusable_blocks_admin_menu' );Wenn dieser Codeschnipsel aktiv und geladen ist, habt ihr im Admin-Menü des WordPress Backends einen Punkt „Reusable Blocks„, unter dem alle bisher angelegten wiederverwendbaren Blöcke aufgelistet sind und sich bearbeiten lassen. Ich frage mich, warum niemand im Entwicklerteam darauf kommt, das von Haus aus zu integrieren.
Ein anderer Weg dorthin zu gelangen führt über die Bearbeitungsansicht des Gutenberg Editors. Dazu müsst ihr eine Seite bzw. einen Beitrag bearbeiten, einen wiederverwendbaren Block einfügen (oder erstellen). In den Einstellungen dieses Blocks findet man dann die Option „Wiederverwendbare Blöcke verwalten„, die einen zu der bereits bekannten Übersicht bringt. Umständlich, oder?
Shortcodes als Alternative
Man kann die Funktion eines wiederverwendbaren Blockes in WordPress bis zu einer gewissen Komplexität auf einem anderen Weg erreichen. Das Stichwort sind hier Shortcodes. Allerdings sind hier Programmierkenntnisse vonnöten, während die Arbeit mit Gutenberg visuell bzw. über drag&drop erfolgt.
Kehren wir zu unserem Beispiel der Kontaktdaten zurück. In der Datei functions.php eures aktiven Themes (oder einer der genannten Alternativen) fügt ihr diesen Code ein:
<?php
add_shortcode( 'kontaktdaten', function () {
$ausgabe = '<div class="kontakt"><p>Telefon: 0815 - 4711</p>
<p>Telefax: 0815 - 4712</p></div>';
return $ausgabe;
} );Fertig.
Jetzt könnt ihr den Shortcode auf jeder Seite oder Beitrag platzieren und dort ausführen lassen. Entweder über den Block Individuelles HTML oder den Shortcode Block von Gutenberg. Ausgegeben wird ein div Container mit einer Telefon- und einer Telefax-Nummer als einfacher Text. Stylen kann man das mittels CSS, da der Container eine eigene Klasse kontakt hat. Möchte man etwas am Inhalt ändern, dann erfolgt das direkt am Original – Shortcode in der Datei functions.php.
[kontaktdaten]Ausgabe der Shortcodes mit Attributen unterschiedlich gestalten
Mann kann hier sogar das Problem einer inhaltlich leicht abweichenden Instanz lösen. Dazu fügt man dem auf der Seite platzierten Shortcode-Aufruf noch ein Attribut hinzu und übergibt dieses als Parameter der eigentlichen Shortcode-Funktion. Durch eine if-Schleife kann man daraufhin zum Beispiel eine andere Telefonnummer ausgeben. Usw. usf.
Die Shortcode Alternative funktioniert nur mit handgeschriebenem Code (falls sich dadurch wider Erwarten auch Blöcke aufrufen und ausführen lassen, möge man mich bitte darüber aufklären) und hat auch noch einen anderen Nachteil: Zum grundsätzlichen Entfernen des Shortcode-Aufrufes muss man doch wieder alle betreffenden Seiten oder Beiträge bearbeiten. Wer in der Datenbanksprache SQL bewandert ist, kann eine Seitenweite Suchen & Ersetzen Operation verwenden, muss aber alle möglichen Ausprägungen des Shortcodes mit Parametern und Variablen berücksichtigen.
Wie sinnvoll das alles ist oder nicht, muss jeder für sich entscheiden. Fakt ist, dass es diesen Weg gibt und man in etwa dasselbe Ergebnis erzielt. Bevor Gutenberg habe ich in solchen Fällen immer auf Shortcodes gesetzt und solange sie funktionieren, ist eine Umstellung nicht nötig.
Fazit
Wiederverwendbare Blöcke sind ein leistungsstarkes Feature im Gutenberg Editor, werden aber von den Entwicklern bisher eher stiefmütterlich behandelt. Ich habe euch aber gezeigt, wie ihr diese Blöcke im Backend besser organisieren könnt. Sie sind für immer gleiche Inhalte gedacht, die aber an unterschiedlichen Orten der Webseite platziert werden sollen. Beispiele wären Kontaktdaten, Öffnungszeiten, Hinweistexte oder auch Call to Action Buttons. Die Ersparnis bei Arbeitszeit und Aufwand ist umso größer, je öfter so ein wiederverwendbarer Block verwendet wird, da man nicht mehr jede Instanz dieses Blockes bearbeiten muss, sondern nur das „Original“. Das führt auch zu konsistenteren Inhalten und zur Fehlerreduzierung. Eine Unterseite mit veralteten Öffnungszeiten kann es damit nicht mehr geben, da die Änderung an einer Block-Instanz alle Instanzen dieses wiederverwendbaren Blockes betrifft.
Ob jetzt dieses eine Feature ausreicht, um den Gutenberg Editor für Divi- oder Elementor-Nutzer interessanter zu machen – glaube ich nicht. Solche Vorlagen bzw. globalen Templates/Widgets/Module gibt es auch in anderen Produkten. Allerdings ist Gutenberg kostenlos, schnell und bei WordPress die Grundlage.
