Wie man WordPress Blockmuster erstellt

WordPress ist ein leistungsstarkes Online-Publishing-Tool, mit dem jeder auf einfache Weise Text- und/oder Multimedia-Inhalte erstellen und teilen kann. Darüber hinaus ist es aber auch ein großartiges professionelles Werkzeug für Designer/innen, Marketer/innen und Entwickler/innen, unabhängig von ihrem Hintergrund und ihren Fähigkeiten.

Kurz gesagt: WordPress kann dein wertvollster Teamkollege sein und dir in einer Vielzahl von Berufen zum Erfolg verhelfen.

In diesem Sinne haben wir in diesem Blog eine Reihe von Artikeln veröffentlicht, die dir helfen sollen, die notwendigen Fähigkeiten für die Arbeit als WordPress-Entwickler/in zu erwerben:

• Wie man benutzerdefinierte Gutenberg-Blöcke erstellt
• Wie man dynamische Blöcke für Gutenberg erstellt
• Wie man Meta-Boxen und benutzerdefinierte Felder zu Beiträgen in Gutenberg hinzufügt

Und für diejenigen, die Videoinhalte bevorzugen, haben wir auch einen kostenlosen Videokurs: Entwicklung von benutzerdefinierten Gutenberg-Blöcken.

Und ja, du kannst deine Karriereperspektiven mit Gutenberg-Entwicklungskenntnissen steigern, aber du musst nicht unbedingt ein Entwickler sein, um fortschrittliche Layouts für deine WordPress-Website zu erstellen.

WordPress-Nutzerinnen und -Nutzer können von leistungsstarken Funktionen profitieren, mit denen sie mühelos fortgeschrittene Block-Layouts erstellen können. In diesem Beitrag widmen wir uns den Blockmustern.

Was sind Blockmuster?

Blockmuster sind vorgefertigte Gruppen von Blöcken, die du zu deinem Inhalt hinzufügen und mit denselben Designtools anpassen kannst, die auch für die enthaltenen Blöcke zur Verfügung stehen.

Sie wurden erstmals mit WordPress 5.5 eingeführt, um Website-Administratoren und Inhaltserstellern die Möglichkeit zu geben, mit wenigen Klicks komplexe, gebrauchsfertige Strukturen aus verschachtelten Blöcken in ihre Inhalte einzufügen. B

lock-Themes bieten in der Regel einige Blockmuster, die du direkt über den Block-Inserter in deinen Inhalt einfügen kannst. Das neue Standardtheme von WordPress 6.7, Twenty Twenty-Five, enthält über 70 solcher Blockmuster.

Und du bist nicht auf die Muster beschränkt, die dein Theme bereitstellt.

Erstens findest du in der offiziellen WordPress-Muster-Galerie jede Menge fertige Blockmuster.

Außerdem kannst du mit der Patterns API oder den Bearbeitungswerkzeugen im Block-Editor eine unbegrenzte Anzahl von Mustern erstellen. Du kannst benutzerdefinierte Muster intern auf deiner Website verwenden, sie auf andere Websites exportieren oder sie in der Patterns-Galerie öffentlich zugänglich machen.

Seit WordPress 6.3 macht ein brandneues Mustersystem die Erstellung von Mustern flexibler und unkomplizierter. Jetzt ist es klarer, welche Art von Layout du erstellst und welche Auswirkungen deine Anpassungen auf deine Website haben. Es gibt zwei Haupttypen von Blockmustern:

• Synchrone Blockmuster
• Standard-Blockmuster (nicht synchronisiert)

Der Hauptunterschied zwischen den beiden Typen besteht darin, dass alle Änderungen, die an einem synchronisierten Muster vorgenommen werden, für jedes Vorkommen des Musters auf deiner gesamten Website gelten. Im Gegensatz dazu wirken sich Änderungen an einem Standard-Blockmuster nur auf eine bestimmte Instanz des Musters aus.

Aber es gibt noch viel mehr zu den Blockmustern zu sagen. Fragst du dich, wie dieses System funktioniert und wie du die neuen Bearbeitungsfunktionen der neuesten WordPress-Versionen nutzen kannst? Dann lass uns eintauchen.

Vorgefertigte Blockmuster

Vorgefertigte Muster sind „nicht synchronisierte“ Blockmuster, d.h. Änderungen, die du an einem Blockmuster vornimmst, wirken sich nur auf die spezielle Instanz aus, die du gerade bearbeitest, und werden nicht auf andere Instanzen übertragen, die du möglicherweise zu anderen Beiträgen oder Seiten deiner Website hinzugefügt hast.

