Wenn dies die Entwicklung moderner WordPress-Themes ist, melde mich an

Ich habe eine Weile eine Blockthema-Idee in meinem Kopf herumgerattert. Monatelang habe ich darüber nachgedacht, ein einseitiges Profil-/Kartenthema zu erstellen, und ich habe mich schließlich hingesetzt und über das Wochenende die Arbeit hineingesteckt. Teilweise wollte ich das nur zum Spaß machen. Ein anderer Teil von mir wollte jedoch sehen, wie sich das Block-Theming aus Entwicklersicht entwickelt hat.

Die Inspiration für dieses Thema kam von einigen anderen Personen und Projekten. Kjell Reigstads zweispaltiges Landingpage-Experiment vom Oktober 2020 löste es erstmals aus. Eine kürzlich an die Kolumne „Ask the Bartender“ gerichtete Frage zu kompakten und gemütlichen Themen brachte meine Kreativität wieder zum Fließen. Als das Themes-Team jedoch ein ähnliches Block-Theme, Miniblock OOAK, von Carolina Nymark genehmigte, bedeutete dies, dass die Regeln jetzt lasch genug waren, um möglicherweise so etwas in die Welt zu setzen.

Eines der Probleme ist, dass blockbasierte Themen mich schon einmal verbrannt haben. Ich habe letztes Jahr in meiner kostbaren Freizeit Monate damit verbracht, ein neues Projekt aufzubauen, nur um Wochen später von Gutenberg-Plugin-Updates zunichte gemacht zu werden. Ich wusste, dass sich die Dinge mit der instabilen Grundlage von Alpha-Level-Software ändern könnten, aber es war immer noch deflationierend. Unnötig zu erwähnen, dass ich nie die Motivation finden konnte, es wieder aufzunehmen.

Mit WordPress 5.9 und einem stabileren Block-Theming-System nur wenige Tage vor uns war es an der Zeit, es noch einmal zu versuchen.

Ich wollte Block-Themen gründlich lernen . Die einzige Möglichkeit, dies zu tun, war, zum Anfang zurückzugehen. Ich musste mich wieder mit diesen grundlegenden Elementen des einfachen HTML, CSS und PHP vertraut machen. Und vergessen Sie alles, was ich zu wissen glaubte, aufbauend auf dem modernen Web. Ich musste wieder ein Noob werden.

Technisch gesehen ist es unmöglich, alles zu vergessen, was ich weiß, ohne eine Art Amnesie zu bekommen. Aber vielleicht – nur vielleicht – könnte ich zu den Bausteinen des Webs zurückkehren.

Könnte ich ein WordPress-Theme ohne ein komplexes Netz von Abhängigkeiten erstellen, das sich über 900 Projekte in meinem /node_modules Ordner erstreckt?

Könnte ich etwas erstellen, ohne meine Basis-PHP-Skripte pflichtbewusst über Composer einzufügen?

Könnte ich, wissen Sie , einfach ein WordPress-Theme erstellen?

Der erste Schritt war, mein Ego an der Tür zu überprüfen. Als ich jahrelange moderne Tools und einen darauf aufbauenden Workflow beiseite legte, fand ich ein wunderschön einfaches Theming-System, das den Wurzeln von WordPress huldigt, aber flexibel genug ist, um es für fortgeschrittene Builds zu erweitern.

Das soll nicht heißen, dass es unterwegs keine Schluckaufe gab, aber davon hören wir genug. Außerdem betrachte ich Programmierung/Entwicklung als die Kunst, Probleme zu lösen.

Ich hatte ein unruhiges Wochenende. Zwischen Freitag- und Samstagnacht bekam ich vier, vielleicht fünf Stunden festen Schlaf. Vielleicht hatte ich so viele Projekte und Dinge am Laufen, dass mein Verstand sie nicht ausschließen konnte. Unabhängig davon war ich am Sonntagmorgen um 3:30 Uhr wieder wach, müde, aber nicht in der Lage, diese dringend benötigten Z's zu fangen. Also habe ich meinen Code-Editor geknackt und ein neues Themenprojekt erstellt.

Innerhalb einer Stunde funktionierte es. Es war in einem anständigen Zustand, um es in zwei Teilen über Twitter mit Freunden zu teilen.

Das Folgende ist ein Screenshot der aktuellen Homepage. Technisch gesehen ist es die einzige Seite. Ich habe ein bisschen herumgebastelt, seit ich meine ersten Commits live gepusht habe.

Dies ist ein Blockmuster namens „Reflections“. Der Berg, der sich auf dem Seefoto widerspiegelt, stammt von WordPress Photos und wurde von Anne McCarthy aufgenommen. Der für den Hintergrund verwendete Farbverlauf spiegelt auch die Farben des Bildes wider, was ich für eine nette Geste hielt.

Das Thema enthält mehrere andere Muster. Ziel ist es, Benutzern zu ermöglichen, ihren Favoriten für ihre Profilkarte auszuwählen, den Inhalt anzupassen und zu speichern. Kinderleicht. Ich bin damit auf einen Haken gestoßen, auf den ich am Ende des Beitrags eintauche. Größtenteils lief alles gut.

Was ich aus der Erfahrung gelernt habe

