Der vollständige Leitfaden der Gutenberg-Blockmuster (III)

Dies ist der dritte und letzte Teil des vollständigen Leitfadens zu Blockmustern, der die folgenden Themen umfasst:

1. Einführung in Blockmuster
2. Fügen Sie ein Muster auf einer Seite ein
3. Vordefinierte Muster und andere in Verzeichnissen verfügbar
4. Fügen Sie Ihrer Website Muster hinzu, die in Verzeichnissen verfügbar sind
5. So erstellen Sie ein Muster von Grund auf neu
6. So erstellen Sie ein Muster, wenn Sie kein Entwickler sind
7. Wie man wiederverwendbare Blöcke in Blockmuster umwandelt
8. Designs mit Blockmustern
9. Offizielle Dokumentation.

Im ersten Teil haben wir die ersten 4 Punkte aller in der Anleitung behandelten Themen gesehen: Was ist ein Blockmuster, wie Sie vordefinierte Muster in Ihre Seiten einfügen und wo Sie Muster finden und kopieren können, die in einigen Verzeichnissen verfügbar sind . Im zweiten Teil haben wir Punkt 5 im Detail gesehen: wie wir mit Code ein Muster von Grund auf neu erstellen können. Und in diesem letzten Beitrag schauen wir uns die letzten 4 Punkte an: wie wir ein Muster erstellen können, ohne Entwickler zu sein, wie wir wiederverwendbare Blöcke in Blockmuster umwandeln können, welche Themen Blockmuster verwenden und schließlich, wo Sie sie finden können offizielle Dokumentation über Muster.

6. So erstellen Sie ein Muster, wenn Sie kein Entwickler sind

Obwohl wir bereits im vorherigen Beitrag die Schritte gesehen haben, die Sie befolgen mussten, um ein Muster mit Code zu erstellen, werden wir an dieser Stelle sehen, dass Sie Muster erstellen können, ohne ein Entwickler zu sein. Und ja, wir werden es mit einem Plugin machen. Tatsächlich gibt es mehr als ein Plugin zum Erstellen von Mustern:

• Block Pattern Builder von Justin Tadlock,
• BlockMeister – Blockmuster-Generator von BlockMeister,
• Page Builder Gutenberg-Blöcke – CoBlocks von GoDaddy

Alle drei funktionieren auf ähnliche Weise, mit einigen geringfügigen Unterschieden. Nach der Installation eines von ihnen erscheinen neue Optionen im WordPress-Administrationsmenü, sodass Sie ein neues Muster erstellen und die Liste der erstellten Muster verwalten können.

Im Fall des Block Patterns Builder-Plugins (dh das Bild auf der linken Seite) hat das Block Patterns-Menü zwei Optionen: eine zum Erstellen eines neuen Musters und eine andere zum Auflisten und Bearbeiten vorhandener Muster. Im Fall des BlockMeister-Plugins (im mittleren Bild dargestellt) fügt es auch eine dritte Option hinzu, um die Kategorien der Muster zu verwalten. Und im Fall von CoBlock (im letzten Bild gezeigt) erscheint sein Menü unter Appearance .

In allen drei Plugins öffnet das Erstellen eines neuen Musters denselben Editor, den Sie zum Bearbeiten einer Seite oder eines Beitrags verwenden. Geben Sie dem Muster einfach einen Namen und definieren Sie die gewünschten Blöcke. Wenn Ihr Muster fertig ist, speichern Sie es einfach.

Der vorherige Screenshot zeigt den Blockmuster-Editor, wie er vom BlockMeister-Plugin bereitgestellt wird. Wie Sie sehen können, bietet es eine Reihe zusätzlicher Eigenschaften in der rechten Seitenleiste: Name, Slug, Beschreibung, Breite des Musters und Kategorien. Das Justin Tadlock-Plugin hingegen erlaubt es Ihnen nicht, die Kategorie hinzuzufügen. Und mit CoBlocks können Sie auch die zusätzlichen Eigenschaften von Mustern hinzufügen.

Mit jedem der drei Plugins wird Ihr Muster nach dem Speichern verfügbar, indem Sie im Post- und Seiteneditor auf die Schaltfläche + klicken, damit Sie es bei Bedarf einfügen können.

Wie Sie sehen können, ist es sehr einfach, die Muster zu erstellen, die Sie in Ihren Seitendesigns verfügbar haben möchten, vorausgesetzt, Sie verwenden das richtige Plugin dafür.

7. Wie man wiederverwendbare Blöcke in Blockmuster umwandelt

Wenn Sie Gutenberg schon seit einiger Zeit verwenden und Seiten damit gestalten, wetten Sie, dass Sie auch einige wiederverwendbare Blöcke erstellt haben, um ein bestimmtes Design auf mehreren Seiten zu replizieren. Zumindest habe ich! Ich erinnere mich, dass ich, als ich zum ersten Mal von Mustern hörte, dachte, sie seien so ziemlich dasselbe wie wiederverwendbare Blöcke … aber das sind sie nicht: Es gibt einige relevante Unterschiede zwischen den beiden Konzepten.

