Kategorien
Inhalte erstellen WP kennenlernen

Die wichtigsten Neuerungen in WordPress 5.9 auf einen Blick

In WordPress 5.9 gibt es einige sehr nützliche Verbesserungen für den Block-Editor und das neue Standard-Theme Twenty Twenty-Two, das den ersten Schritt in die zweite Phase von Gutenberg wagt.

Was das alles konkret bedeutet, steht in diesem Beitrag.


Allgemeine Neuerungen für den Block-Editor

In WordPress 5.9 gibt es zahlreiche nützliche Neuerungen, die unabhängig vom verwendeten Theme allen Nutzern zur Verfügung stehen. Die Wichtigsten möchte ich im Folgenden kurz vorstellen, aber es gibt noch jede Menge andere wie z. B. zur Typografie.

Listenansicht de Luxe: verschachtelte Blöcke und Drag & Drop

Die neue Listenansicht im Block-Editor ist für mich eines der absoluten Highlights von WordPress 5.9. Es gibt drei neue Funktionen, die die alltägliche Arbeit im Block-Editor deutlich vereinfachen:

  1. Ein- und Ausklappen von verschachtelten Blöcken. Der Spalten-Block ist aufgeklappt, sodass die darin enthaltenen Blöcke vom Typ Spalte sichtbar sind.
  2. Blöcke per Drag & Drop verschieben. In der Listenansicht wird mit der Maus per Drag & Drop die dritte Spalte vor die zweite Spalte verschoben.
  3. IDs für Überschriften werden angezeigt. Rechts neben dem Block wird die ID einer Überschrift, die als HTML-Anker genutzt werden kann, hellgrau hinterlegt dargestellt. Die IDs werden von WordPress automatisch vergeben, können aber manuell geändert werden.
Die neue Listenansicht im Block-Editor
Die neue Listenansicht im Block-Editor

Die Listenansicht mausert sich mit diesen Verbesserungen zu einem sehr nützlichen Werkzeug. Besonders beim Bearbeiten von längeren Dokumenten oder komplexeren Layouts mit verschachtelten Blöcken ist die neue Listenansicht eine große Hilfe.

Galerie-Block: alle Bilder einzeln verlinken und gestalten

Der Galerie-Block wurde grundlegend überarbeitet und deutlich verbessert. Bisher konnte man einzelne Bilder in einer Galerie nur sehr eingeschränkt bearbeiten und ihnen weder Links zuweisen noch ihr Aussehen mit Stilen oder Effekten verändern.

Diese Einschränkungen führten dazu, dass Nutzer statt einer Galerie oft einzelne Bild-Blöcke in einem mehrspaltigen Layout arrangierten. Ein solcher Workaround ist mit dem neuen Galerie-Block überflüssig.

Die folgende Abbildung zeigt eine Galerie, in der alle vier einzelnen Bilder unterschiedlich bearbeitet und verlinkt wurden.

Eine Galerie mit unterschiedlich gestalteten Bildern
Eine Galerie mit unterschiedlich gestalteten Bildern

Die Reihenfolge der Bilder in einer Galerie können Sie jetzt über die Block-Symbolleiste im Editor selbst ändern. Dazu markieren Sie das gewünschte Bild und klicken dann in der Block-Symbolleiste auf das Symbol < bzw. > und ein Bild nach links bzw. rechts zu verschieben.

Blöcke gestalten mit Abständen und Rahmenlinien

Falls Sie ein bisschen CSS können, werden Sie das Box-Modell kennen und haben Eigenschaften wie padding, border und margin beim Gestalten von Blöcken bisher wahrscheinlich schmerzlich vermisst. Das ist demnächst vorbei …

Das Boxmodell zur Gestaltung von Abständen und Rahmenlinien
Das Boxmodell zur Gestaltung von Abständen und Rahmenlinien

Innenabstand (padding) und Außenabstand (margin) gestalten

In WordPress 5.9 gibt es in der Seitenleiste mit den Block-Einstellungen bei einigen Blöcken einen neuen Abschnitt namens Größe, in dem Sie Bedienelemente zur Definition von Innen- und Außenabstand finden.

Die folgende Abbildung zeigt einen Spalten-Block, bei dem die Spalten eine Hintergrundfarbe und einen Innenabstand von 1rem bekommen haben.

Drei Spalte-Blöcke mit Hintergrundfarbe und Innenabstand
Drei Spalte-Blöcke mit Hintergrundfarbe und Innenabstand

