Block Patterns WordPress Gutenberg Block-Editor

Block Pattern ohne Child-Theme – das geht!

Block Patterns ohne Child Theme

Seit WordPress 5.5 steht im Block-Editor (Gutenberg) die Option der Block Pattern (Vorlage) zusätzlich zur Verfügung.
In diesem Beitrag zeigen wir, wie man mit einem Plugin einen Block Pattern speichern kann, ohne dass man ein Child Theme hat. Bei einem Child Theme würde man den Code für den Block Pattern in die functions.php schreiben. Wenn man allerdings bis dato kein Child Theme erstellt hat, dann bietet die Option mit dem Plugin „Code Snippets“ eine wunderbare Alternative.

In der Regel legt man ein Child Theme an, wenn einige Änderungen an der Funkionalität des Themes, am Design mittels CSS oder auch zusätzliche Features notwendig sind. Wie das geht, wird in vielen Beiträgen beschrieben. Hier einige empfehlenswerte Beiträge:

Die Serie zum Thema

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

Ein 3-Spalten-Block als Vorlage (Block Pattern)

Der nebenstehende 3-Spalten-Block ist bewusst einfach gehalten und soll als Block Pattern (Vorlage) zur Verfügung stehen. Der Block enthält 3 Spalten, bestehend jeweils aus einer Überschrift, einem Foto und einer Beschreibung.

Unter Design > Customizer > Zusätzliches CSS kann man die Kacheln noch durch entsprechende CSS-Regeln interessanter gestalten.

Block Pattern: 3-spaltiger Block

Auf der folgenden Seite kann man sich das Beispiel in etwas veränderter Form ansehen.

Zunächst brauchen wir den entsprechenden Code. Wie man das macht, haben wir in dem folgenden Beitrag eingehend erläutert.

Code für den Block Pattern bearbeiten

Hier ist der entsprechende Code für die Vorlage (Block Pattern):

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"className":"kacheln"} -->
<div class="wp-block-column kacheln"><!-- wp:heading {"align":"center","level":4} -->
<h4 class="has-text-align-center">Geschichte</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":47830,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://twenty-twenty.test/wp-content/uploads/2020/11/floetenspieler_eilendorf_2-1024x768.jpg" alt="" class="wp-image-47830"/><figcaption>Ein Foto vom Flötenspieler</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"kacheln"} -->
<div class="wp-block-column kacheln"><!-- wp:heading {"align":"center","level":4} -->
<h4 class="has-text-align-center">Landschaft</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":47824,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://twenty-twenty.test/wp-content/uploads/2020/11/sonnenuntergang_2-1024x768.jpeg" alt="" class="wp-image-47824"/><figcaption>Landschaft mit Sonnenuntergang</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"className":"kacheln"} -->
<div class="wp-block-column kacheln"><!-- wp:heading {"align":"center","level":4} -->
<h4 class="has-text-align-center">Bevölkerung</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":47827,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="http://twenty-twenty.test/wp-content/uploads/2020/11/Verein.jpg" alt="" class="wp-image-47827"/><figcaption>Die Bevölkerung von Eilendorf (Foto: pixabay.com)</figcaption></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Anpassungen des Codes

Jetzt kommt ein eher technisches Kapitel, aber es lohnt sich und das sieht erst mal schwieriger aus als es ist:

Im Code muss man erst mal die Anführungszeichen „maskieren“, d. h. man muss erst mal allen Anführungszeichen des Blocks einen Backslash voranstellen, damit sie nicht als Ende der Zeichenfolge interpretiert werden. Dazu laden wir den Code in einen geeigneten Editor wie z. B. Notepad++ und ersetzen im Code des Block Patterns die Anführungszeichen '"' durch '\"'.

Anführungszeichen maskieren in Notepad++
Anführungszeichen maskieren mit Notepad++

CSS-Klasse für den Block Pattern

Für die einzelnen Spalten verwenden wir die CSS-Klasse „kacheln“, mit der wir die Kacheln je nach Bedarf etwas animieren können. Die CSS-Regeln sind bewusst kurz gehalten und enthalten nur wenige Möglichkeiten für eine Animation. Mit weiteren CSS-Klassen bzw. Eigenschaften können natürlich noch interessantere Animationen erreicht werden. Nachfolgend die CSS-Klassen dazu, die unter Design > Customizer > Zusätzliches CSS gespeichert werden müssen:

