Sie haben 20 Minuten in einen stilvollen Call-to-Action-Block investiert. Sie haben Farben, Abstände und Text feinjustiert. Eine Woche später ertappen Sie sich dabei, denselben Block auf einer anderen Website von Grund auf neu zu erstellen. Kommt Ihnen das bekannt vor?

Das manuelle Kopieren von Blöcken zwischen WordPress-Seiten frisst Stunden, die Sie nicht haben. Doch Gutenberg hat dieses Problem längst gelöst: Wiederverwendbare Blöcke plus JSON-Export ermöglichen es Ihnen, jeden Block in weniger als einer Minute auf eine andere Website zu übertragen. Keine Plugins, keine vollständigen Datenbank-Exports, kein Kampf mit XML-Importen.

Diese Anleitung führt Sie durch jeden Schritt, vom Erstellen eines wiederverwendbaren Blocks bis zum Import auf einer separaten Website. Dazu eine alternative Plugin-Lösung, die den Prozess noch einfacher macht.

💡 Kurzüberblick:

• Erstellen Sie einen Block im Gutenberg-Editor und wandeln Sie ihn in einen wiederverwendbaren um
• Exportieren Sie ihn als JSON-Datei über die Blockverwaltungsoberfläche
• Importieren Sie die JSON-Datei auf der Ziel-WordPress-Seite, und der Block ist einsatzbereit
• Alternativ erlaubt Ihnen das Plugin Blocks Export Import, beliebige Blöcke zu exportieren, nicht nur wiederverwendbare

Was wiederverwendbare Blöcke sind und warum Sie sie brauchen

Ein wiederverwendbarer Block in Gutenberg ist eine gespeicherte Inhaltsvorlage, die Sie einmal erstellen und dann in jeden Beitrag oder jede Seite einfügen. Bearbeiten Sie den ursprünglichen Block, und die Änderungen werden überall dort wirksam, wo er verwendet wird.

Typische Anwendungsfälle:

• Ein Dankeshinweis oder eine Signatur am Ende jedes Artikels
• Ein Banner mit einer Werbeaktion oder einem Anmeldeformular
• Ein Block mit Kontaktdaten, rechtlichen Hinweisen oder Copyright-Informationen
• Ein Bild-Slider oder eine Galerie, die auf mehreren Seiten wiederverwendet wird

Vor Gutenberg hätten Sie solche Snippets in einer Textdatei auf Ihrem Desktop aufbewahrt und aus der Zwischenablage eingefügt. Jetzt funktioniert dies auf WordPress-Core-Ebene und lässt sich zwischen Websites übertragen.

Wichtiger Hinweis: Wenn ein Block auf ein Drittanbieter-Plugin angewiesen ist (zum Beispiel Blöcke von Getwid oder Stackable), muss dasselbe Plugin auf der Zielseite installiert sein. Andernfalls öffnet der Block mit einem Fehler oder verliert einen Teil seiner Formatierungen.

1. Einen wiederverwendbaren Block erstellen

Öffnen Sie den Gutenberg-Editor über Beiträge → Neu erstellen. Klicken Sie auf das Block hinzufügen (+)-Symbol in der oberen Werkzeugleiste und wählen Sie den gewünschten Blocktyp. Im folgenden Beispiel ist es ein einfacher Absatzblock:

Konfigurieren Sie den Block: Fügen Sie Text, Links, Hintergrundfarbe, Innenabstände hinzu, alles, was Sie für das endgültige Erscheinungsbild benötigen. In unserem Beispiel ist das Ergebnis ein Dankesblock mit Social-Media-Links und farbigem Hintergrund:

So sieht der fertige Block nach der Gestaltung und den Textanpassungen aus:

Bisher ist dies ein normaler Block. Um ihn wiederverwendbar zu machen, klicken Sie auf das Weitere Optionen-Symbol (drei Punkte) in der Block-Werkzeugleiste und wählen Sie Zu wiederverwendbaren Blöcken hinzufügen:

Geben Sie dem Block einen Namen und klicken Sie auf Speichern. Fertig: Der Block erscheint nun in der Bibliothek der wiederverwendbaren Blöcke Ihrer Website.

2. Einen wiederverwendbaren Block in Beiträgen nutzen

Einen gespeicherten Block in einen beliebigen Beitrag oder eine Seite einzufügen, erfordert nur wenige Klicks. Klicken Sie im Gutenberg-Editor auf Block hinzufügen (+), wechseln Sie zum Tab Wiederverwendbare Blöcke und wählen Sie den gewünschten Block aus:

