Gutenberg 12.1 behebt Block Appender Layout Shift, fügt Vorlagenlistenansichten hinzu und verbessert globale Stile

Veröffentlicht: 2021-12-09

Heute früh ist Gutenberg 12.1 im WordPress-Plugin-Verzeichnis gelandet. Die neueste Version war stark an Verbesserungen der Benutzererfahrung beteiligt, darunter eine Korrektur für die Block-Appender-Layoutverschiebung, neue globale Stilfunktionen und eine verbesserte Vorlagenlistenansicht. Themenautoren haben auch ein neues Flag zum Aktivieren aller Erscheinungsbild-bezogenen Tools.

WordPress 5.9 sollte heute auf den Markt kommen, wurde aber auf den 25. Januar 2022 verschoben. Die Mitwirkenden brauchten mehr Zeit, um den Website-Editor und die zugehörigen Tools, die mit der Veröffentlichung gebündelt sind, zu verfeinern. Bisher nutzen sie die zusätzliche Zeit, um Fehler zu beheben und eine insgesamt bessere Benutzererfahrung zu schaffen.

Keine Layoutverschiebung mehr

Wenn dies die einzige Änderung in Gutenberg 12.1 gewesen wäre, wäre ich der glücklichste Benutzer der Welt gewesen. Glücklicherweise gibt es noch andere nette Dinge, aber mein größtes Ärgernis in drei Jahren mit dem Blockeditor wurde jetzt behoben.

Der Block-Appender (diese kleinen + -Schaltflächen) im Inhaltsbereich werden jetzt mit fester Positionierung angezeigt. Das bedeutet, dass, wenn Sie Blöcke auswählen, insbesondere solche, die in anderen verschachtelt sind, der Bildschirm nicht mehr herumhüpft, das Layout verschiebt oder Leerzeichen in einem ansonsten perfekten Abschnitt hinterlässt.

Die Appender-Schaltfläche ändert das Layout nicht.

Ich weiß aus Gesprächen mit anderen, dass dies in der Vergangenheit ein Schmerzpunkt beim Erstellen komplexer Layouts war. Einige würden den Blockeditor überhaupt nicht verwenden, weil er so irritierend war. Wenn Sie in dieses Lager fallen, lohnt es sich, es noch einmal zu versuchen. Es ist eine deutliche Verbesserung der Benutzererfahrung.

Globale Stilverbesserungen

Benutzer können jetzt benutzerdefinierte Farbverläufe über den Farbpalettenabschnitt in der Seitenleiste für globale Stile definieren. Diese werden auf der gesamten Website verfügbar sein und sind nicht an das Thema gebunden.

Erstellen eines benutzerdefinierten Farbverlaufs.

Die Palette zeigt auch Duotone-Farben unter demselben Verlaufsbereich. Es gibt jedoch noch keine Option zum Erstellen benutzerdefinierter Duotone-Filter. Es ist ein schreibgeschützter Abschnitt.

Das globale Styles-Panel teilt auch Typografie-Optionen zwischen Text- und Link-Elementen auf und öffnet so die Tür für andere HTML-Elemente in der Zukunft.

Benutzer sollten dies wahrscheinlich nicht für Links ändern. Stattdessen sollten sie im Allgemeinen mit dem umgebenden Text übereinstimmen. Wenn wir in Zukunft Textdekoration oder ähnliche Optionen bekommen, könnte die Trennung sinnvoller sein. Das Ändern von Einstellungen wie Schriftgröße oder Zeilenhöhe würde sich jedoch wahrscheinlich nachteilig auf das Design auswirken.

Ansichten von Vorlagen und Vorlagenteilen

Gutenberg 12.1 führt eine neue Vorlagen- und Vorlagenteile-Listenansicht aus dem Site-Editor ein. Die Benutzeroberfläche für diese Funktion ist in den letzten paar Plugin-Versionen herumgesprungen. Die Liste war monatelang über das linke Slideout-Panel im Editor verfügbar. Dann wurde es in 11.9 vollständig entfernt. Es tauchte zwischen dieser Version und 12.0 wieder auf.

Das Bedienfeld wurde jetzt verkleinert und enthält jetzt drei Links für Website, Vorlagen und Vorlagenteile. Der erste Link ruft den Site-Editor auf. Die anderen zeigen Tabellen vorhandener Vorlagen an.

