Das WordPress 5.4 Release wurde am 31. März 2020 veröffentlicht. Was bringt die Version für Anwender und Entwickler:innen? Unsere Übersicht: Das ist neu in WordPress und Gutenberg.

WordPress räumt seinen Editor Gutenberg immer weiter auf und spendiert ihm neue Funktionen. Bevor es in die nächsten Entwicklungsschritte geht – also in Richtung Kollaboration und Mehrsprachigkeit. Einige Neuerungen könnten für Verwirrung bei den AnwenderInnen sorgen, darauf solltest du vorbereitet sein. Wir fassen für dich alle wichtigen Änderungen zusammen.

Widget: Zustand der Website

Die Neuerung von WordPress 5.4, die auf den ersten Blick auffällt: Im Dashboard gibt es nun ein neues Widget zum „Zustand der Webseite“. Die Funktion, die dahintersteckt, gibt es bereits seit WordPress 5.2. Du findest sie im Backend unter „Werkzeuge“. Mit der neuen zentralen Platzierung dürften viele NutzerInnen zum ersten Mal darauf aufmerksam werden:

Die Idee hinter dem Feature: Die Admins aber auch die Nutzer von WordPress sollen auf mögliche Schwachstellen in der Installation aufmerksam gemacht werden. Ebenso bietet ein Blick auf die Details, die in dem Widget verlinkt sind, Verbesserungsvorschläge oder Hinweise zu möglichen Sicherheitslücken. Das sind zum Beispiel:

• Eine Liste der inaktiven Plugins und Themes. Diese solltest du stets entfernen, da sie auch im deaktivierten Zustand ein Angriffsziel für Hacker sein können.
• Vorschläge zu PHP-Modulen, die auf deinem Server installiert sein sollten. Sonst kann WordPress langsam laufen, oder einzelne Funktionen fehlen gar. Siehe diese Liste des WordPress-Hosting-Teams.
• Eine Warnung, falls deine Webseite noch keine HTTPS-Verbindung nutzt.

Gerade die Verschlüsselung per SSL ist ein absolutes Muss für jeden professionellen Webauftritt. Etwa via Let’s Encrypt. Auch Google setzt eine sichere Verbindung voraus, sonst verliert deine Webseite deutlich an Rankings und an Besuchern. Idealerweise sind die SSL-Zertifikate in deinem Hosting-Paket enthalten – das senkt deinen Aufwand.

Bis jetzt ist die Funktionalität der Sektion Website-Zustand bzw. Verbesserungen noch überschaubar. Das wird sich mit zukünftigen Versionen sicherlich ändern. Spannende Informationen enthält jedoch der Reiter „Bericht“:

Darin erfährst du zahlreiche Details zu deiner Konfiguration von WordPress und WooCommerce. Diese kannst du exportieren, etwa als Hifsmittel für deine WordPress-Dienstleister. Oder zur Fehlersuche für EntwicklerInnen von Plugins und Themes.

Gutenberg im Fullscreen Modus

Du wusstest nicht, dass Gutenberg einen Fullscreen-Modus hat? Dann wirst du beim ersten Aufruf des Editors in der Version 5.4 irritiert sein. Denn dort fehlt die Dashboard-Leiste auf der linken Seite. Das hat Vor- aber auch Nachteile:

• Gerade auf kleineren Screens hast du nun mehr Platz für deine Inhalte zur Verfügung
• Du wirst beim Schreiben nicht von eingehenden Kommentaren, zu aktualisierenden Plugins etc. abgelenkt
• Gleichzeitig fehlt die Seitenleiste bei einzelnen Prozessen

Der letzte Punkt bremst vor allem dann, wenn du beim Aktualisieren deiner Texte zwischen der Beitragsübersicht und dem Editor hin- und herschalten musst. Oder wenn du kurz die Mediathek aufrufen willst.

Der Fullscreen-Modus ist für deine Arbeiten kontraproduktiv? Dann kannst du die altbekannte Ansicht wie folgt wiederherstellen:

