Entwerfen von blockbasierten WordPress-Child-Themes mit einer einzigen JSON-Datei

Von dem Moment an, als ich 2008 meinen ersten Theme-Shop eröffnete, bis heute, als jemand, der nur herumtüftelt, war mein Plan immer, ein einziges Theme in der Form von CSS Zen Garden zu bauen. Dies war ein Projekt, das Dave Shea in den frühen 2000er Jahren startete, um zu zeigen, wie Designer eine Website allein durch CSS manipulieren können. Das HTML würde gleich bleiben, aber das Design könnte alles sein.

Dieses Ziel habe ich mehrfach mit mehreren Projekten erreicht. Technisch gesehen war alles, was ich jemals brauchte, ein architektonisch solides Markup in einem WordPress-Theme und benutzerdefiniertes CSS in einem untergeordneten Thema.

Das Konzept war einfach, aber im Laufe der Zeit änderte sich meine Vision. Ich wollte etwas schaffen, das das Entwerfen dieser Art von untergeordneten Themen noch einfacher macht. Aus diesem Grund habe ich benutzerdefinierte Systeme erstellt, um den Mangel an Tools von WordPress im Bereich des Themendesigns zu umgehen. Um nicht zu viel zu prahlen, aber ich hatte das Gefühl, einige praktische Methoden entwickelt zu haben. Sie ermöglichten den Designern von untergeordneten Themen, Werte in Konfigurationsdateien einzufügen, z. B. Namen von Schriftfamilien und Farbcodes. Die meisten davon könnten auch von Endbenutzern über den Customizer überschrieben werden.

2018 arbeitete ich bereits hart an meinem Opus Magnum, dem besten WordPress-Theme, das ich je gebaut hatte. Ich hatte auch geplant, dass es mein letztes war. Ich hatte lange überlegt, aus dem Spiel auszusteigen. Aber das war ein Projekt, das ich durchziehen musste.

Dann hat der neue Blockeditor alles in die Luft gesprengt. Ich hatte monatelang damit gearbeitet, bevor es auf den Markt kam, aber ich wusste, dass die Themenentwicklung nie mehr dieselbe sein würde. Das Gutenberg-Projekt würde weiter reifen und die Zukunft von WordPress neu gestalten.

Schließlich startete ich mein Thema. Es war eines der frühesten kommerziellen Produkte, das das neue Blocksystem unterstützte. Allerdings war ich auch entäuscht.

Dies waren die frühen Tage des Blockeditors. Niemand wusste wirklich, was wir uns in drei oder mehr Jahren ansehen würden, aber wenn Sie auch nur ein bisschen Aufmerksamkeit schenkten, konnten Sie sehen, dass sich die Thematisierung zu etwas ganz anderem entwickeln würde, als es damals war. Ich habe über ein Jahr damit verbracht, ein Themensystem aufzubauen, das in kurzer Zeit irrelevant werden würde – zugegeben, ich dachte, wir wären viel früher an diesem Ziel angekommen.

WordPress 5.9 wird die letzten Unterkomponenten von Full Site Editing liefern. Dies beinhaltet die Unterstützung für Blockthemen unter der Haube. Benutzer, die sie installieren, können sie über den Site-Editor und die globale Styles-Oberfläche anpassen.

Was mich am meisten begeistert, ist immer noch das, was mich vor 13 Jahren jeden Morgen geweckt hat: Kinderthemen.

Block-Child-Themes funktionieren teilweise seit Monaten im Gutenberg-Plugin. Das Feature, auf das ich mich am meisten gefreut hatte, war jedoch erst vor einer Woche fertig. Ein neuer Patch ermöglicht es einem untergeordneten Design, einzelne Werte der theme.json -Datei seines übergeordneten Designs zu überschreiben. Im Wesentlichen werden die beiden Dateien zusammengeführt, wobei das untergeordnete Element Vorrang hat.

Warum war ich so begeistert von dieser Funktion? Weil es das gleiche System war, das ich in den vergangenen Jahren gebaut hatte – aber besser.

Nachdem ich dieses Land in der Entwicklungsversion von Gutenberg gesehen hatte, war das erste, was ich tat, ein benutzerdefiniertes Thema zu laden, mit dem ich mich beschäftigt hatte. Es ist ein Projekt, das ich zum Spaß und zu meiner eigenen Erbauung gebaut habe.

Dann habe ich in meinem Code-Editor ein neues Projekt erstellt. Ich habe die erforderliche style.css -Datei hinzugefügt und die entsprechenden Header-Felder eingefügt. Darüber hinaus bräuchte ich es nicht. Das Design meines untergeordneten Themas würde sich auf eine ganz andere Funktion stützen.

