v0 ist das KI-Werkzeug von Vercel. Man beschreibt in einem Satz, was man bauen möchte, und bekommt eine fertige Weboberfläche zurück: React-Code mit Tailwind CSS und daneben eine Vorschau, die man sofort ausprobieren kann.

Interessant finde ich den Design Mode. Statt den nächsten Prompt zu formulieren, klickt man ein Element an und ändert Abstand, Farbe oder Schriftgröße direkt im Ergebnis. Dazu lassen sich eigene Designsysteme anlegen, also Farben, Typografie und Stile, die in allen Projekten gelten. Das ist der Punkt, an dem so ein Werkzeug für Designer:innen wirklich brauchbar wird.

Ollama holt offene Sprachmodelle auf den eigenen Rechner: ein Befehl im Terminal lädt ein Modell aus der Bibliothek und startet es, auf macOS, Windows oder Linux. Andere Programme sprechen das Modell über eine Schnittstelle an, die sie schon von OpenAI kennen, deshalb lässt sich zum Beispiel Hermes Agent direkt daran anschließen. Open Source unter MIT-Lizenz.

Nous Research nennt Hermes Agent „The Agent That Grows With You“: ein Open-Source-Agent unter MIT-Lizenz, der sich Projekte und einmal gefundene Lösungen merkt. Er ist über Telegram, Discord, Slack, WhatsApp, Signal, E-Mail oder das Terminal erreichbar, plant Aufgaben in normaler Sprache und gibt größere Arbeiten an eigene Unteragenten ab. Es gibt eine App für macOS und Windows, auf Linux läuft er im Terminal.

Das Sprachmodell dahinter ist frei wählbar: Nous Portal und andere Cloud-Anbieter, oder über Ollama ein Modell auf dem eigenen Rechner. Dann bleibt die KI lokal.

Es gibt nur sehr wenige Jobs, bei denen ich keine KI finde, die es schneller und günstiger erledigt als du, sobald ich aufschreiben kann, was du den ganzen Tag machst. Du willst also einen Job, bei dem ich nicht aufschreiben kann, was du den ganzen Tag machst.

Ich habe „The Knot“ noch nicht gelesen, aber es steht auf meiner Leseliste und ist gerade zu meinem nächsten Buch geworden. Der Satz ist eine so gute Erinnerung daran, dass wir uns nicht länger hinter Beschäftigtsein verstecken können, und ehrlich gesagt fühlt sich das wie ein Geschenk an: Es ist unsere Chance, endlich aufzutauchen und die Arbeit zu machen, von der wir immer geträumt haben.

Mit Moog haben wir uns etwas getraut, das wir lange vermieden haben: ein Theme, das nicht zurückhaltend sein will. Die Schriften sind groß und kräftig, die Farben satt, die Abstände großzügig. Moog ist für Blogs gedacht, die eine eigene Handschrift haben und sie auch zeigen wollen, egal ob es um Kunst, Musik, Reisen oder das eigene Leben geht.

Das Theme ist vollständig für den Site-Editor gebaut. Es gibt keine Theme-Optionen und keinen Customizer mehr, alles, was du an Moog veränderst, veränderst du direkt in WordPress: die Kopfzeile, die Fußzeile, die Vorlagen für Beiträge, Seiten und Archive. Was du siehst, ist auch das, was deine Leser:innen sehen.

Stilvarianten statt Optionen

Der Kern von Moog sind seine Stilvarianten. Jede Variante ist eine vollständige Gestaltung aus Farbpalette, Schriftpaar und Abständen. Du wählst sie mit einem Klick unter Stile im Site-Editor, und die gesamte Website zieht sich um, ohne dass du eine einzige Vorlage anfassen musst. Eine Variante ist hell und ruhig, eine dunkel, eine bunt und laut. Welche zu deinem Blog passt, siehst du sofort in der Vorschau.

Natürlich musst du nicht bei den Varianten bleiben. Jede lässt sich weiter anpassen, du kannst einzelne Farben tauschen, andere Schriften wählen oder deine eigene Palette anlegen. Die Varianten sind Startpunkte, keine Grenzen.

