So erstellen Sie ein einfaches Gutenberg-Block-Plugin

Lieben wir nicht alle WordPress? Die Plattform hat seit ihrer Gründung großen Erfolg gehabt, und Entwickler fügen ständig neue Funktionen hinzu. Eine der bemerkenswertesten Funktionen der letzten Zeit ist der WordPress-Blockeditor mit dem Codenamen Gutenberg .

Gutenberg bietet WordPress-Benutzern eine aufregende neue Möglichkeit, Inhalte zu veröffentlichen und Ihre Website anzupassen. Es ist unglaublich einfach zu bedienen, was sowohl für Anfänger als auch für Entwickler eine großartige Nachricht ist. Wenn Sie die neueste Version von WordPress verwenden, sind Sie mit dem Blockeditor und dem Konzept der Blöcke bereits vertraut.

Standardmäßig enthält der WordPress-Blockeditor einige Blöcke, mit denen Sie Text, Bilder, Zitate, Audio, Videos, Einbettungen usw. einfügen können. Darüber hinaus gibt es eine Menge Gutenberg-Add-Ons, mit denen Sie den Editor erweitern können, ohne ins Schwitzen zu geraten.

Möglicherweise haben Sie jedoch einen bestimmten Bedarf, der Sie dazu auffordert, Ihre eigenen benutzerdefinierten Blöcke zu erstellen. Hier kommt der heutige Beitrag ins Spiel. In ein paar Absätzen erfahren Sie genau, wie Sie benutzerdefinierte Gutenberg-Blöcke erstellen, die Ihren spezifischen Anforderungen entsprechen.

Lassen Sie uns ohne weiteres anfangen, denn es gibt viel zu lernen.

Was sind überhaupt Blöcke?

Wenn Sie der perfekte Anfänger sind, fragen Sie sich wahrscheinlich, was es mit diesem Gutenberg-Geschäft auf sich hat. Ich weiß, ich war ziemlich verwirrt, als Gutenberg vorgestellt wurde. Aber niemand ist schuld, wir waren alle an den Classic Editor gewöhnt, dass die Umstellung anfangs unangenehm war.

Trotzdem bleibt der WordPress-Blockeditor hier, ob es uns gefällt oder nicht. Genau aus diesem Grund sollten Sie so viel wie möglich über Gutenberg (und alles, was dazugehört) lernen, um das Beste daraus zu machen.

Blöcke behandeln Absätze, Überschriften, Medien und Einbettungen alle als Komponenten, die, wenn sie aneinandergereiht sind, den in der WordPress-Datenbank gespeicherten Inhalt bilden und das traditionelle Konzept von Freiformtext durch eingebettete Medien und Shortcodes ersetzen. – Blockeditor-Handbuch

In der Vergangenheit verließen sich WordPress-Benutzer auf Freiformtext und Shortcodes, um Inhalte hinzuzufügen. Gutenberg verwendet Blöcke . Mit dem neuen Editor können Sie Blockeinheiten verwenden, um reichhaltige und flexible Layouts zu erstellen, die einfach zu verwalten sind. Derzeit können Sie den Blockeditor für Beiträge und Seiten verwenden, aber es gibt aktive Pläne, um die vollständige Website-Bearbeitung in Zukunft zu unterstützen.

Gutenberg-Editor mit einigen Blöcken

Das Arbeiten mit Blöcken macht das Erstellen von Inhalten in WordPress ziemlich erfrischend. Außerdem unterstützen viele vorhandene Plugins den neuen Editor und werden mit gebrauchsfertigen Blöcken geliefert, die das Hinzufügen von Inhalten aus diesen Plugins zum Kinderspiel machen. Mit dem Editor können Sie Blöcke per Drag & Drop auf eine Seite ziehen, damit Sie schneller auf die Schaltfläche „Veröffentlichen“ klicken können.

Genau wie ein Seitenersteller, der direkt in WordPress integriert ist.

Wenn Sie mit visuellen Seitenerstellern wie Elementor vertraut sind, sind Sie wahrscheinlich mit dem Konzept der Drag-and-Drop-Seitenerstellung vertraut. Gutenberg ist ein Versuch, die Websiteerstellung per Drag-and-Drop vollständig in den WordPress-Kern zu integrieren. Sieh dir gerne unsere Schritt-für-Schritt-Anleitung zum Gutenberg Builder für WordPress an, um mehr zu erfahren.

Lassen Sie uns damit zum besten Teil des heutigen Beitrags kommen. Lassen Sie uns lernen, wie man einen einfachen Block erstellt. Sie können dies manuell tun oder Plugins wie Genesis Custom Blocks (ehemals BlockLab), Lazy Blocks oder ACF verwenden. Das Erstellen von benutzerdefinierten Blöcken ist ein bisschen technisch, daher werden wir für den heutigen Beitrag ein Plugin verwenden.

So erstellen Sie einen benutzerdefinierten Block (mit benutzerdefinierten Genesis-Blöcken)

