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

|
HTML5
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
HTML5

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! ;-)

Ähnliche Artikel:

Lettern, die für den Buchdruck verwendet wurden
Webentwicklung

Gutenberg: der neue Editor von WordPress

Mit Gutenberg, dem neuen Editor von WordPress, beginnt eine neue Ära. Denn nicht nur das Design ändert sich, sondern auch die Art, damit zu editieren.

Arbeitsplatz mit WordPress Logo auf Laptop Screen
Webentwicklung

WordPress 5.0 „Bebo“ ist da!

Was es mit dem neuen WordPress Release 5.0, dem Editor und den sonstigen Features auf sich hat, erfahrt ihr hier bei uns im Blog.

WordPress und Divi Logo auf Laptop
Webentwicklung

WordPress 5.0 und Divi: Den Editor passend einrichten

Mit WordPress 5.0 kam eine große Änderung für Redakteure: Die Einführung des Gutenberg-Editors. Wir erklären euch hier, was neu im Editor ist.

Hände halten Tablet mit aufwärts weisenden Liniendiagramm, daneben blaues Mittwald-Schloss
Sonstige

Mit WordPress SEO-konform auf SSL umsteigen

In dieser Dokumentation zeigen wir, wie man WordPress-Installationen auf SSL umstellt! ✘keine Rankingverluste ✘ kein Dublicate Content

Mann sitzt am Laptop mit WordPress Logo auf Screen
Webentwicklung

Doppelt gesichert: die Zwei-Faktor-Authentifizierung in WordPress

Bei der Zwei-Faktor-Authentifizierung treffen WordPress und Sicherheit aufeinander. Wir zeigen euch, wie man die doppelte Sicherheit einrichtet.