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

Juli und August sind die Wintermonate hier in Neuseeland. Das bedeutet, die Tage sind kurz bei uns, auf der Nordinsel regnet es sehr viel. Glücklicherweise war das genau die richtige Jahreszeit, um sich zurückzuziehen und unser Aino-Projekt weiter voranzubringen.

Aino als Full Site Editing Block-Theme

Wir arbeiten ja inzwischen schon relativ lange an Aino. Erst haben wir ausführlich uns mit dem Bauen von Blöcken beschäftigt. Da diese mit React gebaut sind, hat die Einarbeitung so seine Zeit gedauert. Es war auch nicht ganz klar, wohin die Reise mit dem Gutenberg-Editor eigentlich hingeht und wir haben die Zeit genutzt, viel zu experimentieren und zu lernen.

Jetzt haben wir das Gefühl, das unsere Arbeit endlich zusammen kommt und wir sind froh, dass wir uns die Zeit genommen haben zu experimentieren und zu lernen. Mit WordPress 5.8 Ende Juni ist dann der Startschuss gefallen, Full Site Editing in den WordPress Block Editor zu integrieren. Wir wussten sofort, dass Aino das perfekte Projekt ist, um in die Welt der neuen Block-Themes einzusteigen.

Gesagt getan und der Juli war komplett dem Umbau von Aino als Full Site Editing Block-Theme gewidmet. Ich habe bereits eine Übersicht über unsere Erfahrungen geschrieben. In einer kleinen Blogbeitragsserie berichte ich außerdem mehr darüber, wie Block-Themes technisch aufbaut sind.

Was kommt als nächstes

Ich hatte ja bereits in meinem letzten Blogbeitrag zum Aino Block-Theme Umzug berichtet, dass wir auch daran arbeiten, einige gewisse Anzahl unser klassischen Themes als Block-Themes upzudaten. Wir planen im Oktober mehr darüber berichten zu können. Zuki ist das erste Theme, mit dem wir den Umzug als Block-Theme testen wollten. Testen sagen wir daher, da wir noch nicht zu 100% sagen können, wie so ein Umzug aussehen wird. Daher haben wir uns vorgenommen, einen solchen Umzug mit einem Theme zu testen und dann zu entscheiden, welche Vorgehensweise die beste ist.

Am 7. Oktober bin ich außerdem beim Live Q&A Panel von Birgit dabei sein. Auch hier werden wir uns über den Umzug von klassischen Themes zu Block-Themes unterhalten. Ich bin schon sehr gespannt. Du kannst dich vorab registrieren, um live mit dabei zu sein. Es können dann während des Panels Fragen gestellt werden.

Einer meiner großen Vorsätze für die kommenden Monate ist es auch wieder mehr zu schreiben, auf dem Aino-Blog und hier auf Elma Studio. Wenn ihr Ideen und Vorschläge für Blogbeiträge habt, würde ich diese sehr gerne hören. Auch wenn ihr allgemeine Anregungen habt oder Feedback, schreibt mir doch einfach einen Kommentar. Ich freue mich immer von euch zu hören.

Alle Elemente der Webseite, also Header, Footer und alle Seiten-Templates, sind über den neuen Site Editor bearbeitbar. Alle Style-, Typografie- und Farbeinstellungen nimmt man ebenfalls im Site Editor in den Global Styles vor. Hier kann man auch globale Einstellungen per Block anpassen.

Das Resultat wird sein, dass Nutzer ihre WordPress-Webseite sehr viel flexibler anpassen können und Layout-Anpassungen nicht mehr so Theme-abhängig sind. Stattdessen speicherst du Anpassungen in eigenen Seiten-Templates und Seiten-Template-Teilen und diese Anpassungen bleiben dir dann erhalten, auch wenn du das Theme wechselt.

Was macht Block-Themes so anders?

Soweit so gut, aber was ändert sich in diesen neuen Block-Themes eigentlich für Entwickler? Was müssen wir beachten und wird das Bauen neuer Themes oder das Anpassen von Themes durch Block-Themes einfacher oder schwieriger?

