Eine tiefe Einführung in WordPress Block Themes

Der relativ neue WordPress-Editor, auch bekannt als WordPress Block-Editor, der über das Gutenberg-Plugin ständig weiterentwickelt wird, ist seit 2018 bei uns. Sie können den Block-Editor mit *jedem* WordPress-Theme verwenden, vorausgesetzt, das Theme lädt das CSS, das die Blöcke verwenden. Es gibt jedoch neue Themes, die den Block-Editor viel tiefer nutzen.

WordPress Block Themes ermöglichen es Ihnen, die gesamte Website mit Blöcken aufzubauen. Das bedeutet, dass die Aufgabe des Themes hauptsächlich darin besteht, Designrichtlinien vorzugeben, und weniger darin, Seiten und deren Inhalte zu steuern. Dies wird in WordPress als Full-Site Editing bezeichnet und die Themes, die dafür entwickelt werden, heißen Block Themes, weil Sie alles mit Blöcken aufbauen.

Lassen Sie uns das alles genauer betrachten.

Inhaltsverzeichnis

• Einführung
• Verwandte Terminologie
• Verwendung des Block-Editors mit klassischen Themes
• Die Anatomie von blockbasierten Themes
• Erstellung von WordPress Block Themes
• Globale Einstellungen und Stile (theme.json)
• Ansätze für WordPress Block Themes
• Block Themes, die derzeit in Gebrauch sind
• Erstellung von Block-Child-Themes
• Einige persönliche Gedanken
• Ressourcen

Einführung

Abgesehen von denen, die die täglichen Entwicklungsiterationen auf GitHub verfolgen, ist die meiste Entwicklung rund um den Block-Editor für Benutzer sichtbar – und das ist nicht unbedingt schlecht. Ich habe mich persönlich bemüht, mich über WP Tavern und Gutenberg-Posts über den Block-Editor auf dem Laufenden zu halten und habe sowohl den alten – oder „Klassischen“ Editor – als auch den Block-Editor auf meinen persönlichen Lernprojekt-Websites verwendet.

Nachdem ich einen Umweg gemacht habe, um Headless-WordPress-Websites mit den Frameworks Gatsby und Frontity zu lernen und zu erleben, bin ich nun wieder in meinem heimischen WordPress-Umfeld.

Obwohl ich das GitHub-Repository WordPress theme-experiment schon eine Weile kenne – Themes, die komplett aus Blöcken bestehen! – habe ich erst vor kurzem begonnen, mich mit Block Themes zu beschäftigen. Tatsächlich verwende ich ein experimentelles blockbasiertes Theme hier auf dieser Projekt-Website.

WordPress 5.9 ist jetzt draußen und damit kommt blockbasiertes Theming für die Massen. Diese Veröffentlichung, genannt Joséphine, ist die formelle Einführung von WordPress Full-Site Editing und Block Themes.

Auch wenn die blockbasierte Theming-Funktionalität in früheren Versionen in verschiedenen iterativen Formen verfügbar war, ist dies ein großer Schritt für die WordPress-Plattform und das Ökosystem, das davon abhängt. Ich hatte es in der Hand und dachte, ich teile Ihnen mit, was ich bei meiner praktischen Erfahrung mit Block Themes gelernt habe, sowie einige persönliche Gedanken dazu, wie es funktioniert.

Haftungsausschluss: Ich bin keineswegs ein Experte für Block Themes. Ich bin gut mit WordPress vertraut und ein großer Fan des Content-Management-Systems. Mein Ziel ist es hier nicht, WordPress 5.9 zu kritisieren oder Sie in die Richtung zu lenken, ob Sie es mögen oder verwenden sollten oder nicht. Ich komme lediglich aus der Perspektive eines aufgeschlossenen Lernenden, der persönliche Websites mit recht tiefem Verständnis und Vertrautheit mit dem WordPress Block-Editor erstellt.

Verwandte Terminologie

Bevor wir direkt in Block Themes einsteigen, denke ich, ist es eine gute Idee, ein grundlegendes Verständnis dafür zu entwickeln, was wir eigentlich meinen, wenn wir Begriffe wie *Blöcke* und *Site Editing* verwenden, da sie im Vergleich zu dem, was wir seit Jahrzehnten von WordPress kennen und lieben, unglaublich neu und revolutionär sind.

Block-Editor

Dies ist im Grunde das, was wir meinen, wenn wir vom „WordPress-Editor“ sprechen. Wir nennen den WordPress-Editor Block-Editor, weil er uns ermöglicht, Seiten und Beiträge zu erstellen, bei denen jedes Element – einschließlich Text, Bilder, Videos, Header, Footer usw. – mithilfe von Blöcken in den Beitrag eingefügt wird, die modular angeordnet werden können, um Seitenlayouts zu vervollständigen. Er hat sich aus dem entwickelt, was heute als „klassischer“ Editor bezeichnet wird, der stärker auf die Eingabe von Inhalten beschränkt war, die auf einer Seite oder in einem Beitrag in einem vordefinierten Layout veröffentlicht werden sollten.

