Block Patterns WordPress Gutenberg Block-Editor

Block Patterns in WordPress verwenden

Block Patterns in WordPress 5.5: Blockgruppen in Gutenberg (Block-Editor) nutzen

Block Patterns stehen seit WordPress 5.5 zur Verfügung und sind ein erster Schritt in Richtung „Full site editing„. Wir haben auf haurand.com vor einigen Tagen ein kleines Relaunch der Hauptseite durchgeführt. Für die Kacheln bietet sich ein Block Pattern an. Zunächst haben wir auf einer lokalen Testseite einen Block Pattern zusammengestellt und dann in unsere Liveversion importiert. In diesem Beitrag wollen wir zeigen, dass mit den Block Patterns ein weiteres sehr interessantes Feature beim Block-Editor (Gutenberg) entwickelt wurde.

Block Patterns sind Vorlagen von Blockgruppen, die man in veränderten Form weiter verwenden kann. Der Unterschied zu den bereits seit einiger Zeit verfügbaren wieder verwendbaren Blöcken besteht in erster Linie darin, dass man die Block Patterns ändern kann. Das ist bei den wieder verwendbaren Blöcken nur möglich, wenn man den Block einfügt und anschließend über die weiteren Optionen den Block in einen normalen Block umwandelt. Die weiteren Optionen erreicht man, wenn man auf die drei Punkte beim Aufruf des Menüs für den Block klickt. Dann werden weitere Optionen geöffnet.

Die Serie zum Thema

  1. Block Patterns in WordPress 5.5 (dieser Beitrag)
  2. Block Pattern ohne Child-Theme – das geht!
  3. Der Block Pattern Builder
  4. Ein Plugin mit Vorlagen (Block Patterns) erstellen
  5. Die Musterseite für einen Block Pattern

Das Thema habe ich im Rahmen des Online-Meetups Aachen am 25.11.2020 präsentiert. Weitere Vorträge finden Sie hier.


Block Patterns: Der Unterschied zu wiederverwendbaren Blöcken in WordPress

Wenn man beim wiederverwendbaren Block etwas ändert, dann wird diese Änderung erst dann gezeigt, wenn man den Block wieder speichert. Die Änderung wirkt sich dann allerdings überall da auf, wo dieser Block verwendet wird.

Einen wiederverwendbaren Block sieht man unten in diesem Beitrag: Der Block mit der Überschrift „Was halten Sie davon“ besteht aus einer Überschrift und einem Absatz.

Mit Block Patterns kann man Blöcke zusammenstellen, die dann z. B. im Rahmen der functions.php bei einem Child Theme weiter verwendet werden können. Aber es geht auch ohne ein Child Theme:

Ein Beispiel für einen Block Pattern

Block Patterns Kacheln Gutenberg Block-Editor

Wir haben beim Relaunch der Startseite von haurand.com einen Block Pattern zunächst auf einer lokalen Testseite erstellt. Diese Block Patterns bestehen aus drei „Kacheln“, angeordnet in drei Spalten. Jede Kachel enthält eine Überschrift, ein (rundes) Bild, eine Zeile Text und einen Button. Das Ganze haben wir noch ein wenig mit CSS aufgepimpt (Schatten bei Bildern und Kacheln).

Block patterns WordPress

Wenn man oben rechts auf die drei senkrechten Punkte klickt, kann man unter dem Abschnitt „Editor“ auf „Code-Editor“ umschalten. Man sieht dann den kompletten Code und kann diesen Code natürlich auch bearbeiten. In unserem Fall haben wir den Code für den Block Pattern kopiert. Da hier ja Bilder aus der Mediathek der Testinstanz enthalten sind, sind im Editor logischerweise auch die Angaben (domain, etc.) für diese Bilder auf der Testinstanz enthalten.

Block Patterns WordPress

Die Angaben (domain) haben wir über einen Editor wie z. B. Notepad++ geändert. Vorher sollten natürlich die entsprechenden Medien (Bilder) auch bei der Liveversion schon hochgeladen werden.

Code-Beispiel:

<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="http://testseite-2-haurand.com.test/wp-content/uploads/2020/09/Blog.jpg" alt="" class="wp-image-2003" width="200" height="200"/></figure></div>

Änderungen in den Block Patterns

Um die Block Patterns in der Live-Version einer WordPress-Seite zu nutzen, muss lediglich http://testseite-2-haurand.com.test/ geändert werden in https://haurand.com/.

Anschließend wird der gesamte Code mit den geänderten Passagen einfach in die Liveversion kopiert: Also wieder auf die drei Punkte oben rechts in der Liveversion klicken, dann im Bereich „Editor“ auf „Code-Editor“, die entsprechende Stelle suchen und an diese Stelle kopieren. Das war es dann schon fast.

Nachfolgend der komplette Code für diesen Block-Pattern:

