Was ist neu in WordPress 6.3: Ein überarbeiteter Website-Editor, eine neue Befehlspalette, Stilüberarbeitungen, neue Blöcke und vieles mehr!

WordPress 6.3 „Lionel“ ist da! Es ist die letzte große Veröffentlichung der Phase 2 der WordPress-Roadmap.

In der zweiten Phase konzentrierte sich die Entwicklung vor allem auf den Site Editor, erweiterte dessen Funktionalität und verbesserte die Oberfläche und die Benutzerfreundlichkeit.

Jetzt können Website-Ersteller/innen Layouts entwerfen und Inhalte innerhalb derselben Oberfläche verwalten, ohne von einem Admin-Bereich zum anderen zu springen und ohne eine einzige Zeile Code schreiben zu müssen.

Mit WordPress 6.3 werden 10 Versionen des Gutenberg-Plugins in den Kern integriert, und wenn du Gutenberg nicht auf deiner Website verwendest, wirst du viele Änderungen an der Oberfläche des Site Editors sehen.

Mit WordPress 6.3 wurde das Bearbeitungserlebnis deutlich verbessert. Mehrere technische Änderungen betrafen den Site Editor und führten zu einer neuen Art, Blockthemen zu erkunden und den Site Editor selbst zu nutzen. Verbesserte Navigation, ablenkungsfreier Modus, Vorschau von Blockthemen, Stil- und Vorlagenüberarbeitungen, eine neue Befehlspalette und vieles mehr.

Es gibt viel über WordPress 6.3 zu sagen. Also, warte nicht länger und lass uns herausfinden, was es mit der letzten Version von Phase 2 alles Neues gibt.

Verbesserte Navigation im Seiteneditor

Mit WordPress 6.3 wurde die Navigation im Site-Editor deutlich verbessert, indem neue Einstiegspunkte zu verschiedenen Bereichen des Editors hinzugefügt wurden. Vor 6.3 waren diese Verwaltungsbereiche über Zugangspunkte in verschiedenen Verwaltungsmenüs und -bildschirmen zu erreichen. Das Ergebnis dieser Änderungen ist ein einfacheres und einheitlicheres Bearbeitungserlebnis.

Die folgende Abbildung vergleicht das Navigationsmenü des Editors in WordPress 6.2 und 6.3.

Das erste, was dir im obigen Bild auffällt, sind die beiden Schaltflächen in der oberen rechten Ecke der Seitenleiste des Editors. Die Schaltfläche Website anzeigen erscheint, wenn du mit der Maus darüber fährst, und ermöglicht einen schnellen Zugriff auf das Frontend deiner WordPress-Website. Dies ist eine kleine, aber nützliche Ergänzung, die es dir ermöglicht, schnell auf die Seiten deiner Website zuzugreifen, egal wo du dich im Editor befindest, wenn das Navigationsmenü geöffnet ist.

Die Schaltfläche Befehlspalette öffnen (das Linsensymbol) ermöglicht den Zugriff auf eine neue Funktion von WordPress 6.3, die Befehlspalette (mehr dazu weiter unten).

Die neue Editor-Navigation umfasst die folgenden Elemente.

Navigation

Sobald du ein Navigationsmenü erstellt hast, erscheint es im Navigationsmenü des Site Editors. Hier kannst du die Menüpunkte nach oben oder unten verschieben oder aus einem Dropdown-Menü löschen. Du kannst auch Elemente per Drag & Drop verschieben, um die Menüreihenfolge zu ändern.

Wenn du auf einen Menüpunkt klickst, gelangst du zu den Seitendetails. Hier kannst du auch den Seiteninhalt und das Layout bearbeiten (siehe unten).

Stile

Über das Menü Stile kannst du auf Stilvariationen im Browse-Modus zugreifen. Hier kannst du eine Vorschau der verfügbaren Stile sehen, einen anwenden und deine Anpassungen vornehmen.

Das Augensymbol startet das Style Book, eine Funktion, die mit Version 6.2 eingeführt wurde und eine Vorschau der verfügbaren Blöcke mit den verschiedenen angewendeten Stilen bietet, ohne dass du die Oberfläche des Editors verlassen musst.

Seiten

Über den Menüpunkt Seiten hast du Zugriff auf die 10 zuletzt aktualisierten Seiten der Website sowie auf verschiedene Bearbeitungsfunktionen. In diesem Bereich kannst du neue Seiten erstellen, Inhalt und Layout bestehender Seiten bearbeiten, auf Seitendetails zugreifen und vieles mehr.

