Einfach erklärt: Neue Gutenberg-Blocks für WordPress 5 erstellen

Mit der neuen WordPress Version 5.0 haben die Entwickler – wie ihr bereits im Blog erfahren habt – eine große Neuerung eingeführt: den blockbasierten Editor „Gutenberg“! Auf diesen möchte ich in nun näher eingehen und euch zeigen, wie ihr einfach und schnell neue Blocks erstellen könnt.

Neue Gutenberg-Blocks in WordPress erstellen

Mehr Individiualität: eigene Block-Elemente erstellen 

Als Standard hat der Editor einige Inhaltselemente, die ihr frei für eure Webseiten verwenden könnt. Die Auswahl reicht hier von Zitat-Elementen über Fotogalerien bis hin zu einfachen Tabellen. Doch auch ebendieser ist irgendwann eine Grenze gesetzt. Spätestens dann, wenn es um individuelle Kundenprojekte geht, bei denen ihr auch eigene WordPress Themes entwickeln müsst.

Und genau für den Anwendungsfall gibt es die Möglichkeit, eigene Block-Elemente zu erstellen. Wenn ihr Entwickler seid, dann freundet ihr euch bestimmt mit den unzähligen Möglichkeiten und Toolkits, die es gibt an – wie z. B. „Create-Guten-Block“ oder das offizielle Gutenberg-Handbuch, das ihr unter: https://wordpress.org/gutenberg/handbook/ findet.

Habt ihr keine tiefgehenden JavaScript-Kenntnisse, fühlt ihr euch vermutlich eher in der PHP-Welt zu Hause und schreibt lieber HTML und CSS herunter. Dann möchte ich euch hier nun eine andere sehr coole und einfache Möglichkeit zeigen, neue Gutenberg-Blocks zu erstellen.

Mit Lazy Blocks alles andere als faul sein 

Für den genannten Anwendungsfall gibt es die Plugins „Block Lab“ und „Lazy Blocks“. Beides WordPress Plugins, die es euch ermöglichen, mit HTML- und etwas PHP-Code ziemlich einfach neue Inhaltselemente zu erstellen. Welches Plugin besser zu eurem Anwendungszweck passt, ist schwer zu sagen, daher probiert einfach beide aus. Trotz allem möchte ich euch gerne „Lazy Blocks“ vorstellen.

Nachdem ihr das Plugin über den offiziellen Store installiert habt, könnt ihr im neuen Menüpunkt unter dem Reiter „Erstellen“ ein Element anlegen.

Element erstellen im Gutenberg Editor von WordPress.

Das Element benötigt neben dem Namen die gewünschten editierbaren Felder (z. B. Textfeld, Bild oder Checkbox) und zum Schluss natürlich noch das HTML-Gerüst.

Felder ins HTML einbinden: WordPress Gutenberg Editor

Die erstellten Felder könnt ihr über die Namen ganz einfach über eine sog. Handlebar-Syntax in euer HTML einbinden, seht {{headline}} im unteren Screenshot. Von IF-Bedingungen über Vergleiche und mathematischen Funktionen sind euch dort keine Grenzen gesetzt.

Felder im Gutenberg Editor erstellen und im HTML-Code verpacken

Habt ihr eure benötigten Felder erstellt und auch im HTML-Code verpackt, könnt ihr neben einer Icon-Auswahl noch weitere Einstellungen vornehmen.

Weitere Einstellungen in Lazy Blocks

Nach einem Klick auf Speichern ist das neue Gutenberg-Element im Editor schon auswählbar und kann frei auf Seiten und in Beiträgen von euch genutzt werden.

Neues Gutenberg Element im Editor erstellen und auswählen

Probiert die beiden Plugins doch einfach mal beim nächsten Projekt aus und teilt uns eure Erfahrungen gerne hier mit! ;-)

Kommentar hinzufügen