/* Randdarstellung für Kacheln 
*/
div.kacheln {
    flex-basis: calc(50% - 16px);
    flex-grow: 0;
    box-shadow: 5px 5px 10px #888888;
    padding-right: 15px;
}

/* Beim Überfahren mehr Schatten 
 */
div.kacheln:hover{
    box-shadow: 10px 10px 15px #888888;
}

/* Beschriftung der Kachel */
figcaption {
    padding: 10px;
}

Block als Vorlage registrieren

Um den Block als Vorlage zu registrieren, muss die Funktion register_block_pattern genutzt werden. Eine Beschreibung zu der Funktion mit den Parametern findet man im Block-Editor-Handbuch oder in verkürzter Form in der Code-Referenz.

register_block_pattern(
   'kacheln-card-pattern',
     array(
     'title' => __( 'Three columns with pictures', 'kacheln-block-pattern' ),
     'description' => _x( 'Three columns with pictures (tiles)', 'Block pattern description', 'kacheln-block-pattern' ),
     'categories'  => array('columns'),
     'content'     =>
        " Code für den Block, der an dieser Stelle eingefügt werden muss ",
   )
 );

Hier nun die komplette Funktion für die Registrierung des Blocks:

/* Block pattern: Vorlage mit 3 Kacheln, bestehend aus jeweils einer Überschrift, einem Bild mit kurzer Beschreibung*/
register_block_pattern(
   'kacheln-card-pattern',
     array(
     'title' => __( 'Three columns with pictures', 'kacheln-block-pattern' ),
     'description' => _x( 'Three columns with pictures (tiles)', 'Block pattern description', 'kacheln-block-pattern' ),
     'categories'  => array('columns'),
     'content'     => 
        " <!-- wp:columns -->
          <div class=\"wp-block-columns\"><!-- wp:column {\"className\":\"kacheln\"} -->
          <div class=\"wp-block-column kacheln\"><!-- wp:heading {\"align\":\"center\",\"level\":4} -->
          <h4 class=\"has-text-align-center\">Geschichte</h4>
          <!-- /wp:heading -->
          
          <!-- wp:image {\"id\":47830,\"sizeSlug\":\"large\"} -->
          <figure class=\"wp-block-image size-large\"><img src=\"http://twenty-twenty.test/wp-content/uploads/2020/11/floetenspieler_eilendorf_2-1024x768.jpg\" alt=\"\" class=\"wp-image-47830\"/><figcaption>Ein Foto vom Flötenspieler</figcaption></figure>
          <!-- /wp:image --></div>
          <!-- /wp:column -->
          
          <!-- wp:column {\"className\":\"kacheln\"} -->
          <div class=\"wp-block-column kacheln\"><!-- wp:heading {\"align\":\"center\",\"level\":4} -->
          <h4 class=\"has-text-align-center\">Landschaft</h4>
          <!-- /wp:heading -->
          
          <!-- wp:image {\"id\":47824,\"sizeSlug\":\"large\"} -->
          <figure class=\"wp-block-image size-large\"><img src=\"http://twenty-twenty.test/wp-content/uploads/2020/11/sonnenuntergang_2-1024x768.jpeg\" alt=\"\" class=\"wp-image-47824\"/><figcaption>Landschaft mit Sonnenuntergang</figcaption></figure>
          <!-- /wp:image --></div>
          <!-- /wp:column -->
          
          <!-- wp:column {\"className\":\"kacheln\"} -->
          <div class=\"wp-block-column kacheln\"><!-- wp:heading {\"align\":\"center\",\"level\":4} -->
          <h4 class=\"has-text-align-center\">Bevölkerung</h4>
          <!-- /wp:heading -->
          
          <!-- wp:image {\"id\":47827,\"sizeSlug\":\"large\"} -->
          <figure class=\"wp-block-image size-large\"><img src=\"http://twenty-twenty.test/wp-content/uploads/2020/11/Verein.jpg\" alt=\"\" class=\"wp-image-47827\"/><figcaption>Die Bevölkerung von Eilendorf (Foto: pixabay.com)</figcaption></figure>
          <!-- /wp:image --></div>
          <!-- /wp:column --></div>
          <!-- /wp:columns -->",
   )
 );

Block Pattern Builder oder Code Snippets?

Man könnte auch das Plugin Block Pattern Builder verwenden, mit dem man ohne Bearbeitung des Codes in der o. g. Art Block Patterns erstellen und verwalten kann. Wenn man ausschließlich Block Patterns verwendet, ist das eine Lösung, die insbesondere dann interessant ist, wenn man sich die o. g. Schritte (Code kopieren, Maskierung, Funktion erstellen, etc.) ersparen möchte.

Code Snippets ist da natürlich viel flexibler, weil man mit diesem Plugin nicht nur Block Patterns erstellen, sondern auch andere Code Schnipsel ohne Verwendung eines Child Themes nutzen kann.

Die Funktion für den Block Pattern in Code Snippets speichern

Gerade dann, wenn man nur den einen oder anderen Block Pattern anlegen möchte, kann man das Plugin Code Snippets oder (wenn man sich nun gar nicht mit dem Code beschäftigen möchte) das Plugin Block Pattern Builder empfehlen.

Code Snippets – Ein Plugin als Alternative

Auf der Suche nach einer Möglichkeit, Block Patterns auch zu verwenden, wenn kein Child Theme genutzt wird, erinnerte ich mich an das Plugin Code Snippets. @pixolin hat schon häufig auf dieses Plugin im Forum von wordpress.org hingewiesen und das Plugin ist in der Tat großartig.

Zunächst wird das Plugin installiert. Nach der Installation gibt es links in der Leiste ein neues Icon (passenderweise) in der Form einer Schere.

Code Snippets: Menü
Code Snippets

Über das Untermenü des Plugins kann jetzt ein neues Snippet eingefügt werden: „Neu hinzufügen“. Genau da fügen wir die Funktion ein, die wir oben erstellt haben.

Als Namen haben wir „Block Pattern mit 3 Kacheln“ eingegeben. Es gibt noch weitere Einstellungen unter dem Code, die man aber in diesem Fall so übernehmen kann.

In die Beschreibung unter dem Fenster für den Code kann man noch zusätzliche Angaben machen und schließlich noch Schlagwörter eingeben. In diesem Fall geben wir bei Schlagwörtern „Block Pattern“ ein.

Abschließend klicken wir noch auf den Button „Speichere Änderungen und Aktiviere“ – das war’s.

Block Pattern mit Code Snippets erstellen

Block Pattern testen

Um den Block Pattern zu testen, öffnen wir einen entsprechenden Beitrag oder eine Seite und klicken auf das „+“, und anschließend auf „Alle durchsuchen“, um alle Blöcke aufzurufen. Oben finden wir das Register „Vorlagen“

Möglicherweise muss man ein wenig runtersrollen, um den neuen Block Pattern zu finden.

Im nebenstehenden Screenshot sehen wir, dass der Block Pattern korrekt unter „Spalten“ aufgeführt wird. Das liegt übrigens daran, dass wir beim Parameter categories im Code beim Array columns übergeben haben. Hier könnte man prinzipiell auch mehrere Listenelemente angeben, wenn man z. B. möchte, die Vorlage auch unter anderen Rubriken gefunden werden soll.

Zwei Dinge sollte man allerdings noch berücksichtigen.

Bei Umlauten hatten wir das Problem, dass diese Umlaute nicht korrekt umgesetzt wurden. Damit das in der Ansicht in der Liste mit den Vorlagen korrekt aussieht, kann man die Umlaute durch die korrekten HTML-Zeichenfolgen ersetzen. In unserem Fall verwenden wir beispielsweise für das „ö“ im Code &ouml;, siehe bei „Bevölkerung“. Wenn man den Block in einem Beitrag oder auf einer Seite eingefügt hat, kann man allerdings ganz „normal“ die Umlaute schreiben.

Wenn die Bilder sich nicht auf der gleichen Seite in der Mediathek befinden, sollte man die Bilder durch entsprechende Medien aus der Mediathek ersetzen. Das ist auch insofern ratsam, weil sonst das Problem mit mixed content entsteht.

Fazit

Auch Nutzer, die kein Child Theme nutzen, können Block Patterns erstellen. Anhand des Plugins Code Snippets ist das keine große Sache.

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


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.