Es ist sozusagen eine Verschmelzung von Inhalt und Layout, bei der beides im WordPress-Editor verwaltet wird. Wo wir uns früher auf den Editor für Inhalte und (mehr oder weniger) Theme-Vorlagen zur Definition des Layouts verlassen mussten, sind beide nun direkt in der Benutzeroberfläche des WordPress-Editors bearbeitbar.

Mehr Details finden Sie hier zur Verwendung des Block-Editors.

Block Theme

Wie im WordPress-Dokumentation erklärt

Ein Block-Theme ist ein WordPress-Theme mit Vorlagen, die vollständig aus Blöcken bestehen, sodass neben dem Beitragsinhalt der verschiedenen Beitragstypen (Seiten, Beiträge usw.) der Block-Editor auch verwendet werden kann, um alle Bereiche der Website zu bearbeiten: Header, Footer, Seitenleisten usw.

Diese WordPress-Dokumentation bietet eine Übersicht über Block Themes in ihrer Wissensdatenbank, einschließlich Anleitungen zur Erstellung von Block Themes und deren Styling in diesem Leitfaden.

Die Quintessenz: Block Themes sind anders als „klassische“ WordPress-Themes. Anstatt sich streng auf PHP-Dateien zu verlassen, die der WordPress Template Hierarchy entsprechen, besteht ein WordPress Block Theme aus blockbasierten HTML-Vorlagen – zusammengesetzten Gruppen von Blöcken, die im WordPress Site Editor (das kommt als Nächstes) gestylt und angeordnet werden können, sowie der Verwendung einer theme.json-Datei für globale Styling-Token.

Site Editor

Dies ist das Kronjuwel von WordPress 5.9. Obwohl es offiziell WordPress Site Editor genannt wird, wurde es während der Entwicklung weitgehend als Full-Site Editing** (FSE) bezeichnet und als „die kohärente Erfahrung, die es Ihnen ermöglicht, verschiedene Vorlagen, Vorlagenteile, Styling-Optionen und mehr direkt zu bearbeiten und zwischen ihnen zu navigieren.“ Puh, das ist viel!

Der WordPress Site Editor ermöglicht es uns, Vorlagen zu erstellen und zu bearbeiten, die aus Blöcken bestehen. Die Idee ist also, dass wir eine Gruppe von Blöcken zusammenstellen können, die global auf eine Website angewendet werden können. Zum Beispiel eine Header-Komponente. Diese könnte aus Blöcken für ein Website-Logo, ein primäres Menü und einen Slogan bestehen. Der Site-Editor ermöglicht es uns, ein neues Block-Theme zu erstellen oder ein bestehendes Theme zu modifizieren, um das globale Erscheinungsbild der Website komplett neu zu gestalten, ohne eine Zeile Code schreiben zu müssen.

Sie wissen also, wie Sie in der Vergangenheit ein Theme mit vielen PHP-Vorlagen erstellen mussten? Das ist nicht mehr der Fall. Die Theme-„Entwicklung“ hat jetzt eine Benutzeroberfläche, die direkt in WordPress verfügbar ist.

Weitere Details zur Verwendung des Site-Editors finden Sie in der WordPress-Dokumentation.

Das offizielle WordPress-Glossar enthält zusätzliche Begriffe und Definitionen, die Sie möglicherweise untersuchen möchten, während wir tiefer in WordPress Block Themes und FSE eintauchen.

Verwendung des Block-Editors mit klassischen Themes

Der WordPress Block-Editor kann sowohl in klassischen als auch in Block-Themes verwendet werden. Als das Gutenberg-Editor-Projekt begann, wurde der klassische TinyMCE-basierte Editor aus WordPress Core in das Classic Editor Plugin ausgelagert. Solange das Classic Editor Plugin installiert und aktiv ist, ist das Verfassen von Inhalten ziemlich normal, wie es vor der Einführung von Blöcken war.

Vor der formellen Einführung der Block-Editor-Funktionen mussten wir das experimentelle Gutenberg-Plugin installieren. Durch einfaches Wechseln der Plugins konnten einzelne Seiten- oder Beitragsinhalte mit beiden Editoren erstellt werden. Die WordPress 5.0-Version führte den Block-Editor neben dem Standard-Theme Twenty Nineteen ein und zeigte, wie Block-Editor-Funktionen hinzugefügt und seine Leistung erkundet werden kann.

Mit anderen Worten, die Entwicklung hin zu FSE hat sich seit einer Weile aufgebaut. Und deshalb können wir ein hohes Maß an Abwärtskompatibilität genießen, das es uns allen ermöglicht, blockbasierte Funktionen zu nutzen, wenn wir bereit sind.

Die Anatomie von blockbasierten Themes

Experimentelle blockbasierte Themes sind seit Anfang 2020 in der Entwicklung. Zum Zeitpunkt, an dem ich dies schreibe, listet das GitHub theme-experiment Repository 12 Block Themes auf, die Aspekte der Erstellung von Themes mit Blöcken oder Blockvorlagen untersuchen.

