Builder-Grundlagen: Erstellen von Blockmustern

Im Builder Basics-Artikel vom letzten Monat haben wir Blockmuster untersucht: was sie sind und wie Sie sie verwenden können. Wir haben gelernt, dass ein Blockmuster einfach eine vordefinierte Sammlung von Blöcken ist, die ein bestimmtes Layout bilden. Wir haben die Macht von Mustern gezeigt und diskutiert, wie sie ein Eckpfeiler der modernen WordPress-Theme-Entwicklung sind. Heute lernen wir, wie wir unsere eigenen Muster entwerfen, teilen und registrieren!

Bitte beachten Sie, dass dieser Artikel in allen seinen Beispielen das Thema Twenty Twenty-Two verwendet. Dieses blockbasierte Design wurde zusammen mit WordPress 5.9 veröffentlicht und ist eine fantastische Ressource mit über 60 Blockmustern.

Mustergestaltung

Der schwierigste Teil beim Erstellen eines Blockmusters ist die Entscheidung, wie es aussehen soll. Fangen wir mit etwas relativ Einfachem an: ein Gitter aus Gegenständen, zwei Dreierreihen. Wir könnten dieses Design verwenden, um verschiedene Unternehmensdienste oder Produktfunktionen zu präsentieren.

Schneller Tipp: Muster können aus jedem Block erstellt werden, einschließlich Blöcken von Drittanbietern. Wenn Sie jedoch beabsichtigen, Ihre Muster an ein breites Publikum zu verteilen, versuchen Sie, nur grundlegende WordPress-Blöcke zu verwenden – auf diese Weise muss der Benutzer keine zusätzlichen Plugins installieren, um Ihre Designs zu verwenden.

Musterdesign beginnt für mich im Editor. Während Muster manuell codiert werden können, ist es viel einfacher, Dinge visuell zu tun. Ich beginne mit dem Hinzufügen eines Spaltenblocks mit drei Spalten für die erste Zeile des Rasters. Fügen Sie als Nächstes jeder Spalte die Blöcke Überschrift, Absatz und Schaltflächen hinzu. Duplizieren Sie den Spaltenblock, um die zweite Rasterzeile zu erstellen. Abschließend werde ich einige Styling-Konfigurationen anwenden und beide Columns-Blöcke in einen Group-Block mit einer Hintergrundfarbe packen. Das Ergebnis sieht so aus:

Sie können die 33 Blöcke sehen, aus denen dieses Design im obigen Screenshot besteht!

Wenn ich eine alternative „dunkle“ Version des Rasters erstellen möchte, muss ich nur das ursprüngliche Design duplizieren und das Styling optimieren.

Obwohl beide Designs relativ einfach sind, kann es mühsam sein, sie von Grund auf neu zu erstellen. Die Möglichkeit, diese Blockmuster zu teilen und/oder zu speichern, würde viel Zeit sparen.

Teilen eines Designs

Das Teilen eines Musterdesigns ist ganz einfach! Angenommen, Sie möchten das Design auf eine andere Seite Ihrer Website oder vielleicht sogar auf eine andere Website verschieben. Es ist so einfach wie das Kopieren und Einfügen des Block-Markups. Es gibt mehrere Möglichkeiten, dies zu erreichen.

Wenn das Musterdesign in einem „Container“-Block enthalten ist, wie z. B. einem Gruppen-, Cover- oder Spaltenblock, wählen Sie den äußersten Container aus und verwenden Sie das Werkzeugmenü, um „Kopieren“ auszuwählen. Das Block-Markup wird in die Zwischenablage kopiert und Sie können es an beliebiger Stelle einfügen.

Eine zweite Option ist die Verwendung des Code-Editors, auf den Sie über das Optionsfeld zugreifen können.

Der Code-Editor bietet eine visuelle Darstellung aller Block-Markups auf der aktuellen Seite oder im aktuellen Beitrag. Ich bevorzuge diese Methode, weil es einfach ist, genau zu sehen, welcher Code kopiert wird.

Registrieren eines Musters

Das Kopieren und Einfügen von Block-Markup mag einfach sein, aber wir möchten oft eine dauerhaftere Version unserer Musterdesigns. Dazu verwenden wir die Patterns-API, um ein benutzerdefiniertes Blockmuster zu „registrieren“. Dadurch ist unser Design sowohl im Inserter als auch im Pattern Explorer in WordPress verfügbar.

Um ein Muster zu registrieren, verwenden wir die PHP-Funktion register_block_pattern(). Diese Funktion akzeptiert zwei Parameter, einen Titel und ein Array von Eigenschaften. Bevor wir die einzelnen durchgehen, sehen wir uns ein Beispiel an.

