WordPress 6.0 Arturo ist da und wie immer haben wir einen Blick hinter die Kulissen geworfen, um unseren Lesern eine Vorschau auf die Neuerungen der neuesten WordPress-Hauptversion zu geben.

Um es gleich vorweg zu nehmen: Wenn WordPress 5.9 uns in das Herz der Phase 2 von Gutenberg geführt hat, zielt WordPress 6.0 darauf ab, die bereits verfügbaren Anpassungswerkzeuge zu konsolidieren.

Aber die neue Version ist nicht nur das. Wie Matias Ventura in der vorläufigen Roadmap für 6.0 dargelegt hat, ist die Einführung des Webseiten-Editors ein großer Meilenstein, aber auch nur ein erster Schritt auf dem Weg.

WordPress 6.0 Arturo ist da
WordPress 6.0 Arturo ist da

WordPress 6.0 bringt erhebliche Verbesserungen in verschiedenen Bereichen des CMS, von der Benutzerfreundlichkeit bis zur Leistung, einschließlich der folgenden:

  • Verbesserte Informationsarchitektur und Vorlagendurchsuchung
  • Verbesserte Vorlagenerstellung
  • Neue Hooks
  • Webfonts API
  • Ein neuer Browse-Modus für den Webseiten-Editor
  • Alternative globale Stile
  • Ein verbesserter Navigationsblock
  • Neue Design-Tools
  • Verbesserte Leistung
  • Und vieles mehr…

Aber das ist noch nicht alles. WordPress 6.0 bringt eine beeindruckende Anzahl von Änderungen mit sich: 251 Trac-Tickets, darunter 97 Funktionen und Verbesserungen und 131 Fehlerbehebungen.

Ja, es gibt eine Menge zu besprechen. Also lass uns nicht länger zögern und herausfinden, was es in WordPress 6.0 Neues gibt.


WordPress 6.0 ist da! 🥳 Es bringt eine verbesserte Vorlagenerstellung, alternative Global Styles, neue Blöcke und vieles mehr... 🎁 Schau dir hier an, was in der neuesten WordPress-Hauptversion neu ist👇Click to Tweet

Webfonts API

Eine neue Webfonts-API bietet jetzt eine standardisierte Möglichkeit, Webfonts in WordPress zu laden, um die Leistung und den Datenschutz der Nutzer/innen zu gewährleisten.

Seit WordPress 6.0 kannst du neue Webfonts nur noch über deine theme.json registrieren.

Die Verwendung der theme.json ist ganz einfach. Alles, was du tun musst, ist, eine neue Schriftfamilie zum Abschnitt typography hinzuzufügen. Der folgende Code zeigt ein Beispiel für die Registrierung einer Webfont:

