Mit WordPress Block-Patterns arbeiten

Matthias Ulrich | 26. September 2022

Block-Patterns sind vorgefertigte Vorlagen mit bereits gefüllten Inhalten, die du ganz einfach an deine Bedürfnisse anpassen kannst. Sie ermöglichen es dir, im Handumdrehen komplexe Blockstrukturen zu erstellen, ohne dabei kostbare Zeit und Nerven zu verlieren. Stell dir zum Beispiel vor, du möchtest eine schicke Card mit Bild, Titel und Text gestalten – mit Block-Patterns wird das zum Kinderspiel!

Digitaler Auftritt für Kultur und Wirtschaft | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Block-Patterns eignen sich gut, um Cards zu erstellen. Hier ein Beispiel aus einem Kundenprojekt

Styles, Variations oder Patterns?

1. Block-Styles

Diese Methode ermöglicht eine neue Design-Variante eines vorhandenen Blocks zu erstellen, ohne die Block-Attribute oder den Inhalt zu ändern.

2. Block-Variations

Diese Methode ermöglicht Anpassungen des Block-Designs und der Block-Attribute. Es ist auch möglich, vordefinierte Inhalte wie Platzhalter-Texte hinzuzufügen.

3. Block-Patterns

Diese Methode ermöglicht vordefinierte, editierbare Blöcke zu erstellen. Sie ist besonders nützlich für komplexe und verschachtelte Strukturen.

Pattern im Editor erstellen

Um ein Block-Pattern zu erstellen, kannst du einfach über den Editor die gewünschten Blöcke einfügen. Sinnvollerweise steckst du alle Blöcke in einen Group-Block, dadurch kannst du die Struktur und das Verhalten des Patterns besser kontrollieren.

Agentur für Webdesign, WordPress, WooCommerce, Online Shops und SEO | Digitalagentur & Webagentur Schwyz | Hier entsteht Ihre Webseite mit ♥ | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Group-Block mit Bild, Überschrift und Absatz.

Um das Pattern im CSS sinnvoll auswählen zu können, füge der Gruppe eine Klasse in den Block-Eigenschaften hinzu. Achte darauf, dass du die Klasse der Gruppe zuweist und nicht versehentlich einem Objekt innerhalb der Gruppe.

Digitaler Auftritt für Kultur und Wirtschaft | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

HTML aus dem Code-Editor

Das benötigte HTML für das Pattern kannst du nun ganz einfach über den Code-Editor abrufen.

Digitaler Auftritt für Kultur und Wirtschaft | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Die Code-Editor-Ansicht öffnen.

Das Markup des erstellten Group-Blocks enthält die oben eingefügte Klasse my_card im Attribut className. Innerhalb der Gruppe sind das ausgewählte Bild, die Überschrift und der Absatz enthalten.

Neue Homepage | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital

Die Funktion register_block_pattern() und ihre Eigenschaften

Unabhängig davon, ob das Block-Pattern über ein eigenes Theme oder ein Plugin bereitgestellt wird, benötigen wir die Helper-Funktion register_block_pattern(). Diese unterstützt folgende Eigenschaften:

  • Namespace: Der Namespace des Block-Patterns, zum Beispiel uldi/image-card-pattern. Achte darauf, dass der Namespace eindeutig ist, da er benötigt wird, falls das Block-Pattern jemals wieder abgemeldet werden muss. Der Namespace wird ohne Schlüssel direkt als erste Variable der Funktion übergeben.
  • categories: Die Block-Pattern-Kategorie, unter welcher das Pattern im Block-Inserter angezeigt wird. Du kannst auch eigene Kategorien hinzufügen.
  • content: Der HTML-Code, der das Block-Pattern erzeugt.
  • description – Eine Beschreibung des Block-Pattern.
  • keywords – Schlüsselwörter, die zur Suche nach dem Block-Pattern verwendet werden können.
  • title – Der Titel des Block-Pattern.
  • viewportWidth – Die Breite, die für den Vorschaubereich verwendet wird.

1. Block-Pattern im eigenen Theme

Um das Block-Pattern im eignen Theme zur Verfügung zu stellen, fügst du den folgenden Code in die functions.php ein.

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 -->',

			// Hier das Pattern der gewünschten Kategorie zuweisen
			'categories'  => array('ulrichdigital'),
		)
	);
}
add_action( 'init', 'uldi_register_block_pattern' );

2. Block-Pattern als Plugin

2.1 Benötigte Dateien

Um das Block-Pattern als Plugin bereitzustellen, erstelle im Plugin-Verzeichnis die erforderlichen Dateien.

plugins/
	- image_card/
		-- index.php
		-- image_card.css

2.2 index.php

In der index.php-Datei wird das Plugin selbst registriert und gleichzeitig das Block-Pattern erstellt. Die Eigenschaften, die von register_block_pattern() unterstützt werden, wurden weiter oben bereits erläutert. Zusätzlich wird die Datei 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 -->',

			// Hier das Pattern der gewünschten Kategorie zuweisen
			'categories'  => array('ulrichdigital'), 
		)
	);
}
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

