JavaScript » Johannes Kinast

Laravel Tools für WordPress: Webpack in elegant mit Laravel Mix 6

Johannes 20. Januar 2021

In der kleinen Serie zu Laravel Tools für WordPress, habe ich euch bereits Laravel Valet für die lokale Entwicklungsumgebung vorgestellt. Heute geht es wieder um ein Tool, was euch bei der Entwicklung von Themes & Plugins helfen kann. Besonders, wenn ihr an Block Editor (Gutenberg) Blöcken schraubt.

Laravel Mix vereinfacht euch die Arbeit mit Webpack enorm und spätestens, wenn ihr euren ersten Block in JavaScript programmiert, kommt ihr nicht mehr an Webpack (oder einem anderen JavaScript-Modul-Packer) vorbei. Die Konfiguration von Webpack empfinde ich aber als sehr kompliziert. Vor allem, wenn man noch nie mit React gearbeitet hat. Laravel Mix nimmt euch die Konfiguration in 80% der Fälle ab und reduziert den Konfigurationsaufwand extrem.

Vue.js Components im WordPress Block Editor / Gutenberg anzeigen

Johannes 7. Januar 2021

Gutenberg basiert ja (leider) auf React. Ich programmiere aber schon seit Jahren viel lieber mit Vue.js 2. Zwar habe ich mich damit abgefunden Blöcke für den Block Editor aka Gutenberg in React zu schreiben (wobei man nur sehr begrenzt eigentlich React verwendet, eher noch JSX), aber trotzdem verwende ich für einige Blöcke Vue.js. Im Fronend kein Problem, aber eine Vorschau im Block Editor angezeigt zu bekommen, inkl. Änderungen an den Attributen, war eine echte Herausforderung.

Scripts Aktions-abhängig laden, z.B. wenn ein Button geklickt wird

Johannes 2. August 2020

Für WordPress und natürlich andere CMS gibt es tausende Plugins und viele davon laden eigene Scripts und Styles bei euch im Frontend. Die Anzahl und vor allem die Größe kann eure Website-Performance massiv beeinträchtigen. Wie man Plugins dazu bringt, Scripts & Styles nur zu laden, wenn sie wirklich notwendig sind, habe ich euch bereits gezeigt.

Es gibt aber Elemente z.B. Share-Buttons oder Autosuggest-Suchen die sind auf jeder Seite vertreten, werden aber nur bei einem Bruchteil der Seitenaufrufe wirklich von Nutzer genutzt. Nur, wenn der User den Beitrag teilen möchte oder eine Suche eintippt.

Ziel ist es an dieser Stelle das benötigte Script erst zu laden, wenn man sich sehr sicher ist, dass der Nutzer die Aktion ausführen will. Im Idealfall muss der User vorher auf einen Button klicken aber auch wenn der User mit der Maus über dem Suchfeld oder Button schwebt, kann als Auslöser herangezogen werden.

Block Editor Gallery-Block mit Lightbox ausstatten (WordPress/Gutenberg)

Johannes 4. Juni 2020

Mir gefällt der standardmäßig mitgelieferte Gallery-Block von Gutenberg sehr gut. So gut, dass ich eigentlich keinen Grund sehe, auf ein extra Gallery-Plugin zu setzte. Leider gibt es ein großes Manko: Standardmäßig wird keine Lightbox mitgeliefert. Die vielen schönen Bilder wollen die Besucher natürlich gerne im Vollbild anschauen und das ist sonst nur mit viel vor und zurück klicken möglich.