{
	"settings": {
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
					"name": "System Font",
					"slug": "system-font"
				},
				{
					"fontFamily": "\"Source Serif Pro\", serif",
					"name": "Source Serif Pro",
					"slug": "source-serif-pro"
				},
				{
					"fontFamily": "\"Inter\", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	}
}

Der obige Code fügt die Schriftfamilie Inter zu den standardmäßig verfügbaren fontFamilies in Twenty Twenty-Two hinzu. Wenn du es selbst ausprobieren willst, lade die Inter Webfont von Google Fonts in den Ordner ./assets/fonts herunter und füge den obigen Code in den Abschnitt settings.typography der theme.json von Twenty Twenty-Two ein. Sobald du fertig bist, speicherst du die Datei und kehrst zur Webseiten-Bearbeitungsoberfläche zurück.

Das folgende Bild zeigt das Ergebnis im Editor.

Ein Screenshot zeigt eine neue Schriftfamilie in Twenty Twenty-Two.
Eine neue Schriftfamilie wurde in Twenty Twenty-Two registriert

Die Webfonts-API registriert nur Schriftarten, die für die Darstellung von Blöcken auf der aktuellen Seite benötigt werden. Das ist besonders nützlich bei Webfonts, die in Stilvarianten definiert sind. Außerdem optimiert die API die Anzahl der HTTP-Anfragen, indem sie die Schriften nach Schriftfamilien registriert und in die Warteschlange stellt.

Mehr über die neue API erfährst du im Webfonts API Pull Request, in Status of Webfonts API for WordPress 6.0 Inclusion und in Global Styles variations in WordPress 6.0.

Globale Stile umschalten

Globale Stilvariationen sind eine der am meisten erwarteten Funktionen, die mit WordPress 6.0 kommen. Theme-Autoren können jetzt mehrere Sets von Global Styles mit ihren Themes bündeln, so dass Nutzer/innen mit einem einzigen Klick zwischen den Stilvarianten wechseln können.

Das ist fast so, als hätte man fertige Child-Themes mit vordefinierten Styles für jedes Theme.

Um eine Stilvariation zu deinem Block-Theme hinzuzufügen, fügst du eine alternative JSON-Datei in einen Styles-Ordner im Stammverzeichnis deines Themes ein.

Themes, die globale Stilvariationen unterstützen, zeigen ein neues Element Stile durchsuchen in der Seitenleiste Globale Stile an. Dieser führt zu einem Panel, in dem Themenutzer eine Liste der verfügbaren Stile finden.

Ein Screenshot zeigt das Element Stile durchsuchen in WordPress 6.0.
Stile durchsuchen in WordPress 6.0

Wähle einen globalen Stil aus der Liste und das Styling wird automatisch auf deine gesamte Webseite angewendet.

Ein Screenshot zeigt das Panel Stile durchsuchen in WordPress 6.0.
Auswahl eines Stils mit einem einzigen Klick in WordPress 6.0

Die neue Funktion ermöglicht es Theme-Entwicklern, eine unbegrenzte Anzahl von Style-Variationen zu erstellen und ist perfekt auf die neue Webfonts API abgestimmt.

Das folgende Bild zeigt einen benutzerdefinierten Stil aus dem vorherigen Beispiel, bei dem eine andere Schriftart auf die Überschriften angewendet wurde.

Ein Bild, das eine Stilvariation mit einer benutzerdefinierten Schriftart in WordPress 6.0 zeigt.
Eine Stilvariation mit einer benutzerdefinierten Schriftart in WordPress 6.0

Wenn du es selbst ausprobieren willst, füge einen Styles-Ordner zum Stammverzeichnis deines Block-Themes hinzu, erstelle eine neue JSON-Datei mit einem aussagekräftigen Namen, öffne sie in deinem Lieblingscode-Editor und füge den folgenden Code ein:

{
	"version": 2,
	"settings": {
		"color": {
			"duotone": [
				{
					"colors": [ "#143F6B", "#EFEFEF" ],
					"slug": "foreground-and-background",
					"name": "Foreground and background"
				},
				{
					"colors": [ "#143F6B", "#FEB139" ],
					"slug": "foreground-and-secondary",
					"name": "Foreground and secondary"
				},
				{
					"colors": [ "#143F6B", "#F6F54D" ],
					"slug": "foreground-and-tertiary",
					"name": "Foreground and tertiary"
				},
				{
					"colors": [ "#F55353", "#EFEFEF" ],
					"slug": "primary-and-background",
					"name": "Primary and background"
				},
				{
					"colors": [ "#F55353", "#FEB139" ],
					"slug": "primary-and-secondary",
					"name": "Primary and secondary"
				},
				{
					"colors": [ "#F55353", "#F6F54D" ],
					"slug": "primary-and-tertiary",
					"name": "Primary and tertiary"
				}
			],
			"palette": [
				{
					"slug": "foreground",
					"color": "#143F6B",
					"name": "Foreground"
				},
				{
					"slug": "background",
					"color": "#EFEFEF",
					"name": "Background"
				},
				{
					"slug": "primary",
					"color": "#F55353",
					"name": "Primary"
				},
				{
					"slug": "secondary",
					"color": "#FEB139",
					"name": "Secondary"
				},
				{
					"slug": "tertiary",
					"color": "#F6F54D",
					"name": "Tertiary"
				}
			]
		},
		"typography": {
			"fontFamilies": [
				{
					"fontFamily": ""Inter", sans-serif",
					"name": "Inter",
					"slug": "inter",
					"fontFace": [
						{
							"fontFamily": "Inter",
							"fontWeight": "200 900",
							"fontStyle": "normal",
							"fontStretch": "normal",
							"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
						}
					]
				}
			]
		}
	},
	"styles": {
		"blocks": {
			"core/post-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"core/query-title": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)"
				}
			}
		},
		"elements": {
			"h1": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h2": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h3": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h4": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h5": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			},
			"h6": {
				"typography": {
					"fontFamily": "var(--wp--preset--font-family--inter)",
					"fontWeight": "700"
				}
			}
		},
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--inter)"
		}
	}
}

Den vollständigen Code, der im obigen Beispiel verwendet wird, findest du auf GitHub und gist.

Ausführliche Übersichten über Global Styles und Theme.json finden Entwickler in den Dokumentationsartikeln Global Settings & Styles und Theme.json.

Du kannst dir auch die neueste Version von Twenty Twenty-Two ansehen, die jetzt drei neue Stilvarianten enthält.

Ein Screenshot zeigt das Panel Stile durchsuchen in Twenty Twenty-Two.
Styles in Twenty Twenty-Two durchsuchen

Blockmuster überall

Eines ist sicher, Blockmuster spielen in der aktuellen Phase der WordPress-Entwicklung eine zentrale Rolle. Erstmals mit WordPress 5.5 eingeführt, wurden die Blockmuster im Laufe der Zeit regelmäßig verbessert.

Ab WordPress 5.9 haben die Muster aus dem Patterns-Verzeichnis ihren Weg in unsere WordPress-Webseiten gefunden, indem sie dynamisch aus dem Patterns-Verzeichnis abgerufen und in den Block-Inserter geladen werden.

Und jetzt kann jeder ein Musterentwickler werden, dank eines brandneuen Online-Tools. Mit dem Pattern Creator kannst du deine besten Blockmuster erstellen, bearbeiten und an das Pattern Directory senden. Alles, was du für den Anfang brauchst, ist ein WordPress.org-Konto.

