Gutenberg 12.6 verbessert Transforming Blocks, fügt Read More und Post Author Bio Blocks hinzu und ermöglicht Social Icon Labels

Veröffentlicht: 2022-02-18

Gutenberg 12.6 ist gestern im WordPress-Plugin-Verzeichnis gelandet. Das Update enthält mehrere Transformations-bezogene Verbesserungen und neue Read More- und Post Author Biography-Blöcke. Benutzer können jetzt auch sichtbare Labels über den Social Icons-Block anzeigen.

Mit dieser Veröffentlichung scheint nichts kaputt zu sein, was immer willkommen ist. Gutenberg hat schon lange nicht mehr etwas kaputt gemacht, auf das ich mich verlassen habe. Es gab ein paar Wachstumsschmerzen, aber die Software ist im vergangenen Jahr stabiler geworden. Ich wollte nur eine Anmerkung hinzufügen, um die Leute zu loben, die jeden Tag daran arbeiten.

Wie üblich habe ich ein paar Nit-Picks, aber das sieht insgesamt nach einer weiteren soliden Veröffentlichung aus.

Blöcke transformieren

Öffnen Sie den WordPress-Editor mit einer Tag-Cloud im Canvas. Das Transformations-Dropdown ist geöffnet und die Option „Kategorien“ ist ausgewählt.
Umwandeln einer Tag Cloud in einen Kategorienblock.

Die Entwickler haben sich in Gutenberg 12.6 auf Blocktransformationen konzentriert. Folgende Bausteine ​​unterstützen nun das Umschalten untereinander:

  • Kalenderarchiv
  • Code-Absatz
  • Schlagwortwolken-Kategorien
  • Group Row (über den Variation-Regler)

Ein neuer Mechanismus zum Beibehalten von Stilen während Transformationen ist ebenfalls in dieser Version enthalten. Es unterstützt derzeit Schriftgröße und Farboptionen. Benutzer können beispielsweise zwischen einem Überschriften- und einem Absatzblock wechseln, ein 08/15-Anwendungsfall, ohne diese spezifischen Anpassungen zu verlieren. Andere Einstellungen gehen jedoch verloren, selbst wenn sie blockübergreifend geteilt werden. Es gibt nicht viel, was ich nicht geben würde, um die Textausrichtung in diesem Szenario beizubehalten.

Anker im Überschriftenblock werden bei der Umwandlung in einen Absatz in dieser Version weggelassen. Der Grund für diese Änderung war, dass WordPress sie automatisch generiert. Allerdings werden auch manuell hinzugefügte Anker entfernt.

Beim Umwandeln einer Galerie in einen Bildblock gingen zuvor die Einstellungen für das Linkziel, das Linkziel und die Bildgröße verloren. Ein neuer Patch fügt diese fehlenden Attribute hinzu.

Etiketten für soziale Symbole

Social Icons-Block im Post-Editor von WordPress. In der Seitenleiste ist die Option "Etiketten anzeigen" ausgewählt.
Textbeschriftungen für soziale Symbole aktivieren.

Wenn es eine Sache gibt, die mich bei der Veröffentlichung von Gutenberg 12.6 besonders begeistert, dann ist es die Option, Textbeschriftungen über den Social Icons-Block anzuzeigen. Bisher wurden diese nur für Screenreader angezeigt. Benutzer können sie jetzt jedoch für alle aktivieren.

Diese Ergänzung kann eine Menge Designvariationen für den Block eröffnen. Natürlich habe ich ihm bereits mit einem handgezeichneten Randdesign meinen eigenen Dreh gegeben, wie im obigen Screenshot gezeigt.

WP Tavern spielte tatsächlich eine kleine Rolle bei der Realisierung dieser Funktion. Als ich mit Nick Diego in seinem Social Sharing-Block über ein ähnliches Steuerelement sprach, erwähnte ich ein offenes Ticket für den zentralen Social Icons-Block. Es dauerte nicht lange, bis Diego einen Patch fertig hatte, und jetzt ist er in Gutenberg.

Farbbedienfeld Verwendet die Komponente „Werkzeugbedienfeld“.