Das Erstellen von WordPress-Themes mit Blöcken ist einfach. Die meisten Dinge sind strukturiert und spielen nach einem Standardsatz von Regeln. Vorlagen gehen hier. Teile gehen dort hin. Schließen Sie Ihre Einstellungen dort drüben an. Wir werden wahrscheinlich noch mehr Struktur in zukünftigen WordPress-Versionen sehen.

Ich habe das Design von Grund auf neu erstellt, indem ich nur meinen Code-Editor und eine lokale WordPress-Installation verwendet habe. Keine Knotenmodule. Keine PHP-Bibliotheken. Kein Build-Setup überhaupt.

Ich werde diese Dinge wahrscheinlich verwenden, bevor dieses Projekt abgeschlossen ist. Einige Tools erleichtern die Entwicklung einfach. Sie nicht zu benötigen oder in komplexere PHP-APIs einzutauchen, hat jedoch die Eintrittsbarriere gesenkt.

Es fühlte sich an, als wäre ich in die Mitte der 2000er Jahre zurückversetzt worden, nur mit einem besseren System, das sich um all die komplexen Teile kümmerte. Ich konnte mich für einmal fast ganz auf das Design konzentrieren.

Es gibt viele Probleme mit dem zugrunde liegenden System. Seltsamkeiten wie zusätzliche Wrapper-Elemente um breit ausgerichtete Blöcke gibt es immer noch im Editor. Und mehrere Blöcke müssen aktualisiert werden – ich betrachte Ihren Dateiblock dafür, dass Sie den vorhandenen Schaltflächenblock nicht wiederverwenden .

Grundsätzlich gibt es Macken. Als Themer lernen Sie, mit ihnen im Hinterkopf zu arbeiten, auf eine Fehlerbehebung im Upstream zu warten oder Ihren Verstand zu riskieren, indem Sie versuchen, Problemumgehungen zu finden.

Ich zögere, unfertige Arbeiten zu teilen, aber ich sollte auch Beweise zeigen. Interessierte können sich das GitHub-Repo zum Datum dieses Artikels ansehen, zumindest bevor ich etwas zu Verrücktes damit mache.

Einige Themenautoren sehen sich mein Projekt vielleicht an und denken, es sei ein zu einfaches Beispiel. Ich könnte jedoch alles darüber leicht auf ein ausgewachsenes Thema anwenden. Die Standards sind die gleichen, unabhängig von der Größe.

Vielleicht sollten wir anfangen zu überdenken, was ein Thema ist. Da blockbasierte Themen noch so jung sind, sollten wir alle ein wenig experimentieren.

Eine verpasste Gelegenheit

Ich werde in diesem Teil etwas technisch werden, weil es entscheidend ist, um eine verpasste Gelegenheit für eine abgerundete Benutzererfahrung zu erklären. Der Site-Editor befindet sich an einem Ort, an dem er für fortgeschrittene Benutzer einfach zu erstellen ist. Muster helfen, die Lücke für diejenigen zu schließen, die weniger technisch versiert sind, aber sie reichen nicht aus.

Denken Sie an die Hauptabschnitte einer Webseite. Teile wie Kopfzeile, Fußzeile, Seitenleiste, Inhalt und sogar Unterabschnitte davon. Wie ersetzen Sie als Benutzer das gesamte Inhaltsbereichsdesign, das sich bereits auf dem Bildschirm befindet, durch ein anderes Inhaltsmuster?

Sie könnten das vorhandene Muster löschen und ein neues Muster einfügen. Das Löschen und Einfügen von Abschnitten einer Seite ist jedoch eine Aktion mit hohem Risiko.

Wenn der Bereich, den Sie ändern möchten, ein Vorlagenteil ist, können Sie einen durch einen anderen ersetzen. Vorausgesetzt, der Autor des Themas hat sich für diesen Bereich registriert. Dies ist eine Aktion mit geringem Risiko und eine der besten Funktionen des Website-Editors.

Hier sind zum Beispiel Kopfzeilenvorlagen, die Twenty Twenty-Two registriert, wenn sie unter dem Symbolleisten-Menüelement „Ersetzen“ erscheinen:

Dies ist jedoch nicht die gesamte Palette der Header-Muster des Themas – es hat insgesamt 18. Ich kann mir vorstellen, dass die meisten Endbenutzer sie nie entdecken werden.

Einer der Nachteile beim Erstellen von Mustern für bestimmte Vorlagenteile besteht darin, dass Endbenutzer keine Möglichkeit haben, ein Teil vollständig durch ein neues Muster zu ersetzen oder umzuwandeln.

Theme-Autoren können ihre Bemühungen duplizieren, indem sie den Mustercode in den Vorlagenteil kopieren, vorausgesetzt, es ist kein PHP eingemischt. Oder sie können diese Teile erstellen und das zugehörige Muster über den Musterblock abrufen:

 <!-- wp:pattern { "slug":"namespace/slug" } -->

Das Problem bei diesem Ansatz ist, dass der Website-Editor den Musterinhalt nicht in der Dropdown-Liste „Ersetzen“ anzeigt ( habe ich gerade einen Fehler entdeckt? ):

Die Lösung sollte einfach sein. Muster, die für einen Vorlagenteil registriert sind, sollten über die Benutzeroberfläche austauschbar sein. Oder Teile, die den Musterblock verwenden, sollten im Dropdown-Menü „Ersetzen“ korrekt angezeigt werden.