Vorlagen und Vorlagenteile

Moog bringt Vorlagen für die Startseite, einzelne Beiträge, Seiten, Archive, die Suche und die 404-Seite mit. Dazu kommen mehrere Vorlagenteile für Kopf- und Fußzeile, die du im Site-Editor austauschen und bearbeiten kannst. Beitragsbilder, ein eigenes Logo und ein Website-Icon werden wie gewohnt unterstützt.

Moog ist kostenlos und quelloffen. Du findest das Theme im Verzeichnis auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

Mugistore ist ein Theme für Shops, die nicht wie ein Warenhaus aussehen wollen. Wir haben es für kleine Läden mit einer überschaubaren Auswahl gestaltet: eine Rösterei mit zwölf Kaffeesorten, ein Teeladen, ein Label für Naturkosmetik, eine kleine Modemarke. Das Design ist ruhig, modern und hält sich zurück, damit die Produktfotos den Ton angeben.

Das Theme setzt auf WooCommerce und die neuen WooCommerce-Blöcke. Shop-Seite, Produktseite, Warenkorb und Kasse sind Vorlagen im Site-Editor, die du wie jede andere Seite bearbeitest. Mugistore ist damit eines unserer ersten Themes, bei dem der komplette Shop ohne Theme-Optionen auskommt.

Für den Site-Editor gebaut

Alle Vorlagen und Vorlagenteile von Mugistore werden im Site-Editor bearbeitet. Kopfzeile mit Warenkorb-Symbol, Fußzeile mit Zahlungsinformationen, die Startseite mit Produktgruppen und einem Bereich für Aktionen, alles ist aus Blöcken gebaut und lässt sich verschieben, ersetzen oder entfernen. Farben und Schriften stellst du unter Stile ein und bekommst sofort eine Vorschau.

Mugistore bringt Muster für typische Shop-Bereiche mit: einen Hero mit Produktfoto, eine Reihe mit ausgewählten Produkten, eine Vorstellung des Ladens, einen Bereich für die Newsletter-Anmeldung. Die Muster fügst du auf jeder Seite ein und passt sie mit deinen Inhalten an.

Was du brauchst

Mugistore benötigt das WooCommerce-Plugin und unser Aino Blocks Plugin. Aino Blocks liefert einige Layout-Blöcke, auf denen die Muster des Themes aufbauen. Beide Plugins sind kostenlos.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

SolarOne ist ein Theme für Agenturen, Studios und Freiberufler:innen, die ihre Arbeit und ihr Team vorstellen wollen. Es ist klar und hell gestaltet, mit viel Weißraum und großen Überschriften, und lässt sich in wenigen Schritten zu einer vollständigen Unternehmenswebsite ausbauen.

Das Besondere an SolarOne ist die Arbeitsweise. Statt fertiger Seitenvorlagen mit Optionen bringt das Theme eine Sammlung von Mustern mit, die du wie Bausteine zusammensetzt: ein Hero mit Aussage und Bild, eine Vorstellung der Leistungen, eine Galerie mit Projekten, ein Bereich mit dem Team, Kundenstimmen, ein Kontaktbereich. Jede Seite entsteht aus diesen Bausteinen im Editor.

Für den Site-Editor gebaut

Kopfzeile, Fußzeile und alle Vorlagen für Seiten, Beiträge und Archive werden im Site-Editor bearbeitet. Farben und Schriften stellst du unter Stile ein. SolarOne bringt eine helle und eine dunkle Palette mit, du kannst aber auch eigene Farben anlegen und die Schriften austauschen.

Die Muster von SolarOne bauen auf den Layout-Blöcken unseres Aino Blocks Plugins auf, vor allem auf dem Grid-Block und dem Advanced-Container-Block. Damit lassen sich Spalten, Abstände und Hintergründe genauer einstellen als mit den Standard-Blöcken.

Was du brauchst

SolarOne benötigt das kostenlose Aino Blocks Plugin. Ohne das Plugin werden die Muster des Themes nicht vollständig angezeigt.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

