So erstellst Du eigene Block Vorlagen für Gutenberg

Block Vorlagen sind eine tolle Neuerung in WordPress 5.5. Sie können die Arbeit wesentlich erleichtern. In diesem Tutorial zeige ich Dir, wie Du eigene Block Vorlagen erstellen kannst.

Die neuen Block Vorlagen sind ein Highlight von #wpversion 5.5 und bringen den Block Editor #gutenberg ein gutes Stück weiter in Richtung Page Builder. Nach meiner Einschätzung werden wir in nächster Zeit eine Fülle an Block Vorlagen sehen.

Nun habe ich mir dieses neue Feature einmal genauer angesehen. Vor allem habe ich mich gefragt, wie man solche Block Vorlagen erstellen kann. Es ist zum Glück keine Wissenschaft. Ich nehme Dich mit auf meine Reise in die Welt der Block Vorlagen.

Was ist der Unterschied zwischen Block Vorlagen und wiederverwendbaren Blöcken?

Wiederverwendbare Blöcke dienen in erster Linie dazu, den gleichen Inhalt auf mehreren Seiten bzw. in mehreren Beiträgen einzufügen. Ändert man den Inhalt an einer Stelle, dann ändert sich dieser überall.

Im Unterschied dazu dienen Block Vorlagen wie die Bezeichnung schon erahnen lässt eben als Vorlage. Bei der Block Vorlage geht es in erster Linie um das Layout und nicht um den Inhalt.

Werden ein oder mehrere Blöcke aus einer Block Vorlage eingefügt, so entstehen daraus ganz normale Blöcke, die keinen Bezug mehr zur Vorlage haben. Diese Blöcke können wie gewohnt bearbeitet werden. Die Block Vorlage bleibt unverändert.

Wie werden Block Vorlagen erstellt?

Ein Blick in die Dokumentation der Block API zeigt, dass das Erstellen einer eigenen Block Vorlage keine große Wissenschaft ist. Mit etwas Code lässt sich das offensichtlich leicht bewerkstelligen.

Aus der Dokumentation ist ersichtlich, dass die gewünschten Blöcke mit den gewünschten Inhalten einfach wie gewohnt erstellt werden können. Der daraus entstehende Code muss dann nur als Block Vorlage registriert werden.

Wo baue ich den Code für die Block Vorlage ein?

Den Code, der die Block Vorlage registriert, baust Du entweder in ein eigenes #plugin ein oder Du erstellst ein Child Theme. Alternativ kannst Du auch das Plugin Code Snippets verwenden.

Alles weitere zu diesen drei Möglichkeiten erfährst Du im Artikel So bindest Du WordPress Code Snippets auf Deiner Website ein. Dort findest Du auch Links zu weiterführenden Artikeln mit Schritt für Schritt Anleitungen.

Das Beispiel für diesen Artikel erstelle ich als Plugin. So kann ich es einfach als Download zur Verfügung stellen. Diesen findest Du am Ende des Artikels.

Was ist zu beachten?

Wenn Du eine Block Vorlage für den Eigengebrauch erstellst, gibt es nicht viel zu beachten. Möchtest Du die Block Vorlage aber zum Beispiel als Plugin öffentlich zur Verfügung stellen, sind einige Überlegungen nötig.

Du müsstest in Deinem Plugin überprüfen, ob die Blöcke, die Du in deiner Vorlage verwendest, zur Verfügung stehen. Ist das nicht der Fall, müsstest Du eine Fehlermeldung anzeigen oder einen Hinweis, welche Blöcke nachinstalliert werden müssen.

Außerdem müsstest Du beachten, dass alle Inhalte, die Du einfügst, für jeden verfügbar sind. Wenn Du beispielsweise Bilder in Deiner Block Vorlage verwendest, müssen diese Bilder öffentlich zugänglich sein oder Du erstellst die benötigten Bilder beim Aktivieren des Plugins in der Mediathek des Benutzers (eine weitere Möglichkeit folgt weiter unten).

Für mein Beispiel spare ich mir all das. Ich verwende zum Erstellen der Vorlage das Standard-Theme Twenty Twenty und nutze nur standardmäßig vorhandene Blöcke. Ich teste das Beispiel Plugin nicht mit anderen Themes, kann also nicht garantieren, dass Du es mit Deinem Theme so verwenden kannst.

Erstellen der Vorlage im Gutenberg Editor

Für meine Beispiel Vorlage lege ich eine neue Seite an, in der ich die Blöcke so erstelle, wie ich sie später in der Block Vorlage haben möchte. Im folgenden Screenshot siehst Du das Beispiel, wie ich es im Editor erstellt habe.

