Dieser Beitrag zeigt dir Neuerungen in WordPress Gutenberg 8.0, 8.1 und 8.2, dem Entwicklungs Plugin von WordPress. Es gibt weitere Verbesserungen der UI, sowie neue Features.

Zur Erinnerung:

WordPress 5.4 – alle Gutenberg Releases von 6.6 – 7.5 wurden in den Core gebracht.

Es ist oft schwer, den Überblick zu behalten. Allerdings finde ich es trotzdem wichtig, sich paralell zu den neuen WordPress Major Versionen auch das Gutenberg Plugin und die weiteren Entwicklungen anzusehen und auch auszuprobieren.

Test Version installieren:

Am besten du installierst eine WordPress Testversion unter Wamp oder Xampp lokal auf deinem Rechner. Allerdings empfiehlt es sich auch, zum Beispiel auf einer Subdomain eine online Testversion zu installieren.

Wozu eine Online Testversion ?

Es kann sein, zum Beispiel bei mir im Firefox, dass der Browser den You Tube Block nicht korrekt anzeigt. Somit ist es mir auch in WordPress 5.4 lokal nicht möglich, mit Firefox den You Tube Block zu verwenden.

Bei den Embeds wird überhaupt nur Tick Tock angezeigt. In Chrome lauft alles perfekt. Auch online auf dem Server wird WordPress mit dem Block Editor komplett angezeigt.

Nun, stellt sich die Frage, im Forum sagt man, hier liegt das Problem nicht bei Firefox, sonder das müsste WordPress lösen. Da es aber noch nicht gelöst ist, und ich lokal immer noch kein You Tube mit Gutenberg einbinden kann, ist es ratsam, doch auch alles direkt auf einem gehosteten Server zu testen.

WordPress Gutenberg Versionen, welche mit WordPress 5.5 kommen ..

WordPress Gutenberg Plugin ist das Entwicklungs Plugin von WordPress. Hier wird Neues getestet und die meisten Dinge kommen dann auch in den WordPress Core.

Alles, was nun ab Gutenberg Version 7.6 zu sehen ist, kommt – voraussichtlich – dann auch in den Core und somit in WordPress 5.5.

Was gab es bis jetzt:

• Gutenberg 7.6 – bringt neue Full Site Editing Blocks und eine „rotierende Liste “ mit Tips im Block Hinzufügen Button.
• Gutenberg 7.7 bringt Full Screen Mode out of the box, neue UI für den Block Editor, erste Block Vorlagen – Block Patterns
• Gutenberg 7.8 Theme Autors können Block Patterns registrieren und eigene erstellen = Custom Patterns, weitere Verbesserungen an der UI
• Gutenberg 7.9 neue Patterns, Vorlagen, weitere Farbverläufe für mehr Blocks und neue Bedienelemente für Typographie Blocks.

Gutenberg 8.0

Gutenberg 8.0 bringt einen verbesserten Block Vorlagen Inserter, zwei neue Inline Formate: hoch und tief gestellt und einen verbesserten Code Editor.

1. Block und Patterns Inserter

Vereinigt den Block Hinzufügen Button mit dem Block Vorlagen Button, also den Block Inserter mit dem Patterns Inserter.

Bis vor kurzem waren die Block Patterns noch in der rechten Sidebar untergebracht. Da allerdings die Block Vorlagen immer zahlreicher werden, war diese Lösung wohl suboptimal.

Block Patterns – Vorlagen

Die Zur Zeit zur Verfügung gestellten Block Vorlagen, sind einmal erste Beispiele. Das WordPress Core Team hat aber schon wirklich sehr viele Vorschläge, welche nur noch umgesetzt werden müssen. Also, wir können auf jeden Fall gespannt sein. 😎. Block Vorlagen sind das ultimative Werkzeug für tolles Design.

Als Tipp: wordpress.tv – hier erklärt Mel Choyce anhand von coolen Beispielen, was Block Patterns sind, und wie man diese selbst erstellen kann.

Update der Willkommens-Leitfaden Illustrationen

Die gesamten Illustrationen des Willkommens Leitfadens wurden überarbeitet und an die neue UI angepasst.

2. Verbesserter Code Editor

Die Schrift im Code Editor wurde auf monospace umgestellt. Und man hat nun die gesamte Editorbreite zur Verfügung. Was noch fehlt, das ist Synthax Highlighting, das soll in einer der nächsten Versionen kommen. 😄

3. Text hoch oder tiefgestellt formatieren

Es gibt nun auch die Möglichkeit Text hoch und tiefgestellt darzustellen.

WordPress Gutenberg 8.1

Weiter geht’s mit der Gutenberg Version 8.1 . Gutenberg Version 8.1 bringt Blöcke einfach kopieren, eine Testimonial Vorlage, ein Suchfeld für Blocks und Vorlagen und eine Block Vorlagen API und vieles mehr ..

1. Blöcke einfach kopieren

Mit dem Copy Button kann der Teil wieder in den Editor eingefügt werden. Ebenso kannst du da kopierte auf diese Weise in deinen Text Editor z.B. notepad++ einfügen.

Allerdings geht das genauso, bisher, ohne diesen Copy Button. Allerdings muss man dann halt STRG + C und STRG + V verwenden .

2. Testimonial Vorlage

Es gibt auch wieder eine neue Vorlage. Nämlich Testimonials. Es ist nun die achte Vorlage vom WordPress Core Team. Damit kann auch ein Laie erstklassige Designs erstellen.

Wie man sieht an den Bilder in Frontend und Backend, ist die Vorlage ein Gerüst. Man braucht nur mehr die Inhalte austauschen, bzw. befüllen und schon hat man ein cooles Testimonial.