Um das Block-Pattern «Image Card» im Backend und Frontend korrekt darzustellen, wird die Datei image_card.css benötigt. Hier eine Beispiel CSS-Datei, wie die Image-Card dargestellt werden könnte.

.my_card { 
	width: 400px; 
	background: white;
	margin-bottom: 40px;
	float: left;
	padding-bottom: 20px;
	box-shadow: var(--box_shadow);
	}

.my_card h3{
	font-size: 130%;
    margin: 0.5em 20px 0.25em;
    font-weight: bold;
    height: 42px;
    display: flex;
    align-items: center;
	}

.my_card .slick-track{
	min-width: 1px;
	}

.my_card img{
	width:400px;
	height: auto;
	max-width: 100%;
	}

.my_card a{
	color:inherit;
	text-decoration: none;
	}
		
.my_card ul{
	padding: 0 15px;
    font-size: 80%;
    cursor: default;
    height: 5em;
    display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
    align-items: center;
	}

.my_card ul li{
	text-align: left;
	padding: 5px 10px;
	border-radius: 22px;
	border:1px solid;
	display: inline-block;
	margin: 5px;
	text-align: left;
	background: #192e4b;
	color: white;
	background: var(--wp--preset--color--light-blue);
	color: var(--wp--preset--color--dark-blue);
	}

.my_card .text_button{
	margin-top: 0;
	margin-right: 14px;
	}
	
.my_card .text_button .text_button_link{
	padding: 11px 13px;
	font-size: 16px;
	border-radius: 25px;
	color:var(--wp--preset--color--light-blue);
	}
	
.my_card .preis_and_call_to_action{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0.5em auto 0;
	align-items: center;
	cursor: default;
	}

.my_card .preis{
	font-weight: bold;
	font-size: 120%;
	background: #192e4b;
	color: white;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 10px 15px 10px 20px;
	letter-spacing: 1px;
	margin: 0.5em 0;
	}

.my_card .preis_original{
	text-decoration: line-through;
    font-size: 16px;
    background: transparent;
    color: var(--wp--preset--color--dark-blue);
    font-weight: 500;
    letter-spacing: 0;
    width: 100%;
    margin: 0;
    padding: 0 0 0 20px;
	}

.my_card li.color{
	background: var(--wp--preset--color--light-blue);
	color: var(--wp--preset--color--dark-blue);
	}
	


/* =============================================================== *\ 
    Slick-Slider 
\* =============================================================== */ 
.my_card .slick_card_slider:hover .slick-arrow{
	background: #ffffff33;
	}

.my_card .slick_card_slider{
	display: flex!important;
	transition: var(--hoverTrans);
	}

.my_card .slick_card_slider .slick-arrow{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding-left: 3px;
	padding-right: 3px;	
	z-index: 1;
	cursor: pointer;
	}
	
.my_card .slick_card_slider .slick_right{
	right: 0;
	}

Pattern verwenden

Block-Patterns sind über den Block-Inserter verfügbar und können unter «Vorlagen» gefunden werden.

Homepage erstellen lassen | Webdesign | Schwyz | Zug | Luzern | Altdorf | ulrich.digital
Das Block-Pattern «Image Card» kann über den Block-Inserter eingefügt werden. Block-Patterns werden unter «Vorlagen» angezeigt.

Arbeiten mit Block-Patterns

WordPress bietet bereits einige vorgefertigte Block-Patterns. Wenn du diese deaktivieren möchtest, kannst du dies in der functions.php deines Themes mit dem entsprechenden Code tun.

function removeCorePatterns() {         
	remove_theme_support('core-block-patterns'); 
}
add_action('init', 'removeCorePatterns');

// Alternative
add_filter('should_load_remote_block_patterns', '__return_false');

Wenn du ausserdem die Block-Pattern-Kategorien entfernen möchtest, kannst du dies ebenfalls in der functions.php mit dem entsprechenden Code tun.

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');

Du kannst auch eigene Kategorien für Block-Patterns erstellen, indem du den entsprechenden Code in der functions.php hinzufügst.

function uldi_register_block_categories() {
	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
		register_block_pattern_category(
			'ulrichdigial',
			array( 'label' => _x( 'Patterns von ulrich.digital', 'Block pattern category', 'uldi' ) )
		);
	}
}
add_action( 'init', 'uldi_register_block_categories' );

Herzlichen Glückwunsch, du bist am Ende des Beitrags angelangt! Wir hoffen, dass dir die Informationen zu Block-Patterns weitergeholfen haben und du nun motiviert bist, sie in deinem eigenen Projekt einzusetzen.

Aber Moment mal, falls du noch nicht genug hast und weitere spannende Informationen rund um Block-Patterns entdecken möchtest, haben wir genau das Richtige für dich! Klicke einfach hier, um weitere detaillierte Einblicke und praktische Anleitungen auf der offiziellen WordPress-Entwicklerdokumentation zu erhalten.

1 Star2 Stars3 Stars4 Stars5 Stars (2)

Hast du den Beitrag genossen? Oder hast du währenddessen geschlafen? Lass es uns wissen und hinterlasse einen Kommentar!

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert