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.

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.

Die neue Aino-Website

Mit dem Aino Block-Theme Update haben wir auch die Aino Webseite überarbeitet. Zum einen, um für die Webseite auch das aktuelle Aino-Theme zu nutzen und um eine bessere Übersicht der Aino-Inhalte zu bietet. Die Seite ist weiter im Aufbau und es werden schrittweise neue Inhalte dazukommen.

Zusätzlich bauen wir die deutschsprachige Version der Webseite um. Wichtig ist uns dabei, dass alle Seiten von Aino mit den Aino Patterns nachgebaut werden können.

Aino Verbesserungen und Lockdown im August

Im August haben wir nach einem arbeitsreichen Block-Theme Juli kurz die Einladung von Freunden in Raglan angenommen, sie zu besuchen. Wir hatten uns schon viel zu lange nicht mehr gesehen und es hat richtig gutgetan, bekannte Gesichter zu sehen, sich auszutauschen und sich den kalten, wilden Wind der Neuseeland-Westcoast um die Nase wehen zu lassen.

Wieder zu Hause hat uns die Nachricht von einem neuen Covid-Lockdown in Neuseeland begrüßt. Für die nächsten Wochen waren Spaziergänge in der Nachbarschaft und Einkäufe in unserem lokalen Supermarkt unsere einzige Ablenkung im Homeoffice-Alltag. In so einer Zeit wird es einem wieder sehr klar, wie froh und dankbar wir sein können, dass wir unkompliziert remote arbeiten können.

Die Zeit im Lockdown haben wir dann auch gut nutzt. Erste Tutorials für Aino sind entstanden und wir haben etliche Bugs im Theme und in den Blöcken gefixt. Es kommt uns zwar immer noch so vor, als ob wir viel zu langsam vorankommen, aber in diesem Moment ist es vor allem wichtig, dass wir die Weichen für unsere Arbeit mit Block-Themes und Full Site Editing richtigstellen. Diesbezüglich sind wir sehr froh, in welche Richtung wir uns mit Aino bewegen.

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!

Unser ElmaStudio Redesign

Anfang Juni hatten wir uns endlich vorgenommen, unseren ElmaStudio-Umzug auf unser Aino-Theme umzusetzen. Wenn man sowieso schon einen vollen Terminkalender hat, ist es nicht einfach, die eigene Webseite upzudaten. Es kam immer etwas dazwischen und es gab auch bei unserem Aino-Theme und Blocks-Plugin noch so viel zu verbessern.

WooCommerce-Support für Aino

Doch ganz nach dem Motto jetzt oder nie haben wir uns an die Arbeit gemacht. Die größte Hürde war dabei der WooCommerce-Support für Aino, den wir komplett mit Blöcken umsetzten wollten. Ein paar WooCommerce-Elemente sind leider noch nicht Block-fähig (z. B. die Einzel-Produktseite), aber mit Hilfe des WooCommerce Blocks Plugins hat es erstaunlich gut geklappt. Das Plugin ist auch wirklich ein guter Ansatz, leider gibt es auch noch recht viele Einschränkungen. Daher hat es doch um einiges länger gedauert als erwartet, bis wir mit dem Ergebnis (für die WooCommerce-Support Version 1) zufrieden waren.

Das Update für unser Aino-Blocks Plugin und das Aino-Theme wird es diese Woche geben. Ich bin gerade noch dabei, ein paar Sachen zu optimieren.

Insgesamt haben wir auf jeden Fall vor, uns da in den kommenden Wochen noch tiefer in das Thema eCommerce-Support reinzuhängen. In den kommenden Tagen werde ich auch noch einen ausführlichen Beitrag zu unserem Redesign-Umzug schreiben.

Zoom-Meetup Stuttgart

Am 9. Juni waren wir live beim WordPress Meetup Stuttgart (unsere alten Heimatstadt) dabei. Dort haben wir um 5 Uhr morgens hier in Neuseeland eine kleine Q&A Session zum Thema „Full Site Editing“ gehalten. Den Mitschnitt findet ihr auf WordPress.tv.

Die Slides habe ich auf Speakerdeck zur Verfügung gestellt.

Was sonst noch los war

Ansonsten ist es ein ruhiger Monat mit viel Arbeit gewesen. Wir haben ja jetzt gerade Winter hier in Neuseeland. Allerdings war es bis auf ein paar Tage eher ungewöhnlich mild für die Jahreszeit. Wir waren für einen Tag kurz in Auckland, da wir dort einen Termin hatten.

Ansonsten waren haben wir hauptsächlich aus dem Homeoffice gerarbeitet. Ein Highlight dabei war, dass wir uns einen Stehtisch fürs Homeoffice geleistet haben.

Eine kleine Firma hier in Neuseeland stellt diese Modultische her, da sie Pandemie-bedingt keine Transportkisten für Events mehr herstellen können. Wir sind total zufrieden mit unserem neuen Arbeitsplatz. Da wir zusätzlich einen Sitzarbeitsplatz haben, ist das eine perfekte Ergänzung.

Wir war dein Juni?

Was hast du im Juni alles gemacht, erlebt oder an was hast du gearbeitet? Schreib mir doch einen Kommentar, ich freue mich, von dir zu hören.

Dazu musste ich lediglich den von Adobe Fonts bereitgestellten Snippet in meinen Header einfügen. Um den Fontsnippet nicht bei einem Themeupdate zu verlieren, habe ich entschieden, das WordPress-Plugin Insert Headers and Footers zu installieren. So kann ich Codesnippets in den Header oder Footer-Bereich meiner Webseite einbinden. Das Plugin war dann auch noch für den Codesnippet unseres Helpscout-Badges hilfreich.

CSS Anpassung im Theme

Soweit so gut die Adobe Font wird geladen und ich kann sie über eine kleine Anpassung im CSS im Frontendbereich unsere Webseite nutzen. Die genötigte eigene CSS-Anpassung hierfür lautet:

:root {
	--global--font-primary: 'degular-display', sans-serif;
	--global--font-secondary: 'degular', sans-serif;
}

Sobald Global Styles in WordPress Standard werden (siehe WordPress 5.8 Update) wird die Integration von eigenen Schriften übrigens noch sehr viel einfacher.

Adobe Font in der Editor-Ansicht

Leider wird die Adobe-Schrift jetzt aber noch nicht im WordPress-Editor angezeigt. Dafür habe ich ein bisschen googeln müssen, bis ich eine improvisierte Lösung gefunden habe. Ich hoffe das sich das Verhalten noch verbessert, um meinen kleinen Hack nicht zu vergessen, wollte ich es aber doch kurz hier auf dem Blog teilen.

Der benötige Code, um meine Adobe Font auch im Editor sichtbar zu machen, muss in die functions.php des Themes eingefügt werden.

/**
 * Show Adobe font in editor
 */
add_action( 'enqueue_block_editor_assets', function() {
	wp_enqueue_style( 'adobe-fonts', 'Your Adobe Webproject URL here' );
} );

Sobald ich eine bessere Lösung finde, werde ich den Beitrag updaten. Kennst du vielleicht schon eine bessere Umsetzung? Ich freue mich auf Kommentare und Tipps.

Mit diesen beiden Blöcken kannst du eine bestimmte Anzahl von Blogbeiträgen, Seiten oder WooCommerce-Produkten auf einer Seite oder in einem Beitrag anzeigen.

Der äußere Query-Block bietet etliche Filter-Optionen an. Die Anzahl der Beiträge ist meiner Ansicht nach etwas schwierig zu finden. Du musst auf den „Display Settings“ Button in der Toolbar klicken. Derzeit gibt es außerdem eine Listen- oder Raster-Ansicht in der Toolbar.

In den Block-Einstellungen des Query-Blocks findest du dann die Filter-Optionen nach Datum der Veröffentlichung, Kategorien, Schlagwörtern, Autoren oder individuellen Stichwörtern. Wenn du die Rasteransicht gewählt hast, kannst du in den Block-Einstellungen auch noch die Anzahl der Spalten zwischen 2-6 wählen.

Gestaltungsoptionen des Query Loop-Inhalts

Für unser sich derzeit in Arbeit befindendes ElmaStudio-Redesign und das kommende Aino Theme-Update habe ich in den letzten Tagen angefangen, mit dem Query-Block zu arbeiten. Mein erstes Ziel war es dabei mithilfe der neuen Blöcke ein bestimmte Anzahl neuester Blogbeiträge anzuzeigen. Mein Layout soll eine dreispaltige Gridansicht werden. Die Gesamtanzahl der Beiträge habe ich auf sechs begrenzt.

Im inneren Query-Loop Block kann ich jetzt selbst bestimmen, welche Elemente eines Beitrags ich anzeigen möchte. Dafür werden weitere neue Blöcke angeboten. Derzeit sind das die Blöcke Post Title, Post Content, Post Date, Post Excerpt, Post Featured Image, Post Categories und Post Tags. Die Blöcke sind derzeit noch nicht ins Deutsche übersetzt.

Wenn ein Query Loop-Block angepasst wird, werden die andere Beiträge übrigens ebenfalls angepasst.

Wichtig ist es, sich zu merken, dass Änderungen an einem einzelnen Beitrag gesamtheitlich angepasst werden. Wenn du also das Beitragsbild eines Beitrags im Query-Block änderst, wird dieses neue Bild automatisch auch auf der Beitragseinzelseite genutzt.

In den einzelnen Unterblöcken kannst du übrigens auch Änderungen vornehmen. So kannst du zum Beispiel die Schriftgröße oder Farbe des Beitragstitels ändern. Probleme könnte es mit den richtigen Abständen zwischen den einzelnen Elementen geben. Wir sind da gerade noch dabei, eine möglichst flexible Lösung für unser Aino-Themesystem zu finden.

Wie kann der Query-Block eingesetzt werden

Wenn eine WordPress-Webseite zukünftig komplett aus Blöcken besteht, ist es mithilfe des Query-Blocks möglich, flexible Startseiten zum Beispiel für Magazin-Webseiten aufzubauen.

Hier wird dann die gestalterische Kreativität der Theme-Designer und WordPress-Nutzer gefragt sein. Zusätzlich kann man aber auch spannende Archivseiten aufbauen oder spezielle Themengebiete auf einer Startseite hervorheben. Es könnten zum Beispiel Rezepte-Beiträge nach Themen sortiert gezeigt werden.

Die Möglichkeiten scheinen endlos und die Flexibilität des Query-Blocks machen diesen zu einem der wichtigsten Blöcke auf dem Weg zu vollständigen Block-Themes. Was Block-Themes sind, werde ich übrigens im nächsten Beitrag erklären.

Fragen und Feedback

Hast du Fragen zum Query-Block? Du kannst die neuen Blöcke übrigens bereits testen, wenn du das Gutenberg-Plugin aktivierst hast. Hast du noch weitere Vorschläge, wie die neuen Blöcke kreativ eingesetzt werden könnten? Schreibe mir doch einfach einen Kommentar zum Beitrag. Ich freue mich, von dir zu hören.

Dass diese Entwicklungen mitten in einer so aufreibenden Zeit stattfinden, war natürlich nicht geplant. Ich denke ich bin nicht alleine wenn ich sage, dass es einem ab und zu alles ein bisschen viel werden kann.

Manuel und ich selbst arbeiten derzeit vor allem daran unser Aino Theme- und Blockprojekt weiterzuentwicklen und Aino für die kommenden neuen WordPress-Funktionen fit zu machen. Gleichzeitig ist es uns auch sehr wichtig eine Zukunfts-Strategie für unsere bestehenden klassischen WordPress-Themes zu entwicklen.

Da es eine wirklich spannende Zeit ist, habe ich beschlossen wieder regelmäßiger hier auf dem Elmastudio-Blog zu schreiben. Ich möchte teilen, woran wir gerade arbeiten und was wir neues dazu lernen. So können wir uns quasi gemeinsam auf das „neue WordPress“ vorbereiten.

Full Site Editing (FSE) erklärt

Das große Stichwort hinter all den neuen WordPress-Features heißt Full Site Editing oder kurz FSE. Doch was steckt eigentlich genau hinter diesem Stichwort?