Block-Theme versus Block-ready Theme

An dieser Stelle sollte ich vielleicht kurz zwischen dem schon länger bekannten Begriff block-ready Theme und Block-Theme unterscheiden. Block-ready wird ein Theme genannt, wenn es Blöcke und die Arbeit im WordPress Block-Editor unterschützt. Für Themeanpassungen wird in diesen Themes aber weiter der Customizer genutzt. Header und Footer eines block-ready Themes werden weiterhin über Customizer-Einstellungen angepasst und die Theme-Dateien sind PHP-Dateien.

Die Block-Theme Dateien

Block-Themes sind Themes, die für die Full Site Editing Features vorbereitet sind. Full Site Editing ist derzeit noch in der Entwicklung und mit den kommenden WordPress Versionen 5.9 und 6.0 werden diese Features noch weiter ausgebaut. Gemeint ist aber, dass alle Elemente einer WordPress-Seite mit Hilfe des Block-Editor angepasst werden können. Für Themes bedeutet das, dass alle Elemente eines Themes aus Blöcken gebaut sein müssen. Daher kommt dann auch die Bezeichnung Block-Theme.

Block Templates und Block Template Parts

Technisch wird das so umgesetzt, dass Block-Themes aus HTML-Dateien aufgebaut sind. Die Dateien-Struktur bleibt dabei aber die gleiche. Es gibt weiterhin die index.html Datei (davor index.php), die die Inhalte der Haupt-Query hält.

Weiter hat ein Block-Theme eine page.html, archive.html, single.html Datei usw. all diese Template-Dateien eines Block-Themes werden in den „block-templates“ Ordner einsortiert.

Für Template-Elemente, die häufiger genutzt werden, legt man zusätzlich den „block-templates-parts“ Ordner an. Hier kannst du die Header und Footer HTML-Dateien eines Themes ablegen. Ich sage Dateien, da ein Block-Theme gerne mehrere Header und Footer HTML-Dateien haben kann. So können Nutzer dann entscheiden, welchen Header und Footer sie auf welchem Seiten-Template nutzen möchten. Es wird also sehr viel einfacher Header mit unterschiedlichen Designs oder verschiedenen Farben auf einer WordPress-Webseite zu nutzen. Wir machen das in einer einfachen Version schon auf unserer Aino-Webseite.

Die theme.json Datei

Die wichtigste neue Datei in Block-Themes ist die theme.json Datei. Sie ist sozusagen die Steuerzentrale in Block-Themes. Über die theme.json Datei bestimmt der Themeautor das Styling des Themes (Schriftarten, Schriftgrößen, Farbpaletten, Breiten), auch die Template-Teile werden in der theme.json Datei definiert.

Zusätzlich zu den globalen Stilen können Themes auch Stile per Block anlegen. Als Beispiel kann im Heading-Block standardmäßig die font-weight auf “fett” gesetzt werden.

Die meisten der Einstellungen in der theme.json Datei können dann später vom Themenutzer über die globalen Stile im Website Editor angepasst werden. Diese Einstellungen in den Globalen Stilen ersetzen damit die Customizer-Einstellungen der klassischen Themes.

Die theme.json Datei ersetzt auch die Block-Einstellungen zu Farbpaletten und font sizes, die bisher in der functions.php angelegt wurden. Die functions.php Datei bleibt in Block-Themes aber dennoch erhalten, sie wird nur deutlich entschlackt.

Die theme.json Optionen werden in der kommenden Zeit weiter entwickelt, es ist alles noch ganz am Anfang. Auch die derzeit noch etwas rudimentäre Ansicht der globalen Stile in Website Editor wird optimiert, hier sind schon ein paar erste Entwürfe zu sehen.

