Gutenberg 13.0 fügt Textauswahl über mehrere Blöcke hinweg, neue Stack-Gruppenvariationen und empfohlene Cover-Blöcke hinzu

Veröffentlicht: 2022-04-15

Gutenberg 13.0 ist heute früh im WordPress-Plugin-Verzeichnis gelandet. Es ist eine der umfangreicheren Veröffentlichungen der letzten Zeit und enthält die letzten Funktionen, die mit WordPress 6.0 ausgeliefert werden sollten.

Zu den herausragenderen Funktionen gehören die partielle Textauswahl mit mehreren Blöcken, Cover-Blöcke mit ausgewählten Bildern, eine Stack-Variante für Gruppen und die musterbasierte Seitenerstellung. Und es gibt noch viel mehr zu durchwühlen.

Ich habe viele der Big-Ticket-Artikel in diesem Beitrag behandelt. Um jedoch den vollen Umfang der Veröffentlichung zu verstehen, sehen Sie sich die Tickets an, die in der Ankündigung der Veröffentlichung von Gutenberg 13.0 verlinkt sind.

Weitere bemerkenswerte Highlights sind die Abstandsunterstützung für den Spaltenblock, die Optimierung von Webfonts, Duotones für Platzhalter für das Site-Logo und Post Featured Image sowie vertikale Ausrichtungen für Blöcke mit Flex-Steuerelementen.

Teilweise Textauswahl

WordPress öffnet einen Beitrag mit mehreren Absätzen. Text wird über zwei verschiedene Absatzblöcke hinweg ausgewählt.
Auswählen von Text über zwei Blöcke hinweg.

Benutzer können jetzt Text über mehrere Rich-Text-Blöcke hinweg auswählen, z. B. Absatz, Überschrift, Liste und Zitat. In der Vergangenheit wurde durch das Hervorheben von Teiltexten automatisch eine Auswahl aus mehreren Blöcken erstellt, was normalerweise nicht wünschenswert ist.

Die Änderung unterstützt das Drücken der Enter , um ausgewählten Text zu löschen und einen neuen Block zu erstellen, die Backspace zum Entfernen und Zusammenführen rückwärts und die Del -Taste zum Entfernen und Zusammenführen vorwärts. Durch die Eingabe wird der ausgewählte Text durch die neue Eingabe ersetzt.

Ich habe diese neue Funktion letzten Monat in einem ausführlichen Beitrag behandelt.

Stapel- und Gruppenvariationen

WordPress-Post-Editor mit drei Gruppenblöcken. Die erste ist die Standardeinstellung. Die zweite ist die Row-Variation. Die dritte ist eine gestapelte Variante.
Gruppenblock gefolgt von Zeilen- und Stapelvariationen.

Gutenberg 13.0 führt eine neue Stack-Variante für den Group-Block ein. Durch die Änderung werden insgesamt drei Variationen erstellt, wobei die Standardausgabe und die Zeile gezählt werden.

Auf den ersten Blick scheinen Stack und der Standard-Gruppenblock nicht viel anders zu sein. Schließlich handelt es sich bei beiden um Container für vertikal gestapelte Inhalte. Die Stack-Variante ist jedoch technisch eher eine Flexbox als ein Flow-Layout. Ich bin mir nicht sicher, wie sich dies auf Endbenutzer auswirken wird, die den Unterschied möglicherweise nicht sofort verstehen. Dies sollte jedoch ein willkommenes Werkzeug zum Erstellen fortgeschrittener Layouts in Themen sein.

Die Stack-Variante kapselt alle verschachtelten Blöcke vollständig ein und deaktiviert ihre Ausrichtungssteuerungen (z. B. rechts ausrichten, breit ausrichten usw.). Der Stapel selbst verfügt jedoch über Ausrichtungssteuerelemente zum Ausrichten von Inhalten links, rechts und zentriert.

WordPress-Post-Editor. Ein Stapel-/Gruppenblock enthält ein Bild, eine Überschrift und einen Absatz. Sie werden rechts neben dem Container ausgerichtet.
Stack-Variation mit inhaltlich gerechtfertigtem Recht.

Eine Einstellung, die unklar erscheinen mag, ist das Steuerelement mit der Bezeichnung „Umbruch in mehrere Zeilen zulassen“. Dafür gibt es mindestens einen möglichen Anwendungsfall. Es ist möglich, dass ein gestapeltes Layout auch horizontal ist, wenn eine Höhe festgelegt ist. Derzeit wird jedoch keine solche Höhensteuerung in der Benutzeroberfläche angezeigt.

Die Row-Variation wird auch beim ersten Einfügen stark verbessert. Es gibt jetzt eine klare Anzeige, dass neu eingefügte Blöcke horizontal angeordnet sind.

Neben der teilweisen Textauswahl können Benutzer die ausgewählten Blöcke über die Symbolleiste schnell in eine Gruppe, Reihe oder einen Stapel einfügen.

Cover-Block + Ausgewähltes Bild

WordPress-Einzelpostansicht am Frontend. Hinter der Kopfzeile der Website und des Beitrags befindet sich ein Hintergrundbild, das sich über die Seite erstreckt.
Verwenden eines vorgestellten Bildes innerhalb des Cover-Blocks für einzelne Post-Header.

Es gibt jetzt einen neuen Umschalter „Vorgestelltes Bild verwenden“ in der Symbolleiste, wenn ein Cover in den Editor eingefügt wird. Das Einschalten bindet die Bilddaten an den Block.

Manchmal ist es schwierig, Favoriten auszuwählen, wenn neue Funktionen so schnell landen, wie man sie testen kann. Die Verwendung von vorgestellten Bildern in Cover-Blöcken ist jedoch eines der Dinge, auf die ich mich am meisten freue. Ich habe bereits viele Ideen im Kopf, von denen ich einige bei der Berichterstattung über dieses Feature letzte Woche geteilt habe.