Ein Screenshot des Pattern Creator Tools.
Auf der Suche nach Bildern im Pattern Creator

Und mit WordPress 6.0 gibt es weitere Verbesserungen bei den Blockmustern.

Erstens sind Blockmuster in der Vorlagenbearbeitung leichter zu finden. Der Quick-Inserter zeigt jetzt nur noch Blockmuster an, wenn du ihn auf der obersten Ebene einer Vorlage aufrufst, d.h. wenn der Block, den du zu deiner Vorlage hinzufügen willst, der direkte Nachkomme des Dokuments ist.

Das ist der Fall, wenn die folgenden Bedingungen erfüllt sind:

  • Du bearbeitest gerade eine Blockvorlage
  • Der Quickinserter befindet sich auf der Stammebene
  • Du fügst einen Block zwischen anderen Blöcken ein (d.h. weder der erste noch der letzte Block auf der Seite)
Ein Bild mit Blockmustern im Quick Inserter.
Der Quick Inserter zeigt Blockmuster nur im Vorlageneditor an

Eine weitere nützliche Funktion ermöglicht es Theme-Entwicklern jetzt, empfohlene Muster in die theme.json aufzunehmen. Um das auszuprobieren, durchsuchst du das Patterns-Verzeichnis, suchst die Patterns, die du den Nutzern deines Themes empfehlen möchtest, nimmst den Pattern-Slug aus der URL und fügst ihn wie folgt zu deiner theme.json hinzu:

"patterns": [
	"image-with-angled-overlay-shape-call-to-action-button-and-description",
	"hero-section-with-overlap-image"
],

Die Nutzer/innen finden deine empfohlenen Muster im Block-Inserter.

Ein Screenshot zeigt die empfohlenen Muster im Quick Inserter.
Empfohlene Muster im Quick Inserter

Eine leistungsstarke Funktion für Muster, die mit WordPress 6.0 eingeführt wird, ist die implizite Musterregistrierung. Themes können nun implizit Muster registrieren, indem sie diese als PHP-Dateien in einem neuen Verzeichnis /patterns im Stammverzeichnis des Themes deklarieren.

Der Prozess ist ziemlich einfach:

  1. erstelle einen neuen Musterordner im Stammverzeichnis deines Themes,
  2. erstelle eine Blockgruppe im Blockeditor,
  3. kopiere dein HTML und füge es in eine neue Textdatei ein,
  4. stelle die folgende Überschrift voran,
  5. und speichere die Datei als PHP in deinem Patterns-Ordner.
<?php
/**
 * Title: My pattern
 * Slug: my-theme/my-pattern
 * Categories: text
 */
?>

Und das war’s. Du hast jetzt ein neues Blockmuster, das im Block Inserter angezeigt wird.

Ein benutzerdefiniertes Muster im Quick Block Inserter.
Ein benutzerdefiniertes Muster im schnellen Block Inserter

Muster für die Seitenerstellung sind eine weitere Funktion, die mit WordPress 6.0 eingeführt wurde und sich auf Blockmuster bezieht. Wenn du eine neue Seite erstellst, wird ein Modal mit einer Reihe von Blockmustern angezeigt, die du für die Erstellung deiner Seite auswählen kannst.

Das Modal wird nur angezeigt, wenn mindestens ein Muster die Unterstützung für die core/post-content-Blocktypen deklariert.

WordPress 6.0 enthält standardmäßig keines dieser Muster. Das Modal wird also erst angezeigt, wenn du einem vorhandenen Muster Unterstützung hinzufügst. Das Hinzufügen des Modals zum Seitenerstellungsbildschirm ist jedoch ziemlich einfach.

Wenn du ein Blockmuster für dein Theme registriert hast, wie im obigen Beispiel gezeigt, kannst du die Unterstützung für das Modal über die Eigenschaft BlockTypes hinzufügen, wie im Beispielmuster unten gezeigt:

<?php
/**
 * Title: Pattern with columns
 * Slug: twentytwentytwo/pattern-with-columns
 * Block Types: core/post-content
 * Categories: text
 */
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Speichere diesen Code in einer PHP-Datei im Verzeichnis /patterns deines Themes. Erstelle dann in deinem WordPress Dashboard eine neue Seite. Du solltest ein neues Modal sehen, wie in der folgenden Abbildung dargestellt:

Muster für die Seitenerstellung
Muster für die Seitenerstellung

Einen genaueren Blick auf die Seitenerstellungsmuster findest du unter Seitenerstellungsmuster in WordPress 6.0.

Einen umfassenderen Überblick über die Entwicklung von Blockmustern findest du unter Neue Funktionen für die Arbeit mit Mustern und Themen in WordPress 6.0 und im Tracking Issue auf GitHub.

Site Editing Funktionen

Die Entwicklung des Site Editing ist mit WordPress 5.9 noch nicht abgeschlossen. WordPress 6.0 geht noch einen Schritt weiter, indem es die Funktionen für die visuelle Themeerstellung verbessert und neue Vorlagenoptionen für Blockthemen bereitstellt. Und weitere Funktionen sind auf dem Weg.