Du kannst vorgefertigte Muster verwenden, um Blocklayouts zu erstellen, die du an Ort und Stelle anpassen kannst, indem du Bilder, Text und Stile änderst oder Elemente hinzufügst oder entfernst.

Sobald du ein benutzerdefiniertes Blockmuster erstellt hast, kannst du es an beliebiger Stelle auf deiner Website einfügen und mit den integrierten Steuerelementen des Editors mit nur wenigen Klicks anpassen.

Du kannst vorgefertigte Blockmuster auf der Registerkarte Muster im Block-Inserter durchsuchen und einfügen oder zum Verwaltungsbereich Muster im Site-Editor navigieren. Du kannst auch neue Muster in der Mustergalerie entdecken.

In der Galerie kannst du ein Muster auswählen, auf die Schaltfläche Muster kopieren klicken und es direkt in deinen Inhalt einfügen.

Es steht dir frei, die im Muster enthaltene Gruppe von Blöcken anzupassen, ohne das registrierte Muster oder eine zusätzliche Instanz auf deiner Website zu beeinflussen.

Synchrone und nicht synchrone Blockmuster

Wie bereits erwähnt, wurde das Mustersystem mit WordPress 6.3 gestrafft und konsistenter gestaltet.

Es ist jetzt einfacher, benutzerdefinierte Muster direkt im Block-Editor zu erstellen und sie im WordPress-Dashboard zu verwalten, ohne sich mit Code auseinandersetzen zu müssen. Jetzt kannst du folgendes erstellen:

• Synchrone Blockmuster
• Nicht synchronisierte Blockmuster

Der Unterschied zwischen den beiden Arten von Mustern ist, dass alle Änderungen, die an einem synchronisierten Muster vorgenommen werden, auf jedes Vorkommen dieses Blocks auf deiner gesamten Website angewendet werden.

Umgekehrt wirken sich Änderungen an nicht synchronisierten Blockmustern nur auf diese spezielle Instanz des Musters aus und werden nicht auf andere Instanzen angewendet, die du möglicherweise zu anderen Beiträgen oder Seiten deiner Website hinzugefügt hast.

Aus der Sicht eines Entwicklers werden benutzerdefinierte Blockmuster in der WordPress-Datenbank als wp_block benutzerdefinierte Beitragstypen registriert, und ein wp_pattern_sync_status Metafeld speichert den Synchronisierungsstatus eines Musters.

Dank des neuen Musterverwaltungssystems kannst du jetzt synchronisierte und nicht synchronisierte Blockmuster direkt im Website- oder Beitragseditor erstellen. Du musst nur dein Blocklayout entwerfen, die Blöcke auswählen und auf das Symbol mit den drei Punkten in der Blocksymbolleiste klicken. Wähle dann Muster erstellen aus dem Dropdown-Menü.

Im folgenden Beispiel erstellen wir ein synchronisiertes Muster aus einem Gruppenblock, einer Überschrift, einem Absatz und einer Schaltfläche.

Wenn du auf Muster erstellen klickst, wirst du aufgefordert, den Namen und die Kategorien für dein Muster einzugeben und zu entscheiden, ob es synchronisiert werden soll oder nicht.

Und das war’s schon. Dein synchronisiertes Muster wird nun im Verwaltungsbereich für Muster im Website-Editor unter Meine Muster aufgeführt.

Hier kannst du eine Vorschau deiner Muster sehen und den Status der Synchronisierung überprüfen.

Dann kannst du den Muster-Editor starten und dein Blockmuster anpassen.

Auch hier gilt: Änderungen an synchronisierten Mustern wirken sich auf jedes Vorkommen des Musters auf deiner Website aus. Änderungen an Standardmustern wirken sich nur auf zukünftige Instanzen des Musters aus.

Das ist möglich, weil WordPress die beiden Arten von Mustern unterschiedlich behandelt. Um den Unterschied zu verstehen, erstelle eine nicht synchronisierte Kopie deines benutzerdefinierten Musters, erstelle dann einen neuen Beitrag oder eine neue Seite und füge die beiden Muster hinzu. Gehe anschließend in den Code-Editor und überprüfe den Code.

Der synchronisierte Block wird durch den folgenden Code erzeugt:

<!-- wp:block {"ref":512} /-->

Das bedeutet, dass WordPress den Beitrag mit der ID 512 abruft, um den HTML-Code für die Darstellung auf dem Bildschirm zu generieren.