Die Plugin-Route zu gehen ist einfacher, da das Erstellen benutzerdefinierter Gutenberg-Blöcke von Grund auf ein gutes Verständnis von HTML, CSS, PHP und, was noch wichtiger ist, JavaScript erfordert. Sie müssen auch React verstehen, das Anfängern einen Curveball zuwirft.

Für den nächsten Abschnitt verwenden wir die benutzerdefinierten Genesis-Blöcke, die Ihnen unter anderem von StudioPress und WPEngine zur Verfügung gestellt werden. Die kostenlose Version von Genesis Custom Blocks ist im offiziellen WordPress-Repository verfügbar, was bedeutet, dass wir sie im WordPress-Admin-Dashboard installieren können.

Installieren Sie benutzerdefinierte Genesis-Blöcke

Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie wie unten gezeigt zu Plugins > Add New .

Geben Sie als Nächstes „Genesis Custom Blocks“ in das Stichwortsuchfeld ein und klicken Sie auf die Schaltfläche Jetzt installieren :

Aktivieren Sie danach das Plugin, um die Party zu starten.

Du machst das gut

Lassen Sie uns als Nächstes einen neuen benutzerdefinierten Block erstellen. Lassen Sie uns zur Veranschaulichung einen benutzerdefinierten Call-to-Action (CTA) erstellen, den wir am Ende jedes von uns veröffentlichten Beitrags hinzufügen. Das Beste daran ist, dass Sie Blöcke wiederverwenden können, um sich die Mühe zu ersparen, dieselben Blöcke immer wieder zu erstellen.

Navigieren Sie in Ihrem WordPress-Admin-Menü zu Benutzerdefinierte Blöcke > Neu hinzufügen , wie wir unten hervorheben.

Dies führt Sie zur folgenden Seite, auf der Sie alle Optionen finden, um unseren benutzerdefinierten Block (in unserem Fall einen CTA) zu erstellen:

Hier sind ein paar Worte, um zu erklären, was Sie im obigen Screenshot sehen. Von oben beginnend, haben Sie.

Hauptbearbeitungsbereich:

• Builder – Sie werden hier wahrscheinlich viel Zeit damit verbringen, Ihren benutzerdefinierten Block zu entwerfen. Mit dem Builder können Sie einen Titel, Felder, Slug, Schlüsselwörter und eine Kategorie hinzufügen und eine Vorschau Ihres benutzerdefinierten Blocks anzeigen. Sie erfahren, wie Sie Felder hinzufügen.
• Vorlagen-Editor – Nachdem Sie Ihren benutzerdefinierten Block entworfen (dh verschiedene Felder hinzugefügt) haben, müssen Sie im Vorlagen-Editor eine Blockvorlage erstellen (lesen, ein wenig Code hinzufügen). Wir werden mehr erfahren, wenn wir den CTA entwerfen.
• Editor-Vorschau – Damit können Sie eine Vorschau des benutzerdefinierten Blocks im WordPress-Block-Editor anzeigen.
• Front-End-Vorschau – Hier können Sie eine Vorschau anzeigen, wie der benutzerdefinierte Block auf Ihrer Website aussieht.
• Editor-Felder – Zeigt die Felder im Hauptbearbeitungsbereich eines Beitrags oder einer Seite an (Sie wissen schon, wie Sie Ihre regulären Beiträge im WordPress-Editor sehen)
• Inspektorfelder – Zeigt das Feld in der rechten Seitenleiste unter dem Blockinspektor an.

Sidebar-Optionen

• Slug – Der Slug wird basierend auf dem Titel, den Sie Ihrem benutzerdefinierten Block geben, automatisch ausgefüllt. Es ist wichtig, wenn Sie die Blockvorlage erstellen.
• Symbol – Mit dieser Option können Sie Ihrem benutzerdefinierten Block ein Symbol hinzufügen.
• Kategorie – Damit können Sie Ihrem benutzerdefinierten Block eine Kategorie zuweisen. Sie können Ihren benutzerdefinierten Block mithilfe einer der integrierten Kategorien kategorisieren oder eine brandneue Kategorie erstellen.
• Schlüsselwörter – Fügen Sie maximal drei Schlüsselwörter hinzu, die sich auf Ihren benutzerdefinierten Block beziehen, damit Benutzer ihn in der Blockauswahl leicht finden können.
• Blockfelder in einem Modal öffnen, anstatt an Ort und Stelle zu rendern – Aktivieren Sie diese Option, wenn Sie Felder in einem Modal öffnen möchten. Es ist nützlich, wenn Sie einen benutzerdefinierten Block mit vielen Feldern haben.
• Beitragstypen – Aktivieren Sie das/die Kästchen, damit Ihr benutzerdefinierter Block für jeden Beitragstyp angezeigt werden kann. Wenn Sie beispielsweise Posts deaktivieren, wird der Block in keinem Post angezeigt.

Erstellen eines benutzerdefinierten Blocks

Nachdem Sie nun die Benutzeroberfläche und die Funktionen der einzelnen Teile besser verstanden haben, können wir die Ärmel hochkrempeln und uns an die Arbeit machen.