1. Gehe in die erweiterten Optionen von Gutenberg (die drei senkrechten Punkte neben dem Zahnrad-Symbol rechts oben)
2. Diese heißen im Editor bislang „More tools & options“
3. Entferne dort den Haken bei „Fullscreen Mode“

Das Verhalten – Fullscreen-Modus an oder aus – lässt sich mit ein paar Zeilen JavaScript auch fest vorgeben:

const isFullscreenMode = wp.data.select( 'core/edit-post' ).isFeatureActive( 'fullscreenMode' );

if ( isFullscreenMode ) {
    wp.data.dispatch( 'core/edit-post' ).toggleFeature( 'fullscreenMode' );
}

Das ist vor allem dann praktisch, wenn du als Admin bzw. EntwicklerIn von Anfragen deiner Nutzer überrannt wirst, sobald WordPress 5.4 auf deiner Webseite live geht.

Gutenberg Block Social Icons

Mit der Funktion kannst du per Mausklick Verweise bzw. Icons zu deinen Auftritten in sozialen Netzwerken einfügen. Die grundlegenden Optionen von „Social Icon“:

• Du kannst die Art, Anzahl und Reihenfolge der Icons selbst bestimmen, ebenso natürlich die jeweiligen Links
• Es stehen fast 40 Icons bzw. Netzwerke zur Verfügung
• Neben WordPress, Twitter, Facebook, YouTube oder Instagram sind dies zum Beispiel Dropbox, Etsy, RSS, Flickr, GitHub, LinkedIn, Pinterest, Skype, Vimeo oder Spotify
• Auch Verweise zu anderen Webseiten (etwa bei Gastautoren) oder zu E-Mail-Adressen lassen sich einfügen

Etwas verwirrend: Wenn du ein vohandenes Icon entfernen willst, dann geht dies über einen Klick auf das Icon, und dann über die Option „Block entfernen“. Dann wird nicht der komplette Block gelöscht, sondern nur der jeweilige Eintrag:

Dein erstellter Block ist im Standard kein wiederverwendbares Element. Das bedeutet: Wenn du Änderungen vornimmst – etwa einzelne Social Icons hinzufügst oder entfernst – dann müsstest du dies bei einer späteren Einbindung von „Social Icon“ in einem anderen Block oder Beitrag erneut tun. Die Lösung: Du wandelst dein Ergebnis in einen wiederverwendbaren Block um und verwendest danach nur noch diesen.

Tipp: Viele NutzerInnen kennen die Funktion „wiederverwendbare Blöcke“ noch nicht. Sie ist äußerst praktisch: Als etwa Google+ verschwand, hättest du die Änderung nur im wiederverwendbaren Element anpassen müssen. In den zugehörigen Blocks der einzelnen Beiträge erfolgt diese dann automatisch.

Gutenberg Block Buttons

Der Name ist Programm: Über diesen neuen WordPress Block kannst du textbasierte Schaltflächen in deinen Beiträgen einbinden. Etwa zum Download von E-Books oder zur Weiterleitung auf zentrale Landingpages. Die Buttons lassen sich wie folgt anpassen:

• Verschiedene Stile (komplett farbig gefüllt oder nur mit Kontur)
• Hintergrund- und Textfarbe frei wählbar, auch mit individuellen Farben (über hexadezimale Farbwerte)
• Hintergrund einfarbig oder mit Verlauf (die wilden Zeiten des Webdesigns lassen grüßen)
• Rand-Einstellungen (Eckenradius)
• Link-Optionen wie target _blank

Aufmerksame NutzerInnen von Gutenberg wissen, dass es auch jetzt schon einen Block namens „Button“ gibt. Die neue Option „Buttons“ bietet jedoch deutlich mehr Optionen:

Zudem lassen sich damit nun mehrere Schaltflächen hintereinander einfügen, ohne dass dies dein Layout zerschießt. Die Reihenfolge der Buttons kannst du beliebig per Drag&Drop anpassen.