Öffnen Sie den WordPress-Editor mit einem Pullquote-Block im Inhaltsbereich. Auf der rechten Seite ist die Seitenleiste mit den Blockoptionen geöffnet, in der alle Steuerelemente für Farbe, Typografie und Rahmen angezeigt werden.
Farb-, Typografie- und Rahmenoptionen, die alle die Komponente „Werkzeuge“ verwenden.

Das neueste Update schaltet die Blockfarboptionen auf die Komponente „Werkzeuge“ um. In den meisten Szenarien werden die Text- und Hintergrundfarben mit der Linkfarbe angezeigt, die über das Dropdown-Menü „Ansichtsoptionen“ (Schaltfläche mit Auslassungspunkten) verfügbar ist.

Um eine einheitlichere und sauberere Benutzeroberfläche zu schaffen, haben wir anscheinend jetzt mehr Unordnung für mehrere Blöcke hinzugefügt. Wie im obigen Screenshot für den Pullquote-Block gezeigt, sind die Farb-, Typografie- und Rahmenbereiche alle permanent geöffnet. Der Gruppenblock ist sogar noch schwerer, da er um einen Dimensionsabschnitt erweitert wurde. Benutzer haben keine Möglichkeit, sie oder die Standardsteuerelemente auszublenden.

Als die Komponente „Werkzeuge“ zum ersten Mal eingeführt wurde, hatte sie einen aufräumenden Effekt, da dadurch einige Steuerelemente versteckt wurden. Da es jedoch jetzt von mehr Panels verwendet wird, ist dieser winzige Platz in der Seitenleiste der Blockoptionen verschwunden. Erwarten Sie, durch mehrere Formularfelder zu scrollen, um genau die richtige Einstellung zu finden.

Können wir sie wieder zusammenklappbar machen? Oder, noch besser, können wir eine Kombination aus Registerkarten und der Komponente „Werkzeuge“ haben?

Post-Autor-Biographie-Block

Gruppenblock im Content Canvas des WordPress-Editors. Es ist ein Abschnitt "Über den Autor", der seinen Namen und seine biografischen Informationen anzeigt.
Abschnitt zur Biographie des Autors.

Ein Post-Autor-Biographie-Block landete in Gutenberg 12.6. Sein Zweck besteht darin, die „biografischen Informationen“ eines Benutzers anzuzeigen, die über die Benutzerprofilseite im Adminbereich festgelegt werden können. Es deckt die meisten Basisdesignoptionen ab, es fehlt jedoch die Rahmenunterstützung.

Es ist ein solider Anfang, aber es gibt noch ein drohendes Problem. Es führt wpautop() nicht über die Ausgabe aus. Das bedeutet, dass der Inhalt nicht in ein <p> -Tag eingeschlossen wird. Aus diesem Grund werden auch keine doppelten Zeilenumbrüche berücksichtigt, die über den Benutzerbearbeitungsbildschirm eingegeben wurden. WordPress hatte noch nie eine Standardfunktion zum Ausgeben und Formatieren der Benutzerbiografie, sodass Themenautoren damit umgehen können. Einige Benutzer erwarten jedoch möglicherweise, dass ihre benutzerdefinierte Formatierung funktioniert.

Wir nähern uns langsam einem vollständigen Satz autorenbezogener Blöcke. WordPress hat ursprünglich einen Post-Author-Block ausgeliefert, der ein bisschen von allem tat. Aus diesem Grund war es so gut wie unmöglich, konsequent Bylines für Posts oder andere einzeilige Metadatenbereiche in Themen zu verwenden. Es schränkte auch den Gestaltungsbereich von „Über den Autor“-Abschnitten ein, die oft am Ende eines Beitrags angezeigt werden.

Wir müssen jetzt warten, bis der Post-Autor-Avatar-Block das Set abrundet.

Lesen Sie mehr Block hinzugefügt

Der Query Loop-Block wird im WordPress-Blockeditor angezeigt, wobei der innere Read More-Block hervorgehoben ist.
Weiterlesen-Block in einer Abfrageschleife / Beitragsvorlage hinzugefügt.