Geben Sie im Builder Ihrem benutzerdefinierten Block einen passenden Titel. Ich gehe mit CTA für dieses, wie unten gezeigt.

Lassen Sie uns vor dem Hinzufügen neuer Felder ein Symbol und Schlüsselwörter hinzufügen und eine Kategorie für den benutzerdefinierten Block auswählen, wie unten gezeigt.

Lassen Sie uns diesem Satz einige Felder zu unserem benutzerdefinierten Block hinzufügen. Für unseren Beispiel-CTA-Block fügen wir nur drei Felder in der folgenden Reihenfolge hinzu: ein Bild, etwas Text und ein Dateifeld, mit dem Benutzer ein imaginäres E-Book herunterladen können

Blockfelder hinzufügen

Klicken Sie im Abschnitt Editorfelder auf das Pluszeichen (+) , um das erste Feld hinzuzufügen, wie unten gezeigt.

Als Nächstes fügen wir ein Bildfeld hinzu. Stellen Sie in der Seitenleiste den Feldtyp auf Bild ein und definieren Sie die anderen Optionen. Beachten Sie auch den Slug (ich habe meinen auf image-field gesetzt), da wir ihn beim Erstellen der Blockvorlage verwenden werden. Siehe das Bild unten.

Fügen Sie danach die Text- und Dateifelder auf ähnliche Weise hinzu.

Feiern Sie noch nicht, es ist noch ein Schritt zu gehen. Wechseln Sie zum Vorlagen-Editor > Markup:

Meins hat bereits etwas Code, aber deins wird leer sein

Hier entwerfen wir, wie Ihr benutzerdefinierter Block auf Ihrer Website aussieht. Der Vorlagen-Editor akzeptiert HTML, CSS und die Feld-Slugs (die Sie in 2 Klammern einschließen müssen). Wenn Sie PHP verwenden müssen, können Sie die Vorlage stattdessen mit der PHP-Vorlagenmethode erstellen.

Keine Sorge, es ist einfach.

Fügen Sie im Vorlagen-Editor auf der Registerkarte Markup (siehe Abbildung oben) das folgende Stück HTML-Markup (Code) hinzu:

 <div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{Textfeld}}</h2>
<a href="{{Dateifeld}}">
<button type="button" class="dwnld">Herunterladen</button></a>
</div>
</div>

Während Sie Ihr HTML-Markup schreiben, werden Sie feststellen, dass der Vorlagen-Editor die Feld-Slugs (z. B. {{image-field}} ) automatisch für Sie vervollständigt

Gehen Sie als Nächstes zum CSS- Abschnitt, um einige einfache Stile hinzuzufügen.

Sie können die gewünschten Stile hinzufügen, aber damit arbeite ich:

 .cta-Block {
Textausrichtung: Mitte;
Hintergrundfarbe:orange;
Breite: 100 %;
Höhe: automatisch;
Rand: 2px durchgehend orange;
}

.dwnld {
Hintergrundfarbe: schwarz;
Rand: 2px durchgehend schwarz;
Farbe grün;
Polsterung: 5px 10px;
Textausrichtung: Mitte;
Anzeige: Inline-Block;
Schriftgröße: 20px;
Rand: 10px 30px;
Cursor: Zeiger;
Randradius: 2px;

}

Und du bist fertig! Klicken Sie auf Veröffentlichen :

Um Ihren neuen benutzerdefinierten Block in Aktion zu sehen, gehen Sie zurück zu Ihrem WordPress-Admin-Dashboard und navigieren Sie zu Beiträge > Neu hinzufügen (funktioniert auch mit Seiten):

Erstellen Sie wie gewohnt einen Beitrag, klicken Sie auf das Pluszeichen (+) , um einen neuen Block hinzuzufügen, und wählen Sie Ihren neuen glänzenden benutzerdefinierten Block aus, wie wir unten hervorheben.

Füllen Sie als Nächstes Ihren benutzerdefinierten Block wie gewünscht aus und veröffentlichen Sie Ihren Beitrag:

Wenn ich mir jetzt meinen neuen benutzerdefinierten CTA-Block im Frontend ansehe, sehe ich Folgendes:

Mein benutzerdefinierter CTA ist genau da! Bitte haben Sie nichts gegen meine Designfähigkeiten – natürlich möchten Sie in einem realen Szenario etwas mehr Zeit damit verbringen, Ihren Block zu stylen. Aber ich hoffe, Sie haben heute hier etwas gelernt.

Das Erstellen benutzerdefinierter Blöcke muss mit Tools wie Genesis Custom Blocks und Lazy Blocks unter anderem keine schwierige Aufgabe sein. Außerdem können Sie Ihre benutzerdefinierten Blöcke je nach Bedarf komplex oder einfach gestalten. Wenn Sie benutzerdefinierte Blöcke manuell erstellen müssen, befassen Sie sich mit einigen JavaScript-Lektionen. Es wird helfen

Irgendwelche Gedanken oder Fragen? Bitte teilen Sie uns dies in den Kommentaren unten mit.