register_block_pattern(

'Beispiel/Feature-Raster-Licht',

Reihe (

'title' => __( 'Feature Grid – Light', 'textdomain' ),

'description' => __( 'Sechs vorgestellte Artikel in einem Raster auf hellem Hintergrund präsentieren.', 'textdomain' ),

'Kategorien' => Array( 'empfohlen', 'Spalten' ),

'keywords' => array( 'feature', 'grid' ),

'viewportWidth' => 1400,

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

'content' => 'MUSTERINHALT'

)

);

Hier registrieren wir das Feature Grid-Muster, das wir zuvor entworfen haben. Der Titel folgt einer Namensraum/Titel-Benennungskonvention. Wenn Sie mehrere Muster im selben Projekt registrieren, empfiehlt es sich, den Namespace konsistent zu halten.

Lediglich der Titel und die Inhaltsparameter im Eigenschaften-Array sind technisch erforderlich. Der Kürze halber ist der Musterinhalt im obigen Beispiel ausgeschlossen. Dies ist jedoch derselbe Code, den wir im vorherigen Abschnitt kopiert und eingefügt haben. Kategorien werden mithilfe des Kategorienfelds festgelegt, und ein Muster kann mehrere haben. Im Editor sind Muster nach Kategorien organisiert. Für die verbleibenden Eigenschaften wird im Blockeditor-Handbuch eine fantastische Aufschlüsselung bereitgestellt.

Um das Feature Grid-Muster mit dem dunklen Hintergrund zu registrieren, duplizieren Sie einfach den Registrierungscode und aktualisieren Sie ihn entsprechend. Abschließend verpacken wir beide Funktionen so und platzieren alles in der functions.php-Datei unseres Themes.

Funktion my_pattern_library_register_block_patterns() {

register_block_pattern(

'Beispiel/Feature-Raster-Licht',

Reihe( … )

);

register_block_pattern(

'example/feature-grid-dark,

Reihe( … )

);

}

add_action( 'init', 'example_register_block_patterns' );

Der vollständige Code ist in einem Gist auf GitHub verfügbar.

Sobald der Code hinzugefügt wurde, werden unsere neu registrierten Muster nun im Inserter und im Muster-Explorer angezeigt.

Registrieren einer Musterkategorie

Bei der Arbeit mit benutzerdefinierten Mustern ist es oft hilfreich, sie in benutzerdefinierte Kategorien einzuordnen. WordPress macht es einfach mit register_block_pattern_category(). Diese Funktion ähnelt der, die wir zum Registrieren von Mustern verwendet haben. Sie müssen lediglich einen Kategorietitel und eine Reihe von Eigenschaften angeben. Ab WordPress 5.9 ist Label die einzige unterstützte Eigenschaft, aber wir erwarten in Zukunft mehr.

Im folgenden Beispiel wird die Kategorie „Benutzerdefiniert“ mit dem Titel „Benutzerdefiniert“ registriert. Platzieren Sie diesen Code in der Datei functions.php Ihres Designs neben den Musterregistrierungsbeispielen.

Funktion example_register_block_pattern_categories() {

register_block_pattern_category(

'Benutzerdefiniert',

array( 'label' => __( 'Custom', 'textdomain' ) )

);

}

add_action( 'init', 'example_register_block_pattern_categories' );

Musterkategorien werden nur dann im Editor angezeigt, wenn ihnen Muster zugeordnet sind. Wenn wir also den beiden zuvor registrierten Funktionsrastermustern benutzerdefinierte hinzufügen, wird die Kategorie „Benutzerdefiniert“ wie folgt angezeigt:

Erstellen Sie ein Musterbibliotheks-Plugin

In den vorherigen Abschnitten haben wir Muster und eine Musterkategorie registriert, indem wir den Code in der Datei functions.php unseres Designs platziert haben. Das funktioniert zwar, ist aber langfristig nicht ideal. Angenommen, wir müssen unser Design aktualisieren? Vielleicht möchten wir die Muster auf einer anderen Website verwenden?

WordPress muss noch eine native Lösung für die Verwaltung benutzerdefinierter Muster bereitstellen, daher müssen wir uns nach alternativen Lösungen umsehen. Außerdem ist es oft vorzuziehen, Muster in einem tragbareren Format zu haben.

Der beste Ansatz, den ich gefunden habe, besteht darin, ein einfaches WordPress-Plugin zu erstellen, um meine Sammlung benutzerdefinierter Muster zu speichern. Plugins bieten maximale Vielseitigkeit und sind themenunabhängig. In den folgenden Schritten zeige ich Ihnen, wie Sie Ihr ganz eigenes Musterbibliotheks-Plugin erstellen.

Schneller Tipp: Wenn Sie die folgenden Schritte überspringen möchten, habe ich ein vollständiges „My Pattern Library“-Plugin vorbereitet, das einen guten Ausgangspunkt für Ihre eigene Bibliothek bieten sollte. Der Code ist als Gist auf GitHub verfügbar.

Schritt 1: Einrichtung erhalten