Nachdem Sie den Block eingefügt haben, klicken Sie auf Vorschau oder Veröffentlichen und prüfen Sie das Ergebnis auf der Frontend-Seite:

Der Block funktioniert in jedem Beitragstyp, der den Gutenberg-Editor unterstützt: Beiträge, Seiten, benutzerdefinierte Beitragstypen. Einmal erstellen, überall verwenden.

3. Export des Blocks als JSON

Sobald der Block fertig und getestet ist, können Sie ihn für die Übertragung auf eine andere Website exportieren. Klicken Sie im Gutenberg-Editor auf das Symbol Weitere Werkzeuge und Optionen (drei Punkte oben rechts) und wählen Sie Alle wiederverwendbaren Blöcke verwalten:

Es öffnet sich eine Übersicht aller wiederverwendbaren Blöcke der Website. Aktuell ist dort nur einer vorhanden, der Dankes-Hinweis. Wenn Sie weitere Blöcke erstellen, wächst die Liste entsprechend:

Fahren Sie mit der Maus über den Blocknamen, erscheint der Link Als JSON exportieren. Klicken Sie darauf:

Ihr Browser lädt eine Datei mit der Endung .json herunter. Speichern Sie diese in einem geeigneten Ordner auf Ihrem Computer:

Die JSON-Datei enthält die vollständige Blockstruktur: HTML-Markup, Stile, Attribute, verschachtelte Blöcke. Es handelt sich um eine in sich geschlossene Datei, bereit zum Import auf jeder WordPress-Website mit aktivem Gutenberg.

4. Import des Blocks auf einer anderen Website

Öffnen Sie auf der Ziel-Website den Gutenberg-Editor (Beiträge → Neu erstellen). Klicken Sie erneut auf Weitere Werkzeuge und Optionen und wählen Sie Alle wiederverwendbaren Blöcke verwalten:

Klicken Sie auf der Übersichtsseite der Blöcke auf die Schaltfläche Aus JSON importieren, wählen Sie die zuvor heruntergeladene Datei aus und klicken Sie auf Importieren:

Fertig. Der importierte Block erscheint in der Liste und steht sofort zum Einfügen in Beiträge zur Verfügung:

Ab diesem Zeitpunkt können Sie den Block auf der zweiten Website genauso nutzen wie auf der ersten. Wiederholen Sie den Vorgang für beliebig viele Blöcke; es gibt keine Einschränkungen.

Alternative Methode: das Plugin Blocks Export Import

Der manuelle Weg über die Umwandlung in einen wiederverwendbaren Block funktioniert in den meisten Fällen, hat jedoch eine Einschränkung: Sie können ausschließlich wiederverwendbare Blöcke exportieren. Ein regulärer Block, den Sie gerade gestaltet haben, muss zunächst umgewandelt und erst dann exportiert werden.

Das Blocks Export Import-Plugin von ThemeIsle hebt diese Einschränkung auf. Es fügt direkt im Menü eines jeden Blocks eine Export-Schaltfläche hinzu, ohne einen Zwischenschritt zur Konvertierung.

Installieren und aktivieren Sie das Plugin, öffnen Sie dann den Gutenberg-Editor und erstellen Sie einen Block. Im Menü Weitere Optionen erscheint nun der Eintrag JSON exportieren:

Eine JSON-Datei mit der vollständigen Blockstruktur wird auf Ihren Computer heruntergeladen. Um sie auf einer anderen Website zu importieren, klicken Sie auf Block hinzufügen (+), wechseln zum Tab Widgets und wählen Blöcke aus JSON importieren:

Klicken Sie anschließend auf Datei auswählen, geben Sie die JSON-Datei auf Ihrem Computer an und klicken Sie auf Hochladen:

Die Plugin-Methode hat einen Haken: Auf diese Weise importierte Blöcke werden nicht in der wiederverwendbaren Blockbibliothek der Website gespeichert. Sie existieren nur als JSON-Datei auf Ihrem Computer. Die manuelle Methode (Abschnitte 1-4) hingegen speichert den Block in der WordPress-Datenbank, sodass er über die Standard-Blockverwaltung zugänglich bleibt.

Welche Methode Sie wählen, hängt von Ihrem Szenario ab: Für eine einmalige Übertragung zwischen Ihren eigenen Websites greifen Sie zum Plugin (es ist schneller); für die laufende Arbeit mit einer Blockbibliothek über mehrere Websites hinweg eignen Sie sich den nativen Export wiederverwendbarer Blöcke an.