Du kannst Deine Vorlage beliebig erstellen, ich beschreibe die weiteren Schritte nachfolgend so, dass Du alles nachvollziehen kannst.

Für mein Beispiel habe ich einen Spalten-Block erstellt. Diesen habe ich so eingestellt, dass er die gesamte Breite einnimmt und als Hintergrund einen Farbverlauf gewählt.

Der Spalten-Block erhält vier Spalten. Die Breite der ersten und der letzten Spalte habe ich jeweils auf 10% eingestellt, die Breite der beiden mittleren Spalten auf je 40%.

Die beiden äußeren Spalten dienen lediglich als Abstandhalter, die beiden mittleren Spalten befülle ich jeweils mit einer Grafik von Pixabay, einer Überschrift und einem Button.

Damit ist meine Beispiel Vorlage fertig.

Erstellen des Codes

Den HTML-Code für die erstellten Blöcke können wir nun über die Block API als Block Pattern registrieren. Dazu benötigen wir als erstes den HTML-Code der Blöcke.

Dazu schaltest Du im Editor auf die Code-Ansicht um. Du findest den Code-Editor im erweiterten Menü – die drei Punkte ganz rechts oben.

Danach siehst Du im Editor den Code, den Gutenberg generiert (um wieder zur gewohnten Ansicht zurückzukehren musst Du danach nur auf den visuellen Editor umschalten).

Nun kopierst Du den gesamten Code und fügst ihn in einem Editor ein. An dieser Stelle mein üblicher Hinweis, dass ein Textverarbeitungsprogramm wie beispielsweise Word kein Editor ist und nicht zum Bearbeiten von Code geeignet ist. Ich verwende zum Beispiel Notepad++.

An dieser Stelle tritt nun ein bereits angesprochenes Problem auf. Die beiden verwendeten Bilder liegen in meiner Mediathek. Wenn ich den Code so weitergeben würde, würde die Block Vorlage bei jedem, der sie verwendet, auf die Bilder auf meinem Server zugreifen. Das möchte ich nicht.

Um dieses Problem zu lösen, wandle ich die Bilder in das Base64 Format um. Wenn Du keine Bilder in Deiner Block Vorlage verwendest, kannst Du den folgenden Abschnitt überspringen.

Bilder in Base64 codieren

Bei Base64 handelt es sich um ein Verfahren zur Codierung von binären Daten in eine Zeichenfolge, die nur aus ASCII-Zeichen besteht. Damit lässt sich ein Bild direkt in den HTML-Code einbetten und muss somit nicht mehr aus einer Quelle geladen werden.

Machen wir dazu einen kurzen Exkurs in die Welt von HTML und sehen uns an, wie ein Bild in HTML eingefügt wird. Zum Einfügen eines Bildes wird der HTML-Tag img verwendet.

Das eigentliche Bild ist nicht Bestandteil des HTML-Codes sondern wird im img Tag referenziert. Der img Tag ist ein Container für das eigentliche Bild, das nachträglich geladen wird.

<img src="https://dummyimage.com/600x400/000/fff">

Das Attribut src gibt die Adresse an, von der das Bild nachgeladen werden soll. Im obigen Beispiel wird ein Bild von dummyimage.com geladen.

Um ein Bild Base64 codiert in den Code einzufügen wird die Adresse durch eine sogenannte Data-URI ersetzt. Diese beginnt anstatt mit https mit data. Darauf folgen ein paar Angaben, um welche Daten es sich handelt und dann kommen die eigentlichen Daten.

Um Deine Bilder in Base64 zu codieren, kannst Du den Dienst base64-image.de verwenden. Hier lädst Du ein Bild hoch und erhälts den fertigen Code zum Einfügen in den img Tag. Den Code kannst Du einfach in die Zwischenablage kopieren.

Die ersten 100 Zeichen des Codes für mein erstes Bild sehen wie folgt aus.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAPHCAYAAAB32eTBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxj

Den Rest erspare ich Dir hier, die erzeugte Zeichenkette hat 107.778 Zeichen. Die komplette Zeichenkette bauen wir in das scr Attribut des img Tags ein. Das sieht dann in etwa wie folgt aus.

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAPHCAYAAAB32eTBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxj.....">

Dass der HTML-Code dadurch für Dich unleserlicher wird, ist kein Problem. Alle Browser verstehen das.

Diese Codierung nehme ich für beide Bilder vor, die ich verwendet habe. Damit ist das Bilder-Problem gelöst.

Block Pattern registrieren

