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.

Twenty Twenty-Two Vorschau, die den Text "Kategorie: Vögel" und Bilder von verschiedenen Vogelarten.
Eine Vorschau von Twenty Twenty-Two, dem neuen WordPress-Standard-Theme. (Bildquelle: WordPress.org)

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.

Die Gutenberg-Roadmap mit vier Blöcken für die vier wichtigsten Verbesserungsziele: einfachere Bearbeitung, Anpassung, Zusammenarbeit und Mehrsprachigkeit.
Die Gutenberg Roadmap. (Bildquelle: Matt Mullenweg: 2021 State of the Word)

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.

Die Seitenleiste "Globale Stile" auf einer WordPress-Seite, die das Twenty Twenty-Two-Theme verwendet, zeigt Typografieoptionen wie "Farben" und "Layout".
Die Global Styles Seitenleiste mit dem Blockbase-Theme von Automattic.

Schauen wir uns die neue Benutzeroberfläche genauer an.

Sie ist da! 🎉 Alles, was du über WordPress 5.9 wissen musst, in einem Mega-Post 😄Click to Tweet

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:

Globale Stilvorschauen für drei Stile in verschiedenen Farben (grün, gelb und marineblau), die nebeneinander angezeigt werden.
Globale Stile Vorschauen 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:

Typografie-Einstellungen in TT1 Blocks Global Styles, die drei nebeneinander liegende Panels mit verschiedenen Typografie-Optionen wie Schriftfamilie, Textgröße und Farben zeigen.
Typografie-Einstellungen in TT1 Blocks Global Styles.

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:

Sechs verschiedene Voransichten desselben Textes ("Aa") mit verschiedenen Schriftfamilien.
In Twenty Twenty-One Blocks verfügbare Schriftfamilien.

Farben

Im Bereich Farben kannst du Farbpaletten ansehen und bearbeiten und die Farbe verschiedener Seitenelemente anpassen.

Das Farben-Panel in TT1 Blocks zeigt eine Palette mit vier verschiedenen Farben (rot, marineblau, silber und grün).
Farbpalette in Twenty Twenty-One Blocks

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).

TT1 Blocks Farbeinstellungen, die verschiedene Farbkreise für drei verschiedene Palettenoptionen zeigen: Thema, Standard und Benutzerdefiniert.
Farbeinstellungen in Twenty Twenty-One Blocks

In diesem Bereich kannst du die Farbe für das aktuelle Element einstellen und ändern.

Ein Farbwähler, der eine tiefrote Farbe im Fenster "Globale Stile" auswählt.
Link-Farbe in Globalen Stilen anpassen

Layout

Die letzte Gruppe von Werkzeugen ist für Layoutanpassungen gedacht. Im globalen Kontext ist dies auf den Webseiten-Container beschränkt.

Die globale Auffüllungseinstellung im Fenster "Globale Stile", die eine Änderung der vorherigen Auffüllungspixelgröße anzeigt.
Layout-Einstellungen in Twenty Twenty-One Blocks.

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:

Die Typografie-Einstellungen für den Beitragstitel in WordPress 5.9 zeigen eine Vielzahl von Optionen, darunter (neben vielen anderen) der Beitragstitel (der hervorgehoben ist), der Autor des Beitrags, die Tabelle, der Seitentitel und die Navigation.
Anpassen der Typografie-Einstellungen für den Beitragstitel

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:

Ein Mockup für ein mögliches zukünftiges Panel zum Ändern der Farben für den Linkstatus, einschließlich der Optionen für "Ruhend", "Hover", "Fokussiert" und "Ausgewählt".
In Zukunft kannst du die Farbe des Linkstatus steuern. (Bildquelle GitHub)

Weitere Verbesserungen könnten darin bestehen, dass Themes alternative Farbpaletten und mehrere globale Stilvarianten anbieten können.

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.

Der Platzhalter des Navigationsblocks in WordPress 5.9, der Optionen für das Navigationspanel zeigt, darunter "Menü auswählen", "Alle Seiten hinzufügen" und "Leer beginnen".
Der Navigationsblock-Platzhalter

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.