Full Site Editing (FSE) ist der Überbegriff für eine ganze Reihe von neuen Funktionen in WordPress. In der WordPress-Entwickler Community ist FSE schon eine ganze Weile in aller Munde, doch so langsam wird die Sache konkreter und einige der neuen Features landen in der kommenden WordPress-Version 5.8, deren Veröffentlichung am 20. Juli geplant ist.

Im WordPress Entwickler-Handbuch gibt es eine kurze Zusammenfassung zum Thema Full Site Editing. Dort werden die folgenden Funktionen aufgelistet:

• der neuer Site Editor
• Seiten- und Beitrags-Templates
• Block-basierte Themes
• Global Styles
• Blöcke fürs Bauen von Themes und Templates und die Funktion zwischen den unterschiedlichen Ebenen hin und her zu navigieren.
• der Navigations-Block
• der Query-Block

Zusammenfassend bedeuten diese neuen Funktionen, dass eine WordPress-Webseite zukünftig ausschließlich aus Blöcken bestehen wird. WordPress-Nutzer können so auf ALLE Bereiche ihrer Webseite direkt im Editor (also ohne dafür Code-Kenntnisse zu benötigen) zugreifen und diese bearbeiten.

Das Tolle daran ist, dass zukünftig das Einrichten und Bearbeitung einer WordPress-Webseite einheitlich an einem Ort (nämlich dem Editor) stattfinden wird. Ganz besonders wichtig ist natürlich auch, dass in der Editor-Vorschau alle Webseiten-Bereiche visuell sichtbar sind. So wird das Bearbeiten einer Webseite für Nutzer sehr viel intuitiver.

Wie kann ich mich auf FSE vorbereiten?

Hilfreich ist, dass die neuen Funktionen schrittweise in WordPress integriert werden. Entwickler und Nutzer haben so die Zeit sich auf die Neuerungen vorzubereiten. In der kommenden WordPress-Version 5.8 wird das größte neue Feature die Bearbeitung von Seiten-Templates (Page Template Editing) und Template-Teilen (Template Parts) sein.

Seiten- und Beitrags-Templates ab WordPress 5.8

Dafür werden auch eine ganze Reihe neuer Blöcken benötigt, die für das Bauen von Templates und Template-Teilen wichtig sind.

Das ist zum Beispiel der Query-Block, Blöcke um Schlagwörter, Autor und Kategorien eines Beitrags anzeigen zu können sowie Blöcke zum Erstellen eines Headers, z.B. den Seitentitel-Block und Navigations-Block. Da das Erstellen von Seiten- und Beitrags-Templates ein großes Thema ist, werde ich in den kommenden Tagen in einen eigenen Blogbeitrag noch näher darauf eingehen.

Es wird aber möglich sein, verschiedene Seiten-Vorlagen mit eigenen Layouts anzulegen. Auch für Beiträge können solche Vorlagen angelegt werden. Themeautoren oder Nutzer selbst können spezielle Templates für Beitragskategorien (z.B. Rezepte) anlegen.

Bearbeitet man ein Vorlage, werden alle Seiten oder Beiträge, die diese Vorlage verwenden entsprechend aktualisiert. Die gleiche Funktion wird es auch für spezielle Bereiche einer Webseite geben, zum Beispiel den Header- und Footer-Bereich. Auch für diese sogenannten Template Parts können Vorlagen erstellt und bearbeitet werden.

Eine neue Block-basierte Theme Generation

Im nächsten FSE-Schritt wird es eine neue Generation von Themes geben, die ausschließlich mit Blöcken gebaut werden. Diese Option ist für WordPress 5.9 geplant und Theme-Entwickler bereiten sich bereits auf diese neuen Block-basierten Themes vor.

Auch unser Aino-Theme werden wir demnächst als Block-basiertes Theme anbieten. Über den Umbau werde ich in einer kleinen Beitragsserie auf dem Aino-Blog berichten.

Design-Einstellungen über Global Styles