Aber wahrscheinlich war das Twenty Twenty-One Theme das erste „Standard“-Theme, das Blöcke zu einem wichtigen Bestandteil machte, indem es Blockstile und Blockmuster einführte, obwohl die kürzlich aktualisierten Versionen von Twenty Nineteen und Twenty Twenty ebenfalls gebündelte Blockstile und Blockmuster enthalten. Derzeit gibt es über 130 Themes aus der Community mit gebündelten Block-Editor-Mustern, Blockstile-Funktion, einschließlich meines Favoriten, Anders Norens Eksell-Theme.

Mit der fortlaufenden Entwicklung der FSE-Funktionen des WordPress Block-Editors werden auch immer mehr blockbasierte Themes eingeführt.

Was bedeutet die Entwicklung von blockbasierten Themes für diejenigen von uns, die tief in der „klassischen“ Art der Theme-Erstellung für WordPress verwurzelt sind? Das ist es, was ich in diesem Abschnitt betrachten möchte.

Die Dateistruktur von Block Themes

In klassischen PHP-basierten Themes werden Markup-Elemente mit PHP und JavaScript generiert, während in Block-Themes diese Vorlagen vollständig aus HTML-Blöcken und strukturellem CSS bestehen, das vom Block-Editor bereitgestellt wird. Das mag für viele Leute beängstigend klingen, aber es ist leicht vorstellbar, wie befreiend es für andere ist, da es die Hürde für die Entwicklung eines WordPress-Themes senkt.

Die Struktur eines Block-Themes unterscheidet sich drastisch von der klassischen WordPress Template Hierarchy, an die wir alle gewöhnt sind. In klassischen PHP-basierten Themes muss das Markup für Seitenelemente mit PHP und JavaScript generiert werden, während in Block-Themes der WordPress Core sowohl das Markup als auch das grundlegende Styling bereitstellt. Zum Beispiel enthält das Standard-Theme Twenty Twenty-One 48 PHP-Dateien und 11 JavaScript-Dateien mit einem Umfang von 4,5 MB. Sein blockbasiertes Gegenstück, das experimentelle TT1 Blocks Theme, enthält nur vier PHP-Dateien, eine JavaScript-Datei und acht HTML-Dateien mit 3,5 MB.

Eine Block-Theme-Struktur kann sehr einfach sein mit nur wenigen erforderlichen Dateien: index.php, style.css und template/index.html. Das Folgende ist eine typische Block-Theme-Dateistruktur, entnommen dem WordPress Editor Handbook.

#! basic block-theme structure
theme
|__ style.css
|__ functions.php
|__ index.php
|__ theme.json
|__ templates
    |__ index.html
    |__ single.html
    |__ archive.html
    |__ ...
|__ parts
    |__ header.html
    |__ footer.html
    |__ sidebar.html
    |__ ...

• styles.css: Enthält das Stylesheet des Themes.
• functions.php: Enthält die Theme-Einrichtung und kann zusätzliche Dateien enthalten, ein Editor-Stylesheet aktivieren und style.css einbinden, falls vorhanden.
• index.php: Eine leere Datei, um zur Standarddatei zu wechseln, falls das Block-Theme ohne den WordPress Block-Editor aktiviert wird.
• theme.json: Optionale Konfigurationsdatei, die verwendet wird, um Features zu aktivieren oder zu deaktivieren und Standardstile für die Website und Blöcke festzulegen.
• templates: Enthält Seiten-Templates, die aus Blöcken bestehen. Diese Dateien folgen der gleichen Template-Hierarchie wie traditionelle Themes.
  • index.html: Das primäre Template zur Generierung eines Beitrags oder einer Seite, analog zu index.php in klassischen Themes.
  • single.html: Das Template zur Generierung von Einzelbeiträgen oder Seiten.
  • archive.html: Das Template zur Generierung von Archivlisten von Beiträgen.
• parts: Die gemeinsamen Sammlungen von Blöcken, die in Blockvorlagen verwendet werden.
  • header.html: Der globale Header-Block.
  • footer.html: Der globale Footer-Block.
  • sidebar.html: Ein optionaler globaler Seitenleisten-Block.

Eine Liste von Theme-Blöcken, einschließlich derjenigen, die **spezifisch für Block Themes sind**, finden Sie im WordPress Block Editor Handbook.

Templates und Template Parts

Templates sind im Grunde Gruppen von zusammengesetzten Blöcken, die wiederverwendbare Blockteile enthalten können, wie z. B. einen Website-Header oder -Footer. Verschiedene Blöcke werden verwendet, um eine Seiten-Vorlage zu erstellen. Zum Beispiel könnte dies eine Liste von Blogbeiträgen, eine Liste von Produkten oder sogar ein Widget sein.

Hier ist ein Beispiel für eine Block-Vorlage, entnommen dem WordPress Block Editor Handbook.

<!-- wp:site-title /-->

<!-- wp:image {"sizeSlug":"large"} -->
<figure class="wp-block-image size-large">
    <img src="https://cldup.com/0BNcqkoMdq.jpg" alt="" />
