Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Erstellung der Stilvariationen für WordPress Gutenberg-Blöcke: Teil 2

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Im vorherigen Beitrag haben wir alles über Blockstilvariationen und die Verwendung im brandneuen WordPress 5.0-Editor erfahren, um einfach zwischen vordefinierten Stilen zu wechseln.

Wir werden in diesem Beitrag noch ein wenig weiter gehen und weitere Beispiele bereitstellen, um Ihnen eine solide Grundlage für die Implementierung von Blockstilvariationen in Ihren eigenen Projekten zu bieten. Insbesondere erstellen wir unseren eigenen Block von Grund auf neu, um zu demonstrieren, wie mehrere Stilvarianten direkt in die Blockdefinition selbst eingefügt werden. Ich werde Ihnen auch zeigen, wie Sie festlegen, welcher Blockstil verwendet wird, da der Standard ebenfalls behandelt wird.

Dann werden wir versuchen, unseren Block zu erweitern, indem wir weitere Blockstilvarianten (kurz BSVs) über ein separates Plugin hinzufügen. Normalerweise möchten Sie dies tun, wenn Sie Blockstile erweitern müssen, aber keinen Zugriff auf den Quellcode des Blocks haben.

Der gleiche Ansatz wird erneut verwendet, diesmal jedoch über ein untergeordnetes Thema. Möglicherweise möchten Sie dies tun, um zusätzliche Stilvarianten für Kernblöcke bereitzustellen, die Ihren eigenen Themenstilen entsprechen.

Die Abmeldung ist ebenso wichtig. Und dafür gibt es eine spezielle Funktion.

Der gesamte Code für dieses Tutorial steht zum Download unseres GitHub-Repos auf der rechten Seite zur Verfügung. Sie müssen den Code also nicht manuell eingeben, wenn Sie nur mitmachen möchten.

Registrieren eines BSV in einem Block

Wenn Sie Zugriff auf den Quellcode eines Blocks haben, können Sie Blockstilvariationen direkt in registerBlockType() verwalten. Lasst uns genauer hinschauen.

Zuerst müssen wir einen neuen Block drehen. Es spielt keine Rolle, was der Block tut, da wir nur etwas benötigen, um auch unsere benutzerdefinierten Blockstilvarianten hinzuzufügen. Der wahrscheinlich einfachste Weg, dies zu tun, ist die Verwendung des Dienstprogramms create-guten-block, das ein neues Plugin erstellt und einen Beispielblock hinzufügt, der zur Anpassung bereit ist. Und das alles mit einem einzigen Terminalbefehl!

Wenn Sie dieses praktische Dienstprogramm noch nicht verwendet haben, können Sie im Projekt-Repository nach weiteren Informationen suchen. Außerdem finden Sie hier ein spezielles Tutorial, das Sie bei Bedarf auf den neuesten Stand bringt.

Öffnen Sie in Ihrem lokalen WordPress-Plugin-Ordner ein Befehlszeilenfenster und geben Sie Folgendes ein:

Ich habe hier das bsv-plugin für den Namen verwendet, aber Sie können alles verwenden, was Sie möchten. Geben Sie nach einigen Minuten nach Abschluss der Installation Folgendes ein:

Wir können jetzt den Quellcode für unseren neu erstellten Block bearbeiten und create-guten-block kompiliert den Quellcode nach jeder Änderung automatisch für uns. Nett.

Aktivieren Sie das Plugin im WordPress-Administrator und fügen Sie dem Editor eine Instanz Ihres neuen Blocks hinzu, indem Sie eine neue Seite erstellen oder eine vorhandene bearbeiten.

Block created with create-guten-blockBlock created with create-guten-blockBlock created with create-guten-block

Entfernen Sie Nur-Editor-Stile

Bevor wir jedoch weiter gehen, müssen wir nur die Art und Weise ändern, in der CSS standardmäßig in die Warteschlange gestellt wird.

Der soeben für uns erstellte benutzerdefinierte Block create-guten-block enthält zwei Stylesheets. Einer befindet sich im Editor und der andere im Editor und im Frontend. Für dieses Tutorial benötigen wir keine Nur-Editor-Stile .\bsv-plugin\src\init.php kommentieren oder löschen Sie den Aufruf von wp_enqueue_style() in bsv_plugin_cgb_editor_assets().