<!-- wp:group {"className":"eplus-zTQXHw"} -->
<div class="wp-block-group eplus-zTQXHw"><div class="wp-block-group__inner-container"></div></div>
<!-- /wp:group -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"kachel_spalte"} -->
<div class="wp-block-column kachel_spalte"><!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Kontakt</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":2005,"width":200,"height":200,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="http://testseite-2-haurand.com.test/wp-content/uploads/2020/09/pexels-photo-4240498.jpeg" alt="" class="wp-image-2005" width="200" height="200"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Nehmen Sie jetzt Kontakt zu uns auf.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":0,"style":{"color":{"background":"#f60012"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background no-border-radius" href="https://haurand.com/kontakt-2/" style="background-color:#f60012">Mehr Infos</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"kachel_spalte"} -->
<div class="wp-block-column kachel_spalte"><!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">Ihre Webseite</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":2002,"width":200,"height":200,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="http://testseite-2-haurand.com.test/wp-content/uploads/2020/09/ecommerce-2140603_640.jpg" alt="" class="wp-image-2002" width="200" height="200"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Einfach passende Webseiten.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":0,"style":{"color":{"background":"#f60012"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background no-border-radius" href="https://haurand.com/ihre-neue-webseite-einfach-passend/" style="background-color:#f60012">Mehr Infos</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"kachel_spalte"} -->
<div class="wp-block-column kachel_spalte"><!-- wp:heading {"align":"center"} -->
<h2 class="has-text-align-center">zum Blog</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":2003,"width":200,"height":200,"sizeSlug":"large","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="http://testseite-2-haurand.com.test/wp-content/uploads/2020/09/Blog.jpg" alt="" class="wp-image-2003" width="200" height="200"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Tipps zu WordPress und Entwicklung</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"align":"center"} -->
<div class="wp-block-buttons aligncenter"><!-- wp:button {"borderRadius":0,"style":{"color":{"background":"#f60012"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background no-border-radius" href="https://haurand.com/category/allgemein/" style="background-color:#f60012">Mehr Infos</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Zusätzlich kann man diesen Block Pattern noch individuell mit entsprechenden CSS-Klassen gestalten (Schatten, runde Bilder, etc.). Entsprechende Links im Quellcode müssen natürlich im Hinblick auf die Zielseite noch angepasst werden.

Es geht sogar noch einfacher

Beim Schreiben dieses Beitrags kam mir die Idee, dass es sogar noch einfacher gewesen wäre, wenn wir bei der Liveversion in einem Testbeitrag den Block Pattern im Block-Editor entwickelt hätten. Dann hätten wir den Quellcode aus dem Editor sogar komplett ohne Änderungen übernehmen können, weil die domain ja dann schon bei den Medien richtig angegeben ist.

Block Patterns im Child Theme

Wenn man einen Block Pattern erstellt hat, den man auf verschiedenen Webseiten benutzen möchte, dann kann man den o. g. Source auch mittels einer Funktion in die functions.php setzen. Wie das funktioniert, wird z. B. in dem folgenden Beitrag oder hier erklärt.

Bibliotheken mit vielen Block Patterns

Abschließend möchte ich noch auf eine sehr interessante Sammlung (gutenberghub.com) mit vielen Block Patterns für WordPress hinweisen, die man kostenlos runterladen kann. Wenn man auf dieser Seite einen Block Pattern runterladen möchte (z. B. Testimonial-18), braucht man lediglich das gewünschte Template anzuklicken.

Anschließend erfährt man auf der gewünschten Seite noch etwas mehr zu diesem Template und kann den Code oben rechts über einen Button runterladen und auf seiner Seite in der hier genannten Weise weiter verwenden.

Eine weitere Sammlung von Block Patterns findet man auf der folgenden Webseite (shareablock.com).

Gutenberg und Block Patterns

Die Entwicklung des Block-Editors (Gutenberg) macht jedenfalls große Fortschritte und wir setzen mittlerweile bei fast allen Projekten auf Gutenberg. Den Classic Editor verwenden wir jedenfalls nur noch in wenigen Fällen, z. B. bei Veranstaltungen. In der kommen Version 5.6 von WordPress sind wieder einige sehr interessante Features geplant. Full Site Editing ist allerdings nicht mehr für die kommende Version 5.6 geplant. Es wird wohl frühestens 2021 im WordPress-Kern landen. Wohin die Entwicklung der Themes geht, kann man im folgenden Beitrag zum nächsten Standardtheme Twenty Twenty-One nachlesen.

Man darf gespannt sein, wie es weiter gehen wird.

Im folgenden Beitrag erläutern wir, wie man die Block Patterns auch ohne Child Theme auf einer Webseite verwenden kann. Hier wird dann auch erklärt, wie man den Code aufbereitet und Block Patterns mittels einer Funktion registriert, um eine Vorlage (Block Pattern) als eigenen Block zu verwenden.

Was halten Sie davon?

Wir hoffen, dieser Beitrag hat Ihnen gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.

Weitere interessante Beiträge rund um WordPress finden Sie hier

Coverbild von Sharon McCutcheon von Pexels


Mehr erfahren auf dieser Webseite

Foto von Sharon McCutcheon von Pexels


Infos im Blog

Mehr erfahren auf unserer Webseite

Schreibe einen Kommentar

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

2 Gedanken zu “Block Patterns in WordPress verwenden”