Block-Patterns sind Vorlagen, die bereits mit einem Inhalt versehen sind. Der Inhalt kann dabei editiert werden. Block-Patterns eignen sich vor allem, um verschachtelte Blöcke anzubieten, wie zum Beispiel eine Card mit Bild, Titel, Text usw.
In diesem Beitrag erklären wir, wie man Block-Patterns im eignen Theme oder als Plugin zur Verfügung stellt.

Styles, Variations oder Patterns?
1. Block-Styles
Mit dieser Methode wird ausschliesslich eine Design-Variante eines bestehenden Blocks erstellt.
2. Block-Variations
Mit dieser Methode können neben dem Design des Blocks auch die Werte der Block-Attribute festgelegt und beispielsweise Platzhalter-Texte hinzugefügt werden.
3. Block-Patterns
Block-Patterns eignen sich vor allem, um verschachtelte Blöcke anzubieten. Sie sind bereits mit einem editierbaren Inhalt versehen.
Pattern im Editor erstellen
Um ein Block-Pattern zu erstellen, kann man einfach über den Editor die gewünschten Blöcke einfügen. Sinnvollerweise steckt man alle gewünschten Blöcke in einen Group-Block.

Um das Pattern im CSS auch sinnvoll auswählen zu können, wird bei den Block-Eigenschaften der Gruppe eine Klasse angehängt. Achte darauf, dass Du die Klasse wirklich der Gruppe, und nicht aus versehen einem Objekt in der Gruppe zuweist.

HTML aus dem Code-Editor
Das HTML, welches wir später für das Pattern benötigen, können wir nun einfach über den Code-Editor holen.

Das Markup des erstellten Group-Blocks. Dieses enthält beim Attribut className
den Wert, der oben eingefügten Klasse my_card
. Innerhalb der Gruppe ist dann das gewählte Bild, die Überschrift und der Absatz abgelegt.

Eigenschaften von register_block_pattern()
Ob das Block-Pattern über ein eigenes Theme oder Plugin zur Verfügung gestellt wird, wir benötigen beides mal die Helper-Function register_block_pattern()
. Diese unterstützt folgende Eigenschaften:
- Namespace – (
uldi/image-card-pattern
) ist der Namespace des Block-Patterns. Achte darauf, dass dieser eindeutig ist. Falls das Block-Pattern jemals wieder abgemeldet werden muss, ist dies die Zeichenfolge, die wir benötigen. categories
– Dies ist die Block-Pattern-Kategorie, in der das Block-Pattern angezeigt wird, wenn wir unser Block-Pattern einfügen. Wir können auch unsere eigenen Kategorien hinzufügen.content
– Dies ist der HTML-Code, der das Block-Pattern erzeugt.description
– Eine Beschreibung des Block-Pattern.keywords
– Schlüsselwörter, die für die Suche nach dem Block-Pattern verwendet werden können.title
– Der Titel des Block-Pattern.viewportWidth
– Die Breite, welche für den Vorschaubereich verwendet wird.
1. Block-Pattern im eigenen Theme
Um das Block-Pattern im eignen Theme zur Verfügung zu stellen, wird folgender Code in die functions.php
eingefügt.
function uldi_register_block_pattern() {
register_block_pattern(
'uldi/image-card-pattern',
array(
'title' => __( 'Image Card', 'uldi' ),
'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'uldi' ),
'content' => '<!-- wp:group {"className":"my_card"} -->
<div class="wp-block-group my_card">
<!-- wp:image {"id":2726,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ulrich.digital/wp-content/uploads/2022/09/2rad_schurtenberger_yamaha_luzern_2022_yam_yzfr320sv_eu_sw_stu_001_03-1024x576.webp" alt="" class="wp-image-2726"/></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2>Yamaha R1 World GP 60th</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Hier kommt weiterer Inhalt</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->',
)
);
}
add_action( 'init', 'uldi_register_block_pattern' );
2. Block-Pattern als Plugin
2.1 Benötigte Dateien
Um die Block-Variation als Plugin zur Verfügung zu stellen, benötigt es im plugins
-Ordner ein Verzeichnis mit den folgenden zwei Dateien:
plugins/
- image_card/
-- index.php
-- image_card.css
2.2 index.php
In der index.php
-Datei wird das Plugin selbst registriert und gleich das Block-Pattern erstellt. Die Eigenschaften, welche register_block_pattern()
unterstützt, habe ich weiter oben ausgeführt. Daneben wird die image_card.css
hinzugefügt.
<?php
/**
Plugin Name: Image Card
Plugin URI: https://ulrich.digital
Description: Erstellt eine Image Card
Version: 1.0
Author: Matthias Ulrich
*/
if ( ! defined( 'ABSPATH' ) ):
exit;
endif;
/* =============================================================== *\
Register Block-Pattern
\* =============================================================== */
function uldi_register_block_pattern() {
register_block_pattern(
'uldi/image-card-pattern',
array(
'title' => __( 'Image Card', 'uldi' ),
'description' => _x( 'Two horizontal buttons, the left button is filled in, and the right button is outlined.', 'Block pattern description', 'uldi' ),
'content' => '<!-- wp:group {"className":"my_card"} -->
<div class="wp-block-group my_card">
<!-- wp:image {"id":2726,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://ulrich.digital/wp-content/uploads/2022/09/2rad_schurtenberger_yamaha_luzern_2022_yam_yzfr320sv_eu_sw_stu_001_03-1024x576.webp" alt="" class="wp-image-2726"/></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2>Yamaha R1 World GP 60th</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Hier kommt weiterer Inhalt</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->',
)
);
}
add_action( 'init', 'uldi_register_block_pattern' );
/* =============================================================== *\
Enqueue CSS for Block Styles
\* =============================================================== */
function uldi_block_style_css() {
wp_enqueue_style(
'uldi_image_card_css',
plugins_url( '/image_card.css', __FILE__ )
);
}
add_action( 'enqueue_block_assets', 'uldi_block_style_css' );
?>
2.3 image_card.css
Der Group-Block «Image Card» ist nun im Backend wie auch im Frontend über die Klasse .my_card
verfügbar.
Pattern verwenden
Block-Patterns sind auch über den Block-Inserter verfügbar. Du findest Dein Pattern unter «Vorlagen».

Arbeiten mit Block-Patterns
WordPress enthält einige vorgefertigte Block-Patterns. Man deaktiviert sie folgendermassen:
function removeCorePatterns() {
remove_theme_support('core-block-patterns');
}
add_action('init', 'removeCorePatterns');
Will man die Pattern-Kategorien loswerden, geht dies mit:
function removeCorePatternsCategories() {
unregister_block_pattern_category('buttons');
unregister_block_pattern_category('columns');
unregister_block_pattern_category('gallery');
unregister_block_pattern_category('header');
unregister_block_pattern_category('text');
unregister_block_pattern_category('uncategorized');
}
add_action('init', 'removeCorePatternsCategories');
Eigene Patterns-Kategorien erstellst Du mit:
function uldi_register_block_categories() {
if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
register_block_pattern_category(
'ulrich.digial',
array( 'label' => _x( 'Patterns von ulrich.digital', 'Block pattern category', 'uldi' ) )
);
}
}
add_action( 'init', 'uldi_register_block_categories' );
Weiter Informationen rund um die Block-Patterns findest Du hier.