Gutenberg Block-Pattern erstellen

Im Artikel Card Design mit Gutenberg habe ich ein Layout-Modul im Card-Look erstellt. Dieses Modul möchte ich jetzt als Block Pattern speichern.

So soll das Modul aussehen, für das ich eine Block-Vorlage (die deutsche Übersetzung für Block-Pattern) erstellen will:

Schritt 1: Block-Vorlage per Funktion registrieren

Zuerst muss ich die neue Block-Vorlage per Funktion registrieren. Das kann ich in der functions.php machen. Ich könnte auch ein Plugin für alle Block-Patterns schreiben. Dann kann ich die Patterns für mehrere Projekte benutzen.

Noch ein Wort zum CSS: Mein Card-Modul arbeitet mit zwei zusätzlichen CSS-Klassen. Dieses CSS muss im Theme vorhanden sein. Wenn ich also die Block-Vorlage per Plugin einbauen würde, müsste ich dem Plugin eine CSS-Datei mit den notwendigen Styles mitgeben.

Die Funktion, mit der die Block-Pattern registriert wird, heißt register_block_pattern. Jede Vorlage hat einen Titel (title), eine Beschreibung (description) und man kann die Kategorie (category) definieren, unter der die Vorlage erscheinen soll. Und einen Inhalt (content) hat die Vorlage natürlich auch.

HINWEIS: Damit die Funktion keinen Fehler produziert, muss WP 5.5 oder das Gutenberg-Plugin aktiv sein.

register_block_pattern(
'ks-card-pattern',
array(
'title' => __( '2 Columns with Cards', 'ks-block-pattern' ),
'description' => _x( 'Two Columns with Cards', 'Two Columns with Cards', 'ks-block-pattern' ),
'categories' => array('columns'),
'content' => "Hier kommt der Code für die Vorlage hin",
) 
);

Schritt 2: Block-Code kopieren

Jetzt brauchen wir noch den Code für die Vorlage. Dazu gehst du an die Stelle, wo du die Block-Vorlage erstellt hast (ein Beitrag oder eine Seite) und schaust dir den Beitrag in der Code-Editor-Ansicht von Gutenberg an. Den Code-Editor erreichst du über die drei Pünktchen ganz rechts oben. Du suchst deine Block Pattern und kopierst den entsprechenden Bereich in die Zwischenablage.

Schritt 3: Anführungszeichen maskieren

Am besten ist es jetzt, du kopierst dir den Code-Schnipsel in einen Editor. Denn wir müssen erst noch die Anführungszeichen maskieren. Das heißt, aus '"' muss '\"' werden. Das geht am besten mit Suchen und Ersetzen.

Schritt 4: Code in die Funktion kopieren

Den Code-Schnipsel mit den maskierten Anführungszeichen kopierst du jetzt an die Stelle in der register_block_pattern-Funktion wo content steht. Die Anführungszeichen vorher und nachher nicht vergessen.

Damit ist die Block-Vorlage fertig. Sie erscheint jetzt im Editor unter „Vorlagen“.

Meine Cards-Vorlage sieht im Ganzen so aus:

register_block_pattern(
   'ks-card-pattern',
     array(
     'title' => __( '2 Columns with Cards', 'ks-block-pattern' ),
     'description' => _x( 'Two Columns with Cards', 'Two Columns with Cards', 'ks-block-pattern' ),
     'categories'  => array('columns'),
     'content'     => "<!-- wp:columns -->
 <div class=\"wp-block-columns\"><!-- wp:column {\"className\":\"cards-container\"} -->
 <div class=\"wp-block-column cards-container\"><!-- wp:group {\"className\":\"card-item\"} -->
 <div class=\"wp-block-group card-item\"><div class=\"wp-block-group__inner-container\"><!-- wp:image {\"id\":37554,\"sizeSlug\":\"large\"} -->
 <figure class=\"wp-block-image size-large\"><img src=\"https://die-netzialisten.de/wp-content/uploads/2020/06/rechteck.png\" alt=\"\" class=\"wp-image-37554\"/></figure>
 <!-- /wp:image -->

 <!-- wp:heading {\"level\":3} -->
 <h3>Hugo</h3>
 <!-- /wp:heading -->

 <!-- wp:list -->
 <ul><li>Ein bauchiges Weinglas zu 1/3 mit Eiswürfeln füllen</li><li>Ein paar Blätter frische Minze</li><li>2cl&nbsp;Holunderblütensirup</li><li>2 Viertel einer Bio-Limette (etwas Saft ausdrücken)</li><li>15 ml Prosecco oder Sekt </li><li>Ein Schuss Mineralwasser</li></ul>
 <!-- /wp:list -->
 </div></div>
 <!-- /wp:group --></div>
 <!-- /wp:column -->

 <!-- wp:column {\"className\":\"cards-container\"} -->
 <div class=\"wp-block-column cards-container\"><!-- wp:group {\"className\":\"card-item\"} -->
 <div class=\"wp-block-group card-item\"><div class=\"wp-block-group__inner-container\"><!-- wp:image {\"id\":37554,\"sizeSlug\":\"large\"} -->
 <figure class=\"wp-block-image size-large\"><img src=\"https://die-netzialisten.de/wp-content/uploads/2020/06/rechteck.png\" alt=\"\" class=\"wp-image-37554\"/></figure>
 <!-- /wp:image -->

 <!-- wp:heading {\"level\":3} -->
 <h3>Apérol Sprizz</h3>
 <!-- /wp:heading -->

 <!-- wp:list -->
 <ul><li>Ein bauchiges Weinglas zu 1/3 mit Eiswürfeln füllen</li><li>2 Scheiben einer 1 Bio-Orange</li><li>1 Teil Aperol</li><li>2 Teile Sekt</li><li>Mit Mineralwasser auffüllen</li></ul>
 <!-- /wp:list -->

 </div></div>
 <!-- /wp:group --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns -->",
   )
 );

UPDATE

Die oben beschriebene Methode fühlt sich ein bisschen umständlich an.
Justin Tadlock hat sich erbarmt und ein schönes Plugin geschrieben, mit dem man ganz ohne Code-Gehampel Block-Vorlagen erstellen und verwalten kann: Block Pattern Builder.

Kommentare, die nichts mit dem jeweiligen Artikel zu tun haben, oder die (weitgehend) inhaltslos sind und keinen Mehrwert für andere Leserinnen und Leser bieten, veröffentlichen wir nicht.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Hinweise zum Datenschutz
Wenn du einen Kommentar schreibst, wird dieser inklusive Metadaten zeitlich unbegrenzt gespeichert. Auf diese Art können wir Folgekommentare automatisch erkennen und freigeben, anstelle sie in einer Moderations-Warteschlange festzuhalten.
Wenn Besucher Kommentare auf der Website schreiben, sammeln wir die Daten, die im Kommentar-Formular angezeigt werden, außerdem die IP-Adresse des Besuchers und den User-Agent-String (damit wird der Browser identifiziert), um die Erkennung von Spam zu unterstützen. Aus deiner E-Mail-Adresse kann eine anonymisierte Zeichenfolge erstellt (auch Hash genannt) und dem Gravatar-Dienst übergeben werden, um zu prüfen, ob du diesen benutzt.
Die Datenschutzerklärung des Gravatar-Dienstes findest du hier.
Nachdem dein Kommentar freigegeben wurde, ist dein Profilbild öffentlich im Kontext deines Kommentars sichtbar.