Ich bin gespannt, was Theme-Autoren und Benutzer damit machen. Dies eröffnet eine ganz neue Welt der Gestaltungsmöglichkeiten für Blockthemen.

Globale Stilvariationen

WordPress-Site-Editor mit geöffnetem Bedienfeld „Globale Stile“. Der Abschnitt "Stile durchsuchen" ist ausgewählt und zeigt zwei Karten, eine helle und eine dunkle.
Globale helle und dunkle Stilvariationen in der Seitenleiste.

Die Arbeit an der Ausarbeitung der Funktion für globale Stilvariationen wird fortgesetzt. Es wurde erstmals mit Gutenberg 12.5 gestartet und ermöglicht es Themenautoren, mehrere /styles/*.json zu versenden, zwischen denen Benutzer wechseln können. Im Wesentlichen handelt es sich um einen themenspezifischen „Skins“-Selektor.

Das Update unterstützt ein neues title in den JSON-Dateien für eine benutzerfreundliche Bezeichnung. Andernfalls wird auf den Dateinamen ohne Erweiterung zurückgegriffen.

Wenn ein Benutzer eine Stilkarte in der Benutzeroberfläche bewegt, wird sie umgedreht, um den Titel und weitere für die Variation verfügbare Farben anzuzeigen. Leider zieht die umgedrehte Version der Box die ersten vier Farben, die durch das Thema definiert sind. Dies kann manchmal zu einer schönen und sauberen Darstellung der Variation führen. Es kann auch ein Schandfleck sein, der dem Benutzer keine nützlichen Informationen über den Stil selbst liefert.

Theme-Autoren können dies steuern, indem sie ihre Farbdefinitionen in ihren *.json Dateien manövrieren. Aber es ist bestenfalls ein Hack. Da diese Methode nicht offiziell ist, gibt es keine Garantie dafür, dass sie in Zukunft funktionieren wird. Außerdem ist es eine schnelle Möglichkeit, unorganisierten Code für diejenigen zu erstellen, die gerne Ordnung halten.

Neue Grenzkontrollkomponenten

Bilderbuchansicht des Border Box Control. Es zeigt ein Steuerelement mit vier Sätzen von Farb- und Breiteneinstellungen für den oberen, rechten, unteren und linken Rand.
Individuelle Blockgrenzen definieren.

Gutenberg 13.0 führte neue BorderControl und BorderBoxControl Komponenten ein. Dies ist eine Überarbeitung der vorherigen Implementierung des Border-Design-Tools. Es wird Benutzern schließlich ermöglichen, die Rahmenbreite, den Stil und die Farbe aller vier Seiten für Blöcke zu definieren, die sich für die Rahmenunterstützung entscheiden. Außerdem haben Theme-Autoren über theme.json die gleiche Feinsteuerung.

Während die neuen Komponenten jetzt verfügbar sind, ist die Blockunterstützung erst mit Gutenberg 13.1 geplant. Technisch ist es bereits in die Entwicklungsversion des Plugins eingebunden.

Erstellen Sie neue Seiten mit Mustern

WordPress-Bildschirm zum Hinzufügen einer neuen Seite. Es gibt ein Overlay-Modal mit einem 2x2-Raster von Inhaltsmustern aus dem Thema.
Modales Muster beim Hinzufügen einer neuen Seite.

Das Erstellen komplexer Seitenlayouts ist einfacher geworden. Beim Hinzufügen einer neuen Seite erscheint ein Modal auf dem Bildschirm. Es ermöglicht Benutzern, aus einer Liste von „Inhaltsmustern“ auszuwählen, die in die Seite eingefügt werden sollen. Dies kann so einfach sein wie ein paar Blöcke zum Erstellen eines Info-/Profil-Layouts. Oder es kann ein ausgewachsenes Titelseitendesign sein. Von diesem Punkt an können Benutzer die Teile speziell für ihre Sites anpassen.

Diese Funktion hängt davon ab, ob Themenautoren benutzerdefinierte Muster für den core/post-content Blocktyp registrieren. Andernfalls sehen Benutzer nur den Standardeditor. Themer sollten anfangen zu experimentieren, wie sie diese neue Funktion präsentieren können, wenn sie nächsten Monat neben WordPress 6.0 landet.

Kommentar-Abfrageschleife ersetzt Post-Kommentar-Block

WordPress-Site-Editor mit angepasstem Kommentar-Abfrageschleifenblock, der die Kommentare eines Beitrags im Frontend anzeigt.
Kommentare Query Loop-Block im Site-Editor.

Der vorhandene Post-Kommentare-Block wurde zugunsten der neueren Kommentar-Abfrageschleife und der zugehörigen Blöcke verworfen. Es wird immer noch funktionieren, wie bei anderen veralteten Blöcken. Es wird jedoch nicht im Inserter angezeigt.

Kommentare Query Loop bietet eine viel bessere Designer- und Benutzererfahrung. Es hat jedoch noch keine Funktionsparität mit der Lösung, die es ersetzt, zumindest in Gutenberg 13.0.

Einige der Probleme, die ich in meiner früheren Berichterstattung festgestellt habe, wie z. B. die fehlende Kommentar-ID und Klassen, wurden bereits in Trunk angesprochen. Für den Titel „X Antworten auf Beitrag“ gibt es allerdings noch keine Lösung. Ich gehe davon aus, dass diese und die verbleibenden Falten in den kommenden Wochen ausgebügelt werden. Allerdings sollten Themenautoren, die auf dem neusten Stand der Technik aufbauen, bestehende Probleme im Auge behalten.