</figure>
<!-- /wp:image -->

<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:post-title /-->
    <!-- wp:post-content /-->
</div>
<!-- /wp:group -->

<!-- wp:group -->
<div class="wp-block-group">
    <!-- wp:heading -->
    <h2>Footer</h2>
    <!-- /wp:heading -->
</div>
<!-- /wp:group -->

Erstellung von WordPress Block Themes

Der WordPress Site Editor ist nun das primäre Werkzeug zur Definition des Erscheinungsbilds einer WordPress-Website. Sie sind es vielleicht gewohnt, den WordPress Customizer für diese Dinge zu verwenden – und einige Themes haben diesen stark genutzt, um das zu tun, wofür der Site Editor jetzt konzipiert ist.

Der Block-Editor ist also nicht mehr nur für Seiten und Beiträge da; er ist die Art und Weise, wie WordPress-Themes erstellt werden.

Ich gehe davon aus, dass viele von Ihnen bereits den Block-Editor verwendet haben und keine tiefgehende Lektion darüber benötigen, was er ist oder wie man ihn benutzt. Dennoch lohnt es sich, ihn ein wenig zu betrachten, da er der Auslöser für alles ist, was sich mit dem WordPress-Theming in Zukunft beschäftigt, jetzt, wo WordPress 5.9 auf dem Markt ist.

Wenn wir über Block-Editing und Theming sprechen, sprechen wir ja über den Block-Editor. Aber eigentlich sprechen wir über den WordPress Site Editor.

Die Benutzeroberfläche des WordPress Site Editors

Selbst als früher Anwender des Gutenberg-Plugins finde ich die Erfahrung des Site-Editors einschüchternd und frustrierend. Er ändert sich häufig und oft drastisch mit jeder neuen Veröffentlichung. Ich bin jedoch zuversichtlich, dass WordPress 5.9 eine Art Dammbruch darstellt, der dieses holprige Gefühl stabilisiert.

Auf den Site-Editor greift man auf die gleiche Weise zu wie bisher auf den WordPress Customizer. Er befindet sich unter Design im Dashboard-Menü und heißt Editor.

Lassen Sie uns kurz die neue Editor-Oberfläche durchgehen.

Navigieren Sie zuerst zum Site-Editor, indem Sie im Admin-Menü von WordPress auf Design → Editor klicken. Dieser Menüpunkt kann, wie in WordPress 5.9, eine rote „Beta“-Beschriftung tragen.

Dies führt Sie zum Site-Editor, der entweder Ihre Startseite oder das Beitragsarchiv anzeigt, je nachdem, was Sie in Einstellungen → Lesen als Startseite festgelegt haben. Von dort aus sieht es ein wenig aus wie die Vollbildversion des Block-Editors beim Erstellen oder Bearbeiten einer Seite oder eines Beitrags. Aber wenn Sie auf das WordPress-Logo in der oberen linken Ecke des Bildschirms klicken, öffnet sich ein linkes Panel, das den WordPress Site Editor und sein Menü anzeigt, um zwischen verschiedenen Teilen der Website zu navigieren. Dazu gehören Website, Templates und Template Parts.

Klicken wir auf Templates. Dies zeigt uns eine Liste der vom Theme bereitgestellten Templates, komplett mit einer Beschreibung jedes einzelnen und wo es registriert ist (z. B. im übergeordneten oder einem untergeordneten Theme).

Der andere Weg, um zu diesem Bildschirm zu gelangen, ist von der ursprünglichen Seite, auf der wir nach dem Aufrufen des Site-Editors gelandet sind. Klicken Sie auf den Namen des Templates in der oberen Admin-Leiste, um eine Schaltfläche anzuzeigen, die Sie direkt zum gleichen Templates-Bildschirm führt.

Jedes der Templates kann wie jede Seite oder jeder Beitrag im Block-Editor bearbeitet werden. Nehmen wir an, ich möchte auf meiner Index-Seite kein Feature-Bild haben und es entfernen. Löschen Sie einfach den Block für das Feature-Bild und speichern Sie das Template.

Der andere wichtige Teil der Site-Editor-Benutzeroberfläche ist eine Listenansicht, die die aktuell im Template platzierten Blöcke auflistet. Dies ist seit der Einführung des Block-Editors eine Funktion in WordPress, aber neu ist dieses Mal, dass Sie übergeordnete Blöcke, die untergeordnete Blöcke enthalten, wie ein Akkordeon öffnen und schließen können. Nicht nur das, sondern es unterstützt das Ziehen und Ablegen von Blöcken, um das Layout direkt von dort aus zu ändern.

Eine weitere Funktion der Site-Editor-Benutzeroberfläche: Sie können Anpassungen mit einem Klick löschen. Klicken Sie auf dem Templates-Bildschirm auf das Kebob-Menü neben einem Template und wählen Sie die Option Anpassungen löschen. Dies ist eine schöne Möglichkeit, zurückzusetzen und neu zu beginnen, falls Sie dies benötigen.

