Gutenberg 12.8 führt die Web Fonts API ein, verbessert die Gruppenverschachtelung und fügt Tastaturkürzel für Links hinzu – WP Tavern

22. März 2022
Gutenberg 12.8 führt die Web Fonts API ein, verbessert die Gruppenverschachtelung und fügt Tastaturkürzel für Links hinzu - WP Tavern

Gutenberg 12.8 ist heute im WordPress Plugin-Verzeichnis gelandet. Ich habe in den letzten Wochen viele der neuen Funktionen ausprobiert, als sie veröffentlicht wurden.

Es gibt einige Dinge, auf die ich mich freue. Auf die Web Fonts API habe ich monatelang geduldig gewartet, aber die Möglichkeit, Gruppenblöcke schnell in anderen Gruppen zu verschachteln, hat sich einen Platz auf meiner Liste der beliebtesten Verbesserungen verdient.

Es gibt jetzt ein neues Tastaturkürzel für das automatische Vervollständigen von Links. Die Benutzer können sich außerdem über sauberere Ladezustände für die Medien & Text und Navigation Blöcke.

Die Web Fonts API

Vier Taglines, die mit denselben Worten im Editor wiederholt werden (Demo-Text).  Jede hat eine andere Schriftart.
Testen verschiedener Web-Schriftarten.

Die lang erwartete Web Fonts API ist im Gutenberg-Plugin enthalten. Die Weg war lang und holprig bis hierher, aber es ist ein gutes Gefühl, am Ziel anzukommen.

Themenautoren können jetzt Schriftdateien mit ihren Themen bündeln und sie über theme.json oder die wp_register_webfonts() Funktion.

Der Nachteil ist, dass die Implementierung nur lokal gehostete Schriftarten unterstützt. Langfristig wird dies zu großen ZIP-Paketen für Themen führen, wenn die Entwickler anfangen, globale Stilvarianten mit jeweils eigenen Schriftarten zu liefern.

Ari Stathopoulos, der monatelange Arbeit in die API gesteckt hat, hat auch einen Patch, der mit Google Fonts integriert. Diese Erweiterung würde die GDPR und die damit verbundenen Datenschutzprobleme lösen, da die Schriftdateien von Google heruntergeladen und vom Server geladen würden. Allerdings scheint die Funktion ein Fehlschlag zu sein, da Kommentar eines leitenden Entwicklers in einer früheren Diskussion.

In einem kürzlichen Kommentar zu meinem früheren Bericht über die Web Fonts API, Stathopoulos sagte das Folgende über seine Hoffnungen auf die Integration von Google Fonts:

Ich rechne nicht damit, dass es zusammengeführt wird, aber es wird reichen, um eine Diskussion anzustoßen und schließlich eine Lösung für all die Probleme zu finden, die mit der Verwendung von 3rd-Party-Webfont-Anbietern einhergehen.

Es ist noch zu früh, um zu sehen, wie sich das Fehlen eines Google Fonts-Anbieters auf die Theme-Autoren auswirken wird. Ich gehe jedoch davon aus, dass viele eine eigene Provider-Implementierung erstellen oder die neue API überhaupt nicht nutzen werden.

Gruppieren von Gruppen

WordPress-Editor mit einem Gruppenblock, der in einem anderen verschachtelt ist.
Eine Gruppe in eine Gruppe in einer Gruppe einfügen.

Hast du schon einmal einen Gruppenblock erstellt, an ein paar Dingen gearbeitet und später festgestellt, dass du die ursprüngliche Gruppe in eine andere Gruppe einbinden musst? Musstest du dich dann durch eine komplizierte Reihe von Aufgaben arbeiten, bei denen du deine aktuellen Blöcke kopiert und in eine völlig neue Gruppe eingefügt hast?

Ich kann deinen Schmerz nachempfinden.

Das ist nicht mehr der quälende Prozess der er einmal war. Wäre da nicht die neue Web Fonts API, wäre dies das Highlight der neuen Version.

Unter dem Dropdown-Menü der Symbolleiste Optionen (vertikale Ellipse) sollte eine Option Gruppe angezeigt werden, wenn eine andere Gruppe ausgewählt ist. Das Verschachteln von Gruppen war noch nie so einfach wie mit dieser Schaltfläche.

Shortcut für das Hinzufügen von Inline-Links

Hinzufügen eines Kurzlinks im WordPress-Editor.  Tippe "[[" pulls up a link inserter.
Inline link inserter.