Die interessanteste Neuerung ist, dass es jetzt möglich ist, neue Seiten zu erstellen, ohne die Oberfläche des Editors zu verlassen.

Wenn du auf das +-Symbol im Navigationsbereich klickst, erscheint in der Mitte der Seite ein neues Modal, in dem du einen Titel für die neue Seite festlegen kannst und ein Tooltip mit Vorschlägen für deinen Titel angezeigt wird.

Wenn du auf Entwurf erstellen klickst, wirst du zum Beitragseditor weitergeleitet, in dem eine neue Seite geladen ist.

Unter Seiten kannst du den Seiteninhalt auch direkt im Seiteneditor bearbeiten.

Du kannst jetzt sowohl den Seiteninhalt als auch den Stil an der gleichen Stelle bearbeiten. Das gibt dir mehr Kontrolle über alle Aspekte der Seite und sollte die Bearbeitungsmöglichkeiten deutlich verbessern.

Im Bearbeitungsmodus kannst du ganz einfach zwischen dem Seiteneditor und dem Vorlageneditor umschalten. So wird vermieden, dass du nicht weißt, was du gerade bearbeitest, und du kannst festlegen, ob deine Änderungen nur die aktuelle Seite betreffen oder auch für die anderen Seiten gelten sollen, die dieselbe Vorlage verwenden.

Auf demselben Bildschirm werden auch die Seitendetails angezeigt.

Die Details umfassen derzeit:

• Status
• Slug
• Vorlage
• Übergeordnete
• Wörter
• Zeit zum Lesen
• Zuletzt geändert

Vorlagen

Hier kannst du auf Seitenvorlagen zugreifen. An der Struktur des Bildschirms Vorlagen hat sich nicht viel geändert. Wenn du jedoch mit WordPress 6.3 eine neue Vorlage erstellst, wird ein neues Modal-Overlay mit einer Liste von Seiten angezeigt, die du für deine Vorlage auswählen kannst.

Im zweiten Schritt bietet ein neues Modal eine Liste von Blockmustern, die du für deine Vorlage verwenden kannst.

Muster

Der Verwaltungsbereich Muster, der in einer früheren Version Bibliothek hieß, enthält eine Reihe bemerkenswerter Änderungen, die das System der Blockmuster betreffen. Dabei handelt es sich nicht nur um Änderungen an der Benutzeroberfläche. Es handelt sich um eine Generalüberholung der gesamten Blockmuster-Architektur.

Im Verwaltungsbereich der Muster kannst du Vorlagenteile und Muster verwalten. Hier findest du ein Menü, über das du Zugriff auf Vorlagenteile und Blockmuster hast, die nach Kategorien geordnet sind. Ein Schlosssymbol kennzeichnet Themenmuster, die vom Nutzer nicht geändert werden können.

In diesem Bereich kannst du neue Vorlagenteile und benutzerdefinierte Blockmuster erstellen und sie neben den Mustern deines Themes verwalten.

Wenn du auf die Schaltfläche Muster erstellen klickst, erscheint ein neues Popup-Fenster, in dem du einen Namen für dein Muster vergeben und die Art des Musters festlegen kannst: synchronisiert oder nicht synchronisiert.

Sobald du mindestens ein benutzerdefiniertes Blockmuster erstellt hast, kannst du es unter Meine Muster aufrufen, das oben im Menü Muster angezeigt wird.

Du kannst dein Blockmuster auswählen und ein neues Fenster öffnen, in dem du die Details des Musters sehen kannst. Wenn du den Griff nach rechts oder links bewegst, kannst du eine Vorschau des Musters in verschiedenen Auflösungen sehen und seine Reaktionsfähigkeit überprüfen.

Im Bereich Details wird der Synchronisierungsstatus des aktuellen Musters angezeigt.

Am unteren Ende des Menüs Muster findest du außerdem zwei Links: Alle Vorlagenteile verwalten und Alle meine Muster verwalten. Über diese Links kannst du direkt auf die Vorlagenteile und benutzerdefinierten Muster zugreifen.

Hier geht es um die neue Musterverwaltungsoberfläche im Website-Editor. Jetzt wollen wir herausfinden, was sich an der Struktur und Funktionalität des Blockmustersystems ändert.

Ein neues Blockmustersystem

