Eine Einführung in WordPress-Blockdesigns

Die Komponenten, aus denen ein typisches WordPress-Theme besteht, haben sich im Laufe der Jahre nicht wesentlich verändert. So sehr, dass Projektmitbegründer Matt Mullenweg witzelte, dass das Kubrick-Design der alten Schule (veröffentlicht 2005) immer noch mit modernen Versionen des Content-Management-Systems funktioniert.

Sicher, Theme-Entwickler haben ihre eigenen Ergänzungen hinzugefügt. Wir haben alles gesehen, von komplexen Einstellungs-UIs bis hin zu integrierten Seitenerstellern. Aber im Kern haben die Themen eine konsistente Struktur beibehalten. Das heißt, bis zur Einführung von Blockthemen.

Block-Themes werden die Zukunft von WordPress werden. Sie werden die Art und Weise verändern, wie wir Websites erstellen und pflegen. Darüber hinaus sind sie enger in den Gutenberg-Blockeditor integriert als ihre „klassischen“ Gegenstücke.

Sie fragen sich, was die ganze Aufregung soll? Heute werden wir Sie mit den Grundlagen von WordPress-Blockdesigns vertraut machen. Unterwegs werden wir untersuchen, wie sie sich von traditionellen Themen unterscheiden und abheben. Lass uns anfangen!

Warum Themen blockieren?

In den ersten Jahren seines Bestehens war der Blockeditor in erster Linie ein Mittel zum Stylen und Erstellen von Inhalten. In Kombination mit einem klassischen Thema bedeutete dies, dass Seiten und Beiträge nach Herzenslust gestaltet werden konnten.

Wenn es darum geht, Änderungen vorzunehmen, die sich auf das gesamte Theme auswirken, ist der WordPress Customizer die erste Anlaufstelle geblieben. Dieses Tool bietet Zugriff auf Design- und Layouteinstellungen, die vom Autor des Designs zur Verfügung gestellt wurden. Wenn es nicht im Customizer ist, müssen Sie wahrscheinlich in den Code eingreifen.

Einer der wichtigsten Grundsätze des Blockeditors war jedoch die Schaffung einer einheitlicheren Oberfläche innerhalb des WordPress-Dashboards. Wir haben dies bereits gesehen, als der Widgets-Bildschirm zu einer blockbasierten Benutzeroberfläche wechselte. Der Customizer passt einfach nicht in dieses Schema.

Die Einführung von Full Site Editing (FSE) ist der nächste Schritt in diesem Prozess. Es geht über die bloße Gestaltung unserer Seiten und Beiträge hinaus. Jetzt kann jeder Aspekt des Designs eines Themes (Kopfzeile, Fußzeile, Seitenvorlagen usw.) direkt in WordPress verwaltet werden.

Blockthemen dienen als Tor zu dieser Funktionalität. Als solche werden sie ausschließlich mit Blick auf Blöcke erstellt.

Das Innenleben eines WordPress-Block-Themes

Es gibt nicht viele Ähnlichkeiten zwischen klassischen und Blockthemen. Aber beide haben eine Reihe von Grundregeln, die ihr Make-up bestimmen. Wenn Sie ein Blockdesign herunterladen und in seiner Dateistruktur navigieren, können einige wichtige Kontraste auffallen.

Vorlagendateien sind HTML und nicht PHP

In einem klassischen Design finden Sie Vorlagendateien mit Namen wie index.php und header.php . Block-Designs verzichten auf PHP und tragen stattdessen die Dateierweiterung .html .

Darin enthält eine Vorlagendatei eine Kombination aus HTML und Block-Markup. Schauen wir uns zum Beispiel diese Vorlage aus der offiziellen WordPress-Dokumentation an:

 <!-- 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 -->

Block-Markup sieht sehr nach HTML-Kommentaren aus. Es enthält jedoch eine Syntax zum Aufrufen bestimmter Blöcke in der Vorlage. Die WordPress Full Site Editing-Website hat eine praktische Referenz, die Markup für jeden Standardblock enthält.

Und wenn Ihnen diese Art von Code bekannt vorkommt, haben Sie vielleicht etwas Ähnliches in der Code-Editor-Ansicht von Gutenberg gesehen.

Die Verwendung von Ordnern

Klassische Designs können Vorlagen in Ordnern speichern, dies ist jedoch nicht erforderlich. Blockdesigns erfordern einige Unterordner:

/parts
Enthält wiederverwendbare Elemente wie Kopfzeile, Fußzeile und Seitenleiste.

/templates
Enthält Vorlagen für verschiedene Arten von Inhalten. Elemente wie Seiten, Beitragsarchive und einzelne Beiträge sind gängige Beispiele. Beachten Sie, dass ihre Namenskonvention der WordPress-Vorlagenhierarchie folgt – eine weitere Ähnlichkeit mit klassischen Themen.