Video: Gutenberg-Blöcke exportieren und importieren in der Praxis

Sehen Sie sich ein kurzes Video-Tutorial an, das den vollständigen Zyklus zeigt, vom Erstellen eines wiederverwendbaren Blocks bis zum Import auf einer anderen WordPress-Website:

⁉️🤔 Häufig gestellte Fragen

Kann ich mehrere Blöcke in einer einzigen Datei exportieren?

Ja. Wählen Sie im Editor mehrere Blöcke aus (halten Sie die Umschalttaste gedrückt und klicken Sie jeden an), gruppieren Sie sie über Zu wiederverwendbaren Blöcken hinzufügen und exportieren Sie die entstandene Gruppe als einzelne JSON-Datei. Das Plugin Blocks Export Import unterstützt ebenfalls Mehrfachexporte: Wählen Sie die Blöcke aus und wählen Sie JSON exportieren, dann landen alle ausgewählten Blöcke in einer Datei.

Was tun, wenn ein importierter Block fehlerhaft dargestellt wird?

Drei wahrscheinliche Ursachen. Erstens: Das Plugin, dessen Blöcke der importierte Inhalt voraussetzt (Getwid, Stackable, Kadence Blocks oder ähnliche), ist auf der Zielseite nicht installiert. Installieren Sie das Plugin und importieren Sie erneut. Zweitens: Die Themes der beiden Seiten unterscheiden sich im CSS deutlich, sodass der Block falsche Schriftarten oder Abstände erben kann. Passen Sie dies in den Blockeinstellungen an oder fügen Sie benutzerdefiniertes CSS hinzu. Drittens: Die JSON-Datei wurde beim Transfer beschädigt; laden Sie sie erneut herunter und importieren Sie sie.

Wie unterscheide ich im Editor einen normalen von einem wiederverwendbaren Block?

Ein wiederverwendbarer Block wird im Gutenberg-Editor mit einem violetten Rahmen hervorgehoben und zeigt in der Werkzeugleiste ein Wiederverwendungssymbol (zwei Schleifenpfeile). Ein normaler Block hat einen blauen Rahmen ohne besonderes Symbol. Wenn Sie mit der Maus über einen wiederverwendbaren Block fahren, wird dessen Name eingeblendet.

Bleiben Theme-Stile beim Export eines Blocks erhalten?

Teilweise. Das JSON enthält Inline-Markup und Blockattribute (Hintergrundfarbe, Textgröße, Farbverläufe, alles, was über Gutenbergs Einstellungen gesetzt wurde). Stile, die in der style.css des aktiven Themes definiert sind, werden nicht in das JSON aufgenommen: Sie gehören zum Theme, nicht zum Block. Auf einer anderen Seite mit einem anderen Theme kann der Block daher anders aussehen. Setzen Sie bei designkritischen Blöcken die wesentlichen Stile über die blockeigenen Einstellungen und nicht über Theme-CSS.

Gibt es eine Größenbeschränkung für das exportierte JSON?

Technisch nicht, aber sehr große Blöcke mit Dutzenden verschachtelter Elemente können eine JSON-Datei von mehreren Megabyte erzeugen. Beim Import einer solchen Datei greift die Direktive upload_max_filesize in der PHP-Konfiguration des Servers (Standard ist 2 MB). Überschreitet das JSON das Limit, erhöhen Sie die Direktive in der php.ini oder teilen Sie den Block in kleinere Einheiten auf.

Wenn manueller Export einem Plugin überlegen ist

Die manuelle Methode über wiederverwendbare Blöcke ist im WordPress-Core integriert. Sie hängt nicht von Drittanbieter-Updates ab, fügt Ihrer Seite keinen zusätzlichen Code hinzu und speichert Blöcke in der Datenbank, sodass Sie sie in der Standardverwaltungsoberfläche sehen können.

Das Plugin Blocks Export Import punktet mit Geschwindigkeit, wenn Sie nur schnell einen Block greifen und direkt übertragen möchten, ohne ihn in der Bibliothek zu speichern. Wenn Sie jedoch systematisch mit einem Satz Standardblöcke über mehrere Seiten hinweg arbeiten, lernen Sie den nativen wiederverwendbaren Export. Eine Blockbibliothek, die von jedem Beitrag aus zugänglich ist, macht diesen zusätzlichen Konvertierungsklick mit der Zeit wett.

Probieren Sie beide Methoden auf einem Testpaar von Seiten aus und wählen Sie, was zu Ihrem Workflow passt. Zehn Minuten Einrichtung heute sparen über ein Jahr Dutzende Stunden.