Seit WordPress 5.5 können sogenannte Block-Patterns erstellt werden. Das sind Vorlagen von Inhaltselementen aus mehreren Blöcken (oder auch nur einem), die in einem Plugin oder Theme registriert und dann von der Benutzerin oder dem Benutzer über den Inserter eingefügt werden können.
So muss im Editor nicht mühsam zum Beispiel ein Hero-Element immer neu aus denselben Blöcken zusammengebaut oder von einer anderen Seite kopiert werden, sondern es kann ein Hero-Block-Pattern erstellt und dann genutzt werden.
Block-Pattern registrieren
Um ein Block-Pattern zu registrieren, nutzen wir die register_block_pattern()-Funktion, der zwei Parameter übergeben werden müssen:
- Der Name für das Pattern mit einem Namespace.
- Ein Array von Informationen zum Pattern:
- Der
title, der dem User angezeigt wird. - Der
content, also das Markup der Blöcke, die eingefügt werden sollen. - Optional: Eine Beschreibung (
description). - Optional: Ein Array von Kategorien (
categories), in denen das Pattern angezeigt werden soll. - Optional:
keywords, die bei der Pattern-Suche einbezogen werden sollen. - Optional:
viewportWidth, um die Breite des Pattern-Viewports in der Inserter-Vorschau zu definieren.
- Der
In dem folgenden Beispiel werden wir ein kleines Update-Box-Pattern erstellen, das nur aus einem Gruppe-Block mit einer update-box-Klasse und einem Absatz-Block besteht.
Dafür bauen wir diese Kombination einmal in Gutenberg, wechseln anschließend in die Code-Ansicht (zu erreichen rechts oben über die drei untereinanderliegenden Punkte) und kopieren uns das entstandene Markup.
In unserem Plugin oder Theme können wir jetzt das Pattern wie folgt registrieren:
add_action( 'init', function() {
register_block_pattern(
'krautpress/update-box',
[
'title' => __( 'Update box', 'krautpress-block-pattern' ),
'description' => __( 'A box for update information when a post content is updated', 'krautpress-block-pattern' ),
'categories' => [ 'text' ],
'content' => '<!-- wp:group {"className":"update-box"} -->
<div class="wp-block-group update-box"><div class="wp-block-group__inner-container"><!-- wp:paragraph -->
<p><strong>' . __( 'Update from', 'krautpress-block-pattern' ) . '</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->',
]
);
} );Code-Sprache: PHP (php)Als content übergeben wir das kopierte Markup mit der Änderung, dass wir den String Update from übersetzbar machen, der den Update-Block einleitet. Als Kategorie legen wir die vom Core registrierte Kategorie text fest. Jetzt sollten wir bei den Block-Vorlagen auch unser eigenes Pattern sehen.
Pattern-Kategorie erstellen
Wenn die Core-Pattern-Kategorien nicht ausreichen, können auch eigene Kategorien erstellt werden. Dafür gibt es die Funktion register_block_pattern_category(), die im folgenden Beispiel genutzt wird, um eine KrautPress-Kategorie anzulegen:
add_action( 'init', function() {
register_block_pattern_category(
'krautpress',
[ 'label' => __( 'KrautPress', 'krautpress-block-pattern' ) ]
);
} );Code-Sprache: PHP (php)Jetzt könnten wir oben im Beispiel statt text den Wert krautpress vergeben, oder zusätzlich als weiteren Array-Wert, um das Pattern in beiden Kategorien aufzuführen.
In dem hier beschriebenen Fall wäre eine Block-Variation des Gruppe-Blocks auch ein Weg zum Ziel, mit dem Unterschied, dass die Update-Box dann auch in dem Inserter auftauchen würde, der mit dem /-Befehl aufgerufen wird – dafür gebe es keine visuelle Vorschau.
Diese Vorschaufunktion ist besonders bei aufwendigen Konstrukten nützlich, etwa dem oben als Beispiel genannten Hero-Element. Vielleicht gibt es davon auch unterschiedliche Pattern-Versionen, die der User dann nicht erst einfügen muss sondern schon vorher sieht, welche Version am besten passt.
Mentions
Mentions