Gutenberg-Blockmuster: Ein Entwicklerblick

Ein Blick in die neuen Blockmuster von WordPress Gutenberg aus der Sicht eines Entwicklers. Wir werden untersuchen, was sie sind, wofür sie verwendet werden können, und einen tieferen Blick darauf werfen, wie man Code für sie schreibt.

Blockmuster und ihre Verwendung

Blockmuster wurden in WordPress 5.5 (11. August 2020) eingeführt. Sie sind eine neue Funktion im Blockeinfüger, um eine vordefinierte Konfiguration mehrerer Blöcke einfacher einzufügen. Theme- oder Plugin-Entwickler können eine Gruppe von Blöcken definieren, wie sie verschachtelt sind, ihren Inhalt und ihre Attribute, und Endbenutzer können diese mit einem einfachen Ein-Klick-Vorgang einfügen. Die Idee ist, dass Endbenutzer komplexe Layouts und all ihre benutzerdefinierten Einstellungen nicht mehr manuell erstellen und sie in geeigneten Containern für häufig verwendete Blöcke verschachteln müssen.

Sobald dem Editor ein Blockmuster hinzugefügt wird, wissen die Blöcke nicht, dass sie durch ein Blockmuster hinzugefügt wurden. Sie werden als normale Blöcke hinzugefügt, sodass Benutzer ihre Inhalte und Einstellungen optimieren können. Es ist im Grunde eine Abkürzung zum Hinzufügen einer Konfiguration aus mehreren Blöcken.

Die Idee ist gut! Nicht alle Endbenutzer sind damit einverstanden, eine große Struktur aus verschachtelten Blöcken im Editor zu erstellen, damit sie perfekt aussehen. Bisher ist diese Funktion jedoch hauptsächlich ein Vorteil für Entwickler, da Endbenutzer keine eigenen Muster erstellen können. Für die eigenen benutzerdefinierten Blöcke der Benutzer müssen sie sich an die Verwendung wiederverwendbarer Blöcke halten. Aber besonders für Theme-Entwickler können Blockmuster den Endbenutzern wirklich die beste Konfiguration von Blöcken zeigen, die gut im Theme funktionieren.

WordPress hat eine neue Designunterstützung für Blockmuster hinzugefügt: 'core-block-patterns'. Core wird seit 5.5.0 automatisch ausgeführt, add_theme_support('core-block-patterns')sodass Sie dies nicht in Ihrem Design tun müssen.

Da alle Blockmuster-Funktionen nur in einer sehr neuen WordPress-Version vorhanden sind, ist es eine gute Idee, zuerst auf ihre Existenz zu überprüfen, damit Sie Websites mit älteren WordPress-Versionen nicht beschädigen. In allen folgenden Codebeispielen habe ich genau das getan.

WordPress 5.5 wird mit 9 vordefinierten Blockmustern ausgeliefert (siehe Liste unten). Blockmuster werden in Musterkategorien angezeigt (Kern fügt 5 Kategorien hinzu). Blockmuster-Kategorien funktionieren wie Post-Kategorien; Sie können ein Blockmuster in mehrere Kategorien einordnen. Theme- und Plugin-Entwickler können ihre eigenen Blockmuster und Blockmusterkategorien registrieren sowie die Registrierung derjenigen im Kern aufheben. Schauen wir uns also genauer an, wie!

Blockmuster und Blockmusterkategorien, die in WordPress 5.5 enthalten sind

Die in WordPress 5.5 gelieferten Blockmuster lauten wie folgt (der Namespace und die Slug-ID für jedes Muster werden in Klammern angezeigt):

• Zwei Tasten (‘ core/two-buttons‘)
• Drei Tasten (‘ core/three-buttons‘)
• Zwei Textspalten (‘ core/text-two-columns‘)
• Zwei Textspalten mit Bildern (‘ core/text-two-columns-with-images‘)
• Drei Textspalten mit Schaltflächen (‘ core/text-three-columns-buttons‘)
• Zwei Bilder nebeneinander (‘ core/two-images‘)
• Große Kopfzeile mit Überschrift (‘ core/large-header‘)
• Große Kopfzeile mit Überschrift und Schaltfläche (‘ core/large-header-button‘)
• Zitat (‘ core/quote‘)

Die in WordPress 5.5 hinzugefügten Kategorien sind (ihre Slug-IDs werden in Klammern angezeigt):

• Schaltflächen (‘ buttons‘)
• Spalten (‘ columns‘)
• Galerie (‘ gallery‘)
• Überschriften (‘ header‘ – kein ‘s’ am Ende beachten)
• Text (‘ text‘)

Registrierung von Blockmustern aufheben

Sie können Blockmuster mit der Funktion abmelden [unregister_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern)(). Geben Sie einfach eine Zeichenfolge mit dem zu entfernenden Blockmuster als Parameter an. Beziehen Sie sich auf die obige Übersicht für Kernblockmuster. Führen Sie diese Funktion innerhalb einer Funktion aus, die mit der initAktion verbunden ist.

Ein Beispiel für das Aufheben der Registrierung der Kernblockmuster „Zwei Tasten” und „Drei Tasten”:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern')) {
        return;
    }
    unregister_block_pattern('core/two-buttons');
    unregister_block_pattern('core/three-buttons');
});

Registrieren von Blockmustern

