Internetkurse Köln

Seit fünf Jahren nun verfolge ich nun die Entwicklung von Gutenberg. So habe ich im Laufe der Zeit verstehen gelernt (und lerne es noch immer), wie die neuen Block Themes funktionieren. Das hatte ich zwar zuvor schon von den herkömmlichen Standardthemes behauptet. Ich wäre aber bislang nicht auf die Idee gekommen, ein eigenes zu schreiben. Mit dem Full Site Editing ändert sich aber gerade auch das. Und mit dem Plugin Create Block Theme bietet das WordPress-Team eine erleichterte Möglichkeit, ein eigenes oder ein Child Block Theme zu erstellen.

Selbst ein WordPress Block Theme erstellen

Das Erstellen eines eigenen Block Themes ist sicherlich keine Aufgabe für Einsteiger. Selbst das Modifizieren eines Block Themes ist schon eine komplexe Angelegenheit. Aber wie ich Anfang des Jahres in meinem Beitrag auf dem Host Europe Blog festgestellt hatte: Ambitionierte Nutzer/innen können hier noch viel lernen. Und dies nicht nur, wenn es darum geht, vorhandene Themes an die eigenen Bedürfnisse anzupassen.

Mit dem Plugin Create Block Theme bietet WordPress nun verschiedene Möglichkeiten, ein Block Theme zu erstellen. Dies geschieht auf Basis eines anderen Block Themes wie zum Beispiel Twenty Twenty-Three. Dann kann das zu erstellende auch dessen Child Theme sein. Oder es produziert alle grundlegenden Dateien, die es für ein eigenes Block Theme braucht.

Sechs Optionen bietet das Plugin insgesamt. Und dabei produziert nicht jede von ihnen ein fertiges Block Theme. Vor allem die Option des leeren Themes erstellt genau das: ein nahezu leeres Block Theme. Böse Zungen könnten da behaupten, dass sie das auch selbst können. Aber das ist nicht der Punkt.

Der Punkt ist, dass Create Block Theme bei der Erstellung eines leeren Themes die Grundanforderungen verdeutlicht und damit eine gute Grundlage für die weitere Arbeit ist.

Überdies bietet das WordPress-Plugin die Möglichkeit, Schriftarten zu verwalten und Webfonts zu erstellen.

Das Plugin Create Block Theme dient der Entwicklung. Es ist also nicht für den Betrieb auf einer produktiven Website geeignet. Nach dem Erstellen des (Child) Block Themes kann es aber auch direkt wieder deaktiviert und gelöscht werden.

Create Block Theme Optionen …

Grundsätzlich braucht es ein aktives Block Theme wie zum Beispiel Twenty Twenty-Three, um die Optionen des Plugins nutzen zu können. Dabei muss es kein WordPress Standardtheme sein. Es muss nur ein Block Theme sein.

Die sechs Optionen erscheinen dann unter Design > Block Theme erstellen.

… Export des aktiven Block Themes

Die erste Option ist vor allem für all jene interessant, die schon viel Zeit in das Anpassen des aktiven Block Themes investiert haben. Mit dem Export werden nämlich auch alle Anpassungen berücksichtigt.

Für meinen Test habe ich Twenty Twenty-Three zugrunde gelegt und ein paar Anpassungen vorgenommen:

• So habe ich ein paar Änderungen im Stile-Editor vorgenommen und
• in der theme.json eigene Farbwerte hinterlegt.
• Außerdem habe ich in das Template Singular mittels eines Spaltenblocks eine Sidebar eingebaut.
• Schließlich habe in diesem Singular-Template auch das Beitragsbild gelöscht.

Die heruntergeladenen Dateien berücksichtigen nun genau diese Anpassungen. So zeigt meine single.html also kein Beitragsbild mehr, dafür aber den eingefügten Spaltenblock. Meine Änderungen in der theme.json sind natürlich auch vorhanden. Ebenso meine Anpassungen im Stile-Editor. Denn die werden ohnehin in der Datenbank gespeichert.

Aus der style.css geht aber noch immer hervor, dass es sich um das Twenty Twenty-Three Theme handelt. Weshalb ich nicht sicher bin, ob das Ganze ein Update überleben würde.

Auf diese Weise entsteht aber mindestens eine Sicherung der bisher erbrachten Arbeit.

… Child Theme für das aktive Block Theme erstellen

Wie man ein Child Theme für ein Block Theme erstellt, hatte ich ja schon einmal erklärt. Das ist also auch ohne dieses Plugin machbar.

Das Plugin produziert neben der passenden style.css noch die wichtige theme.json und eine readme.txt. Das war es auch schon. Eine index.php, die vor einigen Monaten noch nötig war, ist nun offenbar obsolet.

Auch ist keine functions.php dabei. Die ist aber auch nur nötig, sofern man eigene Funktionen hinzufügen möchte oder muss. Und wenn man eine functions.php hinzufügt, kann man hier auch gleich die style.css einbinden. Dann erst ist es möglich, hier auch mal eigene CSS-Definitionen zu hinterlegen. Ansonsten müsste man dafür den Design > Customizer nutzen, den es für Block Themes ja immer noch gibt.

Ebenso gibt es keine Templates oder Parts. Es sei denn, man hat wie ich eines der Templates bereits bearbeitet. In meinem Fall gibt es also einen templates-Ordner, in dem sich die bearbeitete single.html befindet.

Änderungen, die man über den Stile-Editor vorgenommen hat (ohne sie in der theme.json zu hinterlegen) bleiben vorhanden. Weil sie, wie gesagt, in der Datenbank gespeichert sind.