Beginnend mit WordPress 6.3 (und Gutenberg 16.1):

• Wiederverwendbare Blöcke wurden in Synced Patterns umbenannt,
• reguläre Blockmuster heißen jetzt Nicht synchronisierte Muster,
• der benutzerdefinierte Beitragstyp wp_block wurde erweitert, um benutzerdefinierte Felder zu unterstützen, und es wurde ein neues Metafeld wp_block_sync_status hinzugefügt, um den Synchronisierungsstatus eines Musters zu speichern,
• die Eigenschaft source wurde dem Schema und der Antwort für Blockmuster hinzugefügt, um zwischen Kern- und Benutzermustern zu unterscheiden,
• die REST-API wurde um ein neues Attribut erweitert

Es ist jetzt klarer, dass alle Änderungen, die an einem synchronisierten Muster vorgenommen werden, auf jedes Vorkommen dieses Blocks auf deiner gesamten Website angewendet werden.

Umgekehrt wirken sich Änderungen an einem nicht synchronisierten Blockmuster nur auf diese spezielle Instanz des Musters aus und werden nicht auf andere Instanzen angewendet, die du möglicherweise zu anderen Beiträgen oder Seiten deiner Website hinzugefügt hast.

Dank des neuen Musterverwaltungssystems kannst du jetzt synchronisierte und nicht synchronisierte Blockmuster direkt im Website- oder Beitragseditor erstellen, wo es früher nur möglich war, wiederverwendbare Blöcke (jetzt synchronisierte Muster) zu erstellen.

Um diese neue Funktion im Beitragseditor auszuprobieren, öffne dein WordPress-Dashboard und gehe zu Beiträge -> Neu hinzufügen. Dort kannst du eine neue Gruppe von Blöcken erstellen oder einfach die Blöcke auswählen, die du zu deinem Blockmuster hinzufügen möchtest. Wähle dann Muster/Wiederverwendbare Blöcke erstellen aus dem Pop-up-Menü der Blocksymbolleiste.

Außerdem kannst du im Seiteneditor mit der Schaltfläche Muster erstellen ein neues Vorlagenteil oder Muster erstellen.

Wenn du auf Musterteil erstellen klickst, öffnet sich ein Modal/Pop-up, in dem du einen Namen für dein Musterteil und den Bereich der Seite, für den das Musterteil bestimmt ist, eingeben kannst.

Wenn du auf Vorlage erstellen klickst, öffnet sich ein anderes Modal/Pop-up, in dem du einen Namen für deine Vorlage festlegen und auswählen kannst, ob du eine synchronisierte oder nicht synchronisierte Vorlage erstellen möchtest.

Bestätige und erstelle dein Muster oder deinen Vorlagenteil im Website-Editor.

Wenn du mit deinen Änderungen zufrieden bist, speicherst du das Blockmuster und gehst zurück zum Site-Editor. Öffne den Bereich Muster und klicke auf Alle meine Muster verwalten. Auf dem Bildschirm Muster wird dein neues benutzerdefiniertes Blockmuster angezeigt.

Blockmuster nutzen auch die Vorteile des Seitenverhältnisses des Bildblocks. Wenn du jetzt ein Seitenverhältnis für ein Bild festlegst, bleibt es erhalten, wenn du das Bild durch ein anderes mit anderen Abmessungen ersetzt. Das ist besonders bei Blockmustern nützlich, da du dich beim Ersetzen von Bildern in Blockmustern nicht mehr um die Bildgröße kümmern musst.

Einen ausführlicheren Überblick über die Änderungen am Blockmustersystem findest du in den PRs #51078, #51144 und #50028.

Stilrevisionen im Site-Editor angezeigt

Der Seiteneditor zeigt jetzt einen Revisionsverlauf an, in dem du die Änderungen durchsuchen und eine davon zur Wiederherstellung auswählen kannst.

Um den Revisionsverlauf aufzurufen, klicke auf die neue Schaltfläche Revisionen im Stil-Panel.

In diesem Bereich wird eine Liste der Überarbeitungen in einer Zeitleiste angezeigt. Außerdem werden der Name des Autors für jede Überarbeitung sowie das Datum und die Uhrzeit jeder Überarbeitung in einem Tooltip angezeigt. Du kannst eine Vorschau aller Überarbeitungen sehen und diejenige auswählen, die du wiederherstellen möchtest.

