Blockerstellung ohne JavaScript: Testen von ACF, Block Lab und Lazy Blocks

Veröffentlicht: 2019-05-17

Noch ist nicht jeder in der Lage oder bereit, Blöcke in JavaScript zu erstellen, und manchmal müssen Sie drei oder vier Blocksammlungen installieren, bis Sie die gewünschten Blöcke gefunden haben.

Es gibt noch einen dritten Weg: Plugins, die die Blöcke für Sie aus einer Reihe spezifischer benutzerdefinierter Felder erstellen, mit einer Vorlage, um die Frontend-Anzeige der Blöcke zu steuern. Die drei beliebtesten Optionen dafür sind: Block Lab, ACF (Advanced Custom Fields) und Lazy Blocks.

Mein Anwendungsfall für diesen Test ist eine kleine Aufgabe, die ich mit jedem der Plugins erfüllen wollte – um einen Block für Teammitglieder eines Unternehmens zu erstellen, der die folgenden Felder enthält: Vorname, Nachname, Porträt, Bio, Telefonnummer, und E-Mail-Adresse und verwenden Sie den Block auf einer Seite in einer zweispaltigen Anzeige mit zwei Teammitgliedern.

Für jedes Plugin werde ich demonstrieren

wie man die Feldgruppe erstellt,
wie man das Template für das Frontend erstellt und
wie man die Blöcke verwendet, um eine Teamseite zu erstellen.

Ich habe Local by Flywheel als lokales Entwicklungstool verwendet. Die Testseite lief auf WordPress 5.1.1, Gutenberg 5.4 und dem Business Theme von WordPress.com

Nachdem Sie diesen Beitrag gelesen haben, können Sie das Plugin auswählen, das Ihren Anforderungen entspricht.

Erstellen eines Team-Blocks mit Block Lab

Mitglieder des XWP-Teams haben Block Lab entwickelt und es ist als kostenloses Plugin mit einer kommerziellen Version erhältlich. Ich habe zuerst Block Lab verwendet, das Plugin installiert und dann einen neuen Block gestartet.

Hier ist das Video zum Einrichten der Felder.

Der nächste Schritt ist das Einrichten der Blockvorlage

Als ich mir den erwarteten Speicherort ansah, wurde die Vorlage zu einem Teil des Themenverzeichnisses in einem Unterordner namens /blocks/ gemacht. Daran muss sich ein Entwickler erinnern, da beim Wechseln der Themen eine gewisse Inhaltssperre besteht.

Um die Vorlage zu erstellen, öffnete ich meinen Code-Editor, erstellte die Datei block-team-member.php und fügte HTML + und minimales PHP hinzu, um auf die Felder zu verweisen.

 <h2>
<?php block_field( 'Vorname' );?> 
<?php block_field( 'Nachname' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'picture' ); ?>"
 alt="<?php block_field( 'Vorname' );?> 
<?php block_field( 'Nachname' );?> " width="150"/>
<?php block_field( 'Kurzbiografie' ); ?></p>

<p><em>Sie erreichen <?php block_field( 'first-name' );?></em> 
<br/>per E-Mail <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( 'E-Mail-Adresse' ); ?></a></span>
 oder <br/>
per Telefon: <span><?php block_field( 'extension' ); ?></span></p>

Im letzten Schritt habe ich die Konfiguration dieses Blocks mit den Blockeigenschaften abgeschlossen

Ich setze das Symbol auf eine Person,
als Kategorie „Layout-Elemente“ ausgewählt und
„Teammitglied, Team“ als Schlüsselwörter hinzugefügt

All dies ist für den Block-Inserter im Editor erforderlich.

Mal sehen, wie es funktioniert.

Ich habe eine neue Seite namens Meet our Block Lab Team hinzugefügt und die Teammitglieder hinzugefügt, indem ich den Block „Teammitglied“ verwendet habe.

Fürs Erste habe ich mich entschieden, alle Informationen innerhalb der Grenzen des Blockeditors auszufüllen. Während der Einrichtung der Feldgruppe hatte ich auch die Wahl, Formularsteuerelemente auf der Registerkarte Blockoptionen in der Seitenleiste anzuzeigen. Für den Moment habe ich festgestellt, dass es nur eine persönliche Präferenz ist. Sobald Sie außerhalb des Blocks klicken, verschwindet das Formular und der Block wird ähnlich wie seine Frontend-Darstellung gerendert.

Nachdem ich den Block abgeschlossen habe, kann ich der Seite weitere Teammitglieder hinzufügen. Ich entschied, ich hätte sie gerne in einem Säulenblock mit zwei Säulen.