Das Umschalten zwischen den Bildschirmen fühlt sich im Moment langsam an. Dies ist jedoch die Version 1.0 des Site-Editors, die WordPress-Benutzer auf der ganzen Welt sehen werden. Es wird sich wahrscheinlich im Laufe der Zeit ändern. „Die aktuelle Iteration des Designs bevorzugt Einfachheit und Benutzerfreundlichkeit“, schrieb Riad Benguella in dem Ankündigungspost. „Iterationen, die die clientseitige Navigation und die Mosaikansicht implementieren, könnten in Zukunft hinzugefügt werden.“

Es scheint keine Möglichkeit zu geben, benutzerdefinierte Vorlagen hinzuzufügen, z. B. eine Kategorie oder ein Autorenarchiv. Wenn Sie auf die Schaltfläche „Neu hinzufügen“ klicken, werden Optionen für eine Titelseite und eine Suchvorlage angezeigt, wenn Sie das Design Twenty Twenty-Two verwenden.

Das Hinzufügen eines neuen Vorlagenteils ist jedoch ein viel raffinierterer Prozess. Nachdem Sie auf die Schaltfläche zum Erstellen geklickt haben, werden den Benutzern ein Overlay und ein Formular angezeigt, wie im folgenden Screenshot gezeigt:

Erstellen eines benutzerdefinierten Vorlagenteils.

Benutzer können ihm einen benutzerdefinierten Namen geben und zwischen drei zulässigen Bereichen wählen: Allgemein, Kopfzeile und Fußzeile. Nach dem Erstellen eines neuen Teils werden Benutzer zum Editor weitergeleitet.

Beim erneuten Anzeigen der Vorlagenteileliste wird der Benutzer angezeigt, der sie erstellt hat, und es gibt eine Dropdown-Liste mit Optionen (Schaltfläche mit Auslassungspunkten). Derzeit besteht die einzige Aktion darin, das Teil zu löschen.

Ich würde gerne sehen, dass Vorlagen auf oberster Ebene die gleiche Behandlung wie Vorlagenteile erhalten, wenn eine neue erstellt wird. Es gibt zwar einige geringfügige Unterschiede zwischen ihnen, aber am Ende des Tages sind beide Vorlagen. Die User Experience würde davon profitieren, wenn die Erstellungsprozesse aufeinander abgestimmt wären.

Das Erstellen benutzerdefinierter Vorlagen außerhalb der Standardliste von diesem Bildschirm aus würde Designern auch dabei helfen, Themen visuell über den Website-Editor zu erstellen.

Leerer Navigations-Fallback

In der neuesten Version wurde ein Fallback für leere Navigationsmenüblöcke eingeführt. Wenn kein Menü gefunden wird, wird schließlich der Seitenlistenblock angezeigt. Je nachdem, wie viele Seiten die Website eines Benutzers hat, kann dies schnell aus dem Ruder laufen, wie der folgende Screenshot von Twenty Twenty-Two zeigt:

Navigationsblock-Fallback mit langer Seitenliste.

Designentwickler können diesen Fallback über den Filter-Hook block_core_navigation_render_fallback überschreiben, indem sie entweder einen false Wert oder einen Satz gültiger untergeordneter Blöcke für den übergeordneten Navigationsblock zurückgeben. Themenautoren lade ich ein, großzügig Gebrauch von diesem Filterhaken zu machen.

Bemerkenswerte Blockdesign-Elemente

Für Blockdesign-Entwickler wurden die standardmäßigen vorlagenbezogenen Ordner umbenannt. Die alten Namen werden weiterhin funktionieren, aber Autoren sollten Folgendes in ihren Themen aktualisieren:

/block-templates umbenannt in /templates
/block-template-parts umbenannt in /parts

Diese Änderung bereinigt das Themenverzeichnis der obersten Ebene, schafft aber auch einen Weg zu mehr Standardisierung in der Zukunft. Es gibt bereits ein offenes Ticket für /patterns , und ein /styles Ordner ist möglich.

Gutenberg 12.1 führt auch ein „ appearanceTools “-Flag für theme.json ein, mit dem Designautoren die Unterstützung für alle aktuellen und zukünftigen Rand-, Farb-, Abstands- und Typografieoptionen aktivieren können. Ich habe dies ausführlicher im Gutenberg 12.0-Beitrag behandelt, der das Feature fälschlicherweise als mit der letzten Version gebündelt markiert hatte.