Einfach erklärt: Neue Gutenberg-Blocks für WordPress 5 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.
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.
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.
Habt ihr eure benötigten Felder erstellt und auch im HTML-Code verpackt, könnt ihr neben einer Icon-Auswahl noch weitere Einstellungen vornehmen.
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.
Probiert die beiden Plugins doch einfach mal beim nächsten Projekt aus und teilt uns eure Erfahrungen gerne hier mit! ;-)