So weit, ist es gut. Ich war nicht begeistert, dass der Speicherort der Vorlage auf den Themenordner verweist.

Wenn ich das Design wechseln möchte, möchte ich den Block und das Layout für den Block trotzdem auf meiner Website behalten, also müsste ich sicherstellen, dass der Blockordner in das Verzeichnis des neuen Designs kopiert wird. Ein anderer Weg ist in der Dokumentation für Blocklab auf Github beschrieben. Es bietet zwei Filter, um den Standardspeicherort der Vorlage zu ändern:

„Um eine andere Vorlage in Ihrem Design zu verwenden, verwenden Sie den Filter block_lab_override_theme_template( $theme_template ). Um eine andere Vorlage außerhalb Ihres Designs zu verwenden (z. B. in einem Plugin), verwenden Sie den Filter block_lab_template_path( $template_path ).

Dies war ziemlich einfach einzurichten, auch wenn Sie kein PHP-Entwickler sind, können Sie wahrscheinlich die eine PHP-Funktion block-field() verwenden und sicherstellen, dass Sie auf die richtigen Feldnamen verweisen.

Block Lab bietet Ihnen im Wesentlichen eine Methode, um die Felder zu erstellen und die Blockeigenschaften in einem Bildschirm zu konfigurieren, und dann müssen Sie die entsprechende Blockvorlage zu einem Ordner /blocks/ im Verzeichnis Ihres Designs hinzufügen. Es ist ziemlich geradlinig.

Erstellen eines Team-Blocks mit ACF 5.8

ACF (Advanced Custom Fields) Version 5.8 kam mit einem Block Builder heraus (nur in der Pro-Version verfügbar). Für meinen Test habe ich ACF 5.8 RC 1 verwendet. Die endgültige Version ist jetzt verfügbar. Elliot Condon ist der Autor des Plugins und die erste Version wurde 2011 veröffentlicht. Das Plugin hat sich zu einem äußerst beliebten Entwicklertool für Freiberufler und Agenturen entwickelt und hat über 1 Million Installationen.

Sein Erfolg und seine Vielseitigkeit machen die Erstellung der Feldgruppe im Vergleich zu den anderen beiden Plugins zu einem aufwändigeren Prozess. Die Pro-Version 5.8 enthält die erste Version seines Blockbuilding-Tools.

Dies ist die Admin-Ansicht der Feldgruppe „Teammitglied“.

Wie mache ich das jetzt zu einem Block? Die Dokumentation ist umfangreich genug. Hinweis: In diesem Test bin ich in einer etwas anderen Reihenfolge vorgegangen…

Ich habe mit der Feldgruppe begonnen und musste zu diesem Verwaltungsbildschirm zurückkehren, nachdem ich den Block registriert hatte (siehe unten).

Ich habe zwei Dateien verwendet. Zuerst musste ich den Block in der functions.php meines Themes registrieren. Für den Vorlagen-/Block-Rendering-Code habe ich content-block-team-member.php verwendet, der ebenfalls im Ordner des aktiven Designs gespeichert werden soll.

Sie werden sehen, wie diese beiden in einer Sekunde zusammenpassen. Den Rest erledigt das Plugin im Backend.

Schreiben wir also den Blockcode in PHP

Das erste Snippet ist die Blockregistrierung. Ich habe ihm einen Namen, einen Titel, eine Beschreibung gegeben, auf das Render-Template verweisen, ihm eine Kategorie, ein Icon und einige Schlüsselwörter gegeben, unter denen der Content-Produzent den Block im Block-Inserter finden kann. Ich habe bis zum Ende der functions.php meines Themes gescrollt und dieses Snippet hinzugefügt:

 Funktion register_acf_blocks() {
   // registriere einen Teammitgliedsblock.
   acf_register_block(array(
       'name' => 'acf-team-mitglied',
       'title' => __('ACF-Teammitglied'),
       'description' => __('Ein benutzerdefinierter Teammitgliederblock, der über ACF 5.8 erstellt wurde'),
       'render_template' => 'content-block-team-member.php',
       'Kategorie' => 'Formatierung',
       'icon' => 'admin-kommentare',
       'Schlüsselwörter' => Array( 'Teammitglied', 'Team' ),
   ));
}
// Überprüfen Sie, ob die Funktion existiert, und hängen Sie sich in das Setup ein.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Dieser Code stammt direkt aus der Dokumentation und ich habe nur ein paar Werte geändert.

Im nächsten Abschnitt habe ich die Block-Rendering-Vorlage erstellt. Der Dateiname muss mit dem Attribut „render_template“ im obigen Text übereinstimmen, das „ content-block-team-member.php “ lautet.

