Block Pattern im patterns-Verzeichnis bei einem Block Theme

Einen Block Pattern im patterns-Verzeichnis bei einem Block Theme wie Twenty Twenty-Two erstellen

In unserer Reihe zu Block Patterns habe ich dargestellt, wie man Block Patterns über verschiedene Möglichkeiten auf eine WordPress-Website einbinden kann. Seit WordPress 6.0 kann man einen Block Pattern jetzt auch über ein patterns-Verzeichnis im Theme-Ordner einbinden. Wie das funktioniert, beschreibe ich am Beispiel Twenty Twenty-Two in dem folgenden Beitrag.

Vorbereitung: Patterns-Ordner erstellen

Um die Patterns verwenden zu können, braucht man einen Ordner patterns, der im Fall des Themes Twenty Twenty-Two unterhalb des Theme-Ordners per FTP eingerichtet wird:
wp-content\themes\twentytwentytwo\patterns

Die Ordnerstruktur am Beispiel Twenty Twenty-Two

In diesen Ordner werden die einzelnen Block Patterns als PHP-Scripte erstellt.

Block Pattern erstellen

Zunächst erstellen wir einen Block Pattern (also sozusagen eine Vorlage), die häufiger auf unserer Website benutzt werden soll.

In unserem Fall soll das zunächst zur Veranschaulichung ein einfacher Block Pattern sein, der zweispaltig ist. Links soll ein großes „I“ stehen für Information. Das kann man erreichen, wenn man den Initialbuchstaben beim Absatz-Block einschaltet („Großen Anfangsbuchstaben darstellen“). Rechts soll ein erläuternder Text stehen. Der Spaltenblock soll mit einer dezenten hellblauen Hintergrundfarbe (#59bdb42e) versehen werden. Diese Vorlage soll in Beiträgen verwendet werden, damit Informationen besser hervorgehoben werden können. Hier ist der Block zu sehen:

Info

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos

Block Pattern kopieren

Um den Block Pattern zu kopieren, wählt man in diesem Fall den (kompletten) Spalten-Block in der Listenansicht aus und klickt im Menü auf „Kopieren“. Damit wird der Code in die Zwischenablage kopiert. Diesen Code packen wir in eine neue Datei.

Block-Pattern kopieren
Block-Pattern kopieren

PHP-Script im patterns-Ordner erstellen

Jetzt folgt der nächste Schritt: Dazu solltest du aber einen geeigneten Programmeditor (z.B. die kostenlosen Editoren Visual Studio Code oder Notepad++) verwenden.

In diesem Editor erstellst du eine neue Datei z. B. mit dem Namen info_block.php. In diese Datei fügen wir den bereits kopierten Code:

<!-- wp:columns {"style":{"color":{"background":"#59bdb42e"}}} -->
<div class="wp-block-columns has-background" style="background-color:#59bdb42e"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph {"align":"left","dropCap":true} -->
<p class="has-drop-cap has-text-align-left">Info</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Das reicht allerdings noch nicht, weil der header für diese Datei noch fehlt. Dazu ergänzen wir die Datei wie folgt:

<?php
 /**
  * Title: Info Block
  * Slug: twentytwentytwo/info-block
  * Block Types: core/post-content
  * Post Types: post
  * Categories: featured, text
  */
?>
<!-- wp:columns {"style":{"color":{"background":"#59bdb42e"}}} -->
<div class="wp-block-columns has-background" style="background-color:#59bdb42e"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:paragraph {"align":"left","dropCap":true} -->
<p class="has-drop-cap has-text-align-left">Info</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos </p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Den Block Pattern speichern wir in dem Ordner patterns. Bei Aufruf der Vorlagen (Patterns) sieht man den Block sowohl in der Kategorie „Hervorgehoben“ (bzw. „featured“) als auch unter „text“. Das hängt mit der Zeile * Categories: featured, text zusammen. Hier kann man auch andere Kategorien angeben oder eine Darstellung in einer eigenen Kategorie erreichen.

Links sieht man den Block Pattern Info Block
Links sieht man den Info Block

Unterstützte Felder im Kopf des Scripts

Nachfolgend die Kategorien, die standardmäßig zur Verfügung stehen.

Die verfügbaren Kategorien für Block Patterns
Die verfügbaren Kategorien beim Block Theme Twenty Twenty-Two

Hier die Liste mit den unterstützen Feldern:

  • Titel (erforderlich)
  • Schlagwort (erforderlich)
  • Beschreibung
  • Ansichtsfensterbreite (Viewport Breite)
  • Kategorien (durch Kommas getrennte Werte)
  • Schlüsselwörter (durch Kommas getrennte Werte)
  • Blocktypen (kommagetrennte Werte)
  • Inserter (ja/nein)

Block Pattern aus dem Patterns-Verzeichnis von WordPress einbinden

Mit WordPress 6.0 können Themes ganz einfach Patterns aus dem Pattern Directory über die theme.json registrieren. Um dies zu erreichen, sollten Themes den neuen Top-Level-Schlüssel patterns in theme.json verwenden. Weitere Infos und eine entsprechende Beschreibung dazu findet ihr in dem folgenden Beitrag.

Block Pattern aus dem Patterns-Verzeichnis bei einem klassischem Theme

Übrigens funktioniert das auch bei einem klassischen Theme. Wir haben das gerade bei einem Kundenprojekt mit dem Theme GeneratePress getestet und das funktioniert in dem Fall genauso gut.

Die Serie zum Thema Block Patterns

Fazit

Ich hatte in einer Beitragsreihe bereits beschrieben, wie man

  • Block Patterns z. B. in der functions.php definiert oder
  • über das Plugin Code Snippets verwenden kann,
  • als einfachste Option für weniger technisch versierte Benutzer ein Plugin dafür verwendet.

Diese hier vorgestellte Option ist jetzt eine weitere Möglichkeit, Block Patterns zu verwenden. In dem Fall wird jeder einzelne Block Pattern in einer eigenen PHP-Datei im neu erstellten patterns-Verzeichnis abgelegt. Letztendlich ist das eine individuelle Entscheidung, welche von den genannten Optionen man verwenden will.

Weitere Beiträge zum Thema

Quellen und Lesetipps:


Mehr erfahren auf dieser Webseite

Zum Blog

Mehr erfahren auf unserer Webseite

Wir freuen uns über eine Kontaktaufnahme

Was hältst du davon?

Wir hoffen, dieser Beitrag hat dir 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 findest du hier

Schreibe einen Kommentar