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
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.
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.
Unterstützte Felder im Kopf des Scripts
Nachfolgend die Kategorien, die standardmäßig zur Verfügung stehen.
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.
Achtung
13.12.2022: Beim Update von GeneratePress (und sicher auch bei anderen klassischen Themes) wurde der Patterns-Ordner allerdings gelöscht. Aus dem Grund verwende ich mittlerweile lieber ein kundenspezifisches Plugin mit den Patterns und eigene Kategorie. Bei dem Plugin bleiben die Block Patterns auf jeden Fall erhalten, weil das völlig unabhängig vom Theme ist.
Die Serie zum Thema Block Patterns
- Block Patterns in WordPress
- Block Pattern ohne Child-Theme – das geht!
- Plugins: Block Pattern Builder oder Blockmeister
- Die Musterseite für einen Block Pattern
- Kategorie für eigene Block Patterns definieren
- Block Pattern im patterns-Verzeichnis bei einem Block Theme
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:
- New features for working with patterns and themes in WordPress 6.0:
https://make.wordpress.org/core/2022/05/02/new-features-for-working-with-patterns-and-themes-in-wordpress-6-0/ - Registering Block Patterns:
https://learn.wordpress.org/tutorial/registering-block-patterns/ - Erstellung eigener Kategorien für Block Patterns:
https://haurand.com/kategorie-block-patterns/ - Verwendung von Block Patterns:
https://haurand.com/block-patterns-in-wordpress/
Mehr erfahren auf dieser 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.
- Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörter.
- Wenn du über unsere neuesten Beiträge informiert werden möchtest, kannst du dich gerne bei unserem Newsletter anmelden.
Beitrags-Kategorien
Allgemein (104) Anleitung (67) Block-Editor (44) CSS (10) Full Site Editing (32) Keine Anzeige (1) Plugins (28) Short News (1) Theme (21) Tipps (69) Veranstaltungen (3) WordPress (112)