Rahmenlinie (border): Breite, Stil, Farbe, und abgerundete Ecken

Auch die Gestaltung von Rahmenlinien hält langsam aber sicher Einzug in den Block-Editor, und beim Standardblock Gruppe kann man das Feature bereits ausprobieren.

Beim Gruppe-Block (1) gibt es in der Seitenleiste mit den Block-Einstellungen einen Abschnitt Rand (2), in dem man die Breite der Rahmenlinien definieren und ihr einen Stil, eine Farbe sowie einen Radius für abgerundete Ecken zuweisen kann.

Eine Gruppe-Block mit Rahmenlinie
Eine Gruppe-Block mit Rahmenlinie

Block-Vorlagen erkunden mit einer ganzseitigen Vorschau

Block-Vorlagen gibt es seit WordPress 5.5, und sie ermöglichen es, komplexe vorgefertigte Block-Layouts mit einem Klick einzufügen.

In WordPress 5.9 gibt es im Register einen neuen Button Erkunden, der eine eine ganzseitige Vorschau aufruft, die das Sichten und Kennenlernen der verfügbaren Block-Vorlagen enorm erleichert.

Die ganzseitige Vorschau zum Erkunden von Block-Vorlagen
Die ganzseitige Vorschau zum Erkunden von Block-Vorlagen

Bei der Suche nach Block-Vorlagen mit der Suchfunktion im Block-Editor wird jetzt außerdem auch das brandneue Vorlagen-Verzeichnis auf wordpress.org/patterns durchsucht.

Verbesserte Performance beim Laden von Bildern

In WordPress 5.9 gibt es diverse Optimierungen bezüglich der Performance von WordPress-Websites, und die Wichtigste betrifft das Laden von Bildern.

Das in WordPress 5.5 eingeführte Lazy Loading galt für alle Bilder. In WordPress 5.9 wird jetzt das erste Bild sofort geladen und Lazy Loading nur auf alle folgenden Bilder auf der Seite angewendet.

Durch diese simple Maßnahme werden Seiten bis zu 30% schneller dargestellt.

WordPress 5.9 ist der erste Schritt in die zweite Phase von Gutenberg

Die bisher gezeigten Neuerungen rund um den Block-Editor stehen unabhängig vom verwendeten Theme für alle Nutzer zur Verfügung, aber die eigentliche Neuerung von WordPress 5.9 ist der erste Schritt in die zweite Phase von Gutenberg.

Falls Sie jetzt lauter Fragezeichen im Kopf haben: Gutenberg ist die Zukunft von WordPress und der Codename für ein Projekt, das WordPress in vier Phasen Schritt für Schritt einem grundlegenden Wandel unterzieht:

  1. Easier Editing: einfachere Bearbeitung von Inhalten mit dem Block-Editor
  2. Customization: Anpassung von Header, Footer und Navigation mit Blöcken
  3. Collaboration: Gemeinsames Bearbeiten von Inhalten (evtl. ab 2023 oder so)
  4. Multi-Lingual: Mehrsprachige Websites ohne zusätzliche Plugins (irgendwann mal)
Die vier Phasen von Projekt Gutenberg
Die vier Phasen von Projekt Gutenberg

Phase 1 ist »Easier Editing«: Blöcke im Inhaltsbereich

Kernstück von Phase 1 ist der Block-Editor, mit dem man Inhalte für Beiträge und Seiten erstellen und gestalten kann. Er war im Dezember 2018 in WordPress 5.0 das erste Mal dabei und in den letzten drei Jahren zu einem brauchbaren Werkzeug gereift.

Zur Anpassung der anderen Bereiche einer Website wie z. B. Header, Footer und Navigation benutzte man in Phase 1 aber nach wie vor den Customizer, Menüs und Widgets, und das ändert sich jetzt in WordPress 5.9, wenn man ein block-basiertes Theme aktiviert.

Phase 2 ist »Customization«: Blöcke in allen Bereichen

Phase 2 begann ganz vorsichtig in WordPress 5.8 mit Blöcken in Widgetbereichen, geht aber jetzt in WordPress 5.9 mit block-basierten Themes erst so richtig los. Dabei gibt es grundlegende Änderungen bei der Funktionsweise von Themes und der damit verbundenen Anpassung einer WordPress-Website an die eigenen Design-Wünsche.

