In der Agentur haben wir uns vor kurzem überlegt alle Definitionen von Farben und Schriften für ein Projekt in Elementor als globale Farben anzulegen um diese
a) im Custom-CSS einfach wiederverwenden zu können
b) bei Bedarf ohne Deployment o.Ä. ändern zu können
In der Theorie klingt das erstmal recht verlockend, in der Praxis ist das im ersten Moment erstmal dann doch nicht so richtig toll:
Setzt man in nun Elementor globale Farben oder Schriften um diese in einem Projekt immer wiederverwenden zu können, bekommen diese einen CSS-Variablen-Namen mit einem Hash bzw. einer Random-ID wie z.B. --e-global-color-ab1337.
Möchte man diese global definierten Klassen nun aber in Custom-CSS weiterverwenden, wohlmöglich sogar noch in einem Projekt an dem mehrere Leute arbeiten und dieses lokal laufen haben – dann kann bzw. wird es bei den Variablen mit Hashes sehr schnell zu Problemen kommen. Person A fügt eine neue Farbe hinzu und die Farbe bekommt die ID „ab1337“, Person B fügt diese Farbe dann bei sich lokal auch hinzu und dort ist die Random-ID „im1337“. Und das ganze dann nochmal auf einem Staging- bzw. Production-Environment… Wirklich zuverlässig würde es sich so nicht verwenden lassen.
Eine Lösung finden
Ich habe mir das ganze dann mal angesehen und nach einer Lösung gesucht. In den Github-Issues von Elementor fand ich einen Faden dazu, in dem es aber keine noch Lösung für das Problem gab.
Dann habe ich mich mal ein bisschen im Code von Elementor umgesehen um passende Hooks zu finden und wurde dann irgendwann tatsächlich fündig. 100%ig bin ich mit meiner Lösung noch nicht zufrieden da sie eher eine Workaround ist, aber sie tut zumindest genau das was sie soll.
Die Lösung: Nachdem ein Elementor\Core\Kits\Documents\Kit gespeichert wurde, holen wir _elementor_page_settings aus der Postmeta des Kits, ändern die IDs in custom_colors bzw. custom_typography in eine sanitized Variante des Namens und aktualisieren die Postmeta.
Beim sanitizen kann man bspw. nicht nur sanitize_title() verwenden, denn sollten im Namen Leerzeichen sein werden diese durch einen Bindestrich ersetzt. Und damit Elementor weiterhin richtig funktioniert darf in die ID kein zusätzlicher Bindestrich dazukommen. Also müssen wir diese bspw. durch einen Unterstrich ersetzen.
Better Global Classnames for Elementor
Meine Lösung habe ich dann anschließend in ein kleines WordPress-Plugin mit dem Namen „Better Global Classnames for Elementor“ gesteckt und dieses vorerst erstmal auf Github bereitgestellt und auch im offiziellen WordPress Plugin Repository eingereicht. Aber da beträgt die Wartezeit für die initiale Einreichung aktuell ca. 56 Tage.
Nach der Aktivierung des Plugins müssen dann die globalen Farben einmal neu gespeichert werden und unter Umständen müssen dann alle globalen Farben und Schriften den jeweiligen Elementen, bedingt durch die neue ID, neu zugeordnet werden.