Visuelle Themeerstellung

WordPress 6.0 führt ein verbessertes Export-Tool für Block-Themes ein, mit dem du das aktuelle Theme mit all deinen Änderungen und Anpassungen herunterladen kannst.

Falls du das Export-Tool für Block-Themes noch nicht benutzt hast: Es ist ein leistungsfähiges Tool zur Webseiten-Bearbeitung, mit dem du deine Styles und Vorlagen als ganzes Theme exportieren kannst.

Wenn du mit deinen Änderungen zufrieden bist, öffnest du in der Benutzeroberfläche des Website-Editors die Optionen-Seitenleiste und suchst den Bereich Tools. Über die Schaltfläche Exportieren kannst du das aktuelle Thema mit all deinen Stil- und Vorlagenanpassungen in einer Zip-Datei herunterladen.

Ein Bild, das die Option Theme exportieren in der Benutzeroberfläche des Editors zeigt.
Exportiere ein Theme aus der Benutzeroberfläche des Editors

Anschließend kannst du dein Theme exportieren und auf einer beliebigen WordPress-Webseite installieren.

Wir haben das verbesserte Theme-Export-Tool an einer lokalen WordPress-Installation getestet und festgestellt, dass fast alles so funktioniert, wie wir es erwartet haben… 😅

Wie auch immer, das Export-Tool befindet sich noch in der Entwicklung und wir können heute nur einen kleinen Einblick in sein enormes Potenzial geben. Stell dir die Möglichkeit vor, deine Themes von der Bearbeitungsoberfläche deiner Webseite aus zu erstellen und sie auf eine beliebige Anzahl von Installationen zu verteilen. Und zwar unabhängig davon, ob du ein Entwickler bist oder nicht…

Es gibt noch eine Menge offener Probleme, die behoben werden müssen, weshalb wir davon ausgehen, dass wir bald einige Verbesserungen sehen werden. Wenn du neugierig bist und mehr über Visual Theme Building erfahren möchtest (so wie wir), kannst du das Tracking Issue auf GitHub verfolgen.

Mehr Template-Optionen in Block-Themes

In früheren WordPress-Versionen hatten wir nur eine begrenzte Anzahl von Vorlagentypen zur Verfügung.

Ein Screenshot zeigt die Vorlagen in WordPress 5.9.
Hinzufügen einer neuen Vorlage in WordPress 5.9

Mit WordPress 6.0 gibt es jetzt mehrere neue Vorlagentypen, darunter Autor, Kategorie, Datum, Tag und Taxonomie.

Ein Screenshot zeigt Vorlagen in WordPress 6.0.
Hinzufügen einer neuen Vorlage in WordPress 6.0

Diese Ergänzung sollte den Arbeitsablauf bei der Bearbeitung deiner Webseite vereinfachen. Um sie auszuprobieren, wählst du einfach eine neue Vorlage aus der Dropdown-Liste aus, fügst die erforderlichen Blöcke hinzu, speicherst deine Änderungen und schaust dir an, wie sie im Frontend aussieht. Ja, so einfach ist das. Wenn du das mit der oben erwähnten Funktion zum Exportieren von Themes kombinierst, verstehst du besser, was wir bald von der Webseiten-Bearbeitung erwarten können.

Verbesserungen der Benutzeroberfläche und der Benutzerfreundlichkeit

WordPress 6.0 führt eine Reihe von Änderungen an der Benutzeroberfläche ein, von denen viele dazu dienen, Ordnung in die Seitenleiste zu bringen. Insgesamt dürften diese Änderungen einen erheblichen Einfluss auf das gesamte Bearbeitungserlebnis haben. Hier werden wir nur ein paar davon erwähnen, aber du kannst in den Gutenberg-Versionshinweisen eine umfassendere Liste der Änderungen nachlesen (siehe Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).

Verbesserungen in der Listenansicht

An der Listenansicht wurden zahlreiche Änderungen vorgenommen, die die Benutzerfreundlichkeit der Komponente verbessern.

Erweitern der Listenansicht bei Auswahl

Wenn du im Editor auf einen Block klickst, wird der Block jetzt automatisch in der Listenansicht hervorgehoben. Wenn der Block in einem übergeordneten Block verschachtelt ist, wird der übergeordnete Block aufgeklappt und das Element im Blockbaum angezeigt.

Erweiterter Gruppenblock in der Listenansicht bei Blockauswahl.
Erweiterter Gruppenblock in der Listenansicht bei Blockauswahl

Listenansicht standardmäßig eingeklappt

Vor WordPress 6.0 war die Listenansicht standardmäßig aufgeklappt, wenn du sie geöffnet hast.

Standard-Listenansicht in WordPress 5.9.
Standard-Listenansicht in WordPress 5.9

Da ein Beitrag aber oft aus komplexen Strukturen von verschachtelten Blöcken besteht, macht es durchaus Sinn, den Blockbaum beim Öffnen der Listenansicht einzuklappen.