Blöcke können in Phase 2 nicht mehr nur im Inhaltsbereich eingesetzt werden, sondern auch zur Gestaltung anderer Seitenbereiche wie Header, Footer und Navigation. Daher spricht man häufig auch von Full Site Editing (FSE):

Full site editing is a set of new WordPress features: Block themes, template editing, site blocks, and global styles

Carolina Nymark auf fullsitediting.com

Voraussetzung für Full Site Editing ist ein block-basiertes Theme. Das neue Standard-Theme Twenty Twenty-Two, das zusammen mit WordPress 5.9 ausgeliefert wird, ist ein solches block-basiertes Theme, aber ansonsten gibt es noch nicht wirklich viele davon:

  • Im Theme-Verzeichnis stehen heute 9.174 Themes zur Verfügung.
  • Heute haben 54 davon den Tag »Full Site Editing«, der sie als block-basiertes Theme kennzeichnet.
  • Die anderen 9.120 Themes sind traditionelle WordPress-Themes.

Wenn man eines dieser über neuntausend traditionellen Themes aktiviert, bleibt WordPress 5.9 quasi in Gutenberg Phase 1 stehen, und die Anpassung der Site erfolgt wie gewohnt über Customizer, Menüs und Widgets.

»Full Site Editing« in WordPress 5.9

Block-basierte Themes und Full Site Editing sind eine gute Idee und die Zukunft von WordPress, aber Matt Mullenweg hat von vornherein versucht, die Erwartungen an WordPress 5.9 etwas zu dämpfen.

Auf seiner alljährlichen Keynote State of the Word im Dezember 2021 sagte er folgendes:

With 5.9 … we are at the MVP, the Minimum Viable Product of this customization phase of Gutenberg.

Matt Mullenweg – State of the Word (bei 50:54min)

Wikipedia beschreibt ein Minimum Viable Product als »die erste minimal funktionsfähige Iteration eines Produkts, die dazu dient, möglichst schnell aus Nutzerfeedback zu lernen und so Fehlentwicklungen an den Anforderungen der Nutzer vorbei zu verhindern«. Ein MVP ist also eine Art erster Prototyp und der Anfang einer grundlegenden Änderung, nicht der Endpunkt.

Anders ausgedrückt: Full Site Editing in WordPress 5.9 ist ein Auto mit Antrieb und vier Rädern. Kein Tesla, sondern eher ein Trabi mit Elektromotor.

Man kann damit experimentieren, Spritztouren machen und schauen, wie so ein Elektro-Auto überhaupt funktioniert, aber wenn man auf dem schnellsten Wege zur eigenen Website will, gibt es effektivere Transportmittel:

  • Einsteiger sind zur Erstellung ihrer Website vorerst mit einem traditionellen Theme wie Twenty Twenty ziemlich sicher besser dran.
  • Zum Durcharbeiten von »Einstieg in WordPress 5« ist nach wie vor das im Buch verwendete Standard-Theme Twenty Nineteen die beste Wahl.

Beliebte Themes wie GeneratePress oder Kadence sind, um in der E-Auto-Metapher zu bleiben, eine Art Hybrid: traditionelle Themes mit Block-Plugins, die trotzdem sowas wie Full Site Editing ermöglichen.

Ein kurzer Blick auf »Twenty Twenty-Two«

Wenn Sie sich das Frontend von Twenty Twenty-Two mal kurz anschauen möchten:

Wenn Sie Full Site Editing selbst ausprobieren möchten, können Sie auf TasteWP.com buchstäblich in Sekunden eine neue Test-Website erstellen und dann mit Twenty Twenty-Two experimentieren. Oder Sie erstellen eine lokale Test-Site mit Local for WordPress.

Das Frontend von Twenty Twenty-Two

Das Frontend von Twenty Twenty-Two ist schlicht, hübsch und manchmal mit Vögeln:

Die Startseite von Twenty Twenty-Two
Die Startseite von Twenty Twenty-Two
Die Beispielseite von Twenty Twenty-Two
Die Beispielseite von Twenty Twenty-Two

Inhalte gestalten mit Block-Vorlagen

Das Herzstück von Twenty Twenty-Two sind die mitgelieferten fertigen Block-Vorlagen, die im Block-Editor auf ihre Entdeckung warten.

Diese Vorlagen, im Englischen Patterns genannt, sollte man sich vor dem Hinzufügen von Inhalten unbedingt in aller Ruhe näher anschauen sollte, denn sie sind zum Teil echt toll und können eine Menge Arbeit ersparen.