Auch für WordPress 5.9 in Planung ist die Funktion, eigene allgemeine Styles, die sogenannten Global Styles bestimmen zu können. So können WordPress-Nutzer Standardwerte wie Schriftarten, Schriftgrößen und Farben für ihr Webseite im Editor selbst definieren.

Dein Feedback und deine Meinung

WordPress-Entwickler können über das Gutenberg-Plugin viele der neuen Funktionen bereits jetzt testen. Da so viele Neuerungen in Arbeit sind, ist es besonders wichtig, dass wir uns gegenseitig helfen und teilen, was wir dazu lernen.

Wenn du Fragen hast oder Fehler entdeckst, kannst du diese auf GitHub teilen. Ich hoffe, dass meine neuen Blogbeiträge dir auch helfen, mit den neuen WordPress-Funktionen vertraut zu werden. Wenn du Vorschläge hast, über welche Themen ich mehr berichten sollte, schreib mir doch bitte einen Kommentar. Ich freue mich schon von dir zu hören.

Wir setzen voll auf Gutenberg

Nach anfänglichem Zögern setzen inzwischen glücklicherweise immer mehr WordPress-Nutzer auf den Gutenberg-Editor. Ich kann gut verstehen, warum viele Nutzer anfangs skeptisch waren. Der Übergang vom Classic Editor war zugegebenermaßen etwas holprig. Und Gutenberg steckt immer noch mitten in der Entwicklung. Externe Entwickler von WordPress-Produkten mussten sich auf eine unsichere Übergangsphase einstellen und adaptieren.

Inzwischen hat sich der Gutenberg-Editor aber stabilisiert und auch langjährige WordPress-Nutzer haben sich an die neue Benutzeroberfläche gewöhnt. Mit der Weiterentwicklung des neuen Editors entstehen neue Möglichkeiten WordPress-Webseiten zu erstellen. Vor allem im Designbereich tut sich einiges und wir freuen uns durch Block Patterns, Templates, Full Site Editing und Global Styles neue und vor allem flexiblere Tools zu bekommen.

Aino als Neuanfang

Natürlich möchten auch wir die neuen Möglichkeiten, die sich durch Gutenberg ergeben voll ausschöpfen. Daher haben Manuel und ich ein neues Theme- und Block-Pluginprojekt ins Leben gerufen.

Unser Aino-Theme steht inzwischen als kostenloses Theme auf WordPress.org zur Verfügung und wir haben in den letzten Wochen einige Updates veröffentlicht. Auch das dazugehörige Aino Blocks-Plugin entwickelt sich konstant weiter.

Wenn du eine Bewertung auf der WordPress.org Webseite für das Theme oder Blocks-Plugin abgeben möchtest, würde uns das sehr freuen.

In diesem Moment arbeiten wir auf Hochtouren an unserem ersten kostenlosen Aino Block Patterns Set. Ab dem nächsten Aino Blocks Plugin-Update (1.3) wirst du die Block Patterns in der Pattern-Library auswählen und in deine Seiten und Blogbeiträge einfügen können.

Hier einige Beispiele unseres ersten Block Pattern Sets „Arty Portfolio“:

Mehr Infos über Aino

Die Aino-Webseite ist jetzt auch online und wir werden dort in den kommenden Tagen erste Blogbeiträge und Video-Anleitungen für Aino veröffentlichen.

Wenn du über alles rund um Aino informiert werden möchtest, abonniere am besten den Aino-Newsletter (siehe Formular auf der Aino-Webseite). Als nächstes ist folgendes in Arbeit:

• Veröffentlichung des ersten Aino Block Pattern Sets „Arty Portfolio“ im Aino Blocks-Plugin Update 1.3.
• Erste Latest Posts Block Patterns.
• WooCommerce-Support und Support der WooCommerce-Blocks.
• Relaunch unserer Elmastudio-Webseite mit Aino.

Langfristig planen wir für Aino eine Membership-Option anzubieten, über die wir dann auch kostenpflichtige Block Pattern Designs und Templates anbieten möchten. In den kommenden Wochen wird der Hauptfokus darauf liegen, Aino als Business- und eCommerce Lösung auszubauen, natürlich ohne dabei an Kreativität zu verlieren. Schließlich müssen ja nicht alle Business- oder Shopwebseiten gleich aussehen :)