Das WordPress Core-Team veröffentlicht regelmäßig Updates über Neuigkeiten auf Make WordPress Core. Es lohnt sich, dies zu bookmarken, um über die neuesten Änderungen am WordPress Block Editor und Site Editor auf dem Laufenden zu bleiben.

Erstellung von Templates und Template Parts

Templates sind, wie Sie wissen, das Herzstück des WordPress-Themings. Sie erzwingen konsistente und wiederverwendbare Layouts. Das ändert sich in WordPress 5.9 nicht. Ebenso wenig die Tatsache, dass wir Template Parts erstellen können, die wie Modulstücke sind, die in mehreren Templates verwendet werden können, z. B. eine Beitragsabfrage, die in einem Archiv-Template und im Home-Template lebt.

Was sich in WordPress 5.9 ändert, ist, dass sie mit dem Site-Editor erstellt und verwaltet werden, anstatt mit PHP-Dateien, die im Theme-Ordner liegen.

Das Block Editor Handbook listet drei Möglichkeiten zur Erstellung von Templates und Template Parts auf: (a) manuell, durch Erstellung von HTML-Dateien mit Block-Markup, (b) mithilfe des Site Editors und (c) mithilfe des Template-Bearbeitungsmodus im Block-Editor.

Kurze Beschreibungen zum Erstellen von Templates im Site-Editor und zum Template-Bearbeitungsmodus sind im Block Theme Handbook verfügbar. WordPress 5.9 ermöglicht die Erstellung eines neuen Templates im Editor-Modus.

Die angepassten Templates können dann exportiert werden, um sie in ein Block-Theme aufzunehmen. Ja, wir haben jetzt die Möglichkeit, ein voll funktionsfähiges WordPress-Theme zu erstellen, ohne eine Zeile Code zu schreiben! Der exportierte Ordner enthält derzeit keine theme.json-Datei, aber es gibt einen Vorschlag auf GitHub, den Export von Block-Themes und -Stilen zu ermöglichen.

Aber für diejenigen, die lieber enger mit Code arbeiten, ist die manuelle Erstellung von WordPress-Templates und -Template Parts immer noch eine Option. Sie können immer noch einen Code-Editor öffnen und HTML-Dateien mit Block-Markup erstellen.

Globale Einstellungen und Stile (theme.json)

In klassischen Themes schreiben wir die Styling-Regeln in einer style.css-Datei. In Block-Themes ist das Styling schwieriger, da CSS aus verschiedenen Quellen stammt (z. B. Core-Blöcke, Themes und Benutzer). WordPress 5.8 führte das Konzept der Globalen Stile ein – im Wesentlichen eine theme.json-Datei – die laut Dokumentation „die verschiedenen APIs im Zusammenhang mit Stilen an einem einzigen Punkt konsolidiert – einer theme.json-Datei, die sich im Stammverzeichnis des Theme-Ordners befinden sollte.“

Die theme.json-Datei wurde angeblich entwickelt, um Theme-Autoren eine granularere Styling-Struktur mit Optionen zur Verwaltung und Anpassung von CSS-Stilen aus verschiedenen Quellen zu bieten. Zum Beispiel kann ein Theme-Autor bestimmte Styling-Funktionen festlegen, die für Benutzer verborgen sind, Standardfarben, Schriftgrößen und andere Funktionen definieren, die dem Benutzer zur Verfügung stehen, und auch das Standardlayout des Editors festlegen. Darüber hinaus ermöglicht theme.json Ihnen, das Styling pro Block anzupassen. Es ist leistungsstark, flexibel und super wartbar!

Der Block-Editor soll das gesamte grundlegende Styling bereitstellen, das Theme-Autoren gemäß der theme.json-Datei anpassen können. Die theme.json-Datei kann jedoch für ein komplexes Theme ziemlich lang werden, und derzeit gibt es keine Möglichkeit, sie auf verdaulichere Weise zu partitionieren. Es gibt ein GitHub-Ticket, um sie so zu restrukturieren, dass verschiedene theme.json-Dateien einer /styles-Ordnerstruktur zugeordnet werden. Das wäre eine schöne Verbesserung für die Entwicklererfahrung.

Das Standard-Theme Twenty Twenty-Two ist ein gutes Beispiel dafür, wie die Full-Site-Editing-Funktionen von WordPress theme.json für globale Einstellungen und das Styling von Blöcken verwenden.

Ansätze für WordPress Block Themes

Vielleicht haben Sie WordPress-Themes schon immer von Grund auf erstellt. Vielleicht haben Sie das Underscores-Theme als Ausgangspunkt verwendet. Oder vielleicht haben Sie ein Lieblingsthema, das Sie mit einem Child-Theme erweitern. Die neuen Funktionen des WordPress Site Editors verändern die Art und Weise, wie wir Themes erstellen, wirklich.

Im Folgenden finden Sie einige aufkommende Strategien für die Entwicklung von Block-basierten Themes, die tief in den WordPress Site Editor integriert sind.

Universelle Themes