Du kannst in der Oberfläche für globale Stile durch die Überarbeitungen navigieren, eine Vorschau anzeigen und deine Inhalte jederzeit wiederherstellen.

Die Entwicklung von Revisionen hört hier nicht auf. Mit dem Übergang zu Phase 3 werden die Revisionen von neuen Ergänzungen und Verbesserungen betroffen sein, die ihre Benutzerfreundlichkeit weiter verbessern und neue Funktionen freischalten werden.

Die Befehlspalette

Die Befehlspalette ist eine neue Funktion, mit der du häufig genutzte Aktionen, wie das Springen zu anderen Seiten oder Vorlagen im Editor, über Befehle ausführen kannst.

Klicke im Site Editor auf das Linsensymbol oder drücke cmd + k (ctrl + k unter Windows und Linux). Dadurch wird die Befehlspalette geöffnet.

Wenn du anfängst, einen Befehl einzugeben, schlägt die Befehlspalette eine Reihe von Befehlen vor, aus denen du wählen kannst. So kannst du schnell Aufgaben erledigen oder bestimmte Bereiche des Site Editors erreichen.

Die erste Implementierung dieser Funktion bietet eine schnelle Suchfunktion und einige Aktionen wie das Navigieren im Site-Editor, das Erstellen eines neuen Beitrags/einer neuen Seite, das Umschalten von UI-Elementen, das Zurücksetzen oder Löschen einer Vorlage oder eines Vorlagenteils und noch mehr. Weitere Befehle sollen in zukünftigen Versionen hinzugefügt werden.

Das neue Tool eröffnet unzählige Anwendungsmöglichkeiten. Die Befehlspalette könnte zum Beispiel benötigt werden, um Gestaltungsoptionen für bestimmte Beiträge oder Seiten anzuzeigen.

Dank der neuen Befehlspaletten-API kannst du auch deine eigenen Befehle registrieren, um Befehle zu rendern, zu registrieren und zu deaktivieren.

Es gibt verschiedene Möglichkeiten, Befehle zu registrieren, je nachdem, welche Art von Befehl du registrierst.

• Statische Befehle: Entwickler können eigene statische Befehle mit der Aktion wp.data.dispatch( wp.commands.store ).registerCommand oder dem React-Hook wp.data.useCommand registrieren.
• Dynamische Befehle: Diese Befehle werden in die Befehlsliste aufgenommen, je nachdem, welchen Suchbegriff der Nutzer in das Eingabefeld der Befehlspalette eingibt, oder wenn ein Befehl nur verfügbar ist, wenn bestimmte Bedingungen erfüllt sind.
• Kontextbezogene Befehle: Diese Befehle werden in bestimmten Kontexten bevorzugt, d.h. sie erscheinen automatisch im richtigen Kontext (z.B. wenn du eine Vorlage bearbeitest). Die Befehle Vorlage zurücksetzen und Vorlage löschen sind Beispiele für kontextbezogene Befehle. Zurzeit sind zwei Kontexte implementiert worden:
  • site-Editor: Dieser Kontext wird eingestellt, wenn du im Site-Editor navigierst
  • site-editor-edit: Dieser Kontext wird gesetzt, wenn du etwas (Vorlage, Vorlagenteil oder Seite) im Editor bearbeitest

Du kannst die Liste der verfügbaren Befehle unter wp.data.select( wp.commands.store ).getCommands() in der Konsole des Browsers abrufen.

Die Befehlspalette ist zunächst in den Editoren für Beiträge und Websites verfügbar und soll in Zukunft auf den gesamten Adminbereich ausgeweitet werden.

Eine Vorschau auf die Befehlspalette für Entwickler findest du in der Rückrufbitte.

Zusätzliche Funktionen und Verbesserungen für den Site-Editor

Zusätzlich zu den Funktionen und Verbesserungen, die in den vorherigen Abschnitten beschrieben wurden, bringt WordPress 6.3

Theme-Vorschau im Site-Editor

Ab 6.3 ermöglicht ein neuer theme_preview Parameter, dass jedes Block-Theme im Site-Editor geladen und vor der Aktivierung in der Vorschau angezeigt werden kann.

Um eine Vorschau eines Blockthemes zu sehen, navigiere zum Bildschirm Erscheinungsbild > Themes und fahre mit der Maus über ein beliebiges Blocktheme. Über jedem Blocktheme solltest du eine Schaltfläche für die Live-Vorschau sehen. Klicke einfach auf diese Schaltfläche, um die Vorschau des Themes im Seiteneditor zu öffnen. Bei Themes, die keine Blockthemes sind, wird über die Schaltfläche Live-Vorschau der Theme Customizer gestartet.