Den nächsten Beitrag meiner kleinen Block-Theme Serie werde ich der theme.json Datei widmen. Ich will dann sehr viel genauer auf die Einstellungsoptionen eingehen. Bis dahin kannst du auf Carolina’s Webseite fullsiteediting.com mehr über die Erstellung von Block-Themes und die theme.json erfahren. Auch im WordPress Block Editor Handbook gibt es etliche hilfreiche Infos.

Deine Fragen

Hast du Fragen zu Block-Themes und zu den Änderungen, die für Themes in der kommenden Zeit anstehen? Hast du schon erste Erfahrungen mit Block-Themes gemacht und wenn ja, wie ist dein erster Eindruck? Ich freue mich sehr auf deine Fragen und dein Feedback. Schreib mir doch einfach einen Kommentar zum Beitrag.

Grund dafür war die Veröffentlichung von WordPress 5.8. Dieses Release kann definitiv als Startschuss für Full Site Editing angesehen werden. Und da wir Aino nur aus dem Grund gebaut haben, um für diese neue Zukunft von WordPress vorbereitet zu sein, waren wir schnell davon überzeugt, dass wir jetzt und nicht später loslegen sollten.

Themes und Full Site Editing, was kommt da eigentlich auf uns zu?

Es ist wichtig zu verstehen, dass sich Themas durch die neuen Full Site Editing (kurz FSE) Funktionen sehr stark verändern werden. Technisch werden die Theme-Dateien nicht mehr PHP-, sondern HTML-Dateien sein und die meisten der Full Site Editing Funktionen werden über die theme.json Datei gesteuert statt wie bisher über die functions.php Datei oder den Customizer.

Die theme.json Datei

Die theme.json Datei ermöglicht es Theme-Autoren bestimmen, welche allgemeingültige Farbpalette das Theme haben soll, welche Schriften zur Auswahl stehen oder welche Schriftgrößen. Diese Funktionen nennt man „Global Styles“.

Die theme.json Datei kann noch sehr viel mehr und ich werde bestimmt noch einige Blogbeiträge zum Thema theme.json schreiben. Sie ist sozusagen die neue Steuerzentrale eines WordPress-Themes.

Zusätzlich kann ein Theme über theme.json Datei auch einzelne Blöcke und deren Funktionen definieren. Der Themeautor kann zum Beispiel festlegen, welche Schrift der Überschrift-Block haben soll und das der Button-Block eine eigene Farbpalette bekommen soll.

Themenutzer können dann über die Global Styles im neuen Site Editor die in der theme.json vordefinierten Stile anpassen. Und zwar entweder das gesamte Theme oder nur einen einzelnen Block betreffend.

Diese Funktionen sind ganz neu und ersetzen viele der Theme-Optionen, die bisher über den WordPress-Customizer angepasst werden konnten.

Das bringt mich gleich zur nächsten großen Herausforderung, die wir beim Umzug von Aino zum vollen FSE Block-Theme hatten. Der Customizer wird durch FSE abgelöst und steht Block-Themes nicht mehr zur Verfügung.

Die Customizer Funktionen ersetzen

Yep, Block-Themes kommen ohne den Customizer aus und er wird nicht mehr angezeigt, sobald ein Block-Theme aktiv ist. Das hat aber gute Gründe, da der Customizer so bald wie möglich nicht mehr genutzt werden soll. Alles soll an einer übersichtlichen Stelle, nämlich im neuen Website Editor angepasst werden.

Es war aber letztlich doch einfacher als gedacht, auch wenn wir auf ein paar unsere ursprünglichen Aino-Designoptionen erst einmal verzichten. In der Zukunft werden wir diese Designoptionen dann direkt über Block-Styles in den Blöcken integrieren.

Alle Farbanpassungen werden jetzt wie oben bereits beschrieben über die Global Styles vorgenommen. Global fürs ganze Theme oder per Block.

Themeoptionen wie die Anpassung des Footer Copyright-Textes werden in den Templates und Template-Parts vorgenommen.