Auswählen eines bestehenden Navigationsmenüs.
Auswahl eines bestehenden Navigationsmenüs.

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.

Auswählen eines klassischen Menüs.
Auswählen eines klassischen Menüs.

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.

Hinzufügen von Ankerlinks zu einem Navigationsmenü.
Hinzufügen von Ankerlinks zu einem Navigationsmenü.

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.

Der Navigationsblock-Appender, der die Navigationslinks anzeigt.
Der Navigationsblock Appender, der die Navigationslinks zeigt.

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.

Umwandlung eines Navigationsmenüs in einzelne Seitenlinks.
Umwandlung eines Navigationsmenüs in einzelne Seitenlinks.

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.

Umwandlung von Navigationslinks in Blöcke.
Umwandlung von Navigationslinks in Blöcke.

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.

Einstellungen für das Layout des Navigationsblocks.
Layout-Einstellungen für den Navigationsblock

Der Navigationsblock verfügt außerdem über ein verbessertes Einstellungsfeld für die Anzeige mit einer Option für ein immer aktives Burger-Menü.

Navigationsblock Anzeige des Einstellungsfeldes für den Navigationsblock.
Ein verbessertes Anzeige-Einstellungsfeld für den Navigationsblock.

Du kannst auch die Text- und Hintergrundfarben für deine Menüs und Untermenüs anpassen.

Farbeinstellungen für den Navigationsblock.
Farbeinstellungen für den Navigationsblock.

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.

Abstand zwischen den Navigationsblöcken.
Blockabstandskontrolle im Navigationsblock.

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.

Einstellungen für die Typografie des Navigationsblocks.
Typografie-Einstellungen des Navigationsblocks.

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:

Beispiel für einen Navigationsblock.
Navigationsblock Beispiel

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:

Wähle das Menü in Twenty Twenty-One Blocks.
Menü auswählen in 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:

Gallery block in code view in WordPress 5.8.
Galerie-Block in der Code-Ansicht in WordPress 5.8.

Beachte, dass die Bilddetails nur im Begrenzer des Galerie-Blocks gespeichert werden (siehe auch Was ist ein Gutenberg-Block?).

Galerie-Block in WordPress 5.8.
Galerie-Block in der Codeansicht in WordPress 5.8.

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.

Gallery block in code view in WordPress 5.9.
Gallery block in code view in WordPress 5.9

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.

Galerie-Block in WordPress 5.9.
Inspecting Gallery block in WordPress 5.9

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:

Der neue Galerie-Block.
Der neue Galerie-Block ist ein Wrapper für einzelne Bildblöcke.

Du kannst auch verschiedene Duotone-Filter für verschiedene Bilder in derselben Galerie verwenden.

Duotone Filter, die auf verschiedene Bilder in einem Galerieblock angewendet werden.
Verschiedene Duotone-Filter, die auf verschiedene Bilder in einem Galerie-Block angewendet werden

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.

Das Feld für die Abmessungen des Featured Image.
Featured Image Dimensions panel.

Die Bemaßungssteuerung gilt auch für Featured Images in Query Loop-Blöcken, wie in der folgenden Abbildung zu sehen ist:

Steuerelemente für die Abmessungen des Featured Image in einem Query Loop-Block.
Featured Image Dimensions in einem Query Loop Block.

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.

Duotone-Filter für vorgestellte Bilder in einem Query Loop-Block.
Duotone-Filter auf Featured Images in einem Query Loop-Block.

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.

Webseiten-Logo-Bild bearbeiten.
Bearbeiten des Seiten-Logo-Bildes.

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.

Ein Gruppenblock mit einer angepassten Rahmenkonfiguration mit Twenty Twenty-Two.
Ein Gruppenblock mit einer angepassten Rahmenkonfiguration mit Twenty Twenty-Two.

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.

Drag and Drop in der Listenansicht.
Drag and Drop in der Listenansicht.

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.

Eine erweiterte Gruppe von Blöcken.
Eine erweiterte Gruppe von Blöcken.

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.

HTML-Anker in der Listenansicht.
HTML-Anker in der Listenansicht.

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:

Steuerung von Columns Block Spacing in WordPress 5.9.
Steuerung von Columns Block Spacing in WordPress 5.9.

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.

