Mit den neuen Funktionen die uns der Block Editor seit über 1,5 Jahren bietet sind flexible Layouts möglich, die vorher nur mit Hilfe von Pagebuildern realisiert werden konnten. Viele Anforderungen die vorher über die Seitentemplates erfüllt wurden können jetzt vom Editor selbst gelöst werden.
Die Verwendung von Seitentemplates ging aus diesem Grund bei meinen Projekten in den vergangenen 1,5 Jahr deutlich zurück. Fast obsolet erschien diese Funktion, die für mich nicht wirklich in das Konzept des Editors passen wollte.
Bis ich in meinem letzten Projekt die Anforderung für ein zweites Seitentemplate hatte, das im Gegensatz zur übrigen Website einen dunklen Hintergrund mit hellem Text statt eines weißen Hintergrund haben soll. Es sollte sozusagen ein „Dark-Mode“-Template geben.
Ein solches kann relativ einfach erstellt werden, und braucht auch keine weitere Erläuterung. Wie aber kann eine solche Änderung des Templates im Editor dargestellt werden? Einer der Vorteile des Block Editors ist, dass das Backend nahezu aussieht wie das Frontend (WYSIWYG), ich wollte den Dark-Mode daher auch in den Editor bringen.
Bei einer Google-Suche für eine Lösung für diese Anforderung kam ich leider zu keinem wirklichen Ergebnis. Daher möchte ich hier meine Lösung mit euch teilen.
Erste Schritte
Eigentlich könnte es ganz einfach sein: Im Frontend bekommt der <body> Tag automatisch eine Klasse mit dem Namen des Seitentemplates zugewiesen. Wir müssen im CSS diese Klasse nur als Selekor verwenden. Wenn es eine solche Klasse auch im Editor gäbe ware das ganze schon gelöst.
Ich machte mich daher im Code des Editors auf die Suche nach einer ähnlichen Klasse und siehe da: eine ähnliche Funktion gib es im Editor leider nicht.
Ich musste diese Klasse also irgendwie selbst anlegen. Nach ein bisschen Testen scheint mir das div mit der ID #editor am besten dazu geeignet.
Das Seitentemplates im Editor ermitteln
Jetzt müssen wir nur noch herausfinden welches Seitentemplate genutzt wird.
Das können wir mit Hilfe des 'core/editor' data stores.
Live Template-Updates erhalten
Das einmalige Auslesen des Templates reicht natürlich nicht aus. Sobald das Template wechselt, soll beim #editor div entweder eine Klasse hinzugefügt oder entfernt werden.
Das können wir mit der subscribe() Funktion realisieren. Mit dieser können wir eine Callback Funktion registrieren die immer dann ausgeführt wird, wenn sich etwas im Editor ändert.
ACHTUNG: die Funktion wird wirklich sehr oft ausgeführt, man sollte also wirklich aufpassen was man damit macht, damit der Browser nicht überfordert ist.
subscribe( () => {
console.log('Dieser Code wird ausgeführt wenn sich etwas im Editor ändert.');
})Code-Sprache: PHP (php)Finaler Code
Jetzt wo wir die Einzelnen Bausteine kenne, müssen wir diese nur noch zusammensetzten:
// Das Element das später die extra Klasse bekommt
const editor = document.getElementById("editor");
// Eine Hilftsfunktion mit der wir den templatenamen erhalten
const getTemplateName = () => select('core/editor').getEditedPostAttribute( 'template' )
// Variable in der wir den aktuelle Template Namen speichern
let templateName;
// Hier subscriben wir die Änderungen Editor
const checkRequiredField = subscribe( () => {
// Abfragen des "neuen" Template Namens
const newTemplateName = getTemplateName();
/**
* Da die subscribe Funktion wirklich oft ausgeführt wird,
* sollten wir immer überüfen ob eine für uns relevante
* Änderung überhaupt erfolgt ist
*/
if( templateName !== newTemplateName ) {
/**
* überprüfen ob das Darkmode-Template aktiv ist
* in diesem Fall bekommt der Editor eine entsprechende Klasse
* wenn nicht wird sie entfernt.
*/
if ( newTemplateName.includes('darkmode.php') ) {
editor.classList.add("page-template-darkmode");
} else {
editor.classList.remove("page-template-darkmode");
}
}
templateName = newTemplateName;
})Code-Sprache: PHP (php)Das Editor div bekommt jetzt abhängig vom gewählten Seitentemplate eine zusätzliche Klasse. Diese können wir im Editor CSS aufgreifen um den Editor in einen Dark-Mode zu verwandeln. Da sich das #editor div außerhalb des .editor-styles-wrapper befindet kann der dark mode nicht über die editor-styles die via theme support geladen werden, angesprochen werden. Stattdessen muss das CSS über den den enqueue_block_editor_assets hook geladen werden.
Mein Ergebnis
Ich habe das ganze in einem Child Theme für das TwentyTwenty Theme umgesetzt.
https://github.com/derweili/twentytwenty-darkmode
Weitere Anpassungen
Das ganze lässt sich nicht nur für einen Dark Mode verwenden. Es ist z.B. auch möglich unterschiedliche Content-Breiten im Editor auf diesem Weg darzustellen, um ein Full-Width und ein schmales Template realisieren zu können.
Weitere Informationen:
Die subscribe Funktion um Gutenberg Handbook
Eine umfassendere Anleitung zur subscribe Funktion
Johannes Kinast hat sich die Subscribe Funktion genauer angeschaut und beschreibt wie man potentiellen Performance-Problemen begegnen kann.
Schreibe einen Kommentar