Der zweite Block ist nicht mit einer ID gekennzeichnet. Der Code-Editor enthält das gesamte Markup, aus dem das Muster besteht.

Synchronisierte Muster sind besonders nützlich für die Erstellung von Elementen, die du auf mehreren Seiten deiner Website und/oder auf verschiedenen Websites verwenden möchtest. Denk an Aufrufe zum Handeln, Werbebanner, Preistabellen und so weiter.

Wie wir bereits erwähnt haben, betrachtet WordPress benutzerdefinierte Blockmuster als wp_block Beitragstypen und speichert sie als solche in der Tabelle wp_posts.

Sobald du deine Muster erstellt hast, kannst du sie auf der Verwaltungsseite für Muster verwalten. Auf diese Seite kannst du auf verschiedene Weise zugreifen:

• Du fügst /wp-admin/edit.php?post_type=wp_block in die WordPress-URL deiner Website ein.
• Du klickst auf die Schaltfläche Alle Muster erforschen im Block-Inserter.
• Du klickst auf die Schaltfläche Meine Muster im Site-Editor.

Auf dem Bildschirm Muster kannst du

• Dein Muster bearbeiten, löschen oder als JSON exportieren,
• Muster aus JSON importieren,
• Neue Muster erstellen.

Im Site-Editor kannst du deine Muster auch duplizieren und umbenennen.

Synchrone Musterüberschreibungen

Die mit WordPress 6.6 eingeführten Synced Pattern Overrides sind eine dritte Art von Mustern, die die Vorteile der Block Bindings API nutzen, um die Eigenschaften beider Arten von Mustern zu erhalten.

Mit synchronisierten Musterüberschreibungen kannst du Blockmuster erstellen, die überall auf deiner Website die gleiche Struktur haben und sich synchron mit den Anpassungen der Musterstruktur und des Stils im Website-Editor ändern. In diesem Punkt sind Musterüberschreibungen den synchronisierten Mustern ähnlich.

Allerdings sind Musterüberschreibungen auch mit nicht synchronisierten Mustern vergleichbar, da du den Inhalt bestimmter Blöcke im Muster ändern kannst, ohne dass sich dies auf andere Instanzen desselben Musters auf der Website auswirkt.

Musterüberschreibungen sindalso synchronisierte Muster mit einzelnen nicht synchronisierten Elementen.

Hier erfährst du, wie du eine Musterüberschreibung erstellst.

Schritt 1: Gehe zu Muster und dupliziere eines der vorhandenen Muster, z. B. das Muster Preisgestaltung, 2 Spalten des Standardthemas Twenty Twenty-Five. Füge einen Namen hinzu und setze die Kopie auf Synced pattern.

Schritt 2: Öffne Meine Muster und finde dein neues synchronisiertes Muster. Öffne es und wähle einen der Blöcke aus, den du überschreiben willst, z.B. den Überschriftenblock.

Gehe zur Seitenleiste mit den Blockeinstellungen und scrolle nach unten zum Abschnitt Erweitert. Hier findest du die Option Überschreibungen aktivieren.

Wenn du auf die Schaltfläche klickst, wirst du aufgefordert, einen Namen für die Überschreibung hinzuzufügen.

Schritt 3: Wiederhole den gleichen Vorgang für jeden Block, den du überschreiben möchtest. Wenn du fertig bist, erstelle einen neuen Beitrag oder eine neue Seite und füge dein benutzerdefiniertes Muster ein.

Schritt 4: Ändere im Beitragseditor den Inhalt der Blöcke, die du außer Kraft setzen willst, speichere den Beitrag und überprüfe das Ergebnis im Frontend.

Du hast vielleicht schon bemerkt, dass die Seitenleiste mit den Blockeinstellungen die Felder anzeigt, die bearbeitet werden können, wenn du eine Instanz eines Musters mit Überschreibungen im Beitragseditor bearbeitest. Im obigen Beispiel haben wir die Überschrift und einige Absätze überschreibbar gemacht.

Du kannst beliebig viele Musterüberschreibungen an beliebiger Stelle auf deiner Website einfügen, und jede Instanz zeigt dieselbe ursprüngliche Struktur, ist aber bereit für deine Anpassungen.

Öffne nun dein Muster im Site-Editor und wechsle zum Code-Editor. Der Code sollte etwa so aussehen wie der folgende:

<!-- wp:heading 
{
	"textAlign":"center",
	"metadata":{
		"name":"Heading",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	},
	"align":"wide"
} 
-->
<h2 class="wp-block-heading alignwide has-text-align-center">Pricing</h2>
<!-- /wp:heading -->