Klasse ist, dass Nutzer von Block-Themes mehrere Footer- und Headerversionen speichern können. Wir machen das auf der Aino-Webseite, um den Header in unterschiedlichen Farben nutzen zu können. Auf dem Aino-Blog habe ich schon ein kleines Tutorial geschrieben, in dem ich erkläre, wie man den Header in einem Block-Theme anpasst (die deutschsprachige Version ist in Arbeit).

Das Seitenlogo und den Seitentitel passt man in Block-Themes auch im Site Editor an. Es gibt dafür neue Site Title und Site Logo Blöcke.

Vorsicht beim Site Logo Block: Du kannst das Logobild bisher leider nur einmal definieren. Es ist also momentan nicht möglich, Logos in unterschiedlichen Farben zu nutzen. Ich denke, das wird sich aber noch ändern. Als Workaround kannst du den Bild-Block mit Link zu deiner Homepage als Alternative zum Site Logo-Block einsetzen.

Ein Favicon kannst du mithilfe eines Favicon-Plugins integrieren. Das hat den Vorteil, dass du sehr viel feinere Einstellungen für dein Favicon hast. Du kannst optimierte Favicons für unterschiedliche Browser und Geräte einbinden.

Die Home- und Blogseite kannst du über Einstellung/Allgemein festlegen.

Widget-Bereiche hat Aino derzeit nicht. Die Widgetbereiche des Footers kannst du jetzt direkt im Footer-Template Part anpassen. Wir haben mehrere Footer-Designs vorbereitet und weitere werden folgen.

Seiten Templates und Template Parts

In Block-Themes gibt es Templates und Template Parts. Das gab es bei klassischen Themes eigentlich auch schon.

Der großen Vorteile von Block-Themes ist es, dass Themenutzer über den Site Editor selbst alle Seiten-Templates und Template Parts ihres Themes anpassen können. Es ist sogar möglich, eigene Seiten-Templates zu erstellen. Das macht die neue Block-Theme Generation so viel flexibler.

Du kannst im Site Editor bestimmen, welches Layout du für deinen Blog oder deine Blogarchivseite verwenden möchtest. Du kannst Block-Vorlagen (Patterns) in ein Seiten-Template integrieren oder aus einer Anzahl von unterschiedlichen Templates/Template Parts auswählen. Die Option ist besonders beim Header und Footer spannend.

Fazit

Wir wollen unseren Theme-Nutzern diese flexibleren, leichteren WordPress Block-Themes so schnell wie möglich anbieten. Wir wollen dabei nicht warten, bis alles perfekt fertig ist, sondern bei der Entwicklung und der Optimierung mit dabei sein. Die nächsten zwei WordPress-Veröffentlichungen 5.9 und 6.0 werden ganz besonders die Art verändern, wie Themes in WordPress genutzt werden. Das ist unser Thema und wir wollen bei diesen Veränderungen mit dabei sein.

Im Hintergrund arbeiten wir auch schon daran, wie wir unsere beliebtesten klassischen Themes wie Zuki oder Uku mit Aino als Basis-Theme für diese WordPress Block-Theme Ära vorbereiten können. Dazu aber bald mehr.

Das wir mit Aino jetzt schon einen großen Schritt in Richtung Zukunft gegangen sind, fühlt sich mehr als richtig an. So können wir und unsere Theme-Nutzer in diese neue Theme-Welt reinwachsen. Neue Features können wir schrittweise addieren.

Wenn du Feedback oder Fragen an uns hast oder mehr über Block-Themes, Full Site Editing oder sie Zukunft von WordPress-Themes allgemein wissen möchtest, schreib uns einfach einen Kommentar oder eine Nachricht über unseren Support-Button hier auf der Webseite. Wir freuen uns schon von dir zu hören.

Alle, die unser Aino-Projekt bisher schon so fleißig unterstützt haben, möchten wir hier auch noch einmal ein riesiges Dankeschön sagen. Eure Nachrichten, Fehlermeldungen, Vorschläge zur Verbesserung und euer tolles Feedback zu Aino helfen uns unglaublich weiter. 1000 Dank!