Die Block-Vorlagen von Twenty Twenty-Two
Die Block-Vorlagen von Twenty Twenty-Two

Full Site Editing mit Twenty Twenty-Two ausprobieren

Das Hinzufügen von Inhalten auf Beiträgen und Seiten ist in Twenty Twenty-Two nicht viel anders als in traditionellen Themes, aber wirklich revolutionär wird es, wenn man seine Website im Menü Design anpassen möchte.

Hier gibt es, wie weiter oben beschrieben, keinen Customizer, keine Menüs und keine Widgets mehr. Stattdessen erscheint ein neuer Menüpunkt mit dem schönen Namen Editor beta, und dieser Editor beta ermöglicht Full Site Editing.

In der folgenden Abbildung wurde Twenty Twenty-Two bereits ein bisschen angepasst, aber die Arbeit mit dem Editor ist nicht wirklich intuitiv.

Der neue Editor (beta) zur Anpassung der Website in WordPress 5.9

In der Abbildung sehen Sie die folgenden Werkzeuge:

  1. Mitten auf der Seite ist der Block-Editor, mit dem Sie die Website gestalten können. Es gibt jede Menge Templates zur Auswahl sowie neue Blöcke wie Website-Titel, Website-Untertitel, Website-Logo, Navigation und mehr, aber als Einsteiger steht man davor wie Ochs‘ vorm Berg und hat wahrscheinlich viele Fragezeichen im Kopf.
  2. Einfacher zu verstehen sind die Stile (Global Styles) in der Seitenleiste rechts. Damit können Sie für die gesamte Website oder für einzelne Blöcke zahlreiche Einstellungen zur Typografie und zu Farben ändern. Falls Sie es probieren: die Hintergrundfarbe des Headers können Sie in Stile nicht ändern. Dazu müssen Sie den Header im Block-Editor markieren und dann in den Block-Einstellungen die Hintergrundfarbe anpassen.
  3. Mit einem Klick auf das WordPress-Symbol links oben erscheint nicht die WP-Admin-Oberfläche, sondern eine schwarze Seitenleiste, in der man auswählen kann, was im Editor bearbeitet werden soll: Website (das ist die Startseite), Templates oder Template-Teile. Zurück zu WP-Admin kommt man mit dem Link Dashboard, der tatsächlich das Dashboard aufruft (und nicht das Menü Design aus dem wir kamen).
  4. In der schwarzen Seitenleiste gibt es die Optionen Website, Template und Template Parts, die für Einsteiger wahrscheinlich nicht sehr aussagekräftig sind. Kurzform: Templates sind Vorlagen für WordPress-Seitentypen, Template Parts sind Teile davon, die auch in mehreren Templates verwendet werden können, wie z. B. Header und Footer.

Man schreibt hier im Editor beta zur Anpassung der Website zwar wie versprochen keinen Code, aber man muss den Block-Editor und vor allem die Arbeit mit verschachtelten Blöcken wirklich gut beherrschen sowie ein zumindest grundlegendes Verständnis von Dingen wie Templates und Template Parts haben, um die Site sinnvoll anpassen zu können.

Die Möglichkeiten tendieren mit Full Site Editing gegen unendlich, aber Editor beta ähnelt im jetzigen Zustand einer Kettensäge:

  • Richtig angewendet liegt der Baum im Nu da, wo man ihn haben will.
  • Bei unsachgemäßer Anwendung hingegen ist die Unfallgefahr groß und die Site kaputt.

Die Anpassung einer WordPress-Website ist mit dem in traditionellen Themes vorhandenen Customizer in WordPress 5.9 noch deutlich intuitiver (und vor allem sicherer).

Weitere Quellen

Zum Abschluss möchte ich Ihnen noch einige nützliche Videos, Beiträge und Tutorials zeigen, die mir beim Verstehen von Full Site Editing und Twenty Twenty-Two geholfen haben. Die Liste wird bestimmt noch erweitert.

»WordPress 5.9 Overview« von Ellen Bauer (Elma Studio)

Ellen Bauer, die als Elma Studio zusammen mit ihrem Partner Manuel seit vielen Jahren WordPress-Themes entwickelt, hat einen halbstündigen Videorundgang zu WordPress 5.9 aufgenommen, dessen Schwerpunkt auf Full Site Editing und Twenty Twenty-Two liegt.

Hier klicken, um den Inhalt von YouTube anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von YouTube.