Wenn wir einen Moment in init.php bleiben, müssen wir auch das Abhängigkeitsarray für wp_enqueue_style() in bsv_plugin_cgb_block_assets() auskommentieren, da dies aus irgendeinem Grund derzeit verhindert, dass die Stile ordnungsgemäß in die Warteschlange gestellt werden. Ich verwende create-guten-block v1.11.0 in diesem Tutorial, sodass Sie je nach verwendeter Version möglicherweise dasselbe Problem haben oder nicht.

Die Funktion bsv_plugin_cgb_block_assets() sollte nun folgendermaßen aussehen:

Wenn Sie nun die Seite laden, sehen Sie die Blockstile, die im Editor und im Frontend angewendet werden.

Block styles enqueued on frontend and backendBlock styles enqueued on frontend and backendBlock styles enqueued on frontend and backend

Registrieren Sie Blockstilvariationen

Wir sind jetzt alle so eingerichtet, dass wir unser benutzerdefiniertes CSS hinzufügen können, was wir in Kürze erledigen werden. Zuerst müssen wir jedoch unsere Blockstilvariationen registrieren.

Öffnen Sie .\bsv-plugin\src\block\block.js und fügen Sie dem Konfigurationsobjekt registerBlockType-Funktionen Folgendes hinzu (z. B. direkt unter der Eigenschaft keywords).

Dies registriert drei neue Stilvarianten für unseren benutzerdefinierten Block. Beachten Sie, dass für die Blockstilvariante style1 die Eigenschaft isDefault auf true festgelegt ist. Dadurch wird einfach die Blockstilvariante Stil 1 ausgewählt, wenn Sie die Blockoptionen im Editor öffnen. Es werden keine CSS-Klassen für den Block festgelegt, wie Sie vielleicht denken.

Dies war für mich ein Knackpunkt, als ich anfing, mit Variationen im Blockstil zu arbeiten, und sorgte für viel Verwirrung. Hoffentlich wird die isDefault-Eigenschaft in Zukunft auch die CSS-Klasse auslösen, die dem Wrapper des Blocks hinzugefügt wird, was meiner Meinung nach intuitiver ist.

Aktualisieren Sie die Editorseite und öffnen Sie die Optionen für Stilvariationen, indem Sie auf das Symbol oben links im Block klicken, um die drei soeben definierten Blockstilvarianten anzuzeigen.

Our three new block style variationsOur three new block style variationsOur three new block style variations

Beachten Sie, wie standardmäßig die Blockstilvariante für Stil 1 ausgewählt ist, die wir in der obigen styles-Eigenschaft angegeben haben. Wenn Sie eine der drei Blockstilvarianten auswählen, werden dem Wrapper des Blocks verschiedene CSS-Klassen hinzugefügt. Wenn Sie beispielsweise Stil 2 auswählen, wird die Klasse is-style-style2 hinzugefügt.

Block style variation CSS class added to markupBlock style variation CSS class added to markupBlock style variation CSS class added to markup

Derzeit passiert nichts, wenn jede Blockstilvariante ausgewählt wird. Fügen wir daher einige grundlegende Stile hinzu, um dies zu beheben. Fügen Sie in .\bsv-plugin\src\block\style.scss nach den vorhandenen Stilen hinzu:

Hier werden nur benutzerdefinierte Stile für Blockstilvarianten des Stil 2 und Stil 3 hinzugefügt, sodass die Standardblockstile auch dann angewendet werden, wenn keine Blockstilvariante speziell angeklickt wird.

Our block styles addedOur block styles addedOur block styles added

Wie Sie sehen können, sind unsere Blockstilvarianten jetzt mit den angewendeten Stilen verfügbar. Ich mag die Art und Weise, wie Sie eine Vorschau jeder Stilvariante sehen können, wenn Sie mit der Maus darüber fahren, und ohne sie zuerst auswählen zu müssen!

Registrierung eines BSV mit einem Plugin

Wenn Sie einem Block, für den Sie keinen Quellcodezugriff haben, Stilvariationen hinzufügen möchten, können Sie registerBlockStyle() verwenden. Mit dieser Funktion können Sie zusätzliche Stilvarianten für Kernblöcke und Blöcke von Drittanbietern außerhalb von registerBlockType() definieren.