Ich fügte eine theme.json auf der Root-Ebene des Child-Themes hinzu und fing an, mehr Spaß zu haben, als ich mit dem Thematisieren seit langem hatte.

Ich habe ein paar Herbstfarben und eine lustige Überschriftenschrift herausgesucht. Innerhalb weniger Minuten hatte ich einen neuen Anstrich auf meiner Testinstallation. Das Design war nicht revolutionär oder ähnliches. Ich war nur erstaunt, wie einfach es war, mein Design durch Einfügen einiger Werte umzuwandeln.

Das ist die Art von Kindermotiven, nach der ich mich immer gesehnt habe. Ich möchte die Möglichkeit haben, die Designelemente meines Themas für verschiedene Jahreszeiten und Feiertage auszutauschen. Und ich möchte in der Lage sein, diese untergeordneten Themen mit anderen zu teilen.

Wie gesagt, ich hatte solche Methoden des Child-Themings schon einmal gebaut (ich habe PHP statt JSON verwendet). Dies ist jedoch viel leistungsfähiger, da es sich auf das Standardblocksystem stützt und nicht auf etwas Benutzerdefiniertes, das nur eine Handvoll Leute jemals verwenden würden.

Einige von euch fragen sich vielleicht, warum ich diese Änderungen nicht über den Site-Editor vorgenommen habe, anstatt ein untergeordnetes Thema zu erstellen. Rich Tabor hat heute im Wesentlichen dieselbe Frage auf Twitter gestellt. „Wenn ein Design aus JSON- und Blockvorlagen besteht, die beide über globale Stile geändert werden können, wofür sind dann untergeordnete Themen?“

Nehmen wir an, ich habe ein Blockdesign installiert und ein paar Farbanpassungen vorgenommen. Nun, tun Sie so, als ob ich das aufmischen möchte, wenn Weihnachten herumrollt – werfen Sie ein paar Farben hinein und finden Sie eine festliche Feiertagsschrift. Wenn ich diese Änderungen vornehme, ist mein altes Design am Ende der Saison nicht mehr vorhanden, da Benutzeranpassungen basierend auf dem aktiven Design gespeichert werden. Ich könnte natürlich alle meine alten Einstellungen notieren und sie später alle wieder ändern. Wenn ich dies jedoch über ein untergeordnetes Thema mache, kann ich das Thema jederzeit wechseln. Meine alten Einstellungen blieben erhalten.

Vielleicht ist dies ein Grenzfall. Wer nimmt heutzutage saisonale Änderungen an seinem Design vor, richtig?

Der aufregende Teil ist, dass ich untergeordnete Themen, die mit einer einzigen JSON-Datei erstellt wurden, mit anderen teilen kann.

Child-Theming ist eine Leidenschaft von mir, seit das Feature in WordPress gelandet ist. In mancher Hinsicht hat sich daran nicht viel geändert. Themer können weiterhin Vorlagen des übergeordneten Elements überschreiben. Sie können weiterhin benutzerdefiniertes CSS hinzufügen, wenn sie möchten. Aber jetzt können sie jeden Teil des Designs aus einer einzigen standardisierten Datei konfigurieren. Das ist etwas, wofür es sich lohnt, meine Entwicklerkappe wieder aufzusetzen und ein weiteres Thema zu erstellen.

Ich sehe auch eine Zukunft ohne untergeordnete Themen, die immer noch die gleichen Vorteile hat, wenn man Designelemente teilt.

Das Blockmusterverzeichnis bietet bereits Layouts, die mit jedem gut gebauten WordPress-Theme funktionieren sollten. Es gibt jedoch andere Designkomponenten, die wir in Zukunft auseinanderbrechen könnten.

Ich stelle mir eine Zukunft vor, in der WordPress installierbare Farbpaletten haben könnte, wie sie Color Lovers anbietet. Durchsuchen Sie einfach ein Verzeichnis, installieren und ändern Sie Ihr Farbschema, ohne ein neues Thema zu finden. Etwas Ähnliches wie das aktuelle Adrian-Plugin könnte den gleichen Zweck für Schriftarten erfüllen. Dies sind Dinge, die die Community später in Betracht ziehen sollte. An dieser Stelle sollten keine Ideen vom Tisch sein.

Im Moment bin ich glücklich, die volle Kraft der Kinderthematik zur Verfügung zu haben. Die Änderung soll diese Woche in Gutenberg 11.8 und später in diesem Jahr in WordPress 5.9 landen.