WordPress 5.9 Josephine ist da! Die erste WordPress-Version des Jahres sollte ursprünglich am 14. Dezember 2021 veröffentlicht werden. Aufgrund mehrerer offener Probleme und ungelöster Fehler wurde die endgültige Version verschoben und schließlich am 25. Januar 2022 veröffentlicht.
Wenn du dich fragst, was in WordPress 5.9 neu ist, lautet die kurze Antwort: Full Site Editing (FSE ).
Und tatsächlich sind viele Funktionen von 5.9 nur verfügbar, wenn du ein Theme verwendest, das Full Site Editing unterstützt, wie zum Beispiel das brandneue Standard-Theme Twenty Twenty-Two.
Mit WordPress 5.9 kommen wir zum Kern der zweiten Phase der Gutenberg-Roadmap: der Anpassungsphase, die sich hauptsächlich auf die vollständige Bearbeitung der Webseite, Blockmuster, das Blockverzeichnis und blockbasierte Themes konzentriert.
Mit 5.9, das nächsten Monat herauskommt, sind wir – ich würde sagen – beim MVP, dem Minimum Viable Product dieser Anpassungsphase von Gutenberg.
Diese Worte von Matt Mullenweg bei 2021 State of the Word fassen die wichtigsten Funktionen der kommenden WordPress-Version am besten zusammen.
Was kannst du also von der ersten WordPress-Version des Jahres 2022 erwarten?
Lass es uns herausfinden!
Globale Stile: Eine grafische Schnittstelle für theme.json
Mit der Veröffentlichung von WordPress 5.8 im Jahr 2021 wurde die Bearbeitung der Datei theme.json zur Standardmethode für Theme-Entwickler/innen, um Editoreinstellungen und Stile anzupassen.
WordPress 5.9 bringt die Dinge auf die nächste Stufe, indem es eine grafische Schnittstelle einführt, mit der Benutzer/innen die Stilvorgaben für ihre Webseiten anpassen können, entweder global oder auf Blockebene, ohne eine einzige Zeile Code zu schreiben.
Der Mechanismus der Globalen Stile dürfte die Art und Weise, wie du das Erscheinungsbild deiner Webseiten anpasst, erheblich verändern, da die Globalen Stile mehrere Aspekte des WordPress-Seiten-Designs beeinflussen.
Zunächst einmal ersetzt die Oberfläche der Globalen Stile den Customizer und ist nun die einzige Möglichkeit, Einstellungen und Stile mit Block-Themes anzupassen. Auch die komplexen Admin-Seiten für Theme-Optionen werden nicht mehr benötigt. Damit gibt es eine neue Standardmethode für die Konfiguration von Theme-Einstellungen und -Styles, die gleichzeitig den Workflow bei der Theme-Entwicklung vereinfachen dürfte.
Mit den globalen Styles erhalten WordPress-Nutzer/innen mehr Kontrolle über die Darstellung ihrer Webseiten, sowohl global als auch pro Blocktyp, über den Kontext einzelner Seiten oder Beiträge hinaus.
Im Webseiten-Editor gibt es jetzt eine neue Seitenleiste, in der du oben ein kleines Vorschaufeld und vier Komponenten in folgender Reihenfolge findest:
Wir können davon ausgehen, dass im Laufe der Zeit neue Komponenten hinzugefügt werden.
Schauen wir uns die neue Benutzeroberfläche genauer an.
Stilvorschau
Das erste Element in der Seitenleiste der Globalen Stile ist ein Vorschaufenster. Hier kannst du das Ergebnis deiner Anpassungen überprüfen. Das ist besonders nützlich, wenn sich deine Änderungen auf Elemente beziehen, die im Site-Editor nicht sichtbar sind.
Das folgende Bild zeigt drei verschiedene Stilkombinationen im Vergleich:
Typografie
Im Bereich Typografie steuerst du die Typografie deiner Webseite. Welche Steuerelemente in diesem Bereich verfügbar sind, hängt natürlich von den Einstellungen in deiner theme.json ab.
Das Thema Twenty Twenty-One Blocks (TT1 Blocks) deklariert zum Beispiel die folgenden Typografie-Eigenschaften:
"settings": {
"typography": {
"customLineHeight": true,
"fontSizes": [],
"fontFamilies": []
}
}Die nächste Abbildung zeigt die daraus resultierenden Typografieeinstellungen in der Seitenleiste Globale Stile:
Lass uns ein bisschen tiefer eintauchen und sehen, wie das TT1 Blocks-Thema fontFamilies deklariert:
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif",
"slug": "system-font",
"name": "System Font"
},
{
"fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif",
"slug": "helvetica-arial"
},
{
"fontFamily": "Geneva, Tahoma, Verdana, sans-serif",
"slug": "geneva-verdana"
},
{
"fontFamily": "Cambria, Georgia, serif",
"slug": "cambria-georgia"
},
{
"fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif",
"slug": "hoefler-times-new-roman"
}
]Du kannst diese Schriftfamilien in der Vorschau der Globalen Stile überprüfen:
Farben
Im Bereich Farben kannst du Farbpaletten ansehen und bearbeiten und die Farbe verschiedener Seitenelemente anpassen.
Wenn du auf diese Elemente klickst, erhältst du Zugang zu einem neuen Panel, in dem du Farben aus drei Farbpaletten auswählen kannst: Standard-, Themen- und benutzerdefinierte Palette (mehr dazu unter Standardfarben, Themenfarben und benutzerdefinierte Farben).
In diesem Bereich kannst du die Farbe für das aktuelle Element einstellen und ändern.
Layout
Die letzte Gruppe von Werkzeugen ist für Layoutanpassungen gedacht. Im globalen Kontext ist dies auf den Webseiten-Container beschränkt.
Blöcke
Mit der Einführung des Mechanismus der Globalen Stile ist es jetzt auch möglich, das Erscheinungsbild für bestimmte Blöcke zu ändern, z. B. für Absätze (Typografie und Farben), Schaltflächen (Layout) und Spalten (Farben und Layout).
Beachte, dass Blockstile nur dann über die Schnittstelle für globale Stile angepasst werden können, wenn der Block die Unterstützung für bestimmte Funktionen in der entsprechenden block.json-Datei deklariert. Der Block core/post-title zum Beispiel unterstützt derzeit die folgenden Stile:
"supports": {
"align": [ "wide", "full" ],
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"margin": true
},
"typography": {
"fontSize": true,
"lineHeight": true,
"__experimentalFontFamily": true,
"__experimentalFontWeight": true,
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalLetterSpacing": true,
"__experimentalDefaultControls": {
"fontSize": true,
"fontAppearance": true,
"textTransform": true
}
}
},Da der Block core/post-title Farben, Abstände und Typografie unterstützt, findest du die entsprechenden Einträge in den Einstellungen der Globalen Stile des Blocks Post Title.
Das folgende Bild zeigt die Einstellungen für die Typografie, die du leicht mit dem obigen Code vergleichen kannst:
Es ist erwähnenswert, dass WordPress 5.9 nur die erste Implementierung der Global Styles-Schnittstelle enthält. Wie Matias Ventura betont, können wir davon ausgehen, dass die neue Funktion zur Stilsteuerung weiterentwickelt wird:
In Zukunft wird es Abläufe im System geben, die es dir ermöglichen, von lokalen Stilen zu globalen Stilen überzugehen – z. B. wenn du einen Button-Block anpasst und dich dafür entscheidest, diese Änderungen global auf alle Buttons dieses Typs anzuwenden.
Wir können also bald mit großen Verbesserungen rechnen. Das Bild unten ist nur ein Beispiel dafür, was wir erwarten können:
Weitere Verbesserungen könnten darin bestehen, dass Themes alternative Farbpaletten und mehrere globale Stilvarianten anbieten können.
Last week I built a handful of Twenty Twenty-Two's color + font variations into super-simple child themes. They're really lightweight, and I love the idea of offering folks a drastically different site with one click.🎉https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
— kjellr (@kjellr) November 15, 2021
Entwickler können den Mechanismus des globalen Stylings im Support-Artikel Globale Einstellungen & Stile (theme.json) genauer kennenlernen. Weitere Beispiele findest du in unserer Einführung in das Standard-Theme Twenty Twenty-Two.
Der Navigationsblock
Der Navigationsblock wurde als „einer der wirkungsvollsten Theme-Blöcke“ bezeichnet, und wir können dir da nur zustimmen.
Der Block befindet sich schon seit einiger Zeit in der Frühphase (siehe auch Navigationsblock Tracking Issue und Tracking Issue i2). Doch jetzt, wo alle Probleme und Blocker, die als WordPress 5.9-Must-haves aufgelistet sind, behoben sind, können wir endlich eine der leistungsstärksten Funktionen nutzen, die mit WordPress 5.9 in den Kern integriert wurden.
Ein kurzer Überblick über die Oberfläche des Navigationsblocks
Die Verwendung des neuen Blocks mag anfangs etwas verwirrend sein, aber sobald du den Dreh raus hast, wirst du sein volles Potenzial zu schätzen wissen.
Wenn du zum ersten Mal einen Navigationsblock hinzufügst, bietet der Blockplatzhalter drei Optionen: Du kannst ein bestehendes blockbasiertes Menü auswählen, ein Menü mit allen Seiten erstellen oder mit einem leeren Menü neu beginnen.
Mit dem neuen Navigationsmenü kannst du auch Menüs importieren, die du über den Bildschirm „Erscheinungsbild-Menüs“ erstellt hast, der bei klassischen Themen verfügbar ist.
Das heißt, wenn du von einem klassischen Thema auf ein Blockthema umsteigst, musst du deine bestehenden Menüs nicht neu erstellen. Du musst nur eines deiner derzeit verfügbaren „klassischen Menüs“ auswählen und es wird automatisch in ein blockbasiertes Navigationsmenü umgewandelt.
Du kannst den Navigationsblock überall auf deinen Seiten einfügen. Du kannst ihn zum Beispiel in langen Artikeln verwenden, um ein Inhaltsverzeichnis zu erstellen, das es den Nutzern ermöglicht, zu bestimmten Inhaltsabschnitten zu springen.
Neue Navigationslinks werden sofort zum Navigationsblock hinzugefügt, indem du auf das Plus-Symbol(+) auf der rechten Seite klickst (siehe auch Gutenberg 11.7 Versionshinweise), es sei denn, es wurden bereits andere Arten von Blöcken zum Menü hinzugefügt.
Wenn du auf die Schaltfläche Bearbeiten in der Symbolleiste des Navigationslink-Blocks klickst, wird ein Menüpunkt in einen benutzerdefinierten Link umgewandelt. So kannst du einzelne Elemente hinzufügen, bearbeiten, neu anordnen und entfernen.
Du kannst Links auch in Blöcke umwandeln, indem du auf die Schaltfläche Umwandeln in der Blocksymbolleiste klickst. So kannst du bestimmte Blöcke direkt in das Navigationsmenü einfügen.
Die Blöcke „Benutzerdefinierter Link“, „Abstandhalter“, „Seiten-Logo“, „Home-Link“, „Soziale Symbole“ und „Suche“ werden jetzt für die Nutzer/innen sichtbar, wenn sie Blöcke zu Navigationsmenüs hinzufügen.
In der Seitenleiste der Einstellungen findest du eine Reihe von Optionen, mit denen du verschiedene Aspekte deines Navigationsmenüs steuern kannst.
Das Layout-Panel enthält Steuerelemente für Ausrichtung, Orientierung und Umbruch.
Der Navigationsblock verfügt außerdem über ein verbessertes Einstellungsfeld für die Anzeige mit einer Option für ein immer aktives Burger-Menü.
Du kannst auch die Text- und Hintergrundfarben für deine Menüs und Untermenüs anpassen.
Eine weitere hilfreiche Ergänzung, die kürzlich zum Navigationsblock hinzugefügt wurde, ist die Unterstützung für Blockabstände, mit der du den Abstand zwischen den Menüpunkten festlegen kannst.
Das Bedienfeld Typografie bietet eine Reihe von Steuerelementen für die Schriftfamilie, das Aussehen, die Zeilenhöhe, die Verzierung und die Groß- und Kleinschreibung. Alle diese Steuerelemente können über ein Dropdown-Menü ein- und ausgeschaltet werden, das erscheint, wenn du auf das Ellipsen-Symbol auf der rechten Seite klickst.
Der Navigationsblock: Unter der Haube
Die Daten des Navigationsblocks werden in der Datenbank mit einem eigenen wp_navigation Post-Typ gespeichert.
Warum ist das für WordPress-Nutzer interessant und wie funktioniert es?
Angenommen, du hast ein Navigationsmenü erstellt, das aus zwei benutzerdefinierten Links und einem Suchfeld besteht. Wenn du das Twenty Twenty-Two-Theme installiert hast, könnte das Menü wie in der folgenden Abbildung aussehen:
Der obige Navigationsblock wird in der Datenbank als wp_navigation post type wie folgt gespeichert:
<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /-->
<!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->Wenn du den Inhalt des Navigationsblocks in der Datenbank speicherst, kannst du die gleichen Navigationsmenüs in verschiedenen Blockthemes verwenden. Wenn das Menü nicht sofort sichtbar ist, wählst du einfach das gewünschte Navigationsmenü im Menüselektor aus (siehe auch Ausgabe #36087 und PR #36178).
Das folgende Bild zeigt das obige Menü mit dem Thema Twenty Twenty-One Blocks:
Der Navigationsblock hat mehrere Iterationen durchlaufen. In den Versionshinweisen zu Gutenberg 11.7, 11.8 und 11.9 kannst du die einzelnen Implementierungen genauer kennenlernen.
Du kannst auch mehr über den Navigationsblock in den Entwicklungshinweisen zum neuen Navigationsblock und im Artikel zur Unterstützung des Navigationsblocks lesen.
Bildergalerien, Featured Images und Webseiten-Symbole
Mit dem Ziel, das Verhalten von Bildern in verschiedenen Kontexten einheitlicher zu gestalten, bietet WordPress 5.9 neue Funktionen und Verbesserungen für verschiedene Blöcke. Der Galerie-Block wurde komplett überarbeitet, während verschiedene Änderungen an den Blöcken „Featured Image“ und „Site Icon“ den Nutzerinnen und Nutzern eine genauere Kontrolle über die jeweiligen Bilder ermöglichen.
Ein überarbeiteter Galerie-Block
In WordPress 5.8 war die Möglichkeit, das Aussehen von Bildern in Galerien anzupassen, etwas eingeschränkt. Es gab keine Möglichkeit, den Bildstil zu ändern oder einen Duotone-Filter anzuwenden.
Außerdem fehlten wichtige Funktionen für Galeriebilder, z. B. das Hinzufügen von benutzerdefinierten Links zu einzelnen Bildern in einer Galerie.
Um den Grund für diese Asymmetrie zwischen Bildern in den beiden unterschiedlichen Kontexten eines einzelnen Bildes und eines Bildes in einer Galerie besser zu verstehen, werfen wir einen Blick auf den Galerie-Block in der Codeansicht von WordPress 5.8:
Beachte, dass die Bilddetails nur im Begrenzer des Galerie-Blocks gespeichert werden (siehe auch Was ist ein Gutenberg-Block?).
Dadurch verhielten sich einzelne Bilder anders als Bilder in Galerien.
Damit sich Bilder in den beiden unterschiedlichen Kontexten einheitlich verhalten, führt WordPress 5.9 einen komplett überarbeiteten Galerie-Block ein, der sich jetzt wie ein Container für eine Sammlung von Bildelementen verhält, statt wie eine ungeordnete Liste von Bildern.
In WordPress 5.9 werden Galeriebilder mithilfe der zentralen innerBlocks APIs verschachtelt, und jedes Bild speichert seine eigene Reihe von Details, genau wie einzelne Bilder.
Das ist eine großartige Verbesserung, denn die Bilder des Galerie-Blocks unterstützen jetzt die gleichen Funktionen wie die Bilder-Blöcke, z. B. Bildgröße und Duotone-Filter, sowie die Standardfunktionen des Blocks, z. B. Drag-and-Drop, Kopieren, Duplizieren und Entfernen.
Mit dem neuen Galerie-Block kannst du Bilder individuell gestalten. Das bietet dir eine Vielzahl von Anpassungsmöglichkeiten.
Das Bild unten zeigt mehrere Bilder in einer Galerie, jedes mit unterschiedlich abgerundeten Ecken:
Du kannst auch verschiedene Duotone-Filter für verschiedene Bilder in derselben Galerie verwenden.
Und natürlich kannst du jedem Bild eine bestimmte CSS-Klasse zuweisen, die dir zusätzliche Möglichkeiten gibt, deine Galeriebilder individuell anzupassen.
Weitere Informationen zum neuen Galerie-Block findest du in den Entwicklungshinweisen zum Galerie-Block, in den kommenden Verbesserungen des Galerie-Blocks und in den Gutenberg 11.4 Release Notes.
Verbesserungen bei den Featured Images
Auch der Featured Image-Block wurde in mehreren Punkten verbessert.
Grundlegende Dimensionskontrollen
Der Block „Featured Image“ verfügt jetzt über ein neues Einstellungsfeld für die Abmessungen, in dem Höhe, Breite und Skalierung eingestellt werden können.
Die Bemaßungssteuerung gilt auch für Featured Images in Query Loop-Blöcken, wie in der folgenden Abbildung zu sehen ist:
Duotone-Filter für Featured Images
Wir haben bereits erwähnt, dass wir jetzt den Duotone-Filter auf Bilder anwenden können, die in den neuen, überarbeiteten Galerie-Block eingeschlossen sind.
Ab WordPress 5.9 sind Duotone-Filter jetzt auch in Featured Image-Blöcken in jedem Kontext verfügbar, von Beitragsvorlagen und Seitenvorlagen bis hin zu Query Loop-Blöcken.
Diese Funktion ermöglicht kreative und einheitliche Farbkombinationen auf der gesamten Website.
Bildbeschneidung im Seiten-Logo
Vor WordPress 5.9 (und Gutenberg 11.6) konnten Logobilder nur bearbeitet werden, bevor sie hochgeladen wurden. Mit WordPress 5.9 kannst du Bilder, die im Site-Logo-Block verwendet werden, direkt in der Symbolleiste des Blocks zuschneiden, zoomen und rotieren.
Neue Design-Tools, Blöcke und UI-Verbesserungen
Mit WordPress 5.9 werden elf Gutenberg-Versionen in den Core integriert, die so viele Funktionen, Verbesserungen und Fehlerbehebungen mit sich bringen, dass es unmöglich wäre, sie alle in einem einzigen Artikel zu behandeln.
Deshalb haben wir einige der Funktionen ausgewählt, die wir für besonders erwähnenswert halten. Einen tieferen Überblick über diese Funktionen und Verbesserungen findest du in den Beiträgen zu Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 und 11.9.
Daher werden in diesem Abschnitt die folgenden Änderungen behandelt:
Border unterstützt die UI
Ab WordPress 5.9, wenn in der theme.json die Einstellungen von border deklariert sind und ein Block die Unterstützung von Rahmen über die Block Supports API deklariert, bietet ein neues Einstellungsfeld Steuerelemente für Rahmenradius, Breite, Stil, Farbe und Einheiten (siehe auch Gutenberg 11.1).
Der Kernblock Gruppe ist ein gutes Beispiel für diese nützliche UI-Erweiterung. Die Datei block.json des Gruppenblocks enthält jetzt die folgenden supports Deklarationen:
{
...
"supports": {
"align": [ "wide", "full" ],
"anchor": true,
"html": false,
"color": {
"gradients": true,
"link": true
},
"spacing": {
"padding": true,
"__experimentalDefaultControls": {
"padding": true
}
},
"__experimentalBorder": {
"color": true,
"radius": true,
"style": true,
"width": true,
"__experimentalDefaultControls": {
"color": true,
"radius": true,
"style": true,
"width": true
}
},
...
},
...
}Mit dieser Funktion können Nutzerinnen und Nutzer mit minimalem Aufwand beeindruckende grafische Effekte auf ihren Webseiten erstellen. Du kannst sie im neuen Twenty Twenty-Two-Theme in Aktion sehen.
Erstelle in einem neuen Beitrag oder einer Seite einen neuen Gruppenblock und wähle ihn aus. In der Seitenleiste mit den Blockeinstellungen siehst du das Feld “ Rahmen „. Ändere die Breite und den Stil des Rahmens nach Bedarf und genieße das Ergebnis.
Wenn du ein Theme-Entwickler bist und diese Funktion zu deinen Themes hinzufügen möchtest, öffne deine theme.json-Datei und deklariere die Unterstützung für Rahmen wie im folgenden Code gezeigt:
{
"version": 1,
"settings": {
"border": {
"customColor": true,
"customRadius": true,
"customStyle": true,
"customWidth": true
}
}
}Speichere die Datei und gehe zurück in dein WordPress-Dashboard. Erstelle in einem neuen Beitrag oder einer neuen Seite einen neuen Gruppenblock und wähle ihn aus. Jetzt solltest du in der Seitenleiste der Blockeinstellungen ein Rahmenfeld sehen (siehe auch diese experimentelle theme.json).
Verbesserungen in der Listenansicht
Mit WordPress 5.9 wurde die Listenansicht verbessert und bietet jetzt Drag and Drop, zusammenklappbare Abschnitte und HTML-Anker.
Drag and Drop in der Listenansicht
Wie im Pull Request #33320 erwähnt, wurde Drag-and-Drop in der Listenansicht implementiert, aber aufgrund von Leistungsproblemen deaktiviert.
Ab WordPress 5.9 wurde Drag-and-Drop in der Listenansicht wieder eingeführt. Du kannst Blöcke und Gruppen von Blöcken wieder überall in der Listenansicht ziehen und ablegen. Das ist eine großartige Verbesserung der Benutzerfreundlichkeit des Editors, denn so kannst du Blöcke und Blockgruppen schnell und einfach auf deinen Seiten verschieben. Das ist besonders hilfreich bei langen Artikeln und Seiten und bei der Verwaltung komplexer Strukturen mit verschachtelten Blöcken.
Zusammenklappbare Abschnitte in der Listenansicht
Eine weitere wichtige Verbesserung der Listenansicht ist die Möglichkeit, Abschnitte von verschachtelten Blöcken ein- und auszublenden. So kannst du leicht durch komplexe Blockstrukturen navigieren, indem du einzelne Gruppen von Blöcken aufklappst, während der Rest eingeklappt bleibt.
Du kannst die Abschnitte in der Listenansicht auch mit den Pfeiltasten nach links und rechts aus- und einklappen.
HTML-Anker in der Listenansicht
Eine weitere hilfreiche Neuerung ist die Möglichkeit, HTML-Anker zu deinen Blöcken in der Listenansicht hinzuzufügen und sie auf einen Blick zu sehen.
Blockabstandskontrolle
Erstmals in Gutenberg 11.4 eingeführt und jetzt mit WordPress 5.9 in den Kern integriert, kannst du mit dem neuen Steuerelement für den Blockabstand einen benutzerdefinierten Abstand zwischen Elementen innerhalb eines Blocks festlegen. Unten siehst du eine Vorschau mit verschiedenen Blockabständen in einem Spaltenblock mit dem Standardthema Twenty Twenty-Two:
Gap Spacing wird zunächst für bestimmte Blöcke verfügbar sein, z. B. für Schaltflächen, Bilder, Spalten, Titel und die Navigation, soll aber in Zukunft auf weitere Blöcke ausgeweitet werden.
Themes sollten Gap Spacing in der theme.json mit der neuen Eigenschaft appearanceTools aktivieren. Mehr über appearanceTools erfährst du in unserem ausführlichen Artikel über Twenty Twenty-Two. Siehe auch die Pull Requests #33991 und #34630.
Rich URL Preview für Link Control
Durch die Nutzung des neuen REST-Endpunkts url-details bietet das Link-Steuerelement jetzt eine ausführliche URL-Vorschau, die Details zu einer Link-Zielressource anzeigt.
In der ersten Implementierung war diese Funktion nur in der Richtext-Komponente des Post Editors verfügbar. Zum Zeitpunkt der Erstellung dieses Artikels ist sie auch im Seiteneditor verfügbar, aber nicht im Navigations- und Widget-Editor.
Seiten aus Link-Popup erstellen
WordPress 5.9 bietet außerdem eine verbesserte Inline-Link-Benutzeroberfläche mit einer brandneuen Schaltfläche, mit der du neue Seiten direkt aus dem Inline-Link-Popup erstellen kannst. Diese Funktion ist nur im Beitragseditor verfügbar.
Verbesserungen am Suchblock
Der Suchblock zeigt jetzt die Einstellungen für die Schaltflächen- und Rahmenfarbe an.
Du kannst jetzt auch die Hintergrund- und Textfarbe sowie die Farbe und den Radius des Rahmens anpassen.
Neue Steuerelemente für Blockabmessungen
Es gibt jetzt ein neues Einstellungsfeld für die Abmessungen, mit dem du den Platz, den ein Block auf der Seite einnimmt, festlegen kannst. Das Panel enthält Einstellungen für Höhe, Breite, Auffüllung, Rand und möglicherweise Ausrichtung, aber nicht alle Attribute werden für jeden Block verfügbar sein.
Blockentwickler finden die <DimensionControl /> Komponente auf GitHub dokumentiert. Beachte aber, dass sie noch als experimentelles Feature gekennzeichnet ist und zum Zeitpunkt der Erstellung dieses Artikels noch Änderungen unterworfen sein könnte.
Ein neuer Widget-Gruppen-Block auf dem Widgets-Bildschirm
Im blockbasierten Widgets-Editor ist jetzt ein neuer Widget-Gruppen-Block verfügbar. Der neue Block ermöglicht es dir, eine Gruppe von Blöcken in einem Widget mit einem Titel im Widgets-Editor der klassischen Themen und im Customizer hinzuzufügen.
Mehr über den Widgets-Editor erfährst du unter Blockbasierter Widgets-Editor und Block-Widgets im Customizer.
Flex-Layout und der neue Zeilenblock
Ursprünglich als experimentelle Funktion mit Gutenberg 11.2 eingeführt, wurde das Flex-Layout auf mehrere Blöcke ausgeweitet, darunter die Blöcke Soziale Links und Gruppen.
Einige Blöcke, wie z. B. der Block Soziale Links, bieten jetzt eine Reihe von Steuerelementen für die Symbolleiste und Einstellungen für die Seitenleiste, mit denen du das Flex-Layout anpassen kannst.
Die gleichen Funktionen stehen auch im Navigationsblock und im Zeilenblock zur Verfügung, einer neuen Variante des Gruppenblocks, die mit Gutenberg 11.5 eingeführt wurde.
Das folgende Bild zeigt den Zeilenblock mit Layout-Steuerelementen in der Einstellungs-Seitenleiste:
Unten siehst du denselben Zeilenblock im Frontend und im Inspektor-Tool von Chrome.
Verbesserungen bei den Blockmustern
Mit den Blockmustern, die erstmals mit WordPress 5.5 eingeführt wurden, können WordPress-Nutzer/innen mit wenigen Klicks komplexe, gebrauchsfertige Strukturen aus verschachtelten Blöcken in ihre Inhalte einbauen.
Mit WordPress 5.9 gehen wir einen Schritt weiter in Richtung Demokratisierung des Designs und Ermächtigung der Nutzer/innen, indem wir einige Verbesserungen am Blockmuster-System vornehmen.
Was ist also neu an den Blockmustern in WordPress 5.9?
Hervorgehobene Muster aus dem Musterverzeichnis
Der Block-Inserter zeigt jetzt dynamisch ausgewählte Blockmuster aus dem Musterverzeichnis an. So können Nutzer/innen schnell und einfach beliebte Muster für ihre Inhalte finden.
Da die Patterns direkt in das WordPress-Dashboard integriert werden, sollten WordPress-Entwickler dazu ermutigt werden, im Laufe der Zeit immer mehr Patterns zu erstellen und zu veröffentlichen, um den Nutzern immer fortschrittlichere Gestaltungsmöglichkeiten zu bieten.
Ein neuer Fullscreen Pattern Explorer
Da die Anzahl der im Musterverzeichnis verfügbaren Blockmuster weiter wächst und immer mehr Themes sie verwenden, führt WordPress 5.9 eine neue Navigationsoberfläche für Blockmuster ein: den Pattern Explorer.
Ein neuer Explore-Button öffnet jetzt ein bildschirmfüllendes Modal, in dem Nutzer/innen mit wenigen Klicks nach Blockmustern suchen und sie einfügen können. Das Ergebnis ist ein verbessertes Nutzererlebnis.
Weitere Hinweise und mehrere Beispiele für Blockmuster findest du in unserem tiefen Einblick in das WordPress-Theme Twenty Twenty-Two.
Wenn du interessiert bist und mehr erfahren möchtest, hör dir den Podcast von Josepha Haden Chomphosy Episode 16 und 21 an und schau dir das YouTube-Video Exploring WordPress 5.9 von Anne McCarthy an.
Das Twenty Twenty-Two-Theme und WordPress-Block-Themes
Mit WordPress 5.9 brauchst du das Gutenberg-Plugin nicht mehr zu installieren, um das Full Site Editing auf deiner WordPress-Webseite zu aktivieren. Du musst nur noch ein Block-Theme zulassen, um alle FSE-Funktionen zu nutzen.
Außerdem wird WordPress 5.9 mit einem brandneuen Standard-Theme ausgeliefert: Twenty Twenty-Two ist das erste Standard-Block-Theme überhaupt.
Twenty Twenty-Two ist ein äußerst flexibles und anpassbares Theme. Es ist der perfekte Sandkasten, um den neuen Template-Bearbeitungsfluss, die neuen Blöcke, die verbesserten Benutzeroberflächen und alle neuen Funktionen zur Webseiten-Bearbeitung auszuprobieren, die mit WordPress 5.9 eingeführt wurden.
Wie bereits erwähnt, musst du nur ein Block-Theme, wie Twenty Twenty-Two, installieren und aktivieren. Sobald das Theme aktiviert ist, erscheint ein neuer Menüpunkt Editor (beta) im Admin-Menü des WordPress-Dashboards.
Die Oberfläche des Seiten-Editors bietet jetzt einen überarbeiteten Site-Editing-Flow. Von der Bearbeitungsoberfläche aus kannst du die Homepage, die Vorlagen und die Vorlagenteile der Webseite visuell bearbeiten und auf die Schnittstelle für globale Stile zugreifen.
Wenn du ein Blockthema aktivierst, wirst du den Customizer nicht finden. Das liegt daran, dass der Customizer keine Blockthemen unterstützt, die nur den Seiteneditor verwenden. Das ist auch der Grund, warum du keine Vorschau von inaktiven Blockthemes sehen kannst.
Seit WordPress 5.9 ist der Zugriff auf den Customizer nicht mehr im Admin-Menü verfügbar, wenn ein Block-Theme aktiv ist (es sei denn, du verwendest ein Plugin, das davon Gebrauch macht).
Wenn du noch an traditionelle Themes gebunden bist und dir Sorgen um die Abwärtskompatibilität machst, kannst du beruhigt sein: Du kannst dein Theme weiter benutzen.
Derzeit kannst du aus vier verschiedenen Kategorien von Themes wählen:
- Block-Themen: Themen, die für FSE entwickelt wurden
- Universal-Themen: Themes, die sowohl mit dem Customizer als auch mit dem Site Editor funktionieren
- Hybrid-Themen: Klassische Themes, die FSE-Funktionen wie theme.json unterstützen
- Klassische Themes: Themes mit PHP-Vorlagen, functions.php, etc.
Aufgrund der Bedeutung, die Block-Themes für das WordPress-Ökosystem haben werden, haben wir einen ganzen Artikel über Twenty Twenty-Two und WordPress-Block-Themes geschrieben. Darin findest du einen detaillierten Überblick.
Leistungsverbesserungen
Wir bei Kinsta sind besessen von der Geschwindigkeit unserer Webseiten. Deshalb freuen wir uns über die Leistungsverbesserungen, die mit WordPress 5.9 kommen.
Diese Verbesserungen betreffen verschiedene Bereiche des CMS, vom Block-Editor über Block-Themes bis hin zu Lazy Loading und mehr. Lass uns eintauchen.
Verbesserungen am Block-Inserter
Seit WordPress 5.9 werden Blocktypen, -muster und -kategorien im Block-Inserter „lazy“ gerendert. Der Browser lädt Inhalte mit höherer Priorität zuerst, was die Bearbeitung erleichtert und die Leistung verbessert.
Weitere bemerkenswerte Leistungsverbesserungen im Zusammenhang mit dem Block-Editor betreffen wiederverwendbare Blöcke und die Listenansicht.
Weniger CSS wird geladen
Was das Frontend angeht, hat WordPress 5.9 die Menge an CSS, die von Blockthemen geladen wird, drastisch reduziert, was dazu führt, dass Seiten deutlich schneller geladen werden.
Die wichtigste Verbesserung in diesem Zusammenhang ist die Einführung des Mechanismus theme.json settings and styles, der verhindert, dass Themes riesige Stylesheets mit Hunderten von CSS-Deklarationen verwenden. Die Menge an CSS-Code, die ein Theme verwendet, wurde auf einige wenige CSS-Eigenschaften reduziert, die jeder Blocktyp wiederverwenden kann.
Lazy Loading Leistungsverbesserungen
Lazy Loading für Bilder wurde erstmals in WordPress 5.5 eingeführt. Ab WordPress 5.7 wurde die Lazy-Loading-Funktionalität auf Iframes ausgeweitet, sodass Webseiten-Betreiber schnellere Webseiten erstellen und ihre SEO verbessern können.
Nach einer Analyse des Largest Contentful Paint (LCP) stellte sich jedoch heraus, dass die Zuweisung des Attributs loading="lazy" an alle Bilder und iframes auf der Seite eine leichte Leistungsverschlechterung verursacht.
Das Attribut loading="lazy" einfach wegzulassen, war keine Lösung, weil dadurch die klaren Vorteile des Lazy Loading verloren gehen würden.
Die optimale Lösung wäre, das Attribut loading="lazy" nur bei Bildern wegzulassen, die oberhalb der Falz erscheinen. Da das loading="lazy" -Attribut jedoch serverseitig vergeben wird, kann WordPress nicht genau bestimmen, welche Bilder oberhalb der Falz angezeigt werden. Das hängt vor allem vom aktiven Theme ab.
Als Kompromisslösung wird das Attribut loading="lazy" ab WordPress 5.9 nicht mehr auf das erste Inhaltsbild oder den ersten Iframe angewendet. Eine Analyse von 50 beliebten WordPress-Themes ergab, dass diese Lösung zu erheblichen Leistungsverbesserungen führt und die Seiten bis zu 30 % schneller laden.
Felix Arntz erklärt, wie es funktioniert:
… um die Leistung sofort zu verbessern, ohne dass ein Entwickler das Verhalten anpassen muss, überspringt WordPress jetzt das erste „Inhaltsbild oder Iframe“ auf der Seite, das nicht geladen wird. Der Begriff „Inhaltsbild oder Iframe“ bezeichnet hier jedes Bild oder jeden Iframe, der im Inhalt eines Beitrags in der aktuellen Hauptabfrageschleife gefunden wird, sowie jedes Featured Image eines solchen Beitrags. Dies gilt sowohl für „singuläre“ als auch für „Archiv“-Inhalte: In einem „singulären“ Kontext wird das erste Bild oder der erste iframe des (einzigen) Beitrags nicht verzögert geladen, während in einem „Archiv“-Kontext das erste Bild oder der erste iframe des ersten Beitrags in der Abfrage nicht verzögert geladen wird.
Themeentwickler können jetzt den neuen Filter wp_omit_loading_attr_threshold verwenden, um die Anzahl der Bilder/iframes zu ändern, die beim Lazy Loading übersprungen werden sollen.
Mehrere Stylesheets pro Block
Block- und Themeentwickler können für jeden Block mehrere Stylesheets registrieren und bei Bedarf Styles aus anderen Blöcken laden. Dies ermöglicht das Laden von Stylesheets in Abhängigkeit vom Seiteninhalt und verhindert, dass Themes auf jeder Seite riesige Stylesheets laden müssen.
Laut Ari Stathopoulos:
Blöcke können jetzt mehrere Stylesheets registrieren und bei Bedarf Styles aus anderen Blöcken laden. Themes werden in der Lage sein, Stile auf Blockbasis hinzuzufügen, anstatt monolithische Stylesheets zu laden, die überall zwangsgeladen werden. Dies wirkt sich vor allem auf Block-Themes aus, bei denen das Laden von Stylesheets auf der Grundlage des Seiten- und Layoutinhalts optimiert wird, kann aber auch von klassischen Themes genutzt werden.
Zusätzliche Funktionen für Entwickler
Zusätzlich zu den vielen Funktionen und UI-Verbesserungen, die bisher besprochen wurden, führt WordPress 5.9 auch einige Funktionen für Entwickler/innen ein.
ansehen
Ein neues Attribut zum Sperren von Blöcken
Blockentwickler/innen können jetzt verhindern, dass Nutzer/innen einzelne Blöcke verschieben oder löschen, indem sie ein lock Attribut in den Blockeinstellungen hinzufügen:
{
...
"attributes": {
"lock": {
"type": "object",
"default": {
"move": true,
"remove": true
}
}
}
}Wenn diese Funktion aktiviert ist, können Nutzer/innen den Blockinhalt bearbeiten, aber den Block nicht auf der Seite verschieben oder aus dem Editor-Canvas entfernen. Die folgende Abbildung zeigt einen benutzerdefinierten Block mit einem Standardsatz von Symbolleistensteuerungen:
Wenn du das Attribut lock definierst, wie im obigen Code zu sehen, werden die Blockmover und die Steuerelemente Move to und Remove aus der Blocksymbolleiste ausgeblendet. Das Bild unten zeigt das Endergebnis auf dem Bildschirm:
Du kannst auch einen bestimmten Block in einem Blockmuster sperren. Ein Beispiel dafür findest du unter Sperren von Blöcken in WordPress 5.9.
Neue API für den Zugriff auf globale Einstellungen und Stile
WordPress 5.9 führt eine neue öffentliche PHP-API ein, um Daten aus theme.json zu lesen.
Lesen von Einstellungen und Styles aus theme.json
Es gibt zwei neue Funktionen zum Lesen von Daten aus den Abschnitten settings und styles, die in der theme.json deklariert sind:
wp_get_global_settings( $path = array() , $context = array() );
wp_get_global_styles( $path = array(), $context = array() );$pathist ein Array, das den Pfad zu der angegebenen Einstellung auflistet$contextist ein Array, das den Kontext für diese Daten angibt. Entwickler können aus einem bestimmten Abschnitt der Blockeinstellungen lesen – zum Beispiel ausarray( 'block_name' => 'core/paragraph' ). Wenn der Schlüsseloryginaufbasegesetzt wird, können die vom Benutzer gespeicherten benutzerdefinierten Daten ignoriert werden.
Der folgende Beispielcode würde den Wert der Einstellung contentSize zurückgeben. In Twenty Twenty-Two wäre es 650px:
wp_get_global_settings( array( 'layout', 'contentSize' ) );Wenn du einen Kontext festlegst, kannst du Stile für bestimmte Blöcke abrufen. Der folgende Code zeigt, wie du den Radius des Rahmens für den Block core/button abrufen kannst:
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button' )
);
}Die obige Funktion gibt den erforderlichen Eigenschaftswert zurück und berücksichtigt dabei die Standardeinstellungen, die Themeneinstellungen und die Nutzerdaten. Der benutzerdefinierte Wert wird bereitgestellt, wenn der Benutzer den Rahmenradius der Schaltfläche in der Schnittstelle für globale Stile konfiguriert.
Um die Benutzerdaten zu ignorieren, würdest du den folgenden Code verwenden:
function get_global_styles() {
return
wp_get_global_styles(
array( 'border', 'radius' ),
array( 'block_name' => 'core/button', 'origin' => 'base' )
);
}Abrufen des generierten Stylesheets
WordPress 5.9 führt auch eine neue Funktion ein, mit der du das Stylesheet abrufen kannst, das sich aus den Standard-, Theme- und benutzerdefinierten Styles ergibt:
wp_get_global_stylesheet( $types = array() );$types ist eine Liste der zu erzeugenden Styles.
Mehr über die neue API erfährst du unter Neue API für den Zugriff auf globale Einstellungen und Styles.
Weitere Funktionen für Entwickler
Weitere WordPress 5.9-Änderungen für Entwickler, die du kennen solltest, sind
- Blockthemen, eine neue Art, Themes in WordPress 5.9 zu erstellen
- Updates für Einstellungen, Styles und theme.json
- Themenspezifische Änderungen und Filter in WordPress 5.9
- Neue Fähigkeitsabfragen in WordPress 5.9
- Verschiedene Core-Änderungen in WordPress 5.9
- Verschiedene Änderungen am Block-Editor in WordPress 5.9
- Mehr Kontrolle über innere Blockbereiche (als Blockentwickler)
Zusammenfassung
Wir schließen diesen Artikel mit einem kurzen Hinweis auf den Marktanteil von WordPress ab. WordPress betreibt derzeit über 65% aller Webseiten, deren Content Management System bekannt ist, und liegt über 43% aller Webseiten.
Diese Zahlen sind beeindruckend, vor allem wenn man sie mit den nächsten Konkurrenten vergleicht, die weniger als 5 % Marktanteil haben, wie z. B. Shopify.
Und das bedeutet auch, dass du die Entwicklung des WP CMS nicht übersehen kannst. Jede neue Version von WordPress bringt neue Funktionen, Erweiterungen der Benutzeroberfläche und Leistungsverbesserungen mit sich, und WordPress 5.9 ist da keine Ausnahme. Alles, was du brauchst, um die neuen Funktionen zu testen, ist ein Block-Theme, wie das neue Standard-Theme Twenty Twenty-Two, und schon bist du startklar.
Jetzt bist du dran! Bist du bereit, auf Block-Themes und FSE umzusteigen? Und was sind deine Lieblingsänderungen in WordPress 5.9?
Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.
Schreibe einen Kommentar