<!-- wp:paragraph 
{
	"align":"center",
	"metadata":{
		"name":"Subtitle",
		"bindings":{
			"__default":{
				"source":"core/pattern-overrides"
			}
		}
	}
} 
-->
<p class="has-text-align-center">Cancel or pause anytime.</p>
<!-- /wp:paragraph -->

Im Blockbegrenzer bemerkst du die Eigenschaft metadata.bindings. Diese macht die Überschriften- und Absatzblöcke editierbar. Die Eigenschaft __default weist WordPress an, alle unterstützten Attribute mit einer bestimmten Quelle zu verbinden, nämlich "core/pattern-overrides".

Wechsle nun im Beitragseditor zum Code-Editor. Der Code sollte in etwa so aussehen wie der folgende:

<!-- wp:block 
{
	"ref":518,
	"content":{
		"Heading":{
			"content":"Choose your plan"
		},
		"Subtitle":{
			"content":"Try our services with no risk thanks to our 30-day guarantee"
		},
		"Plan 1 title":{
			"content":"Starter"
		},
		"Plan 2 title":{
			"content":"Business"
		}
	}
} 
/-->

Hier siehst du einen Verweis auf das Blockmuster und eine Reihe von Eigenschaften für jeden als bearbeitbar festgelegten Block. Da Pattern Overrides eine Implementierung der Block Bindings API sind, kannst du nur unterstützte Blöcke überschreiben.

Zum Zeitpunkt der Erstellung dieses Dokuments unterstützen die Musterüberschreibungen die Blöcke Überschrift, Absatz, Bild und Schaltflächen.

Vorlagen-Teile

Vor der Gutenberg-Ära wurden WordPress-Themes und -Vorlagen hauptsächlich in PHP erstellt. Solide Kenntnisse über Child-Themes, die Template-Hierarchie und die wichtigsten Frontend-Entwicklungssprachen waren Grundvoraussetzung für die Erstellung oder Anpassung von Templates. Mit der Einführung von Block-Themes änderte sich das jedoch.

In Block-Themes und klassischen Themes, die sich für diese Funktion entschieden haben, kannst du ganz einfach eine Vorlage oder einen Vorlagenteil in der Oberfläche des Site Editors erstellen oder anpassen. Es sind keine Entwicklungskenntnisse erforderlich, es sei denn, du entscheidest dich, ein Theme-Entwickler zu werden.

Eine Blockvorlage ist eine Liste von Blockelementen. Beispiele für Blockelemente sind der Seitentitel, das Logo und die Navigation.

Vorlagenteile sind bestimmte Abschnitte einer Seite, die an verschiedenen Stellen dargestellt werden können, wie z. B. eine Kopf- und eine Fußzeile, und die auf jeder Seite deiner WordPress-Website angezeigt werden können.

Du kannst Vorlagenteile über die Oberfläche des Website-Editors erstellen und bearbeiten, wo du alle für Blöcke verfügbaren Bearbeitungswerkzeuge nutzen kannst.

Im Gegensatz zu Blockmustern sind Template Parts jedoch für Bereiche der Website gedacht, die sich nicht häufig ändern.

Unterschiede zwischen Mustern und Vorlagenteilen

Hier sind die Hauptunterschiede zwischen den beiden Themen:

Vorgefertigte Blockvorlagen

• Vorgefertigte Blockmuster sind vordefinierte Blocklayouts, die du zu deinem Inhalt hinzufügen und mit denselben Werkzeugen wie die enthaltenen Blöcke anpassen kannst. Änderungen, die du an einem Blockmuster vornimmst, wirken sich nur auf diese eine Instanz des Blockmusters aus.
• Du kannst vorgefertigte Muster aus dem Verzeichnis Muster kopieren und einfügen.
• Du kannst neue Muster erstellen und sie im Musterverzeichnis veröffentlichen.

Benutzerdefinierte Blockmuster

• Benutzerdefinierte Blockmuster sind synchronisierte oder nicht synchronisierte Gruppen von Blöcken, die du in jedem Beitrag oder auf jeder Seite deiner Website verwenden kannst.
• Benutzerdefinierte Blockmuster werden in der Tabelle wp_posts als wp_block post type gespeichert.
• Du kannst benutzerdefinierte Blockmuster von und zu anderen Websites importieren und exportieren.

Vorlagenteile