Bevor Sie mit der Erstellung des Plugins beginnen, benötigen Sie eine funktionierende Version von WordPress und einen beliebigen Texteditor. Ich empfehle Local sehr, um lokale WordPress-Installationen zu erstellen, und verwende es seit vielen Jahren ausschließlich. Ich verwende Atom für die Textbearbeitung, aber es gibt viele großartige Optionen. Sogar der einfache Texteditor, der mit Ihrem Betriebssystem geliefert wird, reicht aus.

Richten Sie eine lokale WordPress-Site mit Local oder einer ähnlichen Anwendung ein. Stellen Sie sicher, dass WordPress auf Version 5.9 oder höher aktualisiert ist. Patterns funktionieren auf 5.5+, aber es ist immer am besten, wann immer möglich die neueste Version von WordPress zu verwenden.

Schritt 2: Erstellen Sie das Plugin

Als nächstes müssen Sie die „Basis“ des Plugins erstellen. Wenn Sie neu in der Plugin-Entwicklung sind, haben Sie keine Angst. Das klingt abschreckender, als es ist.

Navigieren Sie zum Verzeichnis wp-content → plugins in Ihrer lokalen WordPress-Installation und erstellen Sie ein neues Verzeichnis mit dem Titel my-pattern-library. Sie können das Verzeichnis beliebig benennen. Ersetzen Sie einfach „my-pattern-library“ in allen nachfolgenden Schritten durch Ihren benutzerdefinierten Namen.

Erstellen Sie im neuen Verzeichnis wp-content → plugins → my-pattern-library eine PHP-Datei mit dem Titel my-pattern-library.php. Öffnen Sie die Datei in Ihrem Texteditor und fügen Sie den folgenden Plugin-Header-Kommentar am Anfang der Datei hinzu. Vergessen Sie nicht das vorangestellte <?php. Beachten Sie, dass ich den Header für dieses Tutorial vereinfacht habe.

<?php

/**

* Plugin-Name: Meine Musterbibliothek

* Beschreibung: Eine einfache Bibliothek von Blockmustern.

* Version: 0.1.0

* Benötigt mindestens: 5.8

* Benötigt PHP: 7.0

* Autor: Ihr Name

* Lizenz: GPL v2 oder höher

* Textdomäne: meine-muster-bibliothek

*/

Fühlen Sie sich frei, die Header-Informationen nach Belieben zu ändern. Speichern Sie dann die Datei. Sie haben jetzt ein voll funktionsfähiges WordPress-Plugin. Bestätigen Sie, dass es auf der Admin-Plugins-Seite sichtbar ist, und klicken Sie auf „Aktivieren“. Es sollte so aussehen.

Während Sie jetzt ein funktionierendes Plugin haben, macht es eigentlich nichts. Lass uns das ändern.

Schritt 3: Registrieren Sie Muster und Kategorien

In diesem letzten Schritt müssen Sie lediglich den Muster- und Musterkategorie-Registrierungscode von früher in diesem Artikel in das neue Plugin kopieren. Wir haben diesen Code zuvor in der Datei functions.php des Themes platziert. Fügen Sie es jetzt einfach unter dem Header-Kommentar in Ihrer Datei my-pattern-library.php ein.

Speichern Sie die Datei und navigieren Sie dann zum Editor in WordPress. Öffnen Sie den Inserter, klicken Sie auf die Registerkarte Muster und wählen Sie die Kategorie Benutzerdefiniert. Sie sollten die beiden vom Plugin registrierten Muster sehen.

Ihre Musterbibliothek ist jetzt betriebsbereit! Wenn neue benutzerdefinierte Muster oder Kategorien benötigt werden, fügen Sie sie einfach dem Plugin hinzu. Ein vollständiges Codebeispiel ist als Gist auf GitHub verfügbar.

Bevor wir zum Schluss kommen, ist es wichtig zu erwähnen, dass dieses Beispiel für den persönlichen Gebrauch gedacht ist. Sie würden wahrscheinlich mehr Funktionalität hinzufügen wollen, wenn das Plugin öffentlich verteilt werden würde. Lokalisierung kommt mir in den Sinn. Dieses Tutorial zeigt jedoch, wie einfach es ist, ein einfaches Plugin zu erstellen, das benutzerdefinierte Blockmuster speichert.

Einpacken

In diesem Artikel haben Sie gelernt, wie Sie Blockmuster entwerfen, freigeben und registrieren. Sie haben sogar gelernt, wie Sie ein einfaches WordPress-Plugin erstellen, um Ihre eigene Musterbibliothek zu beherbergen. Ich bin der festen Überzeugung, dass Blockmuster ein wesentlicher Bestandteil der modernen Themenentwicklung sind, und ich bin gespannt, was die Zukunft bringt. Wenn Sie noch nicht mit der Erforschung von Mustern begonnen haben, hoffe ich, dass dieser Artikel Sie dazu ermutigt. Learn WordPress ist eine fantastische Ressource für zusätzliches Lernen und wenn Sie Fragen haben, lassen Sie es mich bitte in den Kommentaren wissen.