Lassen Sie uns dies testen, indem wir dem Kernknopfblock einige unserer eigenen Stilvarianten hinzufügen. Dieser Block enthält drei bereits definierte Stilvarianten: Abgerundet, Kontur und Quadrat.

Default block style variations for the button blockDefault block style variations for the button blockDefault block style variations for the button block

Wir werden zwei weitere eigene Stilvarianten hinzufügen: Pill Shaped und Uppercase.

Bevor wir dies tun, benötigen wir jedoch ein Plugin, in dem wir unseren benutzerdefinierten Code speichern können. Ich werde dies nicht ausführlich behandeln, da der Schwerpunkt dieses Tutorials eher auf Variationen des Blockstils als auf der Entwicklung von Plugins liegt. Wenn Sie Probleme haben, können Sie das fertige Plugin einfach über den GitHub-Link rechts herunterladen.

Erstellen Sie einen neuen bsv-Ordner in Ihrem lokalen Ordner WordPress .\wp-content\plugins und fügen Sie drei Dateien hinzu:

  • bsv.php
  • bsv.js
  • bsv.css

Fügen Sie in bsv.php den folgenden Code hinzu:

Fügen Sie bsv.js in den Front-End-Code hinzu:

Und in bsv.css fügen Sie die Stile selbst hinzu:

Aktivieren Sie das Plugin und fügen Sie eine neue Instanz des Schaltflächenblocks in den Editor ein. Sie sollten jetzt die zwei neuen verfügbaren Blockstilvarianten sehen!

Two new block style variations addedTwo new block style variations addedTwo new block style variations added

Grundlegendes zum BSV-Plugin-Code

Lassen Sie uns überprüfen, was wir gerade getan haben. In bsv.php wurde die JavaScript-Datei über den Hook enqueue_block_editor_assets in die Warteschlange gestellt, sodass sie nur im Admin-Editor geladen wird. Wir möchten jedoch, dass das CSS in den Editor und das Front-End geladen wird, daher verwenden wir hierfür den Hook enqueue_block_assets.

Die Stile sind ziemlich selbsterklärend, aber beachten Sie, wie wir Blockinstanzen mit bestimmten Blockstilvariationsklassen gezielt eingesetzt haben. Dies gibt uns eine saubere Möglichkeit, unser CSS für verschiedene Blockstilvarianten zu trennen.

Wichtig hierbei sind die beiden Aufrufe von registerBlockStyle(). Diese Funktion befindet sich im globalen Objekt wp.blocks, daher müssen wir das Präfix explizit einfügen, wo immer diese Funktion verwendet wird.

registerBlockStyle() akzeptiert zwei Argumente. Der erste ist der Name des Blocks, dem Sie die Stilvariation hinzufügen möchten, und der zweite ist ein Konfigurationsobjekt. Dies ist genau das gleiche Objekt, auf das wir zuvor gestoßen sind, als wir einer Blockdefinition über die Eigenschaft styles direkt Blockstilvariationen hinzugefügt haben.

Beachten Sie hier jedoch, dass beim Hinzufügen von isDefault: true für eine Blockstilvariation über registerBlockStyle() diese ignoriert wird, wenn bereits eine Standardstilvariante festgelegt wurde. Nur etwas, auf das Sie achten sollten, wenn Sie (wie ich) erwartet haben, dass es die Standardstilvariante überschreibt.

Gemäß der Dokumentation können Sie die Registrierung einer Blockstilvariante auch mit unregisterBlockStyle() aufheben. Die Verwendung ist der von registerBlockStyle() sehr ähnlich, Sie müssen jedoch nur den Blocknamen und den Stilvariationsnamen angeben.

So können Sie beispielsweise die Registrierung des Gliederungsstils vom Schaltflächenblock aufheben:

Derzeit scheint es jedoch ein Problem damit zu geben. Es funktioniert, wenn Sie die obige Codezeile in das Konsolenfenster eingeben, aber es scheint nicht immer zu funktionieren, wenn es über ein Plugin verwendet wird. Hoffentlich werden diese Probleme bald behoben.

Registrierung eines BSV mit einem Thema