Verbesserungen am Ladezustand

Mit WordPress 6.3 wurde der Ladezustand des Editors verbessert, um zu verhindern, dass der Benutzer mit dem Editor interagiert, bevor er vollständig geladen ist.

Ablenkungsfreier Modus

WordPress 6.3 führt einen ablenkungsfreien Bearbeitungsmodus für den Editor ein. Das ist die gleiche Funktion, die seit WordPress 6.2 auch im Beitragseditor verfügbar ist

Du kannst diese Funktion in den Optionen des Site-Editors aktivieren. Sobald der ablenkungsfreie Modus aktiviert ist, verschwinden Seiten- und Symbolleisten und du kannst dich ganz auf deine Bearbeitung konzentrieren.

Zusätzliche UI-Verbesserungen

• Eine neue <ViewLink> Komponente zeigt jetzt eine Schaltfläche an, mit der du jeden veröffentlichten Beitragstyp in einem neuen Fenster öffnen kannst. Dies ist eine kleine, aber nützliche Funktion, mit der du den aktuellen Beitragstyp anzeigen kannst, ohne in der Einstellungsseitenleiste nach dem Link suchen zu müssen (PR #50260)
• Die Beschreibungen der Vorlagen wurden verbessert, um besser zu erklären, was jede Vorlage genau macht. Das sollte den Nutzern helfen, die richtige Vorlage für die Anpassung im Seiteneditor auszuwählen.
• Bisher waren die Duotone-Filtereinstellungen nur in der Block-Symbolleiste verfügbar. Mit 6.3 sind die Duotone-Einstellungen jetzt über die Seitenleiste der Einstellungen verfügbar (PR #49838)
• Vor WordPress 6.3 waren große Schriftarten auf kleinen Bildschirmen nicht ausreichend skalierbar. Jetzt skaliert die flüssige Typografie dank eines logarithmischen Skalierungsfaktors, der zur Berechnung der Mindestschriftgröße für kleine Bildschirme verwendet wird, reibungslos (PR #49707)

Neue Blöcke und verbesserte Design-Tools

WordPress 6.3 liefert außerdem zwei nützliche Blöcke, die viele Inhaltsautoren glücklich machen dürften.

Neuer Fußnoten-Block

WordPress 6.3 bringt uns auch einen sehr nützlichen Fußnoten-Block.

Mit dieser großartigen Ergänzung ist das Hinzufügen einer Fußnote zu einem Textblock (Absatz, Überschrift und Listen) nur noch ein paar Klicks entfernt. Platziere den Cursor an der Stelle, an der du den Link hinzufügen möchtest, und klicke auf die Schaltfläche Fußnote im Kontextmenü des Blocks. Dadurch wird eine Fußnote am Ende der Seite hinzugefügt.

Der Fußnotenblock fügt automatisch Fußnoten hinzu, entfernt sie und ordnet sie neu an, während du deinen Text bearbeitest. Das ist besonders bei langen Artikeln sehr nützlich.

Neuer Details-Block

Mit dem neuen Block „Details“ kannst du einen Teil des Inhalts ausblenden, bis der Leser bereit ist, deine FAQ zu lesen, dein Video anzusehen oder deinen tollen Podcast anzuhören.

Der neue Block besteht aus zwei separaten Elementen: der Zusammenfassung und dem versteckten Inhalt. Standardmäßig ist der Inhalt ausgeblendet, aber du kannst diese Einstellung in der Seitenleiste der Blockeinstellungen ändern.

Der Block verwendet ein details Element mit einem Rich-Text summary und ein div, das das versteckte Element enthält (siehe auch PR #45055).

Verbesserungen am Cover Block

Der Titelblock wurde um einige Designfunktionen erweitert, die die Nutzung einfacher machen und mehr Möglichkeiten zur Anpassung bieten.

Erstens unterstützt der Titelblock jetzt das Tool zur Gestaltung der Textfarbe. Dank dieser Erweiterung können Nutzer/innen und Themesautor/innen die Farbe für alle inneren Blöcke ändern, indem sie einfach die Textfarbe des Cover-Blocks einstellen. Außerdem ist es jetzt einfacher, Transformationen aus dem Medien- und Textblock zu bearbeiten, da die Textfarben jetzt nahtlos an die resultierenden Blöcke weitergegeben werden.

Eine weitere Neuerung im Cover-Block, die mit WordPress 6.3 eingeführt wird, ist die Unterstützung für alle randbezogenen Design-Tools. Diese Neuerung sollte den Bedarf an benutzerdefiniertem Blockstyling verringern.

Mit WordPress 6.3 erhält der Cover-Block auch Unterstützung für ein eingeschränktes/Fluss-Layout, das nun wie beim Gruppen-Block gehandhabt werden kann. Diese Änderung sorgt für mehr Konsistenz bei der Handhabung des Layouts und sollte es sowohl den Nutzern als auch den Theme-Entwicklern erleichtern, ihre Anpassungen vorzunehmen.

Theme-Entwickler sollten jedoch einige Tests mit ihren bestehenden Themes durchführen, da das Block-Layout-System möglicherweise die benutzerdefinierten Implementierungen außer Kraft setzt.

Verbesserter Duotone-Filter

Einige Änderungen verbessern die Art und Weise, wie wir den Duotone-Filter verwenden.

Erstens kannst du den Duotone-Filter jetzt global im Stil-Panel des Site-Editors einstellen. Bisher konntest du Duotone-Filter nur global in der theme.json anwenden.

Dies ist möglich, weil Duotone-Werte jetzt mit Farbslugs statt mit Farbwerten festgelegt werden. Das bedeutet auch, dass du die Duotone-Werte einmal festlegen und unabhängig vom aktuellen Theme oder der Theme-Variation anwenden kannst, solange sie denselben Slug verwenden.

Und schließlich werden Duotone-Stile jetzt mit der WordPress Style Engine generiert und mit blockunterstütztem CSS gespeichert, anstatt inlined zu sein.

Zusätzliche Verbesserungen

• Der Button-Block unterstützt jetzt Farbe, Stil und Breite des Rahmens (PR #44574)
• Die Länge der Auszüge kann jetzt im Post Excerpt Block eingestellt werden (PR #44964)
• Du kannst jetzt das Seitenverhältnis des Post Featured Image-Blocks einstellen (PR #47854)
• Die Schnittstelle für globale Stile enthält jetzt Steuerelemente für Farbe und Typografie für das Element Caption (PR #49141)
• Der Block Post Date wurde um eine Variante des Post Modified Date ergänzt. Sie ist nützlich, wenn du schnell das Änderungsdatum des Beitrags anstelle des Veröffentlichungsdatums einfügen möchtest (PR #49111)
• Das Website-Logo kann jetzt in der Seitenleiste ersetzt werden (PR #49992)

Leistungsverbesserungen und Änderungen für Entwickler

WordPress 6.3 bringt auch viele Änderungen und neue Funktionen mit sich, die die Leistung der Website und die Arbeitsabläufe der Entwickler verbessern sollen. Unter den vielen Neuerungen haben wir die folgenden ausgewählt:

Wegfall der Unterstützung für PHP 5

Ab WordPress 6.3 wird PHP 5 nicht mehr unterstützt. Die neue Version, ab der WordPress PHP unterstützt, wird PHP 7.0.0 sein. Die empfohlene PHP-Version ist 7.4 oder höher. 7.4 ist mit 50,8 % der WordPress-Websites auch die am häufigsten verwendete Version.

Dies ist nicht nur für Entwickler/innen wichtig, sondern für alle WordPress-Nutzer/innen, da es die Sicherheit und Leistung deiner Website verbessert.

Das ist auch der Grund, warum Kinsta Hosting nur unterstützte PHP-Versionen zulässt. Wir führen regelmäßig unsere Performance-Benchmarks der unterstützten PHP-Versionen durch, um die Leistungsverbesserungen neuerer Versionen zu überprüfen.

Leistungsverbesserungen beim Laden von Bildern

Seit WordPress 6.3 wird dem Bild das Attribut fetchpriority mit dem Wert "high" zugewiesen, um festzustellen, ob es sich um ein LCP-Bild (Largest Contentful Paint) handelt. Das Largest Contentful Paint ist eine Metrik, die die Renderzeit des größten Elements innerhalb des Viewports angibt.

Das Attribut fetchpriority weist den Browser an, diesem Bild Vorrang zu geben, noch bevor das Layout berechnet wurde.

Eine weitere Verbesserung ist die automatische Handhabung des Lazy Loading von Bildern mit dem loading Attribut. Dieses Attribut wurde zum ersten Mal in WordPress 5.5 eingeführt und dann mit WordPress 5.9 verbessert, sodass das loading="lazy" Attribut für das erste Inhaltsbild weggelassen wurde (siehe Leistungsverbesserungen beim Lazy Loading in WordPress 5.9). Jetzt, mit WordPress 6.3, sollten alle verbleibenden Probleme behoben worden sein, was zu guten Leistungsverbesserungen führt.

Die beiden Attribute fetchpriority und loading werden jetzt von der neuen Funktion wp_get_loading_optimization_attributes() gesteuert. Diese Funktion gibt ein assoziatives Array von Attributen zurück, um die Ladeleistung zu optimieren. Derzeit sind die möglichen Attribute, die von dieser Funktion zurückgegeben werden, folgende:

• loading mit einem Wert von "lazy"
• fetchpriority mit einem Wert von "high"

Beachte, dass kein Element beide Attribute enthalten sollte, da sie sich gegenseitig ausschließen. Sollte ein Element beide Attribute enthalten, wird eine Warnung ausgelöst.

Einen ausführlicheren Überblick über die Funktion wp_get_loading_optimization_attributes() und die Attribute fetchpriority und loading mit Anwendungsbeispielen findest du unter Leistungsverbesserungen für Bilder in WordPress 6.3.

Unterstützung für die HTML 5-Attribute async und defer

async und defer sind zwei HTML 5-Attribute, die den Browser anweisen, JavaScript herunterzuladen, ohne das HTML-Parsing zu unterbrechen.

Es gibt einen entscheidenden Unterschied zwischen den beiden Attributen:

• Skripte mit dem Attribut async werden asynchron ausgeführt, sobald sie geladen sind. Sobald das Skript geladen ist, unterbricht der Browser das Parsen des HTML und führt das Skript aus.
  • Skripte mit dem Attribut defer werden erst ausgeführt, wenn das Parsen der Seite abgeschlossen ist.

Seit WordPress 6.3 kannst du Skripte mit den Attributen async und defer registrieren, indem du den booleschen Parameter $in_footer der Funktionen wp_register_script() oder wp_enqueue_script() verwendest (siehe auch Wie du deine Assets in WordPress einreihst).

Dieser Parameter wurde überladen und akzeptiert jetzt einen neuen $args Array-Parameter, mit dem du eine Ladestrategie für deine Skripte festlegen kannst.

Hier ist ein Beispiel dafür, wie du eine Aufschubstrategie in der PHP-Datei eines Plugins mit wp_register_script definierst (der Code wäre derselbe mit wp_enqueue_script):

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'strategy' => 'defer'
	) 
);

Die Abwärtskompatibilität ist gewährleistet, so dass du WordPress weiterhin anweisen kannst, dein Skript in der Fußzeile zu laden:

wp_register_script( 
	'custom-script', 
	plugins_url( '/js/custom-script.js' , __FILE__ ), 
	array(), 
	'1.0.0', 
	array(
		'in_footer' => true,
		'strategy' => 'defer'
	) 
);

Dank der neuen Implementierungen ist es jetzt möglich, zu verhindern, dass ein Skript in einer unerwarteten Reihenfolge im Skript-Abhängigkeitsbaum geladen wird, was mit den vor WordPress 6.3 verfügbaren Tools nicht möglich war. Einen ausführlicheren Überblick über die Änderungen an der Skript-API mit zusätzlichen Beispielen und technischen Details findest du in Simon Dowdles Dev Note.

Entwicklungsmodus

Mit WordPress 6.3 wird ein neuer Entwicklungsmodus eingeführt, den Entwickler mithilfe einer neuen Konstante WP_DEVELOPMENT_MODE aktivieren können. Diese neue Konstante wird für jede Entwicklungsseite empfohlen und ihr Wert hängt von der Art der Entwicklung ab.

Die Konstante WP_DEVELOPMENT_MODE kann einen der folgenden möglichen Werte annehmen:

• core – Wird verwendet, um anzuzeigen, dass eine Website als Kernentwicklungsumgebung verwendet wird.
• plugin – Wird für die Entwicklung von Plugins verwendet.
• theme – Wird für die Entwicklung von Themes verwendet.
• all – Damit wird angegeben, dass eine Website für alle drei Arten der Entwicklung genutzt wird.
• Ein leerer String ist die Standardeinstellung und zeigt an, dass die Website nicht als Entwicklungsumgebung genutzt wird.

WP_DEVELOPMENT_MODE sollte nur in Entwicklungsinstallationen verwendet werden. In der Produktion ist sie nicht relevant.

Der Entwicklungsmodus wirkt sich auf einige Low-Level-Aspekte des WordPress-Verhaltens aus. Zum Zeitpunkt der Erstellung dieses Artikels betrifft der einzige Unterschied das Caching der Datei theme.json, das umgangen wird, wenn WP_DEVELOPMENT_MODE auf 'theme' eingestellt ist.

WP_DEVELOPMENT_MODE funktioniert anders als die Konstanten WP_DEBUG und WP_ENVIRONMENT_TYPE, die normalerweise in der Entwicklung verwendet werden, da WP_DEBUG und WP_ENVIRONMENT_TYPE das Verhalten von WordPress in keiner Weise beeinflussen. Du würdest wahrscheinlich WP_DEVELOPMENT_MODE verwenden, wenn WP_ENVIRONMENT_TYPE entweder 'development' oder 'local' ist, denn die Entwicklung sollte nie auf Live-Websites stattfinden.

Auf diese Weise kannst du den Entwicklungsmodus aktivieren:

define( 'WP_DEVELOPMENT_MODE', 'theme' );

WordPress 6.3 führt auch eine neue Funktion wp_in_development_mode() ein, mit der du überprüfen kannst, ob sich deine Website im Entwicklungsmodus befindet. Mit der neuen Funktion kannst du auch überprüfen, welche Art von Entwicklungsmodus gerade aktiv ist. Dafür gibt es den Parameter $mode, dessen mögliche Werte 'core', 'plugin' und 'theme' sind:

if ( wp_in_development_mode( 'theme' ) ) { ... }

Du kannst den aktuellen Wert von WP_DEVELOPMENT_MODE auch im Info-Panel des Site Health Tools überprüfen.

Zusätzliche Änderungen für Entwickler

• Theme-Entwickler können jetzt die Eigenschaft template_types verwenden, um einen oder mehrere Vorlagentypen zuzuweisen, wenn sie ein Vorlagenmuster registrieren, um es in das modale Overlay einzubinden, das erscheint, wenn ein Nutzer eine neue Vorlage erstellt.
• Die Funktion get_pages() wurde aktualisiert und verwendet nun intern WP_Query.
• Die Klasse WP_User_Query wurde erheblich verbessert, insbesondere durch die Implementierung des Abfrage-Cachings.
• An der Cache-API wurden mehrere Verbesserungen vorgenommen.
• Der Link Site bearbeiten lädt jetzt die aktuelle Vorlage statt der Startseite des Editors.
• Eine neue Block-Selektoren-API ermöglicht es, mehrere CSS-Selektoren für Blöcke zu konfigurieren, um sie in globalen Stilen zu verwenden.
• Die Farben der sozialen Symbole werden jetzt dynamisch auf Basis der theme.json und der globalen Stile aktualisiert
• Weitere Aktualisierungen betrafen die Internationalisierung (I18N) und die Layout-Unterstützung.

Zusammenfassung

Mit WordPress 6.3 erreichen wir das Ende von Phase 2: Anpassung der Gutenberg-Entwicklungsroadmap. Diese neue Version bringt uns erhebliche Verbesserungen im Bearbeitungserlebnis, darunter neue Bearbeitungsfunktionen innerhalb des Website-Editors, ein neues und flexibleres Blockmustersystem, neue Blöcke, bessere Leistung, Verbesserungen bei der Barrierefreiheit und Internationalisierung und vieles mehr.

Mit der nächsten Version von WordPress, die für November 2023 erwartet wird, treten wir in Phase 3: Kollaboration ein, deren Hauptziel es ist, erweiterte Kollaborationsfunktionen in den Editor zu bringen.

Wenn du WordPress testen und/oder zu WordPress beitragen möchtest, solltest du unsere kostenlose lokale WordPress-Entwicklungssuite DevKinsta nutzen.

Und nun zu dir: Habt ihr WordPress 6.3 schon in eurer Entwicklungsumgebung getestet? Welche Funktionen von 6.3 gefallen dir am besten? Teile deine Meinung in den Kommentaren unten mit.

Carlo Daniele Kinsta

Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.

• Webseite
• Twitter