Gutenberg 12.6 fügt einen dedizierten Read More-Block hinzu, damit Themenautoren in ihre Query Loop-Designs einarbeiten können. Es ist lediglich ein HTML-Permalink zum Beitrag. Dies ist getrennt von der Linkausgabe durch den Post-Excerpt-Block. Leider hat es mehrere Probleme und muss vor dem praktischen Einsatz mehr getestet werden.

Benutzer können eine Hintergrundfarbe hinzufügen, aber keine Textfarbe. Dies macht es einfach, unlesbaren Text zu erstellen. Ich konnte dies umgehen, indem ich es in einen Gruppenblock einfügte und von dort aus die Linkfarbe änderte.

Es unterstützt die meisten Rahmenoptionen, aber die Stilsteuerung fehlt. Es hat auch keinen HTML-Wrapper auf Blockebene, daher gibt es keine Möglichkeit, es horizontal auszurichten, ohne es in einen anderen Block einzuschließen.

Dies ist ein seltsamer Fall. Ich bin mir nicht sicher, ob es andere Inline-HTML-Elemente (technisch gesehen wird es als Blockelement über CSS festgelegt) für Blöcke der obersten Ebene an anderer Stelle in WordPress gibt.

Das andere Problem ist das Potenzial für zwei „Weiterlesen“-Links. Einer über seinen dedizierten Block und der andere über den Post-Excerpt-Block. Es gibt einen Entwurfspatch, um den Link für letzteres umzuschalten.

Responsive Handhabung für klassische Bilder

Zwei Vogelbilder aus dem WordPress-Theme Twenty Twenty-Two. Die erste wird korrekt durch ihren Container eingeschränkt. Der andere drängt nach außen.
Blockbilder vs. klassische Bilder.

Bei Posts, die im klassischen Editor mit großen Bildern geschrieben wurden, würden die Medien bei Verwendung eines Blockdesigns aus dem Inhaltsbereich herausblasen. Gutenberg entkoppelte seine reaktionsschnelle Bildverarbeitung vom zentralen Bildblock als Fix. Diese Änderung soll auf eine kleinere WordPress-Version zurückportiert werden, sodass Benutzer nicht auf WordPress 6.0 warten müssen.

Dies bietet zwar eine Lösung für Bilder, löst jedoch nicht das Problem von Blockdesigns, die keine klassischen Inhalte verarbeiten oder einfaches HTML formatieren. Als Beispiel von unserer Website habe ich kürzlich ein <table> -Element hinzugefügt, da dem zentralen Tabellenblock einige Funktionen fehlen. Da es sich um benutzerdefiniertes HTML handelte, wurde kein CSS des Blocks geladen, sodass er im Wesentlichen ungestylt blieb. Das gleiche Problem besteht bei klassischen Inhalten.

Ein Problem dabei ist, dass WordPress CSS-Stile auf Blockebene über theme.json . Es erlaubt jedoch nur das Gestalten einer Handvoll HTML-Elemente wie Links und Überschriften. Diese Art von komponentenbasiertem Design funktioniert gut, wenn alles in eine Komponente (dh einen Block) verpackt ist.

Es ist sinnvoller, die zugrunde liegenden HTML-Elemente zu stylen als ihre repräsentativen Blöcke. Auf diese Weise ist es ein gemeinsamer Stil für alle Blöcke, die das Element verwenden, einschließlich Plugins von Drittanbietern.

Großer Zitatstil entfernt

Schließlich hat jemand den „großen“ Zitatstil entfernt. Seit dem Hinzufügen einer Schriftgrößensteuerung für den Block ist dies nicht mehr erforderlich.

Ich habe zumindest mehrmals darauf hingewiesen, dass WordPress es vermeiden sollte, eigene benutzerdefinierte Blockstile zu versenden. In den meisten Fällen wird dies am besten in die fähigen Hände von Themenautoren gelegt. Zumindest sollten neue Blockstile vermieden werden, bis die Designwerkzeuge abgerundeter sind. Das Ablehnen von Blockstilen führt zu veraltetem CSS-Gepäck, das mit jeder WordPress-Site geladen wird.