So erstellen Sie benutzerdefinierte Gutenberg-Blöcke mit Advanced Custom Fields Pro

Seit Version 5.8 von Advanced Custom Fields (ACF) Pro können Sie ACF verwenden, um benutzerdefinierte Gutenberg-Blöcke zu erstellen. Alles, was Sie handhaben müssen, sind die PHP-Vorlagen. Dies macht es Entwicklern, die noch keine Erfahrung mit dem modernen Javascript haben, sehr einfach, benutzerdefinierte Blöcke für Gutenberg mit einem der Feldtypen zu erstellen, die ACF zu bieten hat. Beachten Sie, dass diese Funktion nur in der kostenpflichtigen Version (Pro) von Advanced Custom Fields verfügbar ist. Es ist in der kostenlosen Version nicht verfügbar, daher müssen Sie eine Lizenz erwerben.

Wenn Sie ein WordPress-Editor oder ein Webmaster sind, der nicht tief in die Programmierung eintauchen möchte, ist dieser Beitrag definitiv für Sie. Wenn Sie jedoch ein WordPress-Design- oder Plugin-Entwickler werden möchten, empfehle ich Ihnen, den Schritt zu unternehmen, um zu lernen, wie Sie Ihre eigenen benutzerdefinierten Blöcke erstellen. Die Verwendung von erweiterten benutzerdefinierten Feldern zum Erstellen von Blöcken kann jedoch eine gute Einführung in den Umgang mit benutzerdefinierten Blöcken in Gutenberg bieten.

Erstellen Sie einen Gutenberg-Block mit ACF

Es gibt im Grunde drei einfache Schritte zum Erstellen eines benutzerdefinierten Gutenberg-Blocks mit erweiterten benutzerdefinierten Feldern. Die erste ist einfach und wahrscheinlich vertraut; Einrichten der Felder (Einstellungen), die Sie in Ihrem Block haben möchten. Der zweite Schritt besteht darin, die Funktion von ACF zu verwenden, um einen Gutenberg-Block zu registrieren. Und der dritte Schritt ist das Schreiben der PHP-Vorlage für den Block. Sie schreiben einfach den HTML-Code und handhaben die Einstellungen so, wie Sie es sonst mit ACF-Feldern tun würden. Und das ist es! (Okay, vielleicht gibt es noch einen vierten Schritt: das Stylen deines Blocks. Aber darauf gehe ich in diesem Beitrag nicht ein).

Erstellen Sie Ihre Einstellungen / Felder

Wenn Sie bereits erweiterte benutzerdefinierte Felder verwendet haben, wissen Sie wahrscheinlich, wie Sie Felder einrichten. Dazu können Sie die Admin-Benutzeroberfläche von Advanced Custom Field verwenden. Oder wenn Sie möchten, dass die Blockeinstellungen in Ihr Plugin oder Design eingebettet werden, schreiben Sie die Einstellungen mit PHP aus. Ich habe einen vollständigen Referenzbeitrag zum Hinzufügen von ACF-Einstellungen mit PHP.

Das Wichtigste, was Sie mit Ihrer Gruppe tun müssen, ist, den Standort auf „Blockieren” zu setzen. Da wir unseren Block jedoch noch nicht registriert haben, wird er standardmäßig auf „Alle” gesetzt. Belassen Sie es dabei, speichern Sie Ihre Felder und fahren Sie fort Registrierung unseres Blocks.

Registrieren Sie einen Gutenberg-Block

