Wie man WordPress Blockmuster erstellt

WordPress ist ein leistungsstarkes Online-Publishing-Tool, mit dem jeder ganz einfach Text- und/oder Multimedia-Inhalte erstellen und weitergeben 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 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 Karriereerwartungen 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.

WordPress bietet von Haus aus ein paar eingebaute Blockmuster, aus denen du bei der Erstellung deiner Inhalte wählen kannst. Darüber hinaus bieten Block-Themes in der Regel weitere Blockmuster, die du direkt über den Block-Inserter in deinen Inhalt einfügen kannst.

Das aktuelle Standard-Theme Twenty Twenty-Three bietet zum Beispiel die folgenden Blockmuster:

• Aufruf zum Handeln
• Standard-Footer
• Versteckte 404
• Ausgeblendete Kommentare
• Ausgeblendeter Inhalt ohne Ergebnisse
• Beitrag Meta

Und du bist nicht auf die von WordPress oder deinem Theme bereitgestellten Muster beschränkt.

Erstens findest du im offiziellen WordPress Patterns-Verzeichnis jede Menge gebrauchsfertige Blockmuster.

Darüber hinaus kannst du mit der Patterns-API oder den Bearbeitungswerkzeugen im Block-Editor eine unbegrenzte Anzahl von eigenen Mustern erstellen. Du kannst benutzerdefinierte Muster intern auf deiner Website verwenden, sie auf andere Websites exportieren oder sie im Patterns-Verzeichnis ö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.

Fragst du dich, wie dieses System funktioniert und wie du die neuen Bearbeitungsfunktionen in WordPress 6.3 nutzen kannst? Dann lass uns eintauchen.

Vorgefertigte Blockmuster

Vorgefertigte Muster sind „nicht synchronisierte“ Blockmuster, d.h. Änderungen an einem Blockmuster 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 Block-Layouts zu erstellen, die du an Ort und Stelle anpasst, indem du Bilder, Text und Stile änderst oder Elemente hinzufügst oder entfernst.

Blockmuster sind wiederverwendbar, d. h., sobald du dein eigenes Blockmuster erstellt hast, kannst du es überall auf deiner Website einfügen und mit wenigen Klicks über die integrierten Steuerelemente des Editors anpassen.

Du kannst vorgefertigte Blockmuster auf der Registerkarte Muster im Block-Inserter durchsuchen und einfügen, zum Verwaltungsbereich „Muster“ im Website-Editor navigieren oder das Verzeichnis „Muster“ über die Schaltfläche Alle Muster durchsuchen im Block-Inserter aufrufen.

Auf der Registerkarte „Muster“ im Block-Inserter findest du jede Menge Muster. Du kannst aber auch direkt von der Benutzeroberfläche des Editors aus die Blockmusterbibliothek erkunden.

Du kannst auch die Blockmuster-Website besuchen, ein Muster auswählen und auf Kopieren klicken.

Sobald du ein Muster kopiert hast, fügst du es in deinen Inhalt ein und bist fertig.

Du kannst die Gruppe von Blöcken, die in dem Muster enthalten sind, anpassen, ohne das registrierte Muster oder eine zusätzliche Instanz davon auf deiner Website zu beeinflussen.

Benutzerdefinierte Blockmuster

Wie bereits erwähnt, wurde das Mustersystem in WordPress 6.3 vereinfacht 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
• Standard-Blockmuster

Der Unterschied zwischen den beiden Arten von Mustern besteht darin, 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 einem Standard-Blockmuster (nicht synchronisiert) 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_block_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/Wiederverwendbare Blöcke erstellen aus dem Dropdown-Menü.

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

Wenn du auf Muster/Wiederverwendbaren Block erstellen klickst, wirst du aufgefordert, einen Namen für dein Muster einzugeben und zu entscheiden, ob es sich um ein synchronisiertes oder nicht synchronisiertes Muster handelt.

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

Hier kannst du eine Vorschau deiner Muster sehen und den Synchronisierungsstatus ü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 einen neuen Beitrag und füge zwei Blockmuster hinzu, eines synchronisiert und das andere standardmäßig. Gehe dann in den Code-Editor und überprüfe den Code.

Der synchronisierte Block wird durch den folgenden Code erzeugt:

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

WordPress ruft den Beitrag mit der ID 94 ab, um das HTML für die Darstellung auf dem Bildschirm zu generieren.

Der Standardblock (nicht synchronisiert) ist nicht mit einer ID gekennzeichnet. In diesem Fall enthält der Code-Editor das gesamte Markup der Blöcke, aus denen das Muster besteht.

Synchronisierte Muster sind besonders nützlich, um Elemente zu erstellen, die du auf mehreren Seiten deiner Website und/oder auf verschiedenen Websites einsetzen möchtest. Denk an Call-to-Action, Werbebanner, Preistabellen und so weiter.

Im Block-Inserter sind die benutzerdefinierten Blockmuster in zwei separaten Registerkarten aufgeführt. Standardmuster sind auf der Registerkarte Muster unter der Kategorie Meine Muster aufgeführt.

Synchronisierte Muster werden auf der Registerkarte Synchronisierte Muster aufgelistet (vorher Wiederverwendbare Blöcke).

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 Blockmuster 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 Meine Muster verwalten im Block-Inserter.
• Klick auf die Schaltfläche Alle meine Muster verwalten im Site-Editor.

Dort kannst du

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

Alle Änderungen an einem synchronisierten Muster werden auf jedes Vorkommen dieses Musters auf deiner gesamten Website angewendet, unabhängig davon, auf welcher Verwaltungsseite die Änderungen vorgenommen werden.

Vorlagenteile

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 Vorlagen. Doch mit der Einführung von Block-Themes änderte sich alles.

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-Teile für Bereiche der Website gedacht, die sich nicht häufig ändern.

Unterschiede zwischen vorgefertigten Mustern, benutzerdefinierten Mustern und Vorlagenteilen

Hier sind die wichtigsten Unterschiede zwischen den drei Varianten:

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. Mit WordPress 6.2 sind neue Musterkategorien hinzugekommen und einige bestehende Kategorien wurden geändert. Zum Zeitpunkt der Erstellung dieses Artikels kannst du die folgenden eingebauten Kategorien verwenden:

• Featured (featured)
• Beiträge (posts)
• Text (text)
• Galerie (gallery)
• Aufruf zum Handeln (call-to-action)
• Banner (banner)
• Kopfzeilen (header)
• Fußzeilen (footer)
• Team (team)
• Zeugnisse (testimonials)
• Dienstleistungen (services)
• Portfolio (portfolio)
• Medien (media)

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.

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'		=> '<!-- wp:paragraph --><p>My awesome block pattern</p><!-- /wp:paragraph -->'
			) 
		);
	}
	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 nun einen neuen Beitrag (oder einen benutzerdefinierten Beitragstyp), öffne den Block-Inserter und klicke auf das Label Muster. 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, die den Nutzern helfen, dein Blockmuster zu 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 vorher in den Ordner /assets/images deines Themes abgelegt haben.

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 Themeentwickler 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 auch ein bestimmtes Blockmuster abmelden, 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 abmelden 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 wieder 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 bist du dran. 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.