Hinweis: Ursprünglich sollte WordPress 5.4 einen neuen Block Navigation erhalten, um ein Navigationsmenü auch im Inhalt einer Seite oder eines Beitrags einzufügen. Diese Anpassung wurde jedoch auf einen späteren Zeitpunkt verschoben.

Screen: Willkommen beim Block-Editor

Ähnlich wie bei WooCommerce werden nun auch die NutzerInnen von Gutenberg mit einem „Welcome Guide“ begrüßt. Dieser enthält:

• Eine Einführung, wie der Block-basierte Ansatz funktioniert
• Basishafte Erläuterung der Optionen je Block (etwa zu Farbe, Breite, Ausrichtung)
• Hinweise zur Block-Bibliothek

Ein Verweis am Ende führt zu einer Anleitung für Gutenberg. Diese ist allerdings in englischer Sprache.

Wir empfehlen dir folgende Quellen, falls du noch nicht mit dem neuen Editor für WordPress gearbeitet hast:

• Der Überblick für Neulinge auf de.wordpress.org
• Die Kurzanleitung von webtimiser
• Sechs gute Gründe, warum du aufhören solltest, Gutenberg zu hassen
• Unseren Beitrag Gutenberg vs. WordPress Page Builder

Für Admins ist der Guide nichts Neues, aber für reine Anwender und RedakteurInnen vielleicht durchaus interessant. Sie sollen sich damit schneller in Gutenberg zurechtfinden. Das senkt gegebenenfalls auch deinen Supportaufwand als Admin.

Tipp: Der Welcome Guide startet nur dann automatisch, wenn du WordPress neu installierst bzw. Gutenberg das erste Mal nutzt. Du willst ihn manuell aufrufen? Das geht in den generellen Optionen unter Tools -> Welcome Guide (unter dem Punkt, wo du zwischen Code- und visuellem Editor umschalten kannst).

Beitragsbild per Drag & Drop einfügen

Manchmal sind es die kleinen Änderungen, die AnwenderInnen von WordPress glücklich machen. Mit der Version 5.4 kannst du das Beitragsbild per Drag&Drop hochladen. Ein Beispiel:

1. Du hast das Bild bereits bearbeitet oder geschickt bekommen, und es liegt in einem Ordner auf deinem Rechner
2. Von dort ziehst du es mit der Maus auf die Fläche „Beitragsbild festlegen“ in der rechten Sidebar von Gutenberg ab Version WordPress 5.4
3. Fertig – das Hochladen in die Mediathek geschieht automatisch im Hintergrund

Lediglich die Metaangaben zum Bild musst du bei Bedarf nachträglich einpflegen, indem du auf das eingefügte Bild klickst. Oder innerhalb der Mediathek von WordPress. Das dürfte die größte „Gefahr“ der bequemen neuen Option sein: Sie geht zu Lasten von Attributen, die unter Umständen wichtig für dein SEO sind.

Optimierter Block Neueste Beiträge

Die Anzeige weiterer Artikel unter deinen Blogbeiträgen wird von vielen LeserInnen gerne genutzt. Ähnlich ist es mit den neusten Beiträgen (derzeit in Gutenberg „Latest Posts“ genannt). Damit bleiben deine Nutzer länger auf deiner Webseite. Die Werte „Verweildauer“ und „Seitenaufrufe je Besuch“ erhöhen sich – beides sind wichtige Kennzahlen für die Suchmaschinenoptimierung (SEO).

Die Klickrate dieser Funktion steigt deutlich, wenn du dabei nicht nur Textlinks verwendest, sondern auch die jeweiligen Beitragsbilder mit angezeigt werden. Genau das ist ab WordPress 5.4 möglich:

Weitere Neuerungen im Block „Neueste Beiträge“:

• Lege die Bildgröße für das Vorschaubild fest
• Dabei kannst du fixe Werte in Pixeln definieren, oder aber verschiedene prozentuale Größen nutzen
• Ebenso lässt sich die Bildausrichtung anpassen (linksbündig, zentriert, rechtsbündig)