In Version 6.0 ist die Listenansicht in allen Editoren standardmäßig eingeklappt, so dass der Blockbaum auf einen Blick viel verständlicher ist.

Default List View in WordPress 6.0.
Standard-Listenansicht in WordPress 6.0.

Fokus auf die Schaltfläche Listenansicht

Wenn du das Listenansicht-Panel öffnest, kehrt der Fokus jetzt korrekt zum Listenansicht-Button zurück. Das ist besonders nützlich, wenn du die Listenansicht mit der Tastatur durchsuchst, und sorgt für ein flüssigeres und nahtloseres Bearbeitungserlebnis.

Mehrfache Blockauswahl und Drag & Drop

Eine weitere Änderung in der Listenansicht ermöglicht es dir, mehrere Blöcke auf derselben Ebene auszuwählen und sie per Drag & Drop an eine andere Position innerhalb der Liste zu ziehen.

Blockstil-Vorschauen

Vor WordPress 6.0 befanden sich die Blockstilvorschauen in der Blockseitenleiste und nahmen einen beträchtlichen Teil des Stile-Panels ein.

Blockstilvorschau in WordPress 5.9
Blockstilvorschau in WordPress 5.9

In Version 6.0 erscheinen nur noch die Namen der Stilvariationen im Stil-Panel, während die Stilvorschauen außerhalb der Seitenleiste angezeigt werden, wenn der Stilname mit dem Mauszeiger bewegt wird oder den Fokus erhält.

Diese Änderung verringert die Größe der Seitenleiste und macht die Stilnamen besser sichtbar.

Blockstilvorschau in WordPress 6.0
Blockstilvorschau in WordPress 6.0

Abschnitt Absatztypografie

Um Ordnung in die Block-Seitenleiste zu bringen, wurde das Drop Cap-Steuerelement für den Absatz-Block von seinem Abschnitt in den Typografie-Abschnitt verschoben.

Mit dieser Änderung befinden sich nun alle Steuerelemente für Typografieeinstellungen im selben Abschnitt, was zu einer einheitlicheren Benutzererfahrung führt.

Typografie-Einstellungen in WordPress 5.9 vs. WordPress 6.0
Typografie-Einstellungen in WordPress 5.9 vs. WordPress 6.0

Rahmen- und Farbeinstellungen wurden in die Werkzeugleiste verschoben

Um Ordnung in die unübersichtliche Einstellungs-Seitenleiste zu bringen, wurden die Steuerelemente für die Rahmen- und Farbeinstellungen in das ToolsPanel verschoben und können in verschiedenen Kontexten ein- und ausgeklappt werden.

Das neue Bedienfeld für die Randeinstellungen
Das neue Bedienfeld für die Randeinstellungen

Diese Änderung soll die Bearbeitung mit mehreren Blöcken vereinfachen und mehr Konsistenz in die Seitenleiste bringen.

Das Farbpanel in WordPress 6.0
Das Farbpanel in WordPress 6.0

Kategorie-Erinnerung im Post-Publishing-Panel

Wenn du es eilig hast oder regelmäßig eine große Anzahl von Blogbeiträgen veröffentlichst, kannst du leicht Tags oder Kategorien vergessen. Wenn du dich oft in einer solchen Situation befindest, wirst du die Tag-Erinnerung im Post-Publishing-Panel sehr nützlich finden.

Damit Webseiten-Administratoren und Autoren sicherstellen können, dass ihren Beiträgen die erforderlichen Kategorien zugewiesen sind, gibt es in WordPress 6.0 einen neuen Vorschlag: Eine Kategorie zuweisen, wenn dem Beitrag noch keine Kategorie zugewiesen wurde.

Die folgende Abbildung zeigt einen Vergleich zwischen dem Beitragspublikationsfenster in WordPress 5.9 und 6.0.

Das Panel zum Veröffentlichen von Beiträgen in WordPress 5.9 vs. 6.0
Das Panel zum Veröffentlichen von Beiträgen in WordPress 5.9 vs. 6.0

Code-Editor zum Site-Editor hinzugefügt

Seit WordPress 6.0 ist der Code-Editor nun auch im Seiteneditor verfügbar. Wie beim Beitragseditor findest du den Code-Editor unter dem Menüpunkt Optionen.

Mit WordPress 6.0 wird der Code-Editor zum Site-Editor hinzugefügt
Mit WordPress 6.0 wird der Code-Editor zum Site-Editor hinzugefügt

Block Locking UI

Ein neuer Punkt „Sperren“ im Dropdown-Menü „Weitere Einstellungen“ öffnet ein Popup, mit dem du verhindern kannst, dass Nutzer/innen Blöcke verschieben oder entfernen (oder beides).

Sperren einer Gruppe von Blöcken
Sperren einer Gruppe von Blöcken

Dies ist besonders nützlich bei der Bearbeitung von Vorlagen und wiederverwendbaren Blöcken, wo du auch die Bearbeitung von Blöcken einschränken kannst.