Das Automattic-Team hat ein Blockbase universelles Theme entwickelt, das als neuer Weg zur Erstellung von Themes bezeichnet wird, ähnlich dem Underscores Starter-Theme. Das Blockbase-Theme bietet temporäre "Ponyfill"-Stile, die der Block-Editor "noch nicht bei den 'custom'-Eigenschaften von theme.json berücksichtigt" und die schließlich obsolet werden könnten, sobald das Gutenberg-Plugin vollständig ausgereift und in den WordPress Core integriert ist.

Mit dem Ansatz des universellen Parent-Themes hat Automattic bereits acht Blockbase Child-Themes veröffentlicht, und weitere sind bei GitHub in Arbeit.

Twenty Twenty-Two Standard-Theme

Das Twenty Twenty-Two Standard-Theme ist ein weiterer exzellenter Ausgangspunkt, da es das erste WordPress-Theme ist, das mit WordPress ausgeliefert wird und für die Arbeit mit dem Site-Editor konzipiert wurde.

Meiner Meinung nach ist dieses Theme hervorragend für Theme-Entwickler geeignet, die bereits mit FSE-Funktionen vertraut sind, um zu zeigen, was möglich ist. Für andere Benutzer, die keine Entwickler sind und nicht mit FSE-Funktionen vertraut sind, kann die Anpassung im Block-Editor und der anschließende Export als Child-Theme äußerst frustrierend und überwältigend sein.

Hybride Themes

Das Konzept der "hybriden" Themes im Kontext von FSE wird in diesem GitHub-Ticket diskutiert. Die Idee ist, Wege zu schaffen, damit jeder Benutzer den Site- oder Template-Editor nutzen kann, um traditionelle Theme-Vorlagen zu überschreiben.

Justin Tadlock prognostiziert in diesem WP Tavern-Beitrag vier Arten von Themes – nur Blöcke, universell, hybrid und klassisch – und spekuliert, dass sich Theme-Autoren zwischen "Block-Themes und einer Mischung aus klassischen/hybriden Themes" aufteilen könnten.

Den Beweis liefert Frank Klein in "What I Learned Building a Hybrid Theme".

Ein hybrides Theme mischt den traditionellen Theme-Ansatz mit Full-Site-Editing-Funktionen. Eine Schlüsselkomponente hierbei ist die Datei theme.json. Sie bietet mehr Kontrolle über die Einstellungen des Block-Editors und vereinfacht das Styling von Blöcken. Ein hybrides Theme kann auch Block-Vorlagen verwenden, aber das ist optional.

Frank ist der Autor des Themes Block-Based Bosco und hat das Konzept eines "hybriden Themes" weiter ausgebaut, indem er eine hybride Version des Standard-Themes Twenty Twenty erstellt hat. Das Theme ist auf GitHub verfügbar. Derzeit gibt es keine hybriden Themes im WordPress Theme Directory.

WordPress Community Themes

Zum Zeitpunkt der Erstellung dieses Artikels sind 47 Block-basierte Themes mit FSE-Funktionen im Theme-Verzeichnis verfügbar. Wie erwartet, ist dieser Ansatz sehr vielfältig.

Zum Beispiel diskutiert in diesem Beitrag die Aino Block Theme-Autorin Ellen Bauer, wie sie ihr klassisches Theme in ein Block-Theme konvertiert hat, und beschreibt detailliert, was ein Theme zu einem "Block"-Theme macht. Die Dateistruktur dieses Ansatzes sieht anders aus als die Standard-Block-Theme-Struktur, die wir zuvor behandelt haben.

Ein weiteres beliebtes Block-Theme, Tove von Anders Noren, wird als flexibles Basis-Theme beschrieben, das der Standard-Block-Theme-Dateistruktur folgt.

Es gibt auch einen sehr einfachen Single-Page-Proof-of-Concept-Theme von Carolina Nymark, der nichts als eine einzige index.html-Datei enthält und Miniblock OOAK heißt. Er ist bereits im Theme-Verzeichnis verfügbar, ebenso wie ein weiteres von Justin Tadlock, das sich in der Entwicklung befindet (und er hat seinen Prozess in einem separaten Artikel beschrieben).

Block Theme Generator App

Auch wenn wir bereits festgestellt haben, wie benutzerfreundlich WordPress Block Themes für Nicht-Entwickler sind, gibt es Werkzeuge, die helfen, vollständige Block-Themes oder lediglich eine angepasste Datei theme.json zu erstellen.

David Gwyer, ein Ingenieur bei Automattic, arbeitet an einer Block Theme Generator App, die zum Zeitpunkt der Erstellung dieses Artikels in der Beta-Phase ist und auf Anfrage zum Testen verfügbar ist.

In meinen kurzen Tests konnte ich mit der App nur eine angepasste theme.json-Datei generieren. Aber Gwyer erzählte WP Tavern, dass die App noch nicht vollständig ausgereift ist, aber ständig neue Funktionen hinzugefügt werden. Sobald sie fertig ist, könnte dies eine sehr hilfreiche Ressource für Theme-Autoren sein, um angepasste Block-Themes zu erstellen.