Einer der positiven Nebeneffekte dieser Anordnung ist, dass Themen besser organisiert werden. Eine standardisierte Ordnerstruktur bedeutet weniger Zeitaufwand für die Suche nach einer bestimmten Datei.

Theme.json-Styling

Die Datei theme.json wird verwendet, um dem Blockeditor Standardeinstellungen zuzuweisen. Dies bedeutet unter anderem, dass es möglich ist, Standardfarbpaletten, Typografie und Abstände festzulegen. Die Einstellungen können für die gesamte Website gelten oder auf bestimmte Blöcke angewendet werden.

Da theme.json basierend auf seiner Konfiguration automatisch das entsprechende CSS generiert, müssen Sie die style.css -Datei eines Designs möglicherweise nicht so sehr füllen. In diesem Szenario wird das Stylesheet verwendet, um ein paar Grundlagen zu definieren, während alles andere auf dieser neumodischen Datei beruht.

Erstellen und Bearbeiten von Vorlagen

WordPress bietet seit langem die Möglichkeit, die Vorlagendateien eines Themes direkt im Dashboard zu bearbeiten. Davon wurde oft abgeraten, da selbst ein kleiner Codierungsfehler eine Website unzugänglich machen konnte. Ganz zu schweigen von der Möglichkeit, dass Änderungen überschrieben werden, wenn ein Theme aktualisiert wird (daher ein Grund für die Verwendung eines Child-Themes). Einige Entwickler schalten die Funktion vollständig aus, um auch nur die geringste Möglichkeit einer Katastrophe zu vermeiden.

Aber bei Blockthemen dreht sich alles um die Bearbeitung innerhalb des Dashboards. Vorlagen, die in einem Design enthalten sind, können über den Blockeditor optimiert werden, und es können auch neue benutzerdefinierte Vorlagen erstellt werden.

Wie zu erwarten ist, ist Code in diesem Szenario vollständig optional. Alles kann über den neuen Site-Editor ( Darstellung > Editor – WordPress 5.9 oder höher erforderlich ) bearbeitet werden, der den alten Customizer ersetzt, wenn ein Blockdesign aktiviert ist. Und genau wie Seiten oder Beiträge verwendet der Site-Editor die vertraute Benutzeroberfläche des Blockeditors.

Und das ist nicht alles. Alle Änderungen, die Sie in WordPress vornehmen, können exportiert werden. Auf diese Weise können Sie Ihr benutzerdefiniertes Blockdesign auf mehreren Websites verwenden.

Dies senkt die Eintrittsbarriere für diejenigen, die Themen anpassen oder sogar erstellen möchten. Jetzt können ein grundlegendes Auge für Design und ein funktionierendes Wissen über Blöcke zu einer benutzerdefinierten Website führen.

Dinge, die Sie im Auge behalten sollten

Bevor Sie eintauchen und alle Ihre Websites auf die Verwendung von Blockdesigns umstellen, sollten Sie einige Dinge wissen.

In erster Linie sind Blockthemen eine im Entstehen begriffene Technologie . Nicht alle Funktionen wurden fertiggestellt und einige Best Practices müssen ausgebügelt werden. Außerdem sehen wir gerade erst, wie diese Themen in einer Produktionsumgebung funktionieren. Erwarten Sie mehrere Änderungen, wenn sich die Dinge weiterentwickeln.

Wenn Sie Websites für Kunden erstellen und eine gewisse Flexibilität für die Zukunft bewahren möchten, können hybride Themen von Interesse sein. Sie ermöglichen die Verwendung von FSE-Funktionen und behalten gleichzeitig die PHP-Struktur eines klassischen Themas bei. Sie können sogar ein vorhandenes Design nachrüsten, um diese Funktionalität zu nutzen.

Schließlich bedeuten Blockthemen nicht das Ende klassischer Themen – zumindest nicht auf absehbare Zeit. Damit muss der Übergang zu dieser neuen Art der Thematisierung nicht sofort erfolgen. Es ist beispielsweise in Ordnung, mit Blöcken in einer lokalen Umgebung zu experimentieren, während Sie sich in der Produktion immer noch auf Ihre bevorzugten klassischen Themen verlassen.

Themenressourcen blockieren

Wenn Sie mehr über WordPress-Blockthemen erfahren möchten, stehen Ihnen einige hervorragende Ressourcen zur Verfügung. Hier sind einige unserer Favoriten:

• Block-Theme-Dokumentation von WordPress
• Blockbase-Theme von Automattic
• Vollständige Seitenbearbeitung von Carolina Nymark
• Der ultimative Leitfaden für WordPress-Blockvorlagen in Gutenberg von Rich Tabor
• Die WordPress-Block-Theme-Revolution nimmt leise Fahrt auf von Justin Tadlock
• WordPress-Theme-Experimente von WordPress