• Vorlagenteile sind bestimmte Bereiche einer Seite, die an verschiedenen Stellen angezeigt werden können, z. B. in der Kopfzeile, der Fußzeile und der Seitenleiste, und die auf mehreren Seiten deiner WordPress-Website wiederkehren.
• Du kannst Vorlagenteile über die Oberfläche des Website-Editors erstellen und bearbeiten.
• Vorlagenteile sind für Bereiche der Website gedacht, die sich nicht häufig ändern.

So erstellst du Blockmuster für Themes und Plugins

Wie wir bereits erwähnt haben, wurde mit WordPress 6.3 ein neues System zur Verwaltung von Blockmustern eingeführt. Es ist jetzt einfacher, synchronisierte oder nicht synchronisierte Blockmuster zu erstellen, ohne die Editoroberfläche zu verlassen. Außerdem kannst du benutzerdefinierte Muster mit ein paar Klicks aus deinem WordPress-Dashboard importieren und exportieren.

WordPress bietet aber auch andere Möglichkeiten zur Erstellung von Blockmustern für Theme- und Plugin-Entwickler.

Neben der Funktion für Blockmuster hat WordPress 5.5 eine neue API eingeführt, mit der Entwickler „vorgefertigte Inhaltsblöcke erstellen können, die einfach in Beiträge, Seiten, benutzerdefinierte Beitragstypen und Vorlagen eingefügt werden können“ Die neue API bietet die Funktionen register_block_pattern und register_block_pattern_category, um Blockmuster und Musterkategorien zu registrieren.

Ab WordPress 6.0 kannst du Blockmuster auch mit einer PHP-Datei registrieren. Zum Zeitpunkt der Erstellung dieses Artikels hast du also zwei Möglichkeiten, ein Blockmuster zu erstellen.

• Mit der Hilfsfunktion register_block_pattern,
• Du fügst eine PHP-Datei zu deinem Theme in einem Patterns-Ordner hinzu.

Ein Blockmuster mit einem Plugin erstellen

Die erste Methode richtet sich vor allem an WordPress-Entwickler, ist aber einfach genug, um auch von nicht-erfahrenen Entwicklern verwendet zu werden.

Wenn du dich für die erste Methode entscheidest, kannst du ein Blockmuster mit den beiden neuen Funktionen register_block_pattern und register_block_pattern_category in der PHP-Datei eines Plugins oder der functions.php deines Themes erstellen.

Wähle oder registriere eine Musterkategorie

Wähle zunächst eine Kategorie für dein Muster. In den neuesten WordPress-Versionen sind neue Musterkategorien hinzugekommen und einige bestehende Kategorien wurden geändert.

Um die Liste aller registrierten Kategorien zu erhalten, öffne den Post-Editor und füge den folgenden Code in die Konsole des Browsers ein:

wp.data.select('core').getBlockPatternCategories()

In WordPress 6.7 mit aktivem Twenty Twenty-Five-Theme erhältst du die folgende Liste der Musterkategorien:

Wenn dein Blockmuster in keine der Standardkategorien fällt, kannst du mit der Funktionregister_block_pattern_category auch eine neue Kategorie anlegen.

Diese Funktion nimmt zwei Argumente entgegen:

• $category_name: Name der Musterkategorie einschließlich Namespace.
• $category_properties: Ein Array mit den Eigenschaften der Kategorie.

Ein Beispiel hilft dir, besser zu verstehen, wie du eine neue Musterkategorie registrierst:

if ( function_exists( 'register_block_pattern_category' ) ) {
	function my_plugin_register_pattern_category() {
		register_block_pattern_category( 
			'my-pattern-category', 
			array(
				'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
				'description' => __( 'Simple call to action with a header, an image, a paragraph, and a button.' ),
			)
		);
	}
	add_action( 'init', 'my_plugin_register_pattern_category' );
}

Registrierung eines Blockmusters

Sobald die Musterkategorie registriert wurde, ist der nächste Schritt die Registrierung des Blockmusters selbst. Du registrierst das Blockmuster mit der Hilfsfunktionregister_block_pattern wie folgt:

function my_plugin_register_block_pattern() {
	register_block_pattern( 'prefix/pattern-name', $props );
}
add_action( 'init', 'my_plugin_register_block_pattern' );

Diese Funktion benötigt zwei Argumente:

• $pattern_name: Einen maschinenlesbaren Namen in Form von namespace/pattern-name.
• $pattern_properties: Ein Array mit Eigenschaften für das Muster.

Hier ist eine Liste der derzeit verfügbaren Eigenschaften des Musters:

