WordPress liefert leider (weiterhin) kein Modal aka Flyout für das eigene Backend mit. Mit den Gutenberg-Erweiterungen ist es dank React jedoch möglich, solche Dialoge sich selbst zu bauen. Da ich bei meinen Plugins wie auch verschiedensten Projekten immer wieder solche Dialoge benötigt habe, habe ich vor einigen Jahren zunächst für mich selbst ein Script erstellt, was genau so ein Modal erzeugt. Es ist sehr flexibel überall im Backend von WordPress einsetzbar und steht inzwischen auch seit geraumer Zeit als composer Package für andere Entwickler zur Verfügung.
Zielsetzung
Als Entwickler eines Plugins oder Themes, steht man in WordPress immer wieder der Herausforderung dem Anwender möglichst intuitive Dialoge anzubieten. Mein composer Package Easy Dialog for WordPress ermöglicht genau das: einen Dialog in dem man den Nutzer z.B. um eine Entscheidung bitten kann. Aber auch der Fortschritt eines Prozesses oder ganze Formulare können dargestellt werden. Der Inhalt kann somit beliebig definiert werden.
Aufbau
Das composer Package enthält ein React-Script, was die Gutenberg-Komponenten verwendet, um den Dialog darzustellen. Der Dialog muss als JSON-Array konfiguriert werden und kann bei beliebigen Events getriggert werden. Meist ist es natürlich der Klick z.B. auf einen Link. Dieser müsste dann z.B. so aussehen:
echo '<a href="#" class="easy-dialog-for-wordpress" data-dialog="'.esc_attr(wp_json_encode($dialog)).'" data-dialog-settings="'.esc_attr(wp_json_encode($dialog_settings)).'">Klick mich</a>';Entscheidend ist hier die Klasse easy-dialog-for-wordpress über die das Script selbst das Klick-Event an den Link setzt. Über das HTML-Attribut data-dialog wird die Konfiguration übergeben. Es gibt auch alternative Methoden um den Dialog zu triggern. Diese sind im Repository näher beschrieben.
Verwendung
Damit man sich selbst ein Bild machen kann, habe ich ein Demo erstellt. Die findet ihr hier: https://github.com/threadi/easy-setup-for-wordpress-demo
Wie man als Entwickler das Package im eigenen Plugin oder Theme einsetzen kann, ist im Repository beschrieben: https://github.com/threadi/easy-setup-for-wordpress
Anwendungsfälle
Ich verwende das Script in nahezu jedem meiner Plugins. Es vereinfacht Abläufe und die Interaktion mit dem Anwender. Für mich ist es auch eine riesen Zeitersparnis, da ich nicht alles für Interaktionen mit dem Anwender ständig neu denken muss.
Beispiele aus meinem Alltag sind:
- Rückfrage stellen, ob ein Nutzer eine Aktion (wie Löschen einer Datei) wirklich ausführen möchte.
- Dem Nutzer mehrere Optionen zur Auswahl anbieten um eine Aktion auszuführen, z.B. beim Import von URLs in die Mediathek.
- Einen Fortschrittsbalken anzeigen, wenn offene Stellen von Personio geladen werden.
- Einen Dialog zur Konfiguration von Formularfeldern anzeigen (der auch selbst Formularfelder beinhaltet).
Weiterentwicklung
Ich habe an dem Script seit langer Zeit nur noch wenig ändern müssen. Zuletzt habe ich noch ein paar Style-Vorgaben für Formularfelder, die in dem Dialog angezeigt werden könnten, ergänzt. Aktuell sehe ich keine Notwendigkeit für weitere Funktionen. Wenn ihr Wünsche habt, meldet euch gerne hier.
Oh, fast vergessen
Ich habe so etwas auch fürs Frontend entwickelt: https://github.com/threadi/react-dialog – setze es selbst aber bisher nur wenige Male ein, weshalb das eher „Stiefmütterlich“ betreut wird.