Die Registrierung eines neuen Blockmusters erfolgt mit der Funktion [register_block_pattern](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern)(). Es akzeptiert zwei Parameter; Der erste ist eine Zeichenfolge mit einem eindeutigen Namen für Ihr Muster, einschließlich Namespace. Die zweite ist eine Reihe von Einstellungen für Ihr Blockmuster.

Tipp: Zum Definieren eines Blockmusters müssen Sie rohen HTML-Inhalt für Ihre Blockkonfiguration bereitstellen. Ich empfehle nicht, dies manuell einzugeben, da dies leicht zu Konflikten mit ungültigen Blöcken führen kann. Gehen Sie stattdessen in den Editor und richten Sie die Blöcke so ein, wie Sie sie in Ihrem Muster haben möchten. Klicken Sie dann auf das „Punktmenü” in der Symbolleiste des Elternblocks und klicken Sie auf „Kopieren”. Danach können Sie zurück in Ihren Code-Editor gehen und einfügen (Strg+V). Dadurch erhalten Sie den rohen HTML-Code für die kopierte Konfiguration. Verwenden Sie die Funktionen des Code-Editors, um alle Zeilenumbrüche durch zu ersetzen, nund achten Sie darauf, Anführungszeichen richtig zu maskieren.

Die Eigenschaften für Ihr Blockmuster lauten wie folgt (zweites Argumentarray):

• title(erforderlich): Der anzeigbare Name Ihres Blockmusters
• **content**(erforderlich): RAW HTML der Blockkonfiguration
• description: Beschreibung für Ihr Blockmuster. Ist optisch versteckt
• categories: Ein Array von Kategorien, denen dieses Blockmuster hinzugefügt werden soll. Wenn Sie diese Eigenschaft nicht angeben, wird der Block in eine Blockmusterkategorie „Nicht kategorisiert” platziert.
• keywords: Eine Reihe von Schlüsselwörtern, die Benutzern helfen können, Ihr Muster bei der Suche zu finden
• viewportWidth: Geben Sie eine Ganzzahl der Blockmusterbreite im Inserter an. Betrifft nur die Vorschau im Inserter.

Hier ist ein Beispiel für die Registrierung eines Blockmusters, das aus einem Cover-Block in voller Breite mit einer Hintergrundfarbe, einem zentriert ausgerichteten Überschriftenblock mit einer bestimmten Textfarbe und einem zentriert ausgerichteten Absatz mit einer bestimmten Textfarbe besteht:

Registrieren von Blockmusterkategorien

Entwickler können auch benutzerdefinierte Blockmusterkategorien registrieren. Dies geschieht mit der Funktion [register_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#register_block_pattern_category)(). Es akzeptiert zwei Parameter; erstens eine Zeichenfolge der Kategorie Slug und zweitens ein Array von Eigenschaften. Im Moment wird nur eine Eigenschaft im zweiten Argument unterstützt; labelfür den lesbaren Namen der Kategorie.

Unten sehen Sie ein Beispiel für die Registrierung einer benutzerdefinierten Blockmusterkategorie:

Damit können Sie ‘awp-patterns’ zum ‘ categories‘ Argument zu hinzufügen register_block_pattern(). Denken Sie daran, dass, wenn für eine Kategorie keine Blockmuster registriert sind, die Kategorie nicht im Blockeinfüger angezeigt wird. Sie müssen mindestens ein Blockmuster in dieser Kategorie hinzufügen, damit es angezeigt wird.

Registrierung von Blockmuster-Kategorien aufheben

Schließlich gibt es eine Funktion [unregister_block_pattern_category](https://developer.wordpress.org/block-editor/developers/block-api/block-patterns/#unregister_block_pattern_category)()zum Abmelden einer Blockmusterkategorie. Geben Sie den Kategorie-Slug als Parameter an. Beziehen Sie sich auf die Übersicht der Blockmuster-Kategorien oben für Kernkategorien und ihre Slugs.

Vergessen Sie nicht, dass Blockmusterkategorien ohne zugewiesene Blockmuster im Blockeinfüger nicht sichtbar sind. Wenn Sie also alle einer Kategorie zugewiesenen Blockmuster abmelden, ist die Kategorie selbst nicht mehr sichtbar und Sie müssen die Kategorie nicht unbedingt abmelden. Alle Blockmuster, die nur der Kategorie zugewiesen sind, die Sie entfernen, werden in die Kategorie „Nicht kategorisiert” verschoben.

Hier ist ein Beispiel für die Aufhebung der Registrierung der Kernblockmuster-Kategorie „Schaltflächen”:

add_action('init', function() {
    if (!function_exists('unregister_block_pattern_category')) {
        return;
    }
    unregister_block_pattern_category('buttons');
});

Fazit

Die neue Blockmusterfunktion in WordPress Gutenberg ist definitiv einen Schritt näher daran, den Blockeditor mehr als Seitenersteller funktionieren zu lassen. Meiner Meinung nach besteht der Nachteil darin, dass Endbenutzer keine eigenen Muster erstellen können. Aber es ist eine gute Funktion für Theme-Entwickler, da es Endbenutzern ermöglicht, einfach Blockkonfigurationen und Layouts einzurichten, die im Theme gut funktionieren. Dies ist eine brandneue Funktion, die wahrscheinlich in naher Zukunft weiterentwickelt und verbessert wird! Ich für meinen Teil kann es kaum erwarten!