Keine CSS-Workarounds mehr, um z. B. das Datum oder den Autorennamen auf deinem Blog zu verbergen. Du kannst den entsprechenden Autor- oder Datum-Block direkt im Editor löschen.

Das ist nicht nur einfacher, sondern auch sehr saubererer Code.

Aber wie sollst du loslegen? Und was solltest du beachten, wenn du nach einem geeigneten Block-Theme für deine Website suchst? Welche Schritte sind nötig, um eine bestehende WordPress-Seite von einem klassischen Theme zu einem Block-Theme umzuziehen? 

Um dich zu unterstützen, habe ich eine Anleitung in 10 Schritten vorbereitet:

1. Webseite auf Kompatibilität prüfen

Als Erstes solltest du schauen, dass deine Webseite die neuste WordPress Version 6 nutzt. Wenn du ein WooCommerce-Shop hast, würde ich dir derzeit noch nicht zu einem Block-Theme raten, da WooCommerce im Moment daran arbeitet, alle WooCommerce-Templates mit Blöcken umzubauen. Derzeit bist du daher noch auf das extra Plugin WooCommerce Blocks angewiesen und einige Funktionen sind noch eingeschränkt. Ich werde hier auf dem Blog berichtet, wenn WooCommerce mit Block-Themes zu hundert Prozent kompatibel ist.

2. Block-Theme wählen

Wir haben auf AinoBlocks.io schon erste Premium Block-Themes veröffentlicht. Weitere kostenlose Block-Themes findest du im WordPress.org Theme-Verzeichnis unter dem Filter “Full Site Editing”. Dort findest du auch unser kostenloses Aino Starter-Theme.

3. Header- und Footer-Aufbau notieren

Da Header und Footer von Block-Themes komplett mit Blöcken gebaut sind, musst du diese beiden Elemente nach dem Themewechsel neu aufbauen. Daher ist es sinnvoll, eine Skizze zu machen und aufzuschreiben, welche Menüpunkte du in deinem Header und Footer benötigst.

Das ist zwar etwas arbeitet, der große Vorteil ist dann aber, dass du zukünftig den Header und Footer in deinem Block-Theme sehr viel einfacher selbst anpassen kannst. Du kannst alle Elemente im visuellen Editor verschieben und anordnen, wie du es möchtest. In klassischen Themes waren diese kleinen Anpassungen (z. B. ein Logo mittig zu platzieren, oft nicht so leicht möglich).

Es wird auch möglich, unterschiedliche Header auf unterschiedlichen Seiten einzusetzen. Viele Block-Themes bieten eine Anzahl von Header- und Footer-Vorlagen (Patterns) an, aus der du dein favorisiertes Design wählen kannst.

4. Theme wechseln

Jetzt kannst du das Theme unter Design/Themes wechseln, indem du dein neues Block-Theme installierst und aktiviert.

5. Benötigte Block-Plugins installieren

Manche Block-Themes benötigen spezielle Blöcke oder ein Block Collection Plugin, das du nach der Theme-Aktivierung installieren musst.

In unseren Themes nutzen wir beispielsweise unser AinoBlocks Plugin.

Je nachdem, was du auf deiner Webseite zeigen möchtest, kannst du auch noch einzelne Blöcke wie ein Timeline, Accordion oder Notification Banner Block installieren.

Wird ein bestimmter Block in einem Theme benötigt, bekommst du dies oft über eine Nachricht im WordPress Dashboard angezeigt.

6. Block-Header erstellen

Jetzt kannst du loslegen, deinen neuen Header einzurichten. 

Leider musst du diesen Schritt einmalig neu machen, da Header und Footer in Block-Themes mit Blöcken gebaut sind, was eine ganz neue Technik ist. Header-Inhalte können daher nicht automatisch von deinem vorherigen Theme übernommen werden.

Die meisten Block-Themes bieten aber Beispielinhalte im Header und Footer an. Du musst deinen Header also nicht selbst aufbauen, sondern lediglich die Beispielinhalte mit deinen eigenen Inhalten austauschen.