So kannst du auf den verschiedenen Kanälen über Aino-Updates informiert bleiben:

• Aino-Website mit Newsletter
• Aino Theme auf WordPress.org
• Aino Blocks-Plugin auf WordPress.org
• Aino Theme auf GitHub (Bug-Reports am besten hier melden)
• Aino Blocks-Plugin auf GitHub (Bug-Reports am besten hier melden)
• Aino auf Twitter
• Aino auf Instagram

Wir freuen uns sehr über dein Feedback, Verbesserungsvorschläge und Bug-Reports.

Jetzt aber genug Vorwort, denn auch in der WordPress- und Gutenberg-Entwicklung hat sich einiges getan. Zum Beispiel können Theme- und Plugin-Autoren seit der Gutenberg-Plugin Version 7.8 Block Patterns erstellen.

Block Patterns – Ein erster Überblick

Bisher konnte man im Gutenberg-Editor nur einzelne Blöcke einfügen. Für Blogbeiträge oder einfach aufgebaute Seiten funktioniert das auch prima. Wenn man aber etwas komplexere Layouts verwenden möchte, z.B. mit ineinander verschachtelten Blöcken, wird das ganze schon schwieriger.

Es kann sehr viel Zeit kosten ein mehrspaltiges Layout mit Inhalten aufzubauen und alle Blöcke einzeln auszuwählen und auf der Seite einzubinden.

Die Lösung für dieses Problem sind die neuen Block Patterns. Block Patterns sind vorbereitete Block-Kombination mit Beispielinhalten.

Sie können im Editor als in einer Vorschauansicht angeschaut und ausgewählt werden.

So kann man mit einem Klick auch aufwendigere Layouts auf einer Seite platzieren. Jetzt muss man nur noch die Beispielinhalte mit den eigenen Inhalten austauschen.

Was sind die Vorteile von Block Patterns?

Der große Vorteil der Block Patterns ist, dass sie sehr unkompliziert erstellt werden können. Plugin- oder Themeautoren müssen die Layouts nur selbst im Editor erstellen, den HTML-Code der erstellten Blöcke kopieren und in ein Code-Snippet im Plugin oder Theme einbinden. Mel Choyce erklärt diesen technischen Teil sehr schön auf ihrem Blog.

WordPress-Nutzern wird mit den vorbereiteten Layoutelementen leichter gemacht, auch komplexere Layouts relativ schnell aufzubauen. Die Arbeit im Gutenberg-Editor wird durch das neue Block Patterns Feature sehr viel benutzerfreundlicher.

Wie wird die Entwicklung der Block Patterns weitergehen?

Das Konzept der Block Patterns ist momentan noch ganz neu und steckt noch in der Entwicklung. Derzeit kannst du Patterns nur nutzen, wenn du das Gutenberg-Plugin aktiviert hast. Soweit ich informiert bin, sollen Block Patterns neben anderen neuen Features aber schon in die kommende WordPress-Version 5.5 (geplant für den 11. August) integriert werden.

Wir arbeiten gerade auch an unseren erste Block Patterns für Aino.

Sobald unser Aino Block-Plugin auf WordPress.org zur Verfügung steht, werden dort die ersten Block Patterns integriert sein. Wir haben uns dazu entschlossen unsere Block Patterns ins Plugin zu intergieren und nicht ins Theme, da für unsere Patterns die Aino-Blöcke benötigt werden.

Deine Meinung und Fragen

Hattest du schon von dem neuen Block Patterns in WordPress gehört? Gefällt dir das Konzept und denkst du, dass es die Arbeit mit WordPress erleichtern wird? Wer wird deiner Ansicht nach am meisten von diesem neuen Editor-Feature profitieren?

Schreibe mir doch deine Einschätzung zu den neuen Block Patterns und der Entwicklung vom Gutenberg-Editor allgemein in einem Kommentar. Ich würde mich sehr über deine Meinung freuen. Und melde dich auch, wenn du Fragen zum Thema Block Patterns hast.