Ich habe auch nur die ACF-Dokumentation befolgt und nur ein paar Werte geändert und den Anzeigecode aktualisiert.

 <?php
// ID-Attribut für bestimmtes Styling erstellen
$id = 'Teammitglied' . $block['id'];

// Align-Klasse ("alignwide") aus Blockeinstellung ("wide") erstellen
$align_class = $block['align'] ? 'ausrichten' . $block['ausrichten'] : '';

// Werte laden und Standardwerte für die Blockfelder zuweisen.
$short_bio = get_field('short_bio') ?: 'Hier kommt die Kurzbiografie hin... ';
$vorname = get_field('vorname') ?: 'Vorname';
$nachname = get_field('nachname') ?: 'Nachname';
$bild = get_field('bild');
$email_address = get_field('email_address');
$extension = get_field('extension');
?>

" class="teammitglied ">
       
   
   " alt="" alt=" " width="150"/>

Als ich mit der Feldgruppe begann, musste ich zurückgehen und sicherstellen, dass die Gruppe mit dem Block verknüpft ist, den ich gerade registriert habe. Unterhalb des Feldgruppenbildschirms habe ich eine Regel für den Standort erstellt: Sie muss lauten: „Diese Feldgruppe anzeigen, wenn der Block gleich ACF-Teammitglied ist.

Sehen wir uns nun an, wie das im Blockeditor funktioniert, wenn ich zwei Mitglieder hinzufüge.

Es war eine interessante Erfahrung. Zur Eingabe der Daten können Sie das Formular im Editorbereich verwenden. Eine andere Möglichkeit besteht darin, die Daten in die in der Seitenleiste verfügbaren Formularfelder einzugeben, und Sie sehen die Blockaktualisierung in Echtzeit. Sie können zwischen den beiden Methoden umschalten, indem Sie auf die Schaltfläche „Zur Bearbeitung wechseln“ oder „Zur Vorschau wechseln“ klicken, je nachdem, welche Methode Sie gerade verwenden.

Die Benutzeroberfläche des Blockeditors funktioniert gut. Es lohnt sich, die aufwändigere Einrichtung und den erforderlichen Code durchzugehen.

Erstellen eines Team-Blocks mit Lazy Blocks

Das dritte Plugin in diesem Test heißt „Lazy Blocks“ von Nikita von nkdev.info, demselben Team, das auch die GhostKit-Blocksammlung veröffentlicht hat.

Es erlaubt mir nicht nur, Informationen in post_content zu speichern, sondern ich habe auch die Möglichkeit, sie in der post_meta-Tabelle zu speichern.

Hier ist ein Video zur Verwendung der Benutzeroberfläche zum Erstellen der Felder.

Da sich dieser Admin-Bildschirm darauf konzentriert, alle Informationen zum Erstellen der Blöcke zu erhalten, habe ich links meine Felder und in der Seitenleiste erstellt. Ich habe die erforderlichen Informationen ausgefüllt, um einen Block beim Editor zu registrieren.

Darunter konnte ich das HTML für Frontend und Backend hinzufügen. Die Syntax ist noch einfacher als Block Lab und natürlich viel einfacher als die Vorlagen von ACF.

Ich musste weder der functions.php meines Themes Code hinzufügen, noch musste ich zusätzliche Dateien mit meinem Vorlagencode erstellen.

Sie können alles direkt hier hinzufügen, unterstützt durch Syntaxhervorhebung und Merge-Tags anstelle von Funktionsaufrufen. Die Dokumentation zeigt mehrere Möglichkeiten, Ihren Vorlagencode zu schreiben. Ich bin definitiv ein Fan von Handlebars (Semantic Templating), da es in diesem Zusammenhang den Merge-Tags anderer Systeme viel näher kommt.

Ich habe denselben Code in die Registerkarte „Editor HTML“ kopiert/eingefügt, damit ich die Frontend-Anzeige unter den Formularfeldern sehen konnte.

Lass es uns benutzen.

Das scheint zu funktionieren. Es war etwas umständlich, dass das Formular nicht verschwand, wenn ich den Block abwählte. Es nimmt viel Platz im Editor ein. Obwohl ich die Teammitglieder in einem zweispaltigen Block haben wollte, gelang es mir nicht, die beiden Blöcke per Drag & Drop in einen Spaltenblock zu ziehen. Ich erwähnte dies in meinem Support-Thema und nK antwortete: „… das Ausblenden von Steuerelementen, wenn der Block nicht ausgewählt ist, ist eine gute Funktion, die bereits in ACF-Blöcken hinzugefügt wurde und bald in Lazy Blocks hinzugefügt wird.“ Hier haben Sie es – alles zur rechten Zeit.