Um das Editor-Menü zu öffnen, klicke auf Themes/Editor und dann auf das Logo (WordPress oder dein eigenes Webseiten-Logo). Klicke dann auf Template-Teile und wähle das Header Template-Teil aus der Liste der Template-Teile aus.

Im visuellen Editor kannst du jetzt den Logo-Block nutzen, um dein eigenes Logobild hochzuladen. Alternativ gibt es auch einen Site Title Block, wenn du deinen Webseitentitel lieber in geschriebener Form anzeigen möchtest.

Du kannst den Navigations-Block nutzen, um deine Menüpunkte in die Navigation einzubinden. Manche Block-Themes nutzen außerdem noch den Social Icons Block im Header, mit dem du auf Instagram, Twitter etc. linken kannst. Eventuell kannst du auch den Suche-Block einfügen.

Je nach Theme kann es sein, dass du auf mehreren Header-Vorlagen auswählen kannst.

In diesem Fall kannst du den Header mit einer alternativen Vorlage ersetzen. Dazu klickst du den Header an, was am einfachsten über die Listen-Ansicht geht. 

Sobald der Header angeklickt ist, siehst du in der Toolbar des Editors den Ersetzen-Button. Wenn du diesen anklickst, sieht du eine Vorschau aller alternativen Header-Vorlagen und du kannst eine auswählen.

7. Block-Footer erstellen

Nachdem du den Header eingerichtet hast, musst du das gleiche beim Footer machen.

Auch hier kann es sein, dass du aus unterschiedlichen Footer-Vorlagen wählen kannst. Viele Block-Themes bieten z. B. eine helles und ein dunkles Footerdesign an.

Die Vorlagen sind auch im Footer mit Beispielinhalten gefüllt, sodass du diese nur mit eigenen Inhalten austauschen musst.

8. Farben und Schriften in Styles auswählen

Statt über den Customizer werden in Block-Themes allgemein gültige Themeeinstellungen wie Farben und Schriften in Styles festgelegt. Block-Themes benötigen den Customizer nicht mehr. 

Klicke auf den kleinen halb hell, halb dunklen Kreis oben rechts im Editor, um die Styles Einstellungen zu öffnen.

Hier findest du die Option, deine Schriften zu wählen. Jedes Block-Theme liefert eine Auswahl an Schriften mit.

In Styles kannst du auch die Farb-, Verkaufs- und Duotone-Paletten des Themes anpassen und zusätzlich eine eigene Farbpalette anlegen.

Zusätzlich kannst du die Grundeinstellungen der im Theme verwendeten Blöcke anpassen. So kannst du z. B. alle Überschriften im Überschrift-Block standardmäßig aus fett setzen. 

So musst du dann nicht später bei jeder Nutzung des Überschrift-Blocks den Schriftschnitt neu einstellen.

9. Seiten-Templates

Da Block-Themes liefern meist eine Anzahl an eigenen Seiten-Templates mit. Diese kannst du in deinen Seiten auswählen. 

Öffne dazu eine Seite und wähle das gewünschte Template aus. 

Du kannst diese Templates auch im Editor anpassen, indem du das Editor-Menü öffnest. Unter Templates siehst du die Liste aller Theme-Templates. 

Du kannst jedes der mit Blöcken gebauten Templates im Editor an deine Bedürfnisse anpassen.

10. Plugins installieren, um Customizer-Optionen zu ersetzen (wenn nötig)

Wie schon oben erwähnt, benötigen Block-Themes keinen Customizer mehr, da alle Anpassungen entweder in Styles oder über die Templates vorgenommen werden.

Wenn du kein Plugin aktiv hast, das den Customizer benötigt, wird der Customizer nicht mehr als Menüpunkt angezeigt.

Solltest du Funktionen, wie eigenes CSS oder die Option ein Favicon zu integrieren benötigst, kannst du stattdessen ein entsprechendes Plugin installieren.

Eine statische Homepage kannst du unter Einstellungen/Lesen einrichten.

Fazit