• title (erforderlich): Ein von Menschen lesbarer Titel für das Muster.
• content (erforderlich): Die HTML-Auszeichnung für das Muster.
• description: Ein Text, der das Muster im Inserter beschreibt. Die Beschreibung ist optional, wird aber empfohlen, da sie den Benutzern hilft, das Muster zu finden.
• categories: Ein Array mit einer oder mehreren registrierten Musterkategorien. Du musst eine Kategorie registrieren, bevor du sie hier verwenden kannst (siehe den vorherigen Abschnitt).
• keywords: Ein Array mit Schlüsselwörtern, die den Nutzern helfen, das Muster zu finden.
• viewportWidth: Eine ganze Zahl, die die Breite des Musters in der Vorschau angibt.
• blockTypes: Ein optionales Array mit den Blocktypen, die mit dem Muster verwendet werden sollen.
• postTypes: Ein Array mit den Beitragstypen, die das Muster verwenden dürfen.
• templateTypes: Ein Array mit Vorlagentypen, für die das Muster sinnvoll ist (verfügbar seit WordPress 6.2).
• inserter: Ein Boolescher Wert, der bestimmt, ob das Muster im Block-Inserter sichtbar sein soll. Setze den Wert auf false, um das Muster auszublenden. In der Standardeinstellung werden alle Muster im Block-Inserter angezeigt.
• source (optional): Ein String, der die Quelle des Musters angibt. Übergib die Zeichenfolge plugin, wenn du das Muster von einem Plugin registrierst. Für ein Theme übergibst du die Zeichenfolge theme.

Hier ist ein Beispiel für die Verwendung von register_block_pattern:

if ( function_exists( 'register_block_pattern' ) ) {
	function my_plugin_register_block_pattern() {
		register_block_pattern( 
			'my-plugin/my-block-pattern', 
			array(
				'title'			=> _x( 'My awesome pattern', 'Block pattern title', 'my-plugin-text-domain' ),
				'categories'	=> array( 'my-pattern-category' ),
				'postTypes'		=> array( 'post' ),
				'content'		=> '<p>My awesome block pattern</p>'
			) 
		);
	}
	add_action( 'init', 'my_plugin_register_block_pattern' );
}

In diesem Code haben wir die Eigenschaft postTypes verwendet, um die Verfügbarkeit des Musters auf normale Blogposts zu beschränken. Du kannst jedoch auch einen anderen Wert für postTypes festlegen, um es für verschiedene Beitragstypen zugänglich zu machen. Wenn du zum Beispiel einen product Beitragstyp hast und die Verfügbarkeit des Musters auf diesen Typ beschränken möchtest, schreibst du einfach:

'postTypes' => array( 'product' ),

Erstelle einen neuen Beitrag (oder einen benutzerdefinierten Beitragstyp), öffne den Block-Inserter und klicke auf das Label Patterns. Du solltest eine neue Musterkategorie (Meine Musterkategorie) mit deinem eigenen Blockmuster finden. Du kannst mit den Mustereigenschaften herumspielen, um deine Blockmuster anzupassen.

Jetzt wollen wir ein bisschen tiefer eintauchen und versuchen, ein echtes Blockmuster zu erstellen.

Ein reales Beispiel für ein Blockmuster

Angenommen, du möchtest ein Blockmuster erstellen, das eine Überschrift, ein Bild, einen Absatz und eine Schaltfläche enthält.

Erstelle im Editor das Layout für dein Blockmuster, wechsle dann in den Code-Editor und kopiere das Markup.

In unserem Beispiel haben wir den folgenden Code:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="http://wordpress-block-patterns.local/wp-content/uploads/2023/05/placeholder.jpg" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong>View Plans</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Du kannst diesen Code nun optimieren. Wenn du das Blockmuster mit einem Plugin registrierst, musst du die Bild-URL wie folgt ändern:

esc_url( plugin_dir_url( __FILE__ ) . 'images/placeholder.jpg' )

Auf diese Weise sucht WordPress nicht in den Uploads nach dem Bild, sondern im Bilderordner deines Plugins.

Du kannst dann die Eigenschaft viewportWidth verwenden, um eine bessere Vorschau des Musters im Block-Inserter zu erhalten:

'viewportWidth' => 800,

Du kannst auch eine Reihe von Schlüsselwörtern einfügen, damit die Nutzer dein Blockmuster leichter finden:

'keywords' => array( 'cta', 'demo', 'kinsta' ),

Eine weitere Möglichkeit, den Block bei der Suche zu finden, ist das Hinzufügen einer Reihe von Blocktypen:

'blockTypes' => array( 'core/button' ),

Auf diese Weise wird das Blockmuster in den Vorschlägen angezeigt, wenn ein Nutzer nach einem der angegebenen Blöcke sucht.