Sperren eines wiederverwendbaren Gruppenblocks
Sperren eines wiederverwendbaren Gruppenblocks

Die neue Funktion kann programmatisch mit der neuen Einstellung canLockBlocks deaktiviert werden.

Der folgende Code aktiviert die Blocksperrfunktion nur für Benutzer mit der Rolle Editor oder höher:

add_filter(
	'block_editor_settings_all',
	function( $settings, $context ) {

		$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
 
		return $settings;
	},
	10,
	2
);

Entwickler können die Block Locking UI auch für bestimmte Blocktypen ausblenden, indem sie die Eigenschaft lock verwenden:

{
	"apiVersion": 2,
	"supports": {
		"lock": false
	}
}

Mehr über das Sperren von Blöcken erfährst du unter Einstellungen für das Sperren von Blöcken in WordPress 6.0.

Mehrfache Auswahl

Es ist jetzt möglich, Text über mehrere Blöcke hinweg auszuwählen.

Auswählen von Text über zwei Absätze hinweg.
Auswählen von Text über zwei Absätze hinweg.

Beibehaltung von Stilen

Wenn du Blöcke umwandelst oder neue Schaltflächen erstellst, werden jetzt mehrere Stile beibehalten.

Das Bild unten zeigt einen Listenblock mit verschiedenen Stilen.

Ein Listenblock, auf den verschiedene Stile angewendet wurden.
Ein Listenblock, auf den verschiedene Stile angewendet wurden

Wenn du den Listenblock in Absätze umwandelst, behalten die neuen Blöcke die gleichen Stile wie die vorherigen Listenelemente.

Umwandlung einer Liste in Absätze
Umwandlung einer Liste in Absätze

Die gleiche Verbesserung gilt für neue Schaltflächen, die zu einem Schaltflächenblock hinzugefügt werden. Diese übernehmen jetzt das Styling der angrenzenden Schaltflächen.

Neue Kernblöcke

Die Anzahl der Kernblöcke nimmt ständig zu. Wenn du dich fragst, welche Core-Blöcke derzeit verfügbar sind, gibt es jetzt eine Handbuchseite mit einer vollständigen Liste der Core-Blöcke, die im Gutenberg-Plugin enthalten sind. Für jeden Block werden Name, Kategorie, Unterstützungen und Attribute angegeben sowie ein nützlicher Link zum Quellcode, den Blockentwickler/innen lieben werden.

Und mit WordPress 6.0 werden noch mehr Blöcke kommen. Hier findest du die Blöcke, die du in der kommenden Version erwarten kannst.

Kommentare Query Loop

Ähnlich wie der Block „Query Loop“ zeigt der neue Block „Comment Query Loop“ die Kommentare der Beiträge an. Es handelt sich um einen erweiterten Block, der mehrere innere Blöcke enthält, die du separat bearbeiten und konfigurieren kannst.

Haben Sie mit Ausfallzeiten und WordPress-Problemen zu kämpfen? Kinsta ist die Hosting-Lösung, die Ihnen Zeit spart! Sieh dir unsere Features an

Wie die Abbildung unten zeigt, kannst du jeden der Blöcke im Block Kommentarabfrage-Schleife auswählen, um sein Aussehen nach Belieben anzupassen. Du kannst auch weitere Blöcke hinzufügen oder bestehende Blöcke verschieben oder entfernen (Quellcode).

Konfigurieren des Comments Query Loop-Blocks
Konfigurieren des Comments Query Loop-Blocks

Mehr lesen

Ein neuer und anpassbarer Read More -Block ermöglicht es dir, verschiedene Aspekte der Read More-Schaltfläche anzupassen: Rahmen, Farben, Ecken, Typografie und mehr (Quellcode).

Das ist eine großartige Ergänzung, denn so kannst du den Weiterlesen-Link auch außerhalb des Auszugsblocks hinzufügen und anpassen.

Der neue Read More-Block
Der neue Read More-Block

Keine Ergebnisse in der Abfrageschleife

Der Block „Keine Ergebnisse“ ist ein Blockcontainer, in den du einen beliebigen Text oder Block einfügen kannst, der angezeigt wird, wenn die Abfrage keine Ergebnisse liefert. Um den Block „Keine Ergebnisse“ zu einer Abfrageschleife hinzuzufügen, wählst du die Abfrageschleife aus und klickst auf das Plus-Symbol in der unteren rechten Ecke, um den Quick-Inserter zu starten. Suche dann nach „Keine Ergebnisse“. Der Block ist außerhalb der Abfrageschleife (Quellcode) nicht verfügbar.

Hinzufügen des Blocks "Kein Ergebnis" zur Abfrageschleife
Hinzufügen des Blocks „Kein Ergebnis“ zur Abfrageschleife

Avatar und Beitragsautoren-Biografie

WordPress 6.0 führt auch neue Blocktypen ein, mit denen du den Autorenblock in seine Bestandteile aufteilen und separat in deinem Inhalt verwenden kannst.

Der Block „Post Author Biography“ enthält die Beschreibung des Autors (Quellcode).

