Block-Patterns

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.

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.