Einfache benutzerdefinierte Gutenberg-Blöcke mit Blockstudio und ACF

In diesem kurzen Artikel möchte ich erläutern, wie Sie mit Blockstudio einen benutzerdefinierten Gutenberg-Block erstellen. Blockstudio ist ein modernes und flexibles Block-Framework für WordPress. Mit der Einführung von Gutenberg wird die Möglichkeit, benutzerdefinierte Blöcke schnell zu erstellen, immer wichtiger. Dies ist eine unglaublich einfache Methode, sie zu erstellen - und obwohl Sie dafür Code schreiben müssen, ist es mit BS viel einfacher und effizienter (im Vergleich zu anderen Methoden).

Dieses Tool macht es einfach, nicht nur den Block hinzuzufügen, sondern auch benutzerdefinierte Felder zu generieren (Sie haben die Wahl zwischen ACF Pro- oder Metabox-Blöcken), Informationen in der Datenbank zu speichern und Inline-Stile und Skripte ganz einfach anzuwenden.

Werfen wir einen kurzen Blick darauf, wie wir mit diesem Framework in weniger als 5 Minuten einen benutzerdefinierten Gutenberg-Block erstellen können (PS – ich habe noch nie einen benutzerdefinierten Block erstellt).

Der Prozess der Erstellung eines Blocks

Für diese Website brauche ich eine einfache Möglichkeit, benutzerdefinierten Code hinzuzufügen, der auf dem Frontend in einer leicht verständlichen Oberfläche angezeigt wird.

Seit einigen Monaten verwende ich das SPX-Codeblock-HTML-Element (dies wird oben verwendet). Es ist eine wirklich einfache Implementierung und etwas, das bereits auf dieser Website installiert ist, da ich SPX für einige Effekte mit Oxygen verwende. SPX enthält jedoch keine Gutenberg-Elemente. Da es sich um ein HTML-Element handelt, würde ich eine HTML-Box in Gutenberg einfügen und dann die Codeanzeige wie folgt implementieren:

Es hat funktioniert, aber ich wollte einen dedizierten Codeblock für Gutenberg. Also habe ich Blockstudio + ACF verwendet, um Folgendes zu erstellen:

(Dies ist der Block, den ich in Gutenberg verwende, um die Codeblöcke in diesen Beitrag einzufügen.)

Mein neuer Block bietet im Wesentlichen eine visuelle GUI zum Einfügen des Codes, wie ich es mit HTML getan habe. Aber dieser Block erleichtert die Verwaltung und bietet auch ein cooles Code-Editor-Feld direkt in Gutenberg.

So wurde es gemacht:

Zuerst habe ich Blockstudio (Plugin) auf dem Isotrop installiert. Normalerweise sucht es nach einem Ordner in Ihrem Design, um Ihre benutzerdefinierten Blockdateien zu laden. Oxygen Builder, auf dem diese Website aufbaut, deaktiviert das Thema jedoch vollständig, sodass ich ein benutzerdefiniertes Plugin aus dieser offiziellen Boilerplate erstellen musste, damit es auf dieser Website funktioniert.

Wenn Sie es von dieser Quelle installieren, müssen Sie lediglich damit beginnen, Blöcke zum Ordner "Blocks" hinzuzufügen - und dort befindet sich bereits ein Demo-Block, den Sie ausprobieren können.

Der Prozess zum Erstellen eines Blocks mit diesem Framework besteht aus 3 Schritten: Richten Sie ihn ein, fügen Sie die Felder hinzu und fügen Sie dann das Markup hinzu.

Für mich habe ich eine Datei namens iso-custom-code.php im Blocks-Ordner erstellt und den folgenden Code eingefügt (ziemlich einfach!):

Der anfängliche Codeabschnitt gibt Gutenberg alle Informationen, die es für die Registrierung des Blocks im Editor benötigt. Sie können ihm beispielsweise einen Titel und ein Symbol geben. Von dort aus habe ich zwei benutzerdefinierte Felder hinzugefügt. Das erste ist ein Radiofeld, mit dem Sie die Art des Codes auswählen können. Das zweite Feld ist ein Code-Editor-Feld.

Dies ist kein Standard-ACF-Feld, sondern ein Drittanbieter-Addon, das die allgemeine ACF-Methode verwendet, um einen benutzerdefinierten Feldtyp hinzuzufügen. Das wirklich Coole an Blockstudio ist, dass dieses benutzerdefinierte Feld sofort einsatzbereit ist und direkt im Gutenberg-Editor angezeigt wird.

Es ist erwähnenswert, dass Sie die benutzerdefinierten Felder tatsächlich direkt in diesem Block registrieren. Sie können eine Feldgruppe auf einen Beitragstyp anwenden, aber Sie müssen nicht in die ACF-Benutzeroberfläche gehen und dort Felder erstellen, wie dies im zweiten Teil dieses Codes erfolgt.

Felder werden genauso hinzugefügt, wie Sie es mit normalem PHP tun würden, und die Dokumentation ist relativ einfach zu verstehen. Sie müssen diese Programmiersprache wahrscheinlich nicht einmal kennen, um es herauszufinden - https://www.advancedcustomfields.com/resources/register-fields-via-php/

Das eigentliche Markup ist nur eine standardmäßige HTML- und PHP-Einfügung eines benutzerdefinierten ACF-Felds. Und sobald er gespeichert ist, wird der benutzerdefinierte Gutenberg-Block im Editor angezeigt und auf dem Frontend gerendert. Hier gibt es absolut keine Aufblähung, und das Markup, das in der benutzerdefinierten Blockdatei definiert ist, ist das Markup, das am Frontend der Website angezeigt wird.

Der letzte Vorteil besteht darin, dass Sie die nativen Gutenberg-Funktionen verwenden können, da die von Ihnen erstellten Blöcke echte Gutenberg-Blöcke sind. Sie können kopieren und einfügen, wiederverwendbar machen und vieles mehr. Vernünftigerweise könnten Sie mit diesem Tool allein in Gutenberg eine ganze Website erstellen. Es gibt auch keinen Vendor Lock.

Gedanken zu BlockStudio

Ich persönlich verwende Gutenberg, um alle Blogbeiträge auf dieser Website zu verwalten, zu strukturieren und zu erstellen. Für das übergreifende Website-Design und Templating wird jedoch Oxygen Builder verwendet.

Blockstudio enthält eine Bibliothek mit einigen gut gebauten Blöcken, die Sie als Ausgangspunkt für Ihre eigenen Kreationen verwenden können. Das ist wirklich cool, weil es Ihnen eine Menge Codebeispiele gibt, die Sie dann verwenden können, um das zu ändern, was Sie erstellen möchten. Natürlich ist es ein Framework, und das Verständnis des zugrunde liegenden PHP und seiner Funktionsweise wird Ihnen das Leben erheblich erleichtern, aber meiner Meinung nach müssen Sie es nicht kennen, um mit diesem Tool Blöcke erstellen zu können. Alles, was Sie wissen müssen, ist das Kopieren und Einfügen aus verschiedenen Dokumentationen, Beispielen und Quellen.

Sowohl die ACF- als auch die Blockstudio-Dokumentation sind unglaublich gut geschrieben und leicht verständlich. Und wenn Sie mit dem benutzerdefinierten Feld-Plugin von MetaBox besser vertraut sind, wird dieses genauso gut funktionieren.

Ich denke, dass der Preis für die Flexibilität und Leistungsfähigkeit dieses Tools gerechtfertigt ist. Ich habe erst vor kurzem angefangen, es zu benutzen, und ich freue mich darauf, die erweiterten Funktionen wie Twand und Alpine auszuprobieren.