Block-Themes, die derzeit verwendet werden

Dieser Twitter-Thread von Carolina Nymark zeigt einige Beispiele von Block-Themes, die zum Zeitpunkt der Erstellung dieses Artikels live und in Produktion sind. In einem jüngsten Yoast-Artikel listete Carolina eine Reihe von persönlichen und geschäftlichen Websites auf, die Block-Themes verwenden.

Persönliche Websites

• femcreations.com
• helen.blog
• Rich Tabor
• Lesly.pizza
• dimonacook.com
• ryelle.codes

Geschäftliche Websites

• fullsiteediting.com
• sitefly.be
• wpvip.com
• Ainoblocks
• pagely.com
• frostwp.com
• WP Tavern

Wie ich bereits erwähnt habe, benutze ich auch seit einiger Zeit ein Block-Theme für eine meiner persönlichen Websites. Das Standard-Theme Twenty Twenty-Two zeigt auch derzeit mehr als 60.000 aktive Installationen an, was mir sagt, dass es viele weitere Beispiele für Block-basierte Theme-Implementierungen gibt.

Erstellung von Block Child-Themes

Child-Theming ist in dieser neuen Ära von WordPress-Blöcken immer noch ein Thema, wenn auch noch in den Anfängen. Mit anderen Worten, es gibt keinen klaren Ansatz, um ein Block-basiertes Child-Theme zu erstellen, und derzeit gibt es keine Werkzeuge, die dabei helfen.

Dennoch zeichnen sich einige Ansätze zur Erstellung von WordPress Child-Block-Themes ab.

Create Blockbase Theme Plugin

Das Automattic-Team arbeitet an einem Plugin namens Create Blockbase Theme. Dies wird die Erstellung von Child-Themes, die auf dem zuvor erwähnten Blockbase-Universum-Theme basieren, sehr einfach machen. Ben Dwyer hat beschrieben, wie Theme-Autoren Blockbase Child-Themes mit sechs einfachen Schritten und ohne eine einzige Zeile Code erstellen können.

Ich habe das Plugin in meiner lokalen Umgebung getestet, nur kleine Änderungen an meiner Blockbase-Theme-Installation vorgenommen, und alles schien zu funktionieren. Beachten Sie jedoch, dass das Plugin noch experimentell und in der Entwicklung ist, aber Sie können der Roadmap folgen, um zu sehen, was los ist.

Verwendung einer alternativen theme.json-Datei

Kjell Reigstad, Autor des Standard-WordPress-Themes Twenty Twenty-Two, demonstriert, wie der Austausch einer einzelnen theme.json-Datei durch eine andere theme.json-Datei mit unterschiedlichen Stileinstellungen das Aussehen und Gefühl eines Block-basierten Theme-Designs verändern kann.

Letzte Woche habe ich eine kurze Demo erstellt, wie die visuelle Ästhetik von Twenty Twenty-Two durch seine theme.json-Einstellungen drastisch verändert werden kann. Dieses Beispiel tauscht die Standard-JSON-Datei gegen eine mit anderen Schriftart-, Farb-, Duotone- und Abstands-Werten aus. pic.twitter.com/ab9tyGwLOS

— kjellr (@kjellr) 22. Oktober 2021

Kjell hat einen Pull Request eröffnet, der mehrere experimentelle Child-Themes zeigt, die im GitHub-Repository "theme-experiment" zum Testen verfügbar sind.

In einer ähnlichen Richtung entwickelt Ryan Welcher derzeit ein Werkzeug zum Erstellen von theme.json, das eine angepasste theme.json-Datei generiert, um Nicht-Codern die Erstellung ähnlicher Child-Themes zu erleichtern. Mehr dazu erfahren Sie in diesem WP Tavern-Beitrag.

Das Child-Theme Framboise (verfügbar im Theme-Verzeichnis) ist ein frühes Beispiel für diesen Ansatz, das nur eine einzige theme.json-Datei enthält.

Sind Child-Themes überhaupt noch notwendig?

Rich Tabor stellt die Frage:

Wenn ein Theme aus JSON und Block-Vorlagen besteht, die beide über globale Stile angepasst werden können, wozu sind dann Child-Themes gut?

— Rich Tabor (@richard_tabor) 25. Oktober 2021

Tatsächlich könnte eine einzige theme.json-Datei allein als Child-Theme dienen. Es gibt eine laufende Diskussion darüber, ob Theme-Autoren mehrere theme.json-Dateien mit Block-Themes versenden dürfen, die mehrere globale Stilvarianten anbieten. Auf diese Weise könnte ein WordPress-Benutzer eine der Variationen auswählen, die er auf der Website verwenden möchte.

Einige Funktionen von globalen Stilvarianten sind bereits in Gutenberg v12.5 enthalten und werden voraussichtlich mit WordPress 6.0 verfügbar sein.

Einige persönliche Gedanken

Ich wäre nachlässig, wenn ich dies nicht auf persönlicher Ebene kommentieren würde. Das werde ich kurz in ein paar Punkten tun.