Der Avatar-Block zeigt einfach den Avatar eines Nutzers an und ermöglicht es dir, zwischen den Autoren der Website zu wählen (Quellcode).

Der Avatar-Block in WordPress 6.0
Der Avatar-Block in WordPress 6.0

Dieser Block ist besonders nützlich, um den Avatar eines Autors außerhalb des Autoreninfoblocks oder der Kommentare zu zeigen. Du könntest ihn zum Beispiel auf einer Seite verwenden, die allen Autoren gewidmet ist, oder auf einer Seite, auf der die Bewertungen deiner Nutzer/Leser angezeigt werden.

Verbesserungen an bestehenden Blöcken

WordPress 6.0 führt auch einige Änderungen und Verbesserungen an bestehenden Blöcken ein, die sich stark auf deinen Bearbeitungsprozess auswirken können. Der Navigationsblock wird von mehreren Änderungen betroffen sein, aber auch in anderen Blöcken wie Query Loop, Featured Image, Group und Social Icons gibt es Verbesserungen.

Verbesserungen am Navigationsblock

In den letzten Monaten wurde der Navigationsblock mehrfach verbessert und bietet jetzt eine deutlich benutzerfreundlichere Oberfläche.

Zunächst wurde dem Navigationslink-Block eine umfangreiche Vorschau hinzugefügt. Wenn du einen Link hinzufügst, der auf eine öffentlich zugängliche Ressource verweist, wird ein Vorschaubild dieser Ressource angezeigt, wenn du auf die Link-Schaltfläche in der Symbolleiste des Blocks klickst.

Umfangreiche Vorschau für Navigationslinks
Umfangreiche Vorschau für Navigationslinks

Einige weitere Änderungen wirken sich auf das gesamte Bearbeitungserlebnis aus.

Wenn du jetzt ein neues Menü hinzufügst und nur ein Navigationsmenü existiert, wird es standardmäßig als einziges verfügbares Menü angezeigt. Diese Änderung sollte deinen Bearbeitungsprozess beschleunigen, wenn du nur ein einziges Navigationsmenü hast.

Navigationslinks hatten bereits ein Beschreibungsfeld, in das die Nutzer/innen einen Text zur Beschreibung ihrer Navigationslinks eingeben konnten. In früheren WordPress-Versionen konnten Themes diese Funktion jedoch nicht unterstützen.

Jetzt, mit WordPress 6.0, erscheint ein <span class="wp-block-navigation-item__description"> nach der Bezeichnung des Links.

Die Beschreibung des Navigationslinks erscheint nach der Linkbeschriftung
Die Beschreibung des Navigationslinks erscheint nach der Linkbeschriftung

In Twenty Twenty-Two wird das Element .wp-block-navigation-item__description per CSS ausgeblendet, aber Themes können eine display: block Eigenschaft hinzufügen, um die Linkbeschreibung anzuzeigen.

Navigationslinkbeschreibung in WordPress 6.0 und Twenty Twenty-Two
Navigationslinkbeschreibung in WordPress 6.0 und Twenty Twenty-Two

Abfrage-Schleifen-Filter und Featured Images

Im Einstellungsbereich der Abfrageschleifenfilter werden jetzt Eingabefelder für benutzerdefinierte Taxonomien angezeigt. Damit können Nutzer den aktuellen Beitragstyp nach einer oder mehreren benutzerdefinierten Taxonomien filtern, die für den ausgewählten Beitragstyp registriert sind.

Es ist jetzt auch möglich, Beiträge nach mehreren Autoren zu filtern, während du in früheren Versionen nur einen einzelnen Autor aus einer Dropdown-Liste auswählen konntest.

Query Loop Filtereinstellungen in WordPress 6.0
Query Loop Filtereinstellungen in WordPress 6.0

Außerdem kannst du jetzt auch die Abmessungen des Featured Image innerhalb eines Query Loop-Blocks festlegen.

Steuerung der Abmessungen des Featured Image in einem Query Loop-Block
Steuerung der Abmessungen des Featured Image in einem Query Loop-Block

Typografie- und Rahmenunterstützung in responsiven Gruppenblöcken

Gruppen- und Zeilenblöcke unterstützen jetzt Typografie-Einstellungen. Mit dieser Änderung können Nutzer/innen dieselben Typografie-Einstellungen auf eine ganze Gruppe von Blöcken auf einmal anwenden und so ein paar Klicks sparen, wenn es darum geht, eine Gruppe mit mehreren verschachtelten Blöcken zu formatieren.

Typografie-Einstellungen für einen Gruppenblock
Typografie-Einstellungen für einen Gruppenblock

Der Gruppenblock wurde weiter verbessert. Jetzt kannst du Blöcke ganz einfach mit einem einzigen Klick in Stapel oder Reihen gruppieren.

Markiere einfach die Blöcke, die du gruppieren möchtest, und wähle eines der drei Steuerelemente in der Blocksymbolleiste: Gruppe, Reihe, Stapel.