An den Rändern, welche ich dazugefügt habe, kann man schon erkennen, dass es sich hier um eine aufwändig verschachtelte Vorlage handelt. Es ist sechs Ebenen tief.

• Gruppe Block – verschachtelt zweimal
• Spalten Block
• Parapraph Block
• Bild Block

alles gemixt.

• rosa dashed: Gruppe Block
• scharz dashed: Spalten Block
• blau : Paragraph Block
• rosa: Bild Block

Ich persönlich arbeite im Editor gerne mit bunten Rändern. Auf diese Weise kann man die einzelnen Blocks besser erkennen und man tut sich viel leichter, wenn es dann zu tieferen Verschachtelungen kommt.

Auf diese Weise macht der Gutenberg Block Editor richtig spaß. Etwas, das m. E. bei dem normalen Editor Design etwas untergeht.

3. Suchfeld für Blocks und Vorlagen

Es gibt auch ein neues Suchfeld und zwar eines für die Blocks und eines für die Vorlagen.

Im Suchfeld für Vorlagen gibst du den Titel für deine Vorlage ein und dann zeigt der Editor nur mehr die Vorlagen an, die deinen Titel enthalten. Zur Zeit gibt es ja nur acht Vorlagen plus deine selbst erstellten.

Auch diese werden nach dem Titel gefunden. Somit ist das noch ein weites Feld und wird mit Zunahme der Block Vorlagen sicherlich auch noch verfeinert.

Block Vorlagen API

Eigene Block Vorlagen anmelden und abmelden

Du kannst nun auch deine eigenen Vorlagen registrieren/ anmelden und abmelden /unregister. Allerdings hat sich hier etwas geändert:

Bisher konntest du Block Vorlagen in deiner functions.php anmelden mit: register_pattern() und unregister_pattern(). Diese sind nun überholt. Mit der Gutenberg Version 8.1 sollten Entwickler ihren Code updaten auf: register_block_pattern() and unregister_block_pattern()

Tipp: Wie du deine eigenen Block Vorlagen einbinden kannst, das erklärt dir folgendes Video.

WordPress Gutenberg 8.2

Mit Gutenberg 8.2 gibt es wieder einige Verbesserung im Bearbeitungs Verlauf, zwei neue Block Vorlagen, Kategorien für Block Vorlagen und vieles mehr .

1. Inhalts Positionierung für den Cover Block

Es gibt für den Cover Block ein neues Tool, mit welchem du den Text je nach belieben innerhalb vom Cover Block ausrichten kannst.

Was mir aufgefallen ist, das ist, dass die Textausrichtung nur pro Cover Block funktioniert. So wie oben im Bild den Header Block links und den Text Block rechts, das funktioniert so nicht mit dem Text Ausrichtungs Tool in Gutenberg 8.2

In meinem Fall habe ich die Überschrift linksbündig ausgerichtet. Es ist wahrscheinlich zur Zeit eher gedacht, dass man die Überschrift im Cover Block nun ausrichten kann, wie man möchte.

Folgende Klassen gibt es:

.has-custom-content-position
.is-position-top-left
.is-position-top-center
.is-position-top-right
.is-position-center-left
.is-position-center-center
.is-position-center-right
.is-position-bottom-left
.is-position-bottom-center
.is-position-bottom-right

Diese kann man über CSS dann in seinem eigenen Theme stylen.

2. Kategorien für Block Vorlagen

Mit der Gutenberg Version 8.2 bekommen die Block Vorlagen / Patterns auch Kategorien beigestellt. Folgende Kategorien gibt es:

• Text
• Hero
• Spalten
• Buttons
• Galerie
• Funktionen
• Testimonials
• Nicht Kategorisiert

In der Kategorie “ Nicht Kategorisiert “ findest du alle Block Vorlagen, welche keiner Kategorie zugeordnet wurden.

Für Theme und Plugin Ersteller gibt es eine neue Funktion: register_block_pattern_category() and unregister_block_pattern_category(). Kategorien können mit dem Kategorie Argument bestimmten Blöcken zugeordnet werden. Siehe Patterns API

Den ganzen Block kopieren

Mit Gutenberg 8.2 kann man einen einzelnen Block mit Strg + C kopieren. Und mit Strg + X ausschneiden, wenn kein spezieller Text ausgewählt wurde. Am unteren Rand erscheint danach ein Snackbar Hinweis, der zeigt, welcher Block kopiert wurde.

3. Zwei neue Block Vorlagen

Block Vorlagen sind eine Sammlung von Blocks. Wenn man eine Block Vorlage einfügt, dann fügt man im Prinzip mehrere kombinierte Blocks auf einmal hinzu, welche vorkonfiguriert sind.

Mit Gutenberg 8.2 kommen zwei neue Block Vorlagen / Patterns.

• Hero mit zwei Spalten
• Funktionen und Dienste Block Vorlage

Hero mit zwei Spalten

Funktionen und Dienste Block Vorlage

FAZIT:

Ja, so geht’s dahin. Es ist schon sehr überwältigend. Bei den Block Vorlagen ist sicher zu sagen, dass hier noch sehr viel mehr zur Auswahl kommen wird. Das hier ist ja wie gesagt in Gutenberg, und das ist ja noch die Testphase.

Allerdings kann man auch gut üben, wenn man die Block Vorlagen als Inspiration hernimmt und sie selber nachbaut. Das ist gar nicht so schwer 😉

Gutenberg 8.0 – 8.2 : das ist eine gewaltige Menge an Neuerungen ! Also, immer am Ball bleiben und schön mitlernen 😂