Die Eigenschaft postTypes ermöglicht es dir, das Blockmuster nur für bestimmte Beitragstypen verfügbar zu machen. Du könntest das Muster zum Beispiel nur für den Beitragstyp product sichtbar machen:

'postTypes' => array( 'product' ),

Schließlich kannst du dem Wrapper deines Blockmusters eine CSS-Klasse hinzufügen.

Dazu musst du eine neue Gruppe mit dem Attribut className erstellen:

<!-- wp:group {"className":"my-css-class","layout":{"type":"constrained"}} -->
<div class="wp-block-group my-css-class">
	<!-- Your blocks -->
</div>
<!-- /wp:group -->

Beachte, dass du denselben Klassennamen auch dem folgenden div Element hinzufügen musst.

Eine genauere Betrachtung von Blockmustern und weitere Codebeispiele findest du im WordPress.org Theme Handbook unter Blockmuster.

Erstellen eines Blockmusters mit einer Datei

Wie bereits erwähnt, wurde mit WordPress 6.0 eine neue und einfachere Möglichkeit eingeführt, Blockmuster zu deinen WordPress-Themes hinzuzufügen. Du kannst Blockmuster jetzt implizit registrieren, indem du sie als PHP-Dateien in einem Ordner /patterns im Stammverzeichnis deines Themes deklarierst.

Angenommen, du möchtest das gleiche Blockmuster, das du im vorherigen Abschnitt erstellt hast, implizit in deinem Block-Theme registrieren. In diesem Beispiel verwenden wir das Theme Twenty Twenty-Three.

Du kannst die gleichen Parameter wie bei der vorherigen Methode setzen, sie aber in einem Kommentar in den Dateikopf einfügen. Außerdem trennst du die Wörter mit einem Leerzeichen, anstatt die Parameternamen in camelCase zu schreiben, und statt Arrays verwendest du kommagetrennte Listenelemente.

Deaktiviere zunächst das Plugin, mit dem du das Muster im vorherigen Beispiel registriert hast. Erstelle dann eine neue Datei my-block-pattern.php und füge den folgenden Header ein:

<?php
/**
 * Title: My awesome pattern
 * Slug: twentytwentythree/my-block-pattern
 * Post Types: post
 * Categories: featured, banner
 * Viewport Width: 800
 * Keywords: Call to action, Kinsta
 * Block Types: core/buttons
 */
?>