Ein wiederverwendbarer Block ist ein Block (oder eine Gruppe von Blöcken), der auf verschiedenen Seiten eingefügt werden kann, wobei sein Inhalt auf allen gleich ist. Das heißt, wenn Sie es später ändern, sollten alle seine Instanzen aktualisiert werden. Wenn Sie also möchten, dass sich ein wiederverwendbarer Block von den anderen unterscheidet, müssen Sie ihn zuerst in einen normalen Block konvertieren.

Ein Blockmuster hingegen ist so konzipiert, dass es angepasst werden kann – es dient als grundlegendes Design, das Sie nach dem Einfügen optimieren sollen. Die Möglichkeiten sind natürlich unbegrenzt. Die Idee des Musters ist es, einen Ausgangspunkt dafür zu bieten, wie Sie Blöcke kombinieren können, um sie attraktiv aussehen zu lassen.

Wenn Sie wiederverwendbare Blöcke mit der Idee erstellt haben, sie in normale Blöcke umzuwandeln und sie dann bequem anzupassen, ist es sinnvoller, diese Blöcke in Blockmuster umzuwandeln. Wie können wir das tun?

Das Reusable Block Extended Plugin von JB Audras stellt uns diese Funktionalität zur Verfügung. Mal sehen, wie wir es machen.

Nach der Installation des Plugins erscheint eine Menüoption zur Verwaltung der wiederverwendbaren Blöcke. Wenn Sie auf Alle wiederverwendbaren Blöcke klicken, sehen Sie die Liste der Blöcke, die Sie definiert haben.

Wie Sie im obigen Bild sehen können, zeigt die Liste der wiederverwendbaren Blöcke zwei Blöcke und für jeden von ihnen sagt es Ihnen, wo sie verwendet werden, den Shortcode und die PHP-Funktion, damit Sie sie verwenden können, und eine Schaltfläche dafür Sie können es in ein Blockmuster umwandeln.

Nachdem Sie auf die Schaltfläche In Blockmuster konvertieren geklickt haben, wurde das Muster für Sie erstellt und ist in Ihrem Editor in der Kategorie Aus wiederverwendbaren Blöcken konvertiert verfügbar.

8. Themen mit Blockmustern

Zum Zeitpunkt des Schreibens dieses Artikels gibt es bereits 14 Themen mit benutzerdefinierten Blockmustern im Themenverzeichnis von WordPress.org, und die Liste wächst schnell.

• Twenty Twenty-One Version 1.0 von WordPress.org
• C9 Starter-Version 2.4.4 von covertnine
• C9 Work Version 2.3.1 von covertnine
• Seedlet-Version 1.1.2 von Automattic
• ExS-Version 0.9.0 von exstheme
• Cordero Version 1.2.2 von uxl
• Bigwigs Version 0.7.1 von Dinev Dmitry
• Emulsion Version 1.6.9 von nobita
• Twenty Twenty Version 1.6 von WordPress.org
• VW Gesundheitscoaching Version 0.6.5 von VW THEMES
• Twenty Nineteen Version 4.9.6 von WordPress.org
• Schriften Version 1.3.0 von Dinev Dmitry
• Twenty Seventeen Version 2.5 von WordPress.org
• Twenty Sixteen Version 2.3 von WordPress.org

Ich nutze diese Gelegenheit, um zu erwähnen, dass Sie, wenn Sie ein Theme-Entwickler sind und die vordefinierten Blöcke (Core-Block-Muster), die in WordPress 5.5 enthalten sind, eliminieren möchten, dies mit dem folgenden Code tun können:

 remove_theme_support( 'core-block-patterns' );

9. Offizielle Dokumentation

Abschließend haben Sie hier einige nützliche Links zu Blockmustern:

• Für den Endbenutzer – Einführungsvideo zum Blockieren von Mustern, um zu verstehen, was Muster sind, wie man auf sie zugreift, wie man sie in Posts und Seiten hinzufügt und wie man sie für Ihre Inhalte anpasst. Dieses Video ist ein Workshop, der vom WordPress Training Team veröffentlicht wurde.
• Für den Endbenutzer – Blockmusterdokumentation, die vom Dokumentationsteam erstellt wurde.
• For Developers – Block Patterns page in der Dokumentation für die Block-API, die vom Gutenberg-Team veröffentlicht wurde und die ich Ihnen bereits im vorherigen Beitrag mitgeteilt habe.

Und das ist es! Ich hoffe, Sie fanden diesen Leitfaden nützlich. Wenn Sie der Meinung sind, dass Informationen fehlen, können Sie mir dies gerne im Kommentarbereich unten mitteilen.

Beitragsbild von Patrick Hendry auf Unsplash .