Fazit: Komplex, weiterentwickelt oder einfach.

ACF 5.8 verfügt über eine sehr robuste Funktion zum Erstellen von Blöcken, und jeder, der das Plugin zum Erstellen von Websites verwendet hat, wird sich sehr darüber freuen, dynamische Blöcke für seine Kunden erstellen zu können. Es ist gut durchdacht und Entwickler aller Fähigkeiten werden schnell loslegen können.

Jemand, der sich nicht gut mit PHP auskennt, wird seinen fairen Anteil an Trial-and-Error haben, um alles zum Laufen zu bringen. Noch komplizierter wird es, wenn die Anforderungen an die Blöcke umfangreicher werden und über den Anwendungsfall dieses Tests hinausgehen. Dies ist kein Tool für WordPress-Anfänger oder DIY-Site-Implementierer, die selbst nicht viel Code schreiben.

Derzeit verfügt nur die ACF 5.8 Pro-Version über die Block Builder-Funktion. Condon erwägt, es zu einem eigenständigen Plugin zu machen. (Sehen Sie, was die Twitteratti über die Idee denken … )

Block Lab befindet sich in einem frühen Entwicklungsstadium. Es gelingt, den größten Teil der Blockarchitektur zu abstrahieren und die Menge an Code zu reduzieren, die geschrieben werden muss. Die Dokumentation ist sehr hilfreich. Die Vorlage wird in einer separaten Datei gespeichert und muss zusammen mit den restlichen Designdateien verwaltet werden. Wenn wir in meinem Unternehmen es für eines unserer Projekte verwenden würden, würden wir die Vorlagendatei mit einem unserer Hilfs-Plugins speichern, damit unsere Kunden das Thema wechseln können, ohne den Inhalt und die Anzeige der mit Block Lab erstellten Blöcke zu verlieren.

Die Pro-Version bietet zusätzliche Funktionen wie Repeater-Felder, Import/Export von Blöcken, Benutzerobjektfelder, Kartenfeld und viele weitere Blockfunktionen.

XWP ist eine Agentur, die mit Unternehmenskunden im VIP-Hosting von WordPress.com und anderen Unternehmen zusammenarbeitet. Ihre Teammitglieder tragen zu anderen großen Ideen im WordPress-Bereich bei, darunter Customizer, AMP und Tide. Ich gehe davon aus, dass das Plugin bestehen bleibt und mit Gutenberg Phase 2 zu einem robusten System für Site-Implementierer, Agenturen und Theme-Entwickler heranwächst.

Lazy Blocks lässt sich wunderbar einrichten, und wie bereits erwähnt, bin ich ein Fan der Templating-Syntax von Handelbars. Es ist selbst für Anfänger leicht zu erlernen, und mit ein wenig Übung könnte ein Websitebesitzer spezifische Gutenberg-Blöcke für seine Website erstellen. Das Blockhandling im Editor funktioniert zwar, ist aber etwas klobig, da die Anzeige momentan nicht zwischen Block-Select-State und Unselect-State umschaltet.

Wenn zusätzliche Felder für eine Seite oder einen Abschnitt eines Beitrags erforderlich sind, ist Lazy Blocks ein großartiges Tool, um Prototypen zu erstellen und schnell von der Idee zum Proof of Concept zu gelangen.

Einziger Vorbehalt: Ich konnte nicht herausfinden, wer hinter nkdev.info und dem Namen Nikita steckt. Die Website verrät nur, dass es sich um ein junges Unternehmen handelt, aber nicht mehr. Wenn Sie das Plugin verwenden, stellen Sie sicher, dass Sie Plan B haben, falls die Entwickler das Plugin aufgeben, bevor es startet.

ACF 5.8 ist ziemlich komplex; Block Lab ist sehr flexibel und nur halbkomplex; und Lazy Blocks ist angemessen benannt und am einfachsten zu verwenden. Keiner von ihnen lässt Sie davonkommen, ohne Code zu schreiben, da jeder Block eine Anzeigeausgabe in HTML benötigt.

Lassen Sie mich wissen, was Sie über diese drei Plugins zur Blockgenerierung denken. Wenn Sie ein anderes Plugin gefunden haben, mit dem Sie Blöcke erstellen können, ohne in Javascript einzusteigen, möchte ich davon erfahren! Bitte teilen Sie Ihre Gedanken und Entdeckungen in den Kommentaren!