Als Nächstes fügst du den Inhalt zu deinem Blockmuster hinzu. Du kannst das gleiche Markup wie in unserem vorherigen Beispiel verwenden, aber zuerst musst du es ein wenig abändern:

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"240px"} -->
<div class="wp-block-column" style="flex-basis:240px"><!-- wp:image {"id":25,"sizeSlug":"full","linkDestination":"none","style":{"border":{"radius":{"topLeft":"16px"}}}} -->
<figure class="wp-block-image size-full has-custom-border"><img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>" alt="" class="wp-image-25" style="border-top-left-radius:16px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"color":{"text":"#5831f6"}}} -->
<h4 class="wp-block-heading has-text-color" style="color:#5831f6">Your New Home for Modern Web Apps and Sites</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Kinsta is a Cloud Platform designed to help companies and dev teams ship and manage their web projects faster and more efficiently.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:buttons {"layout":{"type":"flex"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","textColor":"base","width":100,"style":{"color":{"background":"#5831f6"},"typography":{"fontSize":"1.36rem"},"border":{"radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"16px","bottomRight":"16px"}}},"fontFamily":"inter"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-inter-font-family" style="font-size:1.36rem"><a class="wp-block-button__link has-base-color has-text-color has-background has-text-align-center wp-element-button" style="border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;background-color:#5831f6"><strong><?php echo __( 'View plans', 'text-domain' ); ?></strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

Das Markup ist im Wesentlichen unverändert aus dem vorherigen Beispiel. Wir haben nur zwei Änderungen vorgenommen.

Die URL des Platzhalterbildes wird jetzt von der Funktionget_theme_file_uri generiert:

<?php echo esc_url( get_theme_file_uri( 'assets/images/placeholder.jpg' ) ); ?>

Natürlich solltest du das Bild placeholder.jpg zuerst in den Ordner /assets/images deines Themes legen.

Die folgende Anweisung erzeugt den Text, den du übersetzen möchtest.

<?php echo __( 'View plans', 'text-domain' ); ?>

Speichere nun deine Datei und erstelle einen neuen Beitrag. Dein Blockmuster sollte in den Kategorien Featured und Banner erscheinen.

Entfernen der Unterstützung, Aufheben der Registrierung und Ausblenden von Blockmustern

In einigen Fällen möchtest du vielleicht spezielle Aktionen für Blockmuster durchführen. Zum Beispiel kannst du ein zentrales Blockmuster durch ein eigenes Blockmuster ersetzen oder eine Kategorie unter bestimmten Bedingungen abmelden. Hier sind die Aktionen, die du durchführen kannst.

1. Unterstützung für alle Core Block Patterns entfernen

Zunächst können Themenentwickler die Unterstützung für Kernblockmuster aufheben und ihre eigenen Muster bereitstellen. Um die Unterstützung für Kernmuster zu entfernen, kannst du die Funktionremove_theme_support wie folgt verwenden

remove_theme_support( 'core-block-patterns' );

Es wird empfohlen, die Funktion remove_theme_support mit dem Hookafter_setup_theme zu verbinden.

2. Aufheben der Registrierung eines einzelnen Blockmusters

Du kannst die Registrierung eines bestimmten Blockmusters auch aufheben, wenn du eine benutzerdefinierte Alternative anbieten möchtest oder nicht willst, dass es in deinem Theme verwendet wird.

Die Patterns API bietet dafür die Funktionunregister_block_pattern:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'namespace/block-pattern-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Wenn du auch ein Core-Blockmuster deregistrieren kannst, verwendest du die folgende Funktion:

function my_theme_unregister_block_pattern() {
	unregister_block_pattern( 'core/query-offset-posts' );
}
add_action( 'init', 'my_theme_unregister_block_pattern' );

Du verwendest unregister_block_pattern mit dem init Haken.

3. Aufhebung einer Blockmusterkategorie

Du kannst eine Musterkategorie auch abmelden, indem du die unregister_block_pattern_category funktion in den init Hook einbindest:

function my_theme_unregister_block_pattern_categories() {
	unregister_block_pattern_category( 'pattern-category-name' );
}
add_action( 'init', 'my_theme_unregister_block_pattern_categories' );

Erstellen und Teilen von Blockmustern mit dem Pattern Creator

Du kannst deine Muster auch mit einem kostenlosen Online-Tool erstellen und sie mit der Community teilen: Der Pattern Creator.

Wenn du ein WordPress.org-Konto hast, kannst du den Pattern Creator über das Pattern-Verzeichnis aufrufen.

Dort klickst du auf Neues Muster erstellen. Dadurch wird eine musterspezifische Version des Block-Editors gestartet, mit der du deine Blockmuster erstellen kannst.

Du kannst auch kostenlose Bilder verwenden, die von der Openverse-Bibliothek gehostet werden.

Wenn du mit deinen Änderungen zufrieden bist, kannst du den Entwurf speichern oder das Muster zur Überarbeitung einreichen.

Du kannst dann zum Verzeichnis Muster zurückgehen und Meine Muster auswählen. Dort findest du alle deine Muster in drei entsprechenden Reitern: Alle, Entwürfe und Zur Überprüfung anstehend.

Wenn du mit deinen Änderungen fertig bist, kannst du dein Muster mit der Community teilen. Klicke auf die Schaltfläche Einreichen in der oberen rechten Ecke des Editors, um das Muster zur Überarbeitung einzureichen (beachte unbedingt die Musterrichtlinien, bevor du dein Muster einreichst).

Zusammenfassung

WordPress ist 20 Jahre alt geworden, und die Statistiken zeigen, dass es mit einem Marktanteil von 63,3 % im Mai 2023 immer noch das meistgenutzte CMS der Welt ist.

Diese Zahlen belegen, dass WordPress ein hervorragendes Publishing-Tool ist, das von Tausenden von Fachleuten, Entwicklern und einfachen Bloggern auf der ganzen Welt genutzt wird.

Wenn du Zeit und Ressourcen darauf verwendest, dir neue Fähigkeiten in der WordPress-Entwicklung anzueignen und dich mit fortgeschrittenen Funktionen wie benutzerdefinierten Blöcken und Blockmustern vertraut zu machen, könnte das eine hervorragende Investition für deine Karriere als Marketer/in, Webdesigner/in oder Herausgeber/in sein.

Und jetzt liegt es an dir. Hast du bereits Blockmuster erstellt? Hast du welche mit der Community geteilt? Wir würden uns freuen, deine Kreationen zu sehen. Hinterlasse einen Kommentar mit einem Link oder deinen Gedanken zu Blockmustern.