Mit dieser Option des WordPress-Plugins ist es also möglich, ein Child Block Theme zu erstellen, das die zuvor im Parent Theme vorgenommenen Anpassungen berücksichtigt!

Die paar Dateien stellt das Plugin als zip-Archiv zur Verfügung. Das heißt, dass man sie nach dem Entpacken auf den Server in das Verzeichnis wp-content/themes hochladen muss.

… Klonen des aktiven Block Themes

Beim Klonen des aktivierten Block Themes produziert das Plugin ein zip-Archiv mit allen Dateien und Ordnern, aus denen Twenty Twenty-Three besteht. Mitsamt allen Anpassungen, die man zuvor vorgenommen hat. Auf den ersten Blick scheint diese Option also der des Exports zu entsprechen.

Der entscheidende Unterschied geht aber aus der style.css hervor. Dort ist keine Rede mehr von Twenty Twenty-Three.

Mit anderen Worten: Über das Klonen macht man sich die Arbeit eines/einer anderen zu eigen und veröffentlicht sie unter dem eigenen Namen.

Auch wenn das sicherlich den Möglichkeiten der GNU General Public Licence entspricht (man müsste sie tatsächlich mal lesen…), mag mir dieses Vorgehen nicht wirklich schmecken.

Immerhin aber sollte dieser Klon nun unabhängig existieren und somit kein Problem mit Updates des vermeintlichen Parent Themes haben.

… Überschreiben des aktiven Block Themes

Ein wenig schräg mutet für meinen Geschmack auch diese Option an. Hier geht es darum, die BENUTZER-Änderungen als THEME-Änderungen zu speichern.

Die BENUTZER-Änderungen werden als solche gelöscht. Denn sie sind nicht mehr nötig, wenn das Theme sie als seine eigenen nutzt. Zudem sorgt der Vorgang dafür, dass das Ergebnis sofort im Theme-Ordner gespeichert wird. Es ist also kein Entpacken eines zip-Archivs mit anschließendem Upload nötig.

Ausprobiert habe ich diese Option tatsächlich noch nicht. Ich hätte halt schon gerne noch ein funktionierendes Twenty Twenty-Three, das ich jederzeit auf seine Standardwerte zurücksetzen kann.

Und weil ich es noch nicht ausprobiert habe, kann ich auch nicht sagen, was nun in der style.css steht. Ich gehe aber davon aus, dass es sich noch immer um Twenty Twenty-Three handelt. Somit bin ich auch nicht sicher, was dann durch Updates passiert.

… Leeres Block Theme erstellen

Wer von Grund auf lernen will, ein WordPress Block Theme zu erstellen, fängt mit einem leeren Theme an. Damit beschäftige ich mich aktuell.

Der Vorteil an diesem Vorgehen ist wirklich das Lernen. Denn hier geht es los mit exakt einem Template – der index.html.

Hinzukommen noch zwei Template Parts: ein Header und ein Footer.

Und die theme.json zeigt auch nur das, was sie im Zweifel glaubt, zeigen zu müssen.

Dennoch liefert die Website alles aus. Zwar sieht es nicht schön aus, was sie mit einem solch spartanischen Block Theme anzuzeigen vermag. Aber das kann man ja ändern. Und dabei viel lernen. Zum Beispiel, wie man die style.css einbindet, damit man hier auch mal eigene CSS-Definitionen hinterlegen kann.

Oder auch, wie das mit den Templates und ihrer Hierarchie so funktioniert. Daran hat sich im Vergleich zu früher nicht viel geändert. Aber der schrittweise Aufbau verdeutlicht doch sehr, wie wenig es eigentlich braucht.

… Style Variante erstellen

Sehr schön ist die Option des WordPress-Plugins, für das aktive Block Theme eine Style Variante zu erstellen. Unterm Strich bedeutet das nichts anderes, als dass das Plugin aus den im Design Editor gewählten Einstellungen eine [name].json erstellt und die in einem Verzeichnis /styles speichert.

Das Vorgehen entspricht also genau dem, was man machen würde, wollte man selbst eine Stilvorlage erstellen.

Der Vorteil liegt vor allem darin, dass man selbst nicht an der json-Datei herumschrauben muss. Auch ist hier kein Upload nötig. Das Plugin regelt alles von selbst.

Schriftarten verwalten

Überdies bietet das Plugin die Option, die Schriftarten zu verwalten. Was in Zeiten, in denen das Beziehen der Schriftart über eine stete Verbindung zu Google Fonts keine Option mehr ist (siehe hierzu zum Beispiel Abmahnung wegen Google Fonts – Ratgeber mit FAQ), sicherlich eine Bereicherung.

Die Option des Verwaltens von Schriftarten bietet zum einen die Möglichkeit, die vom Block Theme mitgelieferten Schriftarten zu entfernen. Das ist schon mal sehr nett. Denn wozu sollten die auf dem eigenen Server noch vorhanden sein, wenn man sie gar nicht benutzt.

Zudem bietet das Plugin aber auch die Möglichkeit, aus einer extrem langen Liste an Google Fonts die Schriftart auszuwählen, die man nun nutzen möchte. Und dann produziert das Plugin die notwendigen Webfont-Dateien und baut sie zur Nutzung in die theme.json ein.

Das bedeutet, dass die gewählte Schriftart nun im Design Editor in der Auswahl zur Verfügung steht.

Im Vergleich zum manuellen Vorgehen – sei es nun die Änderung der Schriftart im Block Theme oder in einem herkömmlichen Theme – ist das wirklich mal eine echte Erleichterung.

---

Beitragsbild: Britta Kretschmer