Rich-URL-Vorschau im Beitragseditor.
Rich-URL-Vorschau im Beitragseditor.

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.

WordPress 5.9 bietet eine neue Inline-Link-Benutzeroberfläche
WordPress 5.9 bietet eine neue Inline-Link-Benutzeroberfläche

Verbesserungen am Suchblock

Der Suchblock zeigt jetzt die Einstellungen für die Schaltflächen- und Rahmenfarbe an.

Einstellungen für die Suchblockfarbe.
Einstellungen für die Suchblockfarbe.

Du kannst jetzt auch die Hintergrund- und Textfarbe sowie die Farbe und den Radius des Rahmens anpassen.

Suche Einstellungen für die Farbe und den Radius des Blockrandes.
Suche Einstellungen für die Farbe und den Radius des Blockrandes.

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.

Gruppenblockabmessungen.
Auffüllungssteuerung für einen Gruppenblock in WordPress 5.9.

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.

Widget-Gruppen-Block im Twenty Twenty-One-Theme.
Widget-Gruppen-Block im Twenty Twenty-One-Theme.

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.

Musst du deine professionelle WordPress Webseite schnell, zuverlässig und sicher hosten? Kinsta bietet dir all das und einen 24/7-Support von WordPress-Experten. Schau dir unsere Angebote an

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.

Layout-Steuerelemente in der Symbolleiste des Social Links-Blocks.
Layout-Steuerelemente in der Symbolleiste des Social Links-Blocks.

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:

Der neue Row-Block mit Layout-Einstellungen.
Der neue Row-Block mit Layout-Einstellungen.

Unten siehst du denselben Zeilenblock im Frontend und im Inspektor-Tool von Chrome.

Ein Zeilenblock im Inspektor-Tool von Chrome.
Ein Zeilenblock 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.

Buttons blockieren Muster in WordPress 5.9.
Buttons blockieren Muster in WordPress 5.9.

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.

Vollbild-Muster-Modal in WordPress 5.9.
Vollbild-Muster-Modal in WordPress 5.9.

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.

Gekennzeichnete Blockmuster im Block-Inserter.
Gekennzeichnete Blockmuster im Block-Inserter.

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.

Twenty Twenty-Two Vorschau.
Twenty Twenty-Two ist das neue WordPress Standard-Theme. (Bildquelle: WordPress.org)

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.

Das neue Appearance Menü in WordPress 5.9.
Das neue Appearance Menü in WordPress 5.9.

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.

Das Navigationsmenü des Editors.
Das Navigationsmenü des Editors.

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.

Die Live-Vorschau ist bei Blockthemen nicht verfügbar.
Die Live-Vorschau ist bei Blockthemen nicht verfügbar.

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:

Ein benutzerdefinierter Block mit einer normalen Symbolleiste
Ein benutzerdefinierter Block mit einer normalen Symbolleiste

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:

Ein benutzerdefinierter Block ohne Steuerelemente zum Verschieben und Entfernen
Ein benutzerdefinierter Block ohne Steuerelemente zum Verschieben und Entfernen

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() );
  • $path ist ein Array, das den Pfad zu der angegebenen Einstellung auflistet
  • $context ist ein Array, das den Kontext für diese Daten angibt. Entwickler können aus einem bestimmten Abschnitt der Blockeinstellungen lesen – zum Beispiel aus array( 'block_name' => 'core/paragraph' ). Wenn der Schlüssel orygin auf base gesetzt 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

Dein ultimativer Leitfaden zu WordPress 5.9: von UI-Verbesserungen bis zu globalen Stilen (und mehr!) 🎉Click to Tweet

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?


Spare Zeit, Kosten und maximiere die Leistung deiner Seite mit:

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 32 Rechenzentren weltweit.
  • Optimierung mit unserem integrierten Application Performance Monitoring.

All das und noch viel mehr, in einem Plan ohne langfristige Verträge, betreute Migrationen und eine 30-Tage-Geld-zurück-Garantie. Schau Dir hier unsere Pakete an oder sprich mit dem Vertrieb, um den richtigen Tarif für dich zu finden.