Wie du siehst, ist der Wechsel zu einem Block-Theme gar nicht so aufwendig, wie es vielleicht anfangs scheint. Ja, es ist ein bisschen Arbeit nötig, aber du bekommst durch ein Block-Theme so viele tolle neue Möglichkeiten, dass sich ein Wechsel meiner Ansicht nach auf jeden Fall lohnt. Hinzu kommt, dass dir Block-Themes die modernste Technik bieten und damit u. a. auch eine verbesserte Webseiten-Performance bieten.

Auf langfristig werden alle Themes Block-Themes sein, es ist also durchaus von Vorteil gleich von Beginn an auf diese neue Technik zu setzen und so das Modernste, was WordPress zu bieten hat, für die eigene Webseite zu nutzen.

Wenn du Fragen hast oder du die bei etwas noch nicht so sicher bist, schreibe mir einfach einen Kommentar oder melde dich auf Twitter oder Instagram. Ich freue mich, von dir zu hören.

Alle Bereiche einer WordPress-Webseite (also auch der Header, Footer, die Suche oder das Blog-Archiv) können jetzt in einem visuellen Editor bearbeitet werden und nicht nur wie bisher üblich Seiteninhalte und Blogbeiträge.

Bisher waren wir es schon gewohnt, Seiten und Blogbeiträge mit Blöcken zu bauen. Jetzt kannst du zusätzlich jeden Bereich deiner WordPress-Website im visuellen Block-Editor bearbeiten, ohne dass du dazu ein Page-Builder Plugin benötigst.

Full Site Editing

Um auf die neuen Bereiche zuzugreifen, kannst du in einem Block-Theme den Editor (Beta) unter Design in deinem WordPress Admin-Menü öffnen. Der neue Editor sieht genauso aus, wie der Block-Editor, den du von Seiten und Beiträgen gewohnt bist. Beim ersten Öffnen siehst du die Startseite, die du unter Einstellungen/Lesen angeben kannst. Wenn du keine statische Startseite nutzt, wird der Blog-Index angezeigt.

Du kannst auch eine Übersichtsliste aller zu bearbeitenden Bereiche (Templates und Template-Teile)  im Editor aufrufen. Dazu klickst du oben links auf das WordPress Logo oder auf das Logo deiner Webseite, solltest du ein Favicon auf deiner Webseite nutzen.

Templates und Template-Teile

Wenn die Editor-Sidebar geöffnet ist, kannst du die Listen aller Templates und Template-Teile eines Block-Themes öffnen. Du kannst auch eigene Templates und Template-Teile erstellen.

Stile

Stile sind ein weiterer neuer Bereich von Block-Themes. Stile ersetzt viele Bearbeitungsoptionen, die bei klassischen Themes im Customizer zu finden waren. Du kannst die Optionen unter Stile öffnen, indem du oben rechts im Editor das kleine halb helle und halb dunkle Kreis-Icon anklickst.

In den Stile-Einstellungen kannst du die Schriften und Farbpaletten des Themes und die Standard-Einstellungen aller aktiven Blöcke anpassen.

Derzeit ist Stile ebenfalls noch in der Beta-Version. Es wird meiner Ansicht mit weiteren Updates noch ein sehr hilfreiches und mächtiges WordPress-Tool werden. Zum Beispiel können eigene Stile-Einstellungen dann auch exportiert und in eine andere WordPress-Installation importiert werden.

Was ist der Unterschied zwischen Full Site Editing und WordPress Page Buildern?

Ein Block-Theme mit den neuen Full Site Editing Features zu nutzen, statt sich auf ein Page Builder-Plugin zu verlassen hat den großen Vorteil, dass man auf ein Core Feature von WordPress setzt. So macht man sich nicht von einem externen WordPress-Plugin abhängig. 

Viele Page Builder Plugins liefern außerdem sehr viel mehr Optionen, als eine WordPress-Webseite in den allermeisten Fällen benötigt. Das kann die Website-Performance verlangsamen und die vielen Optionen sind für Einsteiger meist unnötig kompliziert.