Block-Themes sind eine WordPress-Antwort auf Jamstack-Kritik

Jamstack-Enthusiasten haben Kritik an der WordPress-Plattform geübt, insbesondere daran, dass WordPress-Themes mit PHP-Dateien überladen sind. Nun, das ist mit WordPress Block-Themes nicht mehr der Fall.

Wir haben zuvor gesehen, wie ein ganzes Theme eine einzige index.html-Datei und eine theme.json-Datei sein kann. Keine Überladung dort. Und nichts als Markup.

Ich vermisse den WordPress Customizer

Besonders die Möglichkeit, benutzerdefinierten Code einzufügen. Von nun an ist ein tiefes Verständnis der WordPress Site Editor UI erforderlich, um dasselbe zu erreichen.

Website-Anpassungen sind kinderleicht.

Die Anpassung eines klassischen Themes – selbst so etwas Minimalistisches wie das Ändern von Schriftarten – kann schwierig sein, wenn man nicht weiß, was man tut. Das hat sich mit dem Site-Editor und der Einführung der theme.json-Datei geändert, wo ein Theme angepasst (und sogar exportiert!) werden kann, ohne eine einzige Zeile Code zu schreiben.

Ich bleibe jedoch bei meiner Meinung, dass die Benutzeroberfläche des Site-Editors verwirrend ist. Ich denke, eine angenehme Benutzererfahrung ist noch weit entfernt, aber ich freue mich auf die nächste WordPress 6.0-Version für eine bessere Benutzererfahrung.

Die Hürden für die Theme-Gestaltung sinken.

Es geht weniger um PHP und Vorlagendateien, sondern mehr um die Entwicklung von Mustern und die Erstellung von Inhalten. Das klingt genau danach, wofür ein Content-Management-System ausgelegt sein sollte! Ich bin bereits begeistert von den neuen Funktionen, die für die WordPress 6.0-Version in Betracht gezogen werden.

Ressourcen

Es gibt bereits eine *Menge* anderer Artikel, die sich mit WordPress Block Themes, Full-Site-Editing und dem Block-Editor befassen. Und viele davon erschienen *bevor* WordPress 5.9 veröffentlicht wurde!

Daher finden Sie hier, zusätzlich zu diesem Artikel, eine Sammlung anderer Artikel, die Sie berücksichtigen können, wenn Sie Ihre Reise mit WordPress-Blöcken und Site-Editing beginnen oder fortsetzen.

WordPress 5.9

• Einführung in WordPress 5.9 (offizielles Release-Video)
• Erkundung von WordPress 5.9 (Video von Ann McCarthy)
• Erkundung des Navigationsblocks (Video von Ann McCarthy)
• Einführung in Twenty Twenty-Two (Kjell Reigstad)
• Wie 5.9 eine starke Grundlage für die Zukunft schafft (Gutenberg Times)
• Was ist Full Site Editing (FSE) in WordPress? (Yoast)

Site Editor und Block-Themes

• WordPress Block Editor Handbuch
• WordPress Pattern Directory
• WordPress Theme Experiments (GitHub)
• WordPress Gutenberg Blocks Grundlagen (Video von WP Apprentice)
• Einführung in Block-basierte Themes (Video, Kjell Reigstad)
• Einfaches Webdesign mit Full Site Editing (Learn WordPress)
• Wie man PHP-Vorlagen in Block-Themes verwendet (Carolina Nymark)

Ausgewählte Blogbeiträge

• Eine neue Ära für WordPress-Themes (Anders Noren)
• Gutenberg Full Site Editing und Block-basierte Themes (The Publishing Project)
• Du willst also Block-Muster erstellen? (WordPress.org News)
• Der theme.json-Horizont (Matia Ventura)
• Wechsel zu einem Block-basierten Theme (Kelly Ryelle)

Weitere nützliche Links

• WP Tavern: Die Seite behandelt Block-Themes, Gutenberg-Releases und Plugins, die den Lesern helfen, Neuigkeiten aus der WordPress-Welt zu erfahren.
• Gutenberg Times: Die Seite berichtet wöchentlich über wichtige Gutenberg-Neuigkeiten und Links zum Block-Editor und Full-Site-Editing.
• Make WordPress Themes: Veröffentlicht Besprechungsprotokolle zu Themes und eine Serie zu Gutenberg + Themes.
• Make WordPress Core: Veröffentlicht alle zwei Wochen neue Inhalte nach jedem Gutenberg-Release.

---

Wie bei Beta-Tests zu erwarten, ist der Site-Editor immer noch einschüchternd und verwirrend. Nichtsdestotrotz macht es mir Spaß, mit Block-Themes zu arbeiten. Tatsächlich habe ich Twenty Twenty-Two bereits als Child-Theme modifiziert und plane, Stilalternativen mit einer einzelnen theme.json-Datei zu erstellen.

Verwenden Sie Block-Themes in Ihrem Projekt? Wenn ja, teilen Sie Ihre Erfahrungen und Gedanken mit; ich lese gerne Kommentare und Feedback!