Sobald du die Blöcke gruppiert hast, zeigt ein neues Panel in der Einstellungsseitenleiste die Beschreibungen der Gruppenvariationen an, so dass du mit ein paar Klicks zwischen den Variationen wechseln kannst.

Ein Reihenblock zeigt Blöcke horizontal an
Ein Reihenblock zeigt Blöcke horizontal an

WordPress 6.0 führt auch die Unterstützung von Seitenrändern für Gruppenblöcke ein, so dass die Benutzer/innen die oberen und unteren Ränder separat steuern können.

Ränder mit einem Gruppenblock steuern
Ränder mit einem Gruppenblock steuern

Featured Image im Titelblock

Mit WordPress 6.0 gibt es in der Symbolleiste des Blocks einen Schalter für die Verwendung von Featured Images. Dank dieses neuen Steuerelements kannst du mit einem einzigen Klick vom aktuellen Bild zum Featured Image wechseln.

Featured Image mit einem Cover-Block verwenden
Featured Image mit einem Cover-Block verwenden

Labels in sozialen Symbolen ein-/ausblenden

Eine kleine, aber nützliche Verbesserung des Social Icons-Blocks ermöglicht es den Nutzern jetzt, die Beschriftung der Icon-Links ein- und auszuschalten.

Mit dem Steuerelement Beschriftung anzeigen kannst du die Beschriftungen in den sozialen Symbolen ein- und ausschalten.
Steuerelement Beschriftung anzeigen

Wenn du diese Option aktivierst, kannst du den Standardnamen des Dienstes anzeigen lassen oder eigene Beschriftungen für deine Icons festlegen.

Ein Screenshot zeigt, dass die Option Etikett anzeigen aktiviert ist.
Beschriftung anzeigen eingeschaltet

Zusätzliche Block-Verbesserungen

Die kommende WordPress-Version bringt auch eine Vielzahl von Verbesserungen für viele andere Blöcke.

Zum Beispiel kannst du jetzt die Ränder von Columns-Blöcken kontrollieren (Gutenberg 12.7).

Rahmensteuerungen für den Spaltenblock
Rahmensteuerungen für den Spaltenblock

Eine weitere nützliche UX-Verbesserung ermöglicht es dir, interne Links mit einem einfachen [[ Tastaturtrigger einzufügen.

Das Hinzufügen von internen Links in WordPress 6.0 ist einfacher
Das Hinzufügen von internen Links in WordPress 6.0 ist einfacher

Es ist jetzt einfacher, den Abstand um die Bilder in einem Galerie-Block zu kontrollieren, dank der neuen Block-Abstandskontrolle.

Bilder ohne Blockabstände
Bilder ohne Blockabstände
Images with block spacing.
Bilder mit Blockabstand.

Änderungen für Entwickler und Leistungsverbesserungen

WordPress 6.0 bietet auch viele neue Funktionen für Entwickler.

Die neue Version bringt auch einen Leistungsschub, mit einigen Ergänzungen der WordPress Caching API, Leistungsverbesserungen bei Taxonomie-Term-Abfragen und weiteren Leistungsverbesserungen für einzelne Websites mit großen Nutzerzahlen.

Damit endet unser Überblick über die neuen Funktionen und Änderungen, die du nach dem Update deiner WordPress-Webseiten auf 6.0 sehen wirst.

Aber das sind nur einige der Verbesserungen, die mit WordPress 6.0 kommen. Eine vollständige Liste findest du in den Versionshinweisen von Gutenberg und im WordPress 6.0 Field Guide.

Kennst du schon die neuen Funktionen, die mit WordPress 6.0 kommen? Nein... ? 🙀 Dann solltest du diesen ausführlichen Überblick über WordPress 6.0 nicht verpassen 🎉Click to Tweet

Zusammenfassung

Wie oben erwähnt, können wir jetzt sagen, dass wir uns mitten in der zweiten Phase der Gutenberg-Entwicklung befinden, der Anpassungsphase.

Full Site Editing ist jetzt Teil des WordPress-Kerns und 6.0 und die folgenden Versionen werden weitere Verbesserungen  voranbringen, zusätzlich zu dem was wir jetzt schon haben und nutzen können.

All dies wird enorme Auswirkungen auf das WordPress-Ökosystem und das Web insgesamt haben, auch wenn man bedenkt, dass zum Zeitpunkt der Erstellung dieses Artikels

WordPress von 64,2 % aller Webseiten genutzt wird, deren Content Management System wir kennen. Das sind 43,0 % aller Webseiten. (Quelle W3Techs)

Wir hören hier erst einmal auf. Die Liste der Funktionen und Verbesserungen, die mit WordPress 6.0 eingeführt werden, kann nicht in einem einzigen Beitrag abgearbeitet werden, aber wir hoffen, dass wir zumindest die Neuerungen hervorgehoben haben, die die größte Auswirkung auf die Art und Weise haben werden, wie wir WordPress tagtäglich nutzen.

Wir möchten diesen Artikel mit einigen Fragen an unsere Leserinnen und Leser abschließen!

Bitte teile deine Meinung mit der Community im Kommentarbereich unten. 👇


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

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 34 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.