Soll in der Vorschau der vollständige Beitrag sichtbar sein, oder nur ein Textauszug? Manche Blogs berichten, diese Option sei ebenfalls neu hinzugekommen. Es gibt sie jedoch bereits in WordPress 5.3., unter „Einstellungen für Beitragsinhalte“ .

Textfarbe für einzelne Wörter und Sätze

Bislang ließ sich die Textfarbe in Gutenberg nur für einen kompletten Absatz bzw. Paragraph verändern. Mit WordPress 5.4 gibt es nun eine Option, mit der du die Farbe auch nur für einzelne Buchstaben, Wörter oder Sätze abwandeln kannst:

Markiere dazu den entsprechenden Teil im Fließtext mit der Maus. In den erweiterten Optionen (neben dem Link-Symbol) findest du nun den Eintrag „Textfarbe“. Dort kannst du aus vorgegebenen Farben wählen, oder eine individuelle Farbe festlegen. Dafür stehen dir eine RGB-Farbtabelle sowie hexadezimale Farbwerte zur Verfügung.

Sonstige Änderungen

WordPress 5.4 bringt unter der Haube zahlreiche kleinere Anpassungen mit sich, für das System selbst oder auch für den Editor Gutenberg. Hier eine Übersicht der wichtigsten Punkte:

• Für einzelne Blöcke gibt es nun erweiterte Farb- und Gradient-Optionen, etwa für den Cover-Block (Bild oder Video mit Overlay-Text) aber auch für Gruppen und Spalten
• Die Navigation in den Breadcrumbs verschachtelter Blöcke ist übersichtlicher gestaltet
• In der Smartphone-Ansicht bleibt die Toolbar oben, sie verschwindet also nicht mehr aus dem Fokus
• Im Block „Galerie“ kannst du die Bildgröße beeinflussen (vier Stufen: Vorschaubild, mittel, groß, vollständige Größe)
• Es gibt nun eine Unterschrift („Caption“) für Tabellen, für Bilder lässt sich das Title-Attribut direkt im Editor vergeben (unter den erweiterten Optionen)
• Videos des Portals TikTok sind im Block-Editor als neue Einbettungsquelle vorhanden

Außerdem wurde an einigen Stellen die Usability von Gutenberg optimiert, etwa durch die einfachere Mehrfach-Auswahl von Blöcken oder das Navigieren mit der Tabulator-Taste. Letzteres funktioniert ab sofort auch innerhalb der Seitenleisten der Blöcke.

Tipp: Falls du Informationen zur zukünftigen Roadmap von WordPress suchst, dann besuche den Blog des deutschsprachigen WordPress-Projekts. Oder die Seite https://de.wordpress.org/about/roadmap/.

Änderungen für Entwickler:innen

Für alle, die hinter den Kulissen an WordPress arbeiten, gibt es ebenfalls neue Möglichkeiten. Aber auch mehr Performance:

• Höhere Geschwindigkeit: Das Entwicklungsteam rund um den Block-Editor hat nach eigenen Angaben eine Reduzierung der Ladezeit von 14 Prozent erreicht
• Kalender-Widget: Die Navigations-Links werden in ein nav-HTML-Element verschoben, das unmittelbar auf das table-Element folgt, für valides HTML (laut Spezifikation zu 5.1)
• Einheitliche Semantik: Die Funktion do_shortcode() wird durch apply_shortcode() ersetzt
• Favicons: Anfragen für das Favicon lassen sich flexibler verwalten, das WordPress-Logo dient als Fallback-Lösung
• Error-log: Fehler in wp_login_failed sind detaillierter dargestellt

Mehr hierzu – sowie weitere Anpassungen – kannst du in den offiziellen Ankündigungen zu WordPress 5.4 nachlesen. Hinweise zum Testen von WordPress 5.4 findest du hier.

Welche Fragen zu WordPress 5.4 hast du? Nutze gerne die Kommentarfunktion. Du willst über neue Beiträge zu WordPress informiert werden? Dann folge uns auf Twitter, Facebook oder über unseren Newsletter.