Man merkt, dass Ellen wirklich weiß wovon sie redet, und nach dieser halben Stunde haben Sie eine sehr gute Vorstellung davon, was mit Full Site Editing möglich werden wird.

Tutorials auf »Learn WordPress«

Auf learn.wordpress.org gibt es zwei gute Tutorials zu Global Styles und Full Site Editing.

Video zu »Global Styles« (Stile)

Zum Kennenlernen der Global Styles gibt es auf Learn WordPress ein sechsminütiges Video, das die Funktion anhand von Twenty Twenty-Two sehr schön erläutert.

Hier klicken, um den Inhalt von VideoPress anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von VideoPress.

Kurs zu »Full Site Editing«

Ebenfalls auf Learn WordPress gibt es einen Kurs zu Full Site Editing mit Twenty Twenty-Two:

Der Kurs besteht aus vier Teilen mit insgesamt 15 Lektionen:

  1. Introduction to Full Site Editing (FSE). Im ersten Teil lernen Sie die wichtigsten Begriffe kennen und erstellen eine Test-Site mit Local WP (online mit TasteWP geht natürlich auch).
  2. Block-Themes. Im zweiten Teil erfahren Sie, was ein Block-Theme ist und installieren dann Twenty Twenty-Two.
  3. Block Patterns (Vorlage) In Teil 3 lernen Sie einige Blockvorlagen von Twenty Twenty-Two kennen. Danach ändern Sie im Editor beta die Beitragsseite (Template Home), indem Sie die vorhandenen Blöcke entfernen und einige Block-Vorlagen einfügen.
  4. Styles (Stile). Im letzten Teil sehen Sie, wie Sie mit der Seitenleiste Stile das Aussehen der gesamten Website und einzelner Blöcke ändern.

Nach diesem Grundkurs bekommen Sie eine gute Idee davon, was Full Site Editing ist.

Weitere Beiträge zu »Full Site Editing«

Die unermüdliche Birgit Pauli-Haack hat in der Gutenberg Times eine phantastische Reading List mit Quellen zum Thema Full Site Editing und Block-Themes zusammengestellt:

Der immer lesenswerte Justin Tadlock von WP Tavern hat unter anderem folgende Beiträge zu Block-Themes und WordPress 5.9 geschrieben:

Zur Technik von Block-Themes finden Sie z. B. im folgenden Beitrag weitere Informationen:

Dort werden technische Details zu Editor, zu Global Styles und zur für Block-Themes so wichtigen Datei theme.json erläutert.

Fazit: WordPress 5.9 verbessert den Block-Editor und bietet ein solides Fundament für die Zukunft

Die Neuerungen von WordPress 5.9 kann man in zwei Kategorien aufteilen:

  1. Allgemeine Verbesserungen rund um den Block-Editor
  2. Das Standard-Theme Twenty Twenty-Two mit Full Site Editing

Wer eine bestehende WordPress-Version aktualisiert wird die Neuerungen im Block-Editor begrüßen und mit Twenty Twenty-Two nichts zu tun haben.

Wer WordPress 5.9 aber neu installiert, dem begegnet nach der Installation zunächst einmal das neue Standard-Theme Twenty Twenty-Two.

Man kann das Theme dann Schritt für Schritt kennenlernen und wie gesehen im Editor beta mit dem aktuellen Stand von Full Site Editing experimentieren.

Wer aber einfach nur möglichst schnell eine Website haben möchte, der kann in vielen Fällen besser ein traditionelles Theme wie Twenty Twenty oder GeneratePress aktivieren und damit seine Website bauen. Das gilt besonders für Einsteiger.

Das Dilemma »traditionelles Theme oder Block-Theme« ist vergleichbar mit der Situation bei Autos:

  • Traditionelle WordPress-Themes sind Autos mit Verbrennungsmotoren. Erprobt, leistungsfähig und sofort einsatzbereit, aber auf lange Sicht werden sie verschwinden.
  • Block-Themes sind die ersten Autos mit Elektromotor. Ihnen gehört die Zukunft, aber man braucht im Augenblick noch eine Menge guten Willen, da sie nur bedingt praxistauglich und definitiv nicht einsteigerfreundlich sind.

WordPress ist in einer Übergangszeit, und die richtige Entscheidung hängt vom Einzelfall ab.

Von Peter Müller

Sie kennen mich vielleicht von meinen Büchern und Videokursen. Meine Spezialität ist es, trockene und komplizierte Sachverhalte auf einfache und unterhaltsame Weise darzustellen. Website: pmueller.de

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.