Der fertige HTML-Code meiner Beispiel Vorlage sieht jetzt wie folgt aus (die Base64 Codes habe ich wieder gekürzt).

<!-- wp:columns {"align":"full","gradient":"luminous-dusk"} -->
<div class="wp-block-columns alignfull has-luminous-dusk-gradient-background has-background"><!-- wp:column {"width":10} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column -->

<!-- wp:column {"width":40} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"align":"center","id":627,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAPHCAYAAAB32e....." alt="" class="wp-image-627"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center","textColor":"background"} -->
<h2 class="has-text-align-center has-background-color has-text-color">Lorem ipsum dolor sit amet</h2>
<!-- /wp:heading -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Klick mich</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"width":40} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:image {"align":"center","id":630,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAAPHCAYAAAB32e....." alt="" class="wp-image-630"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"align":"center","textColor":"background"} -->
<h2 class="has-text-align-center has-background-color has-text-color">At vero eos et accusam </h2>
<!-- /wp:heading -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Klick mich</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"width":10} -->
<div class="wp-block-column" style="flex-basis:10%"></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Unsere Block Vorlage können wir nun mit dem Befehl register_block_pattern registrieren. Als Parameter werden lediglich der Name, den die Vorlage haben soll, sowie der HTML-Code benötigt. Weitere Parameter sind optional.

Bevor wir alles zusammenbauen können, folgt ein sehr wichtiger Schritt. Bestimmte Zeichen in unserem HTML-Code müssen maskiert (englisch ecaped) werden, um im PHP-Code eingefügt werden zu können. Darauf gehe ich an dieser Stelle nicht näher ein, das würde zu weit führen. Aber ohne diese Maskierung funktioniert der Code nicht.

Du kannst dazu das Tool JSON Escape von Code Beautify verwenden. Kopiere Dir den gesamten HTML-Code in die Zwischenablage und füge ihn in das obere Textfeld ein. Durch Klick auf „Escape“ erhälts Du im unteren Textfeld den fertig maskierten Text.

Diesen maskierten Text können wir jetzt in register_block_pattern verwenden. Der Befehl sieht beispielhaft wie folgt aus.

register_block_pattern(
    'eindeutige-block-vorlage-id',
    array(
        'title'       => 'Meine Block Vorlage',
        'content'     => "HTML Code"
    )
);

Alles zu einem Plugin zusammenfügen

Nun haben wir alles zusammen und fügen den Code in ein Plugin ein. Wie Du ein Plugin erstellst erfährst Du im Artikel Ein WordPress Plugin erstellen – so geht’s.

Damit unser PHP-Code ausgeführt wird, müssen wir ihn durch einen Hook aufrufen lassen. Dazu verwenden wir den Hook init.

Nachfolgend der fertige Plugin Code. Den HTML-Code habe ich gekürzt.

<?php
/*
Plugin Name: Meine Block Vorlage
Plugin URI: https://wpwissen.com/eigene-gutenberg-block-vorlagen
Description: Dieses Plugin registriert eine Block Vorlage für den Gutenberg Editor. Es dient zur Demonstration für den Artikel "So erstellst Du eigene Block Vorlagen für Gutenberg", erschienen auf wpwissen.com.
Author: Peter von wpwissen.com
Author URI: https://wpwissen.com
Version: 1.0.0
*/


// Direkten Aufruf verhindern
if ( ! defined( 'WPINC' ) ) {
  
	die;
  
}


// Funktion Registrieren der Block Vorlage
function meine_block_vorlage() {

  register_block_pattern(
      'meine-vorlagen/beispiel-block-vorlage',
      array(
          'title'       => 'Meine Beispiel Block Vorlage',
          'content'     => "<!-- wp:columns {\"align\":\"full\",\"gradient\":\"luminous-dusk\"} -->.....",
      )
  );
  
}


// Aufruf der Funktion im init Hook
add_action( 'init', 'meine_block_vorlage' );

?>

Nach dem Aktivieren des Plugins finden wir unsere Block Vorlage auch schon in der Vorlagen-Bibliothek. Da wir keine Kategorie für die Vorlage definiert haben, finden wir sie unter „Allgemein“.

Nun können wir unsere Block Vorlage in den Artikel einfügen und bearbeiten.

Download

Hier kannst Du das Plugin mit der Beispiel Block Vorlage als ZIP-Datei herunterladen.

Fazit

Eine eigene Block Vorlage zu erstellen ist kein Hexenwerk. Wenn Du in Deinen Artikeln öfters einen identischen Aufbau verwendest, kann es sich schnell lohnen, einmal die Zeit zu investieren um dafür eine Block Vorlage zu erstellen.