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

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.
Felder ins HTML einbinden: WordPress Gutenberg Editor
Felder im Gutenberg Editor erstellen und im HTML-Code verpacken
Weitere Einstellungen in Lazy Blocks
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

    Weitere Informationen zum Datenschutz findest du hier.