Im Code Ihres Designs functions.phpoder Plugins müssen Sie eine Funktion schreiben, die mit verknüpft ist acf/init, und aufrufen [acf_register_block](https://www.advancedcustomfields.com/resources/acf_register_block_type/)(), um einen Block zu registrieren. Da diese Funktion in ACF ziemlich neu ist und von einem zu aktivierenden Plugin abhängt, empfehle ich, dass Sie Ihren Code in eine if-Prüfung einschließen, um sicherzustellen, dass Ihr Design oder Plugin Ihr WordPress nicht zum Absturz bringt.

Die Registrierung eines Blocks bei ACF ähnelt eigentlich der manuellen Registrierung eines benutzerdefinierten Gutenberg-Blocks. Mit ACF müssen Sie einen eindeutigen Slugified-Namen für Ihren Block in angeben name. Ich empfehle, einen selbsterklärenden Namen zu verwenden, zB ctafür einen Call-to-Action-Block, oder author-cardfür einen Block, der Autoren oder ähnliches anzeigt. Wenn Sie mit Gutenberg etwas vertraut sind, wissen Sie vielleicht, dass alle Blöcke mit einem Namensraum, einem /, und dann ihrem Slug-Namen registriert werden müssen. Zum Beispiel ist der Namensraum von WordPress core, also heißt zum Beispiel der Absatzblock in WordPress core/paragraph. Bei ACF ist der Namensraum acf, sodass beispielsweise der obige Block in Gutenberg als registriert wird acf/yourblock. Wenn Sie Ihre Felder mit PHP registrieren, wie Sie später sehen werden, müssen wir uns daran erinnern.

In categorydefinieren Sie, in welcher Gutenberg-Kategorie Ihr Block erscheinen soll. Momentan sind mögliche Werte common, formatting, layout, widgets, oder embed. Wenn Sie benutzerdefinierte Gutenberg-Kategorien erstellen, können Sie diese bei Bedarf hinzufügen. Geben Sie iconeinen beliebigen Symbolnamen aus WordPress Dashicons an (abzüglich der „Dashicons-“).

Um ACF mitzuteilen, wie dieser Block gerendert werden soll, haben Sie zwei Möglichkeiten: Geben Sie der Taste entweder einen Funktionsnamen render_callback(wie oben) oder geben Sie der Taste einen Vorlagennamen in Ihrem Design render_template. Wenn Sie also lieber direkt auf eine Vorlage verweisen möchten, z. B. template-parts/block-yourblock.phpin Ihrem Design, tun Sie dies einfach so und entfernen Sie das render_callback:

Verbinden Sie Ihre Feldgruppe mit Ihrem registrierten Block

Wenn Sie mit Ihrem Blockregistrierungscode zufrieden sind, ist es an der Zeit, Ihren Block mit den zuvor vorgenommenen Einstellungen zu verbinden. Wenn Sie die Felder in Admin erstellt haben, gehen Sie einfach zurück und wählen Sie Ihren Block in Location aus. Und wenn Sie die Feldgruppe mit PHP hinzugefügt haben, geben Sie in location den Wert „ acf/yourblock” ein, wobei das yourblockist, was Sie wie nameoben angegeben haben.

Schreiben Sie die Vorlage

Der letzte Schritt, der am meisten Spaß macht, ist das Schreiben der Vorlage für die Blockausgabe!

Der Speicherort Ihrer Blockrenderausgabe hängt davon ab, was Sie in Ihrer Blockregistrierung render_callbackoder render_template.

Wenn Sie einen Funktionsnamen angegeben render_callbackhaben, müssen Sie diese Funktion im Code Ihres Designs functions.phpoder Plugins definieren. Sie erhalten vier Parameter für Ihre Funktion, wie Sie unten sehen werden:

Der erste Parameter, $block, enthält bestimmte Informationen von Gutenberg. Zum Beispiel hat jeder Gutenberg-Block fast immer className, was Sie als Klasse auf Ihrem äußersten Wrapper festlegen sollten. $block['align']für die Ausrichtung könnte auch eingestellt werden und etwas, das Sie auch hinzufügen möchten. Der zweite Parameter, $content, ist bei ACF immer leer (dieser würde gefüllt, wenn Sie verschachtelte Blöcke hinzufügen, aber das ist mit ACF nicht möglich). Der boolesche $is_previewWert ist wahr, wenn wir uns gerade das Block-Rendering im Vorschaumodus im Gutenberg-Editor ansehen. Und schließlich $post_idist der Beitrag, in dem dieser Block hinzugefügt wird.

Was die Felder betrifft, so rufen Sie Felder wie gewohnt ab, mit get_field(). Die HTML-Ausgabe liegt ganz bei Ihnen und wie Sie Ihre Felder ausgeben möchten.

Wenn Sie render_templatestattdessen eine Vorlagendatei bereitgestellt haben, erstellen Sie die Datei einfach an der angegebenen Stelle in Ihrem Design. Darin haben Sie Zugriff auf genau die gleichen globalen Variablen wie bei der obigen Funktion (z. B. $block). Zum Beispiel:

Und das ist alles, was dazu gehört. So einfach ist es, Ihre benutzerdefinierten Gutenberg-Blöcke mit ACF zu erstellen.

Fazit

So einfach dies war, sich auf ein Plugin zu verlassen – insbesondere auf ein kostenpflichtiges – ist keine gute Endlösung, wenn Sie Themen oder Plugins entwickeln möchten. Denken Sie daran, dass Ihre Blöcke nicht mehr funktionieren, wenn Sie Ihren Themencode ohne ACF Pro in ein anderes WordPress verschieben. Oder wo Ihre Feldeinstellungen nicht eingerichtet wurden (es sei denn, Sie haben sie mit PHP in Ihren Code eingebettet oder sie exportiert und importiert). Als Theme- (oder Plugin-)Entwickler, der Code verteilt, können Sie nicht erwarten, dass jeder Benutzer eine eigene Lizenz von ACF Pro kauft, damit Ihr Theme funktioniert! Aber dies ist eine gute vorübergehende Lösung für diejenigen, die nicht programmieren können oder wollen.

Wenn Sie überzeugt sind, dass Sie den Schritt wagen und Javascript und Gutenberg lernen müssen, sehen Sie sich meine Einführung in den Gutenberg-Post oder die Gutenberg-Kategorie auf dieser Website an, um mehr zu erfahren.