Bereit für die Zukunft von WordPress

Klar, derzeit sind die Optionen von Block-Themes und Full Site Editing noch reduziert. Aber das wird sich mit jedem WordPress-Update ändern. WordPress bietet mit Block-Themes erstmals eine eigene Core Lösung für viele der Probleme an, die WordPress-Nutzer in den letzten Jahren zum Straucheln gebracht haben. Meiner Ansicht nach ist es sinnvoll, gleich zu Beginn auf die neuste Technik zu setzen, die in WordPress zur Verfügung steht.

Wir arbeiten jetzt seit Mitte letzten Jahres mit Block-Themes, als diese erstmals und anfangs noch mithilfe des Gutenberg-Plugins entwickelt werden konnten. Seitdem hat sich schon so unendlich viel getan und es ist beeindruckend, wie viele er anfänglichen Probleme gelöst werden konnten und wie viel besser das Arbeiten mit Block-Themes geworden ist.

Fazit

In diesem Moment ist ein Block-Theme vielleicht noch nicht die geeignete Lösung für jede WordPress-Webseite. Ich würde im Moment zum Beispiel noch etwas warten, einen größeren WooCommerce-Shop auf ein Block-Theme umzuziehen.

Dennoch ist es sinnvoll, mit der Entwicklung mitzugehen und sich nicht vor neuem zu verschließen. So kann man Schritt für Schritt mehr über die neuen Features lernen. Für Business-Webseiten, Portfolios, Blogs und Magazin-Webseiten sind Block-Themes auf jeden Fall schon sehr gut geeignet.

Um Feedback zu geben, kannst du dem WordPress Community Slack-Kanal #fse-outrech-experiment folgen. Auf Learn WordPress und auf unserem YouTube-Kanal gibt es hilfreiche Tutorials und Workshops.

Wenn du Fragen zum Thema Block-Themes und FSE hast, schreib mir einen Kommentar oder melde dich auf Twitter. Ich freue mich, von dir zu hören.

Kori ist ein Theme für Websites, die auf eine einzige Seite passen: die Vorstellung einer Person, ein Produkt, eine Veranstaltung, ein kleines Studio. Alles steht untereinander, Abschnitt für Abschnitt, und die Besucher:innen scrollen sich von oben nach unten durch die ganze Geschichte.

Das Design ist ruhig und aufgeräumt, mit großen Abschnitten, die sich durch Hintergrundfarben voneinander absetzen. Das Menü in der Kopfzeile springt zu den einzelnen Abschnitten auf derselben Seite, statt neue Seiten zu laden.

Aus Abschnitten gebaut

Kori bringt Muster für die typischen Abschnitte einer einseitigen Website mit: einen Hero mit einer Aussage, eine Vorstellung, Leistungen, eine Bildergalerie, Zahlen und Fakten, Kundenstimmen, Preise und einen Kontaktabschnitt. Du fügst die Abschnitte im Editor ein, ordnest sie in der Reihenfolge, die deine Geschichte braucht, und tauschst Texte und Bilder aus.

Kopfzeile, Fußzeile und alle Vorlagen werden im Site-Editor bearbeitet. Farben und Schriften stellst du unter Stile ein, und Kori bringt mehrere Paletten mit, zwischen denen du wechseln kannst.

Was du brauchst

Kori benötigt das kostenlose Aino Blocks Plugin. Die Muster des Themes bauen auf dessen Layout-Blöcken auf.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

Makoney ist ein Theme für Blogs und Magazine mit vielen Beiträgen. Die Startseite ist ein Raster: ein großer Aufmacher, darunter die neuesten Beiträge in Spalten, dann Rubriken mit ihren jeweils letzten Artikeln. Wer viel schreibt, bekommt mit Makoney eine Startseite, die das auch zeigt.

Das Design ist klar und sachlich, mit einer kräftigen Überschriftenschrift und viel Raum für Beitragsbilder. Makoney war unser erstes Block-Theme, das für den Site-Editor gebaut wurde, und hat vieles vorgemacht, was unsere späteren Themes übernommen haben.