The latest update adds an inline shortcut for links by typing [[ in a Rich Text area, such as a Paragraph block. This should be a welcome feature for users who like to insert links while writing but do not want their hands to leave the keyboard.

At first, I thought this feature was not working. The inserter did not appear as swiftly as expected, so I hit the spacebar on my keyboard, thinking I needed to trigger it somehow. However, that did not work. Essentially, it was slow for me, which may have been my computer or connection.

Typing [[ followed by some other characters seems to work the best. For example, if I am looking for the What a Wonderful Day post, I just start typing the post name: [[what a.... The link inserter appears by the time I am a few characters in.

I would love to see more of a Markdown-style auto-completer for links. Typing [some text] sollte den Link-Inserter auslösen. Die [[ Syntax fühlt sich im Moment merkwürdig an.

Wie auch immer, ich würde sie in meinem Arbeitsablauf nicht verwenden. Ich neige dazu, den gesamten Text zu verfassen und Links während der Bearbeitungsphase hinzuzufügen. Der Editor macht es mir schon leicht, indem er mir erlaubt, jeden Text zu markieren und eine URL einzufügen.

Kernblöcke werden in globalen Stilen zuerst angezeigt

Der Site-Editor ist geöffnet und der Bereich
Blocksortierung im Panel Globale Stile.

Gutenberg wird jetzt die Kernblöcke zuerst anzeigen im globalen Stil-Panel im Website-Editor an. Die von Plugins werden ganz nach unten verschoben.

Das ist nicht sehr hilfreich, wenn man einen einzelnen Block unter den Dutzenden aufgelisteten sucht. Eine Alphabetisierung würde helfen, aber dadurch könnten auch häufig verwendete Blöcke wie Paragraph in der Liste nach unten rutschen. Der Platz in der Seitenleiste ist begrenzt, aber ich würde die Blöcke gerne nach Kategorien gruppiert sehen.

Themes aus dem Seiteneditor erstellen...fast

Der WordPress-Site-Editor ist für das Twenty Twenty-Two-Theme geöffnet.  Auf der rechten Seite ist das Options-Dropdown mit den "exportieren." Option fokussiert.
Exportieren eines angepassten Twenty Twenty-Two Themes.

Die neueste Version bringt uns einen Schritt näher an Themen vollständig zu erstellen über den WordPress-Site-Editor zu erstellen. I habe über diese Funktion berichtet Anfang der Woche ausführlicher berichtet.

In früheren Versionen konnten Nutzer eine ZIP-Datei mit ihren Vorlagen und Teilen aus dem Editor herunterladen. Der neue Export enthält die theme.json, style.css, und index.php Dateien aus dem Thema. Die theme.json Datei fügt auch Benutzeranpassungen aus dem globalen Stile-Panel hinzu.

Technisch gesehen könnte der Export ein komplettes Thema sein (ohne den Screenshot), wenn es keine functions.php oder Schriftartendateien aus der neuen API enthält. Das ist jedoch ein seltenes Szenario.

Code Block Styling Verschoben nach <pre> Element

Codeblock im WordPress-Beitragseditor, der doppelte Ränder und Auffüllungen hat.
Doppelte Polsterung und Ränder im Code-Block.

Bisher hat WordPress bei der Verwendung des Code-Blocks benutzerdefinierte Stile auf den inneren <code> Inline-HTML-Element anstelle des umhüllenden <pre> Element. Dinge wie Auffüllungen, Hintergründe und Umrandungen machten auf dem Kindelement wenig Sinn. Ich fand das schon immer seltsam und hatte es außerhalb dieses speziellen Falles noch nie gesehen.

Als Theme-Designer habe ich natürlich versucht, mich dagegen zu wehren. Schließlich gab ich jedoch nach, weil ich Blockthemen auf die "richtige Art" erstellen wollte, indem ich theme.json und den Nutzern erlaubte, das Aussehen anzupassen.

Gutenberg 12.8 behebt dieses Problem durch Verschieben der Stile in die äußere <pre> Element.

Beachte, dass diese Änderung für einige Themes ein Bruch sein kann. Autoren, die auf .wp-block-code > code in ihrem CSS verwenden, müssen ihren Code möglicherweise vor WordPress 6.0 aktualisieren. Das hängt davon ab, ob es buchstäblich für die Inline-CSS gedacht war. <code> Element gedacht war oder ob es sich um einen Workaround für das vorherige WordPress-Patzer handelt.

In der Zwischenzeit ist dies nur eine teilweise Lösung, wenn Themes die should_load_separate_block_assets Flag aktiviert ist, was der Standardfall für alle Block-Themes ist. Wenn Gutenberg neben WordPress 5.9 läuft, werden die Code-Blockstile sowohl auf die <pre> als auch auf den inneren <code> Elemente im Editor. Das bedeutet, dass der Block doppelte Ränder, Auffüllungen und andere Stile haben könnte, die ihn im Moment ein wenig unpassend aussehen lassen.

Dieses Problem ist nicht spezifisch für den Code-Block. Stattdessen handelt es sich um ein allgemeines Problem, das jetzt ein offenes Ticket hat. Ich wünschte nur, dieses Ticket wäre zuerst gelöst worden, um diese Übergangszeit mit kaputten Stilen zu vermeiden.

Quelle


Dieser Artikel ist im Original von wptavern.com und wurde übersetzt
https://wptavern.com/gutenberg-12-8-launches-the-web-fonts-api-improves-group-nesting-and-adds-keyboard-shortcut-for-links

Abonniere den RSS-Feed von unseren WP News und verpasse keine Meldung: https://die-mainagentur.de/feed/?post_type=wp-news

Alternativ kannst du unseren WP-Newsletter abonnieren

Mit dem Eintrag in den WP-Newsletter bekommst du per Mail über neue Artikel zugesendet. Du kannst den Newsletter jederzeit abbestellen.
Mehr dazu in der Datenschutzerklärung