In unserem letzten Beispiel fügen wir dem Kernschaltflächenblock eine weitere Stilvariante hinzu, um eine Option zum Rendern von Schaltflächen mit einer Hintergrundfarbe mit Farbverlauf anstelle einer flachen Farbe hinzuzufügen.

Wir werden diese neue Stilvariante dieses Mal über ein untergeordnetes Thema implementieren, da es meiner Meinung nach ein häufiger Anwendungsfall sein wird, alternative Stile für Blöcke bereitzustellen, die mit Ihrem eigenen Thema übereinstimmen. (Das Thema ist auch in der herunterladbaren Datei für dieses Lernprogramm enthalten, wenn Sie es nicht manuell erstellen möchten.)

Ich verwende Twenty Nineteen als übergeordnetes Thema, da es in WordPress 5.0 enthalten ist, aber Sie können es auf jedem gewünschten übergeordneten Thema basieren.

Erstellen Sie einen neuen Ordner mit twentynineteen-child in Ihrem lokalen Ordner WordPress .\wp-content\themes und fügen Sie vier Dateien hinzu:

  • style.css
  • functions.php
  • tnc_bsv.js
  • tnc_bsv.css

Wir werden style.css keine bestimmten untergeordneten Themenstile hinzufügen, aber wir müssen sie einschließen, damit das Thema von WordPress erkannt wird.

In style.css hinzufügen:

Die JavaScript- und CSS-Dateien werden über functions.php in die Warteschlange gestellt. Fügen Sie dieser Datei den folgenden Code hinzu:

Fügen Sie in tnc_bsv.js den Code hinzu, um unsere Blockstilvariante zu registrieren:

Schließlich wird das CSS für unsere Blockstilvariante zu tnc_bsv.css hinzugefügt:

Der Code entspricht weitgehend dem Plugin, das wir im letzten Beispiel erstellt haben, um zwei neue Blockstilvarianten hinzuzufügen. Alles, was wir hier tun, ist ein weiteres hinzuzufügen, diesmal jedoch über ein untergeordnetes Thema.

Aktivieren Sie das Thema und fügen Sie dem Editor einen Schaltflächenblock hinzu, um unsere neue Kreation anzuzeigen.

New block style variation added via a child themeNew block style variation added via a child themeNew block style variation added via a child theme

Möglicherweise haben Sie bemerkt, dass ich den JavaScript-Code in eine jQuery-Anweisung eingeschlossen habe:

Dies ist eigentlich nicht unbedingt erforderlich. Während des Testens schien der Code ohne den jQuery-Wrapper einwandfrei zu funktionieren. Es gibt jedoch noch keine offiziellen Richtlinien zum Hinzufügen von JavaScript-Code, der mit der neuen Editor-API interagiert. In der Zwischenzeit kann es ratsam sein, die oben beschriebene jQuery-Wrapper-Methode weiterhin zu verwenden, aber die Wahl liegt bei Ihnen.

Laden Sie den Code herunter

Wie bereits erwähnt, kann der Code über den GitHub-Link rechts auf der Seite heruntergeladen werden.

Dieses Repo enthält das Thema und zwei Plugins, die wir in diesem Tutorial entwickelt haben. Wenn Sie den Inhalt heruntergeladen haben, werden drei Ordner angezeigt. Fügen Sie den Ordner mit den zwanzig twentynineteen-child Elementen zu Ihrem Themenordner .\wp-content\themes und die beiden anderen Plugin-Ordner zu Ihrem Plugin-Ordner .\wp-content\plugins hinzu.

Aktivieren Sie beide Plugins und das Thema, um die Blockstilvarianten im neuen WordPress-Editor verfügbar zu machen.

Abschluss

Vielen Dank, dass Sie sich mir in diesem Tutorial angeschlossen haben! Ich hoffe, Sie haben jetzt eine bessere Vorstellung davon, worum es bei Blockstil-Variationen geht. Lassen Sie mich in den Kommentaren wissen, welche Ideen Sie haben könnten, um sie in Ihren eigenen Projekten zu verwenden.

Ich bin sicher, dass dies eine stark genutzte Funktion des neuen Editors sein wird, die sowohl von Plugin-Entwicklern als auch von Theme-Entwicklern verwendet wird. Insbesondere für Themenentwickler bietet es Ihnen viel Spielraum für die Anpassung von Blockstilen an Ihre Themenstile.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.