Für den Site-Editor gebaut

Kopfzeile, Fußzeile und alle Vorlagen für die Startseite, Beiträge, Seiten, Archive und die Suche werden im Site-Editor bearbeitet. Die Rasterbereiche auf der Startseite sind Abfrage-Blöcke, du kannst also selbst festlegen, welche Kategorie in welchem Bereich steht und wie viele Beiträge gezeigt werden.

Makoney bringt Muster für die Startseite mit, etwa einen Aufmacher mit großem Bild, eine dreispaltige Reihe mit den neuesten Beiträgen und einen Rubrikenbereich mit Überschrift und Link zum Archiv. Farben und Schriften stellst du unter Stile ein.

Was du brauchst

Makoney benötigt das kostenlose Aino Blocks Plugin, auf dessen Layout-Blöcken die Muster des Themes aufbauen.

Das Theme ist kostenlos und quelloffen. Du findest es auf WordPress.org und den Code auf GitHub, wo wir uns über Fehlerberichte und Vorschläge freuen.

Momentan ist die Datei noch in der ersten Version und etliches steckt noch in der Entwicklung. Ich halte es aber für sehr wichtig, als Theme-Entwickler bei den derzeitigen Entwicklungen genau hinzugucken und mitwirken. So können wir von Anfang an lernen, wie die neuen Block-Themes aufgebaut sind und welche Vorteile das für die Entwicklung von WordPress-Themes mit sich bringt.

Warum brauchen Block Themes eine theme.json Datei?

Eine JSON Datei (JSON steht für JavaScript Object Notation) ist eine Datei in einem leicht lesbaren Textformat, die wichtige Daten beinhaltet.

In der theme.json Datei kann ein Themeautor seit Neustem grundlegende Elemente wie die Themebreite, die genutzten Schriften, Schriftgrößen und Farben eines Themes definieren.

Zusätzlich können spezielle Stile und Farbpaletten für einzelne Blöcke definiert werden. Der Themenutzer kann sich diese Stile dann über die globalen Stile im Site Editor individuell anpassen.

Der große Vorteil dabei ist, das Themenutzer so die Möglichkeit haben leicht die Stile des Themes für ihre Webseite anzupassen. Bisher haben Themes solche Anpassungsoptionen über den Customizer angeboten. Dort gab es allerdings kein einheitliches System und jedes Theme hat die Customizer-Einstellungen ein bisschen anders gelöst. Die Benutzerfreundlichkeit des Customizers war so nie optimal. Hinzu kommt, dass der Code für Anpassungen im Customizer komplex und unflexibel war.

Die theme.json Datei bringt da einen ganz frischen Wind in die Themewelt von WordPress und bietet eine einheitliche Handhabung für Theme-Entwickler und Nutzer.

Der Aufbau der theme.json Datei

Im Moment besteht eine theme.json Datei aus Bereichen Settings, Styles und Custom Templates/Template Parts.

Settings

In den Settings werden die globalen Stile des Themes definiert. Hier legst du die allgemeinen Farben, Dualtöne und Verläufe an. Auch die Schriftfamilien und Schriftgrößen werden unter Settings festgelegt. Zusätzliche Schriftoptionen wie text transforms, text decoration und die Option für eigene Schriftgrößen und eigene line-heights stehen ebenfalls in den Settings.

Ein weiterer wichtiger Punkt unter Settings ist Layout. Hier sagst du welche Standardbreite und weite Breite dein Theme haben soll.

"layout": {"contentSize": "690px","wideSize": "1400px"}

Unter Settings kannst du außerdem bestimmen, welche Spacing und Border Settings du in deinem Theme aktivieren möchtest.

"spacing": {"blockGap": true,"margin": true,"padding": true,"units": [	"%",	"px",	"rem",	"vh",	"vw"	]},"border": {"customColor": true,"customRadius": true,"customStyle": true,"customWidth": true}

Optional kannst du in den Settings deiner theme.json Datei auch eigene CSS Variablen anlegen. Im Aino-Theme nutzen wir diese Option zum Beispiel für Farb-Variablen, eine Heading- und Body Schriftvariablen und für eine Standard line-height.

"custom": {"color": {"background-primary": "var(--wp--preset--color--background-primary)","background-secondary": "var(--wp--preset--color--background-secondary)","button-color-primary": "var(--wp--preset--color--button-color-primary)","button-color-secondary": "var(--wp--preset--color--button-color-secondary)","font-primary": "var(--wp--preset--color--font-primary)","font-secondary": "var(--wp--preset--color--font-secondary)","font-tertiary": "var(--wp--preset--color--font-tertiary)","primary": "var(--wp--preset--color--primary)","secondary": "var(--wp--preset--color--secondary)","star-rating": "var(--wp--preset--color--star-rating)"},"line-height": {"body": 1.4,"heading": 1.1},"body": {"typography": {"fontFamily": "var(--wp--preset--font-family--arimo)"}},"heading": {"typography": {"fontFamily": "var(--wp--preset--font-family--arimo)"}}}

Du kannst auch Standard-Settings für einzelne Blöcke festlegen und so zum Beispiel Blöcken eine eigene Farbpalette geben.

Styles

Unter Styles kannst du zum einen bestimmen, welche Standardwerte dein Theme nutzen soll. Das ist hilfreich, um die Hintegrundfarbe des Themes zu bestimmen und festzulegen, welches deine Standardschrift ist und welche Styles sie hat.

Zusätzlich kannst du unter Styles die Standardwerte einer Blöcke definieren. So kannst du zum Beispiel die Schriftfamilie und Schriftfette der Beitragsüberschriften festlegen.

Custom Templates und Template Parts

Der letzte Bereich der theme.json Datei ist dazu da, die Seiten Templates und Template-Teile eines Themes anzulegen. Hier musst du alle html-Dateien angeben, die du in deinem Theme in den Ordnern „block-templates“ und „block-template-parts“ angelegt hast.

"customTemplates": [	{		"name": "blank",		"title": "Blank",		"postTypes": [			"page",			"post"		]	},	{		"name": "page-home",		"title": "Homepage",		"postTypes": [			"page"		]	}	],"templateParts": [	{		"name": "header",		"title": "Header",		"area": "header"	},	{		"name": "footer",		"title": "Footer",		"area": "footer"	}],

Die Dateien müssen einen Namen und einen Titel haben und es muss definiert sein, in welchem Bereich die Dateien nutzbar sein sollen.

Alle hier angelegten Dateien können dann später vom Themenutzer im Site Editor angepasst werden.

Theme.json in klassischen Themes

Die Möglichkeiten, die wir durch die theme.json Datei bekommen ersetzen die Einstellnugen, die bisher mit add__theme__support in der functions.php Datei definiert wurden.

Auch klassische Themes können eine theme.json Datei nutzen und so die functions.php Datei aufräumen. Es ist also möglich schrittweise die neuen Optionen der Block-Themes zu nutzen.

Fragen und Feedback

In der WordPress-Welt passiert gerade so viel Neues und es ist schwierig, bei all den Themen up to date zu bleiben. Vor allem Theme-Entwickler stehen derzeit unter einem gewissen Druck, sich auf die neuen Block-Themes vorzubereiten. Ich möchte daher teilen, was wir bisher gelernt haben.

Hast du selbst bereits erste Erfahrungen mit der theme.json Datei gemacht? Wenn ja, wie bist du zurechtgekommen und was hat dir gefallen oder nicht gefallen? Welche Vorteile oder Schwierigkeiten siehst du für die Entwicklung von WordPress-Themes in der Zukunft? Schreibe mir doch deine Fragen und deine Einschätzung in einem Kommentar. Ich freue mich von dir zu hören.

Hilfreiche Resourcen zum Weiterlesen:

• Theme.json Introduction des WordPress core Developer Team (von Juni 2021)
• Gutenberg Handbook
• FullSiteEditing.com
• Gutenberg Times Video Panel zum Thema theme.json
• Theme json Horizon von Mathis Ventura