Was neu ist in WordPress 6.5

WordPress 6.5 „Regina“ wurde am 2. April veröffentlicht, und wir zeigen dir hier die fantastischen Funktionen, die es mit sich bringt.

Mit 6.5 werden neue, leistungsstarke APIs eingeführt, die das WordPress-Entwicklungserlebnis auf die nächste Stufe heben. Sie bringt aber auch jede Menge Änderungen mit sich, die dich bei der Erstellung von Seiten und Inhalten glücklich machen werden.

Dank der neuen Font Library kannst du benutzerdefinierte Feldwerte in den Inhalt von Kernblöcken einfügen und Google Fonts direkt aus dem Seiteneditor herunterladen und installieren. Neue Design-Tools und verschiedene UI-Verbesserungen bereichern das Bearbeitungserlebnis.

Aber das sind nur einige der Updates, die mit WordPress 6.5 kommen. Die neue Version enthält so viele Änderungen und Updates, dass es unmöglich wäre, sie alle in einem einzigen Blogbeitrag zu erwähnen. Deshalb haben wir die störendsten und aufregendsten Neuerungen in diesem langen und ausführlichen Artikel zusammengefasst.

Beginnen wir unsere Entdeckungsreise zu WordPress 6.5.

Die neue WordPress-Schriftartenbibliothek

Zuallererst führt WordPress 6.5 eine neue Funktion ein, die die Verwaltung von Schriftarten über die Styles-Oberfläche ermöglicht.

Mit der neuen WordPress-Schriftbibliothek kannst du Schriften auf eine Weise verwalten, die der Medienverwaltung in der Mediathek ähnelt, nur eben für Schriften.

Dank der Font Library kannst du ganz einfach lokale Schriftarten und Google Fonts installieren/deinstallieren und unabhängig von deinem aktiven Theme auswählen, welche du aktivieren/deaktivieren möchtest.

Klingt toll, nicht wahr? Wir haben jetzt viel mehr Kontrolle über einen wichtigen Aspekt jeder Website: die Typografie. Um benutzerdefinierte Schriftarten in deiner WordPress-Website zu verwenden, musst du dich nicht mehr auf die Schriftarten deines Themes beschränken oder mit CSS herumspielen.

Die Verwendung ist ziemlich einfach. Öffne in der Benutzeroberfläche des Website-Editors die Seitenleiste Globale Stile und wähle Typografie.

Das neue Typografie-Panel in WordPress 6.5

Hier solltest du eine Liste mit den verfügbaren Schriftarten und Elementen sehen. Klicke auf die Schaltfläche Schriften verwalten auf der rechten Seite und es erscheint ein Popup mit drei Registerkarten.

Die Benutzeroberfläche der Schriftartenbibliothek in WordPress 6.5

Auf der Registerkarte Bibliothek findest du eine Vorschau der verfügbaren Schriftarten, auf der Registerkarte Hochladen kannst du per Drag-and-Drop Schriftarten von deinem Computer hochladen und auf der Registerkarte Schriftarten installieren kannst du Schriftarten von Google Fonts installieren.

Mit Google Fonts verbinden — Auf der Registerkarte Fonts installieren kannst du dich mit Google Fonts verbinden

Sobald du dich mit Google Fonts verbunden hast, wird eine Liste aller verfügbaren Schriftarten im selben Fenster angezeigt.

Du kannst auch nach dem Namen der Schriftart suchen.

Suche nach Schriftarten nach Namen in WordPress 6.5

Wähle die Schriftarten aus, die du brauchst, klicke auf Installieren und du bist fertig.

Ubuntu-Schriftvarianten bei Google Fonts

Wenn du eine neue Schriftart installierst, fügt die Schriftbibliothek die Definition der Schriftfamilie zu den installierten Schriftarten hinzu und lädt das Schrift-Asset in den Ordner wp-content/uploads/fonts herunter.

Font Library deaktivieren

Plugin- und Theme-Entwickler können die Font Library mit dem neuen PHP-Filter fontLibraryEnabled deaktivieren:

function disable_font_library_ui( $editor_settings ) { 
	$editor_settings['fontLibraryEnabled'] = false;
	return $editor_settings; 
}
add_filter( "block_editor_settings_all", "disable_font_library_ui" );

DataViews

DataViews ist eine Komponente, die es ermöglicht, Datensätze in verschiedenen Layouts darzustellen, z. B. als Tabelle, Gitter, Liste und mehr.

Mit dieser Iteration kommen neue Ansichten und damit verbundene Funktionen für die Verwaltung von Seiten, Mustern und Vorlagen in den Kern und wir können weitere Verbesserungen in zukünftigen WordPress-Versionen erwarten.

Vorerst führt WordPress 6.5 die folgenden Ansichten im Site Editor ein:

Templates > Alle Templates verwalten: Tabellen- und Grid-Layouts.
Muster > Vorlagenteile > Alle Vorlagenteile verwalten: Tabellen- und Grid-Layouts.
Schablonen: Raster-Layout.
Seiten > Alle Seiten verwalten: Tabellen- und Grid-Layouts.

Neben den Layouts bieten die Datenansichten verschiedene Visualisierungsfunktionen wie Filter, Suche, Paginierung, Sortierung, Ausblenden und Einblenden von Feldern.

Felder für die Ansicht "Vorlagen" einstellen — Felder für die Ansicht „Vorlagen“ einstellen

Mit der Schaltfläche Massenbearbeitung kannst du je nach aktuellem Datensatz verschiedene Aktionen durchführen. Für Seiten kannst du In den Papierkorb verschieben, Wiederherstellen und Dauerhaft löschen wählen.

Seiten in Massenbearbeitung in WordPress 6.5 bearbeiten

Die Datenansichten verfügen außerdem über eine neue Primärfilter-API, die darauf abzielt, den Datenansichten eine besondere Art von Filter hinzuzufügen, der immer auf dem Bildschirm sichtbar ist. Das Bild unten zeigt den neuen primären Filter für den Sync-Status im Verwaltungsbereich von Patterns.

Der primäre Sync-Status-Filter für Muster

Die DataViews API wird mit dem neuen @wordpress/dataviews npm-Paket geliefert, das es Entwicklern ermöglicht, mit Datenansichten zu experimentieren.

Block Bindings API

Die Block Bindings API ist eine neue API, die darauf abzielt, Blockattribute mit Werten aus verschiedenen Datenquellen zu verbinden. Diese Werte können sich je nach Kontext unterscheiden. Ein einfaches Beispiel wäre eine Überschrift, die den Namen des Autors enthält und sich mit dem Wert post_author ändert.

Dies ist eine bemerkenswerte Verbesserung, denn sie erweitert die Möglichkeiten mehrerer Kernblöcke. Dank der neuen API kannst du dynamische Daten aus einer beliebigen Quelle an ein Blockattribut binden.

Die Datenquellen können die unterschiedlichsten sein: Website-Daten, benutzerdefinierte Felder, Nutzerdaten, Muster, Shortcodes, andere Blöcke und sogar externe Tools, die Gutenberg nutzen. Ein Beispiel hierfür könnte eine Drupal-Website mit Gutenberg sein.

Aus technischer Sicht können wir die Funktionsweise der Block Bindings API als einen dreistufigen Prozess beschreiben:

Zuerst erstellst du eine Bindung zwischen Blockattributen und einer Datenquelle mit einem bindings Objekt.
Die API holt sich den Wert aus der in der Bindung definierten Datenquelle.
Dann aktualisiert sie den HTML-Code des Blocks mit den aus der Datenquelle erhaltenen Werten.

Die erste Implementierung der Block Bindings API, die mit WordPress 6.5 kommt, ermöglicht die Verbindung von Blockattributen und benutzerdefinierten Feldern. Eine zweite angekündigte Implementierung, Synced Patterns Overrides, wurde auf eine zukünftige Version verschoben.

Zunächst wird nur eine begrenzte Anzahl von Blöcken, wie Überschriften, Absätze, Bilder und Schaltflächen, die Block Bindings API unterstützen. In zukünftigen Versionen werden weitere Blöcke, sogar benutzerdefinierte Blöcke, in die Liste aufgenommen.

Diese erste Implementierung der API ermöglicht es Plugin-Entwicklern außerdem, ihre Quellen auf die gleiche Weise zu registrieren wie Gutenberg die Datenquelle core/post-meta. In Anlehnung an das Beispiel von Santos Guillamot kannst du deine Plugin-Datenquelle auf diese Weise registrieren:

register_block_bindings_source(
	'myplugin/plugin-data',
	array(
		'label'              => _x( 'Plugin Data', 'block bindings source' ),
		'get_value_callback' => 'myplugin_block_bindings_post_meta_callback',
	)
);

Füge dann ein Bindungsobjekt zu deinem Block hinzu:

<!-- wp:paragraph 
{
	"metadata": {
		"bindings": {
			"content": {
				"source": "myplugin/plugin-data",
				"args": {
					"key":"plugin_key"
				}
			}
		}
	}
}
-->
<p>Paragraph</p>
<!-- /wp:paragraph -->

Hier ist eine Beschreibung der einzelnen Eigenschaften:

metadata: Ein Objekt der Block-Metadaten.
bindings: Ein Objekt, das eine oder mehrere Bindungen enthält.
content: Das Blockattribut, das mit einer Datenquelle verbunden werden soll. In diesem Beispiel ist es das Attribut content eines Absatzblocks.
source: Die Quelle der Bindungen.
args: Ein Objekt mit Argumenten, das an die Quelle für die Blockbindung übergeben wird.

Zukünftige Iterationen werden die Block Bindings API um weitere Funktionen erweitern. Außerdem sollten wir bald in der Lage sein, Bindungen vom visuellen Editor aus zu erstellen, Blockattribute mit weiteren Datenquellen zu verknüpfen, z. B. mit Website- oder Taxonomiedaten, und diese Funktion mit mehr Blöcken zu nutzen.

Deshalb wollen wir uns die ersten Implementierungen der Block Bindings API genauer ansehen.

Benutzerdefinierte Felder mit Blöcken verknüpfen

Vor WordPress 6.5 gab es keine Möglichkeit, benutzerdefinierte Feldwerte in den Inhalt von Kernblöcken einzubinden. Entwickler konnten nur benutzerdefinierte Blöcke erstellen, um benutzerdefinierte Felder auf dem Frontend anzuzeigen.

Seit WordPress 6.5 kannst du Daten, die in benutzerdefinierten Feldern gespeichert sind, in Kernblöcken anzeigen, z. B. Schaltflächen, Überschriften, Bilder und Absätze.

Wie bereits erwähnt, kannst du mit der Block Bindings API Blockattribute und verschiedene Datenquellen verbinden, darunter auch die Quelle „meta_fields“. Um diese Funktion zu nutzen, musst du zunächst benutzerdefinierte Felder im Editor unter Optionen -> Voreinstellungen -> Allgemein -> Erweitert aktivieren.

Beachte, dass du seit WordPress 6.5 kein UI-Steuerelement mehr hast, um den Wert eines benutzerdefinierten Feldes an ein Blockattribut zu binden.

Wenn du also den Schlüssel und den Wert deines benutzerdefinierten Feldes hinzugefügt hast, musst du zum Code-Editor wechseln und ein „Bindings“-Objekt innerhalb des Blockbegrenzers hinzufügen, wie im folgenden Code gezeigt:

<!-- wp:paragraph 
	{
		"metadata": {
			"bindings": {
				"content": {
					"source":"core/post-meta",
					"args": {
						"key":"my_custom_field"
					}
				}
			}
		}
	} -->
	<p>Paragraph</p>
<!-- /wp:paragraph -->

Wenn du ein benutzerdefiniertes Feld zu einem Block hinzufügst, werden die entsprechenden Steuerelemente gesperrt, sodass der Blockinhalt nicht mehr bearbeitet werden kann.

Sehen wir uns nun an, wie das mit einem Bildblock funktioniert. Füge zwei benutzerdefinierte Felder für die Attribute alt und src hinzu.

Füge dann einen Image-Block hinzu, wechsle zum Code-Editor und füge dem Block ein bindings Objekt hinzu, wie im folgenden Beispiel:

<!-- wp:image {
	"metadata":{
		"bindings":{
			"url":{
				"source":"core/post-meta",
				"args":{
					"key":"img_src"
				}
			},
			"alt":{
				"source":"core/post-meta",
				"args":{
					"key":"img_alt"
				}
			}
		}
	}
}
-->
<figure class="wp-block-image"><img src="" alt="" /></figure>
<!-- /wp:image -->

Du wirst feststellen, dass du die Bildquelle nicht mit den Steuerelementen des Editors ersetzen kannst.

Der Bildplatzhalter ohne Mediensteuerung

Mit dieser ersten Iteration können nur die folgenden Blockattribute mit benutzerdefinierten Feldern verbunden werden:

Absatz: Inhalt.
Überschrift: Inhalt.
Bild: URL, alt, und Titel.
Schaltfläche: Text, URL, linkTarget, rel.

Einen ausführlicheren Überblick über die Verknüpfung von benutzerdefinierten Feldern mit Blockattributen findest du in dieser umfassenden Einführung in die Blockbindung.

Verbessertes Revisionssystem

Revisionen geben dir die Gewissheit, dass du Änderungen jederzeit rückgängig machen kannst, indem du eine frühere Version des Erscheinungsbildes der Website wiederherstellst. Da ein zuverlässiges Revisionssystem auf kollaborativen Websites wichtig ist, nehmen Style-Revisionen in der aktuellen Phase der WordPress-Entwicklung einen wichtigen Platz ein. WordPress 6.5 bringt mehrere wichtige Verbesserungen für das Revisionssystem.

Hier erfährst du, was dich bei Revisionen in WordPress 6.5 erwartet.

Beschreibung der Änderungen

In der vorherigen Version von WordPress waren nur das Datum, die Uhrzeit und der Autor jeder Revision sichtbar. Ab WordPress 6.5 siehst du zusätzlich zu diesen Angaben auch eine kurze Zusammenfassung und andere Details zu dieser Version.

Unbegrenzte Überarbeitungen und Paginierung

Vor 6.5 war es aufgrund der Beschränkung der Rest-API nur möglich, maximal 100 Revisionen in einem einzigen Panel der Seitenleiste anzuzeigen.

Dank der beiden neuen Selektoren getRevisions und getRevision, die mit Gutenberg 17.2 eingeführt und mit WordPress 6.5 in den Kern integriert wurden, gibt es das Limit von 100 Revisionen nicht mehr. Außerdem kannst du alle vorhandenen Revisionen auf Seiten mit jeweils 10 Einträgen durchsuchen.

Integration des Revision Style Book

Eine weitere Änderung macht das Revisions-Panel auch mit dem Style Book verfügbar. So kannst du die Änderungen überprüfen, die du an deinen Styles für Muster und Blöcke vorgenommen hast, die nicht in der aktuellen Vorlage enthalten sind.

Das Style Book unterstützt jetzt Revisionen

Überarbeitungen für Vorlagen und Vorlagenteile

Überarbeitungen von Vorlagen und Vorlagenteilen ermöglichen es dir, zu einer früheren Version deines Entwurfsprojekts zu wechseln, was eine zusätzliche Sicherheitsebene für deinen Workflow darstellt.

Interaktivitäts-API

Vor WordPress 6.5 mussten Entwickler/innen ihre bevorzugten JavaScript-Bibliotheken selbst implementieren, um ihren Seiten Interaktivität hinzuzufügen. Leider führte dies zu einem Mangel an Konsistenz bei der JavaScript-Entwicklung im Frontend.

Ab WordPress 6.5 bietet eine neue Interaktivitäts-API eine moderne und standardisierte Möglichkeit, Interaktivität in das Frontend deiner WordPress-Websites einzubauen.

Falls du dich fragst, was diese neue API kann, haben wir bereits in WordPress 6.4 einen Vorgeschmack darauf bekommen, als die Kernblöcke Bild, Suche, Datei, Navigation und Abfrage mit der privaten Version der API überarbeitet wurden. Der Lightbox-Effekt für Bilder ist ein weiteres gutes Beispiel.

Dynamische Paginierung, sofortige Suche und Echtzeit-Interaktion zwischen Blöcken sind nur einige Beispiele dafür, was du mit der Interaktivitäts-API auf deinen Websites umsetzen kannst:

Blöcke können Daten, Aktionen und Rückrufe untereinander austauschen. Das macht die Kommunikation zwischen Blöcken einfacher und weniger fehleranfällig. Wenn du zum Beispiel auf einen „In den Warenkorb“-Block klickst, kann ein separater „Warenkorb“-Block nahtlos aktualisiert werden.

Und es ist unglaublich schnell. Alle Skripte, die zum Hinzufügen von Interaktivität erforderlich sind, werden nur dann im Frontend geladen, wenn du mindestens einen interaktiven Block auf der Seite hast.

Die Interaktivitäts-API ist ein moderner Ansatz für die Frontend-Entwicklung, der die Leistung von benutzerdefinierten HTML-Attributen nutzt, um die Menge an JavaScript zu reduzieren, die für die Interaktivität auf deinen Seiten benötigt wird.

Wenn du mit Frontend-Bibliotheken wie HTMX und Alpine.js vertraut bist, wirst du dich freuen, dass die gleiche Logik mit der Interaktivitäts-API in WordPress implementiert wurde. Was hat es damit auf sich? Lass uns tiefer eintauchen.

Was ist die Interaktivitäts-API?

Die Interaktivitäts-API ist ein neues Standardsystem von Direktiven für die Erstellung interaktiver Blöcke, mit dem Entwickler/innen auf einfache Weise Interaktivität in das Frontend ihrer Blöcke einbauen können, damit Website-Besucher/innen mit deinen Inhalten interagieren können, ohne die Seite neu laden zu müssen. Denkbar sind z. B. die Sofortsuche, das Hinzufügen von Kommentaren, das Hinzufügen zu einem Warenkorb und die dynamische Paginierung.

Die neue API erfüllt eine Reihe von Anforderungen, die sie zu einem modernen Entwicklungstool machen, darunter die folgenden:

Sie unterstützt Server-seitiges Rendering und Client-hydriertes HTML.
Sie funktioniert gut mit PHP und dem aktuellen Blocksystem.
Es ist rückwärtskompatibel mit WordPress-Hooks und bestehenden JavaScript-Bibliotheken.
Sie verfolgt einen deklarativen Ansatz anstelle eines imperativen Ansatzes.
Sie ist performant und erweiterbar.
Sie ist atomar und zusammensetzbar: Jede Direktive steuert einen kleinen Teil des DOM, und mehrere Direktiven können kombiniert werden, um komplexe Anwendungen zu erstellen.
Sie ist mit den bestehenden WordPress-Entwicklungstools kompatibel.

Wie bereits erwähnt, basiert die Interaktivitäts-API auf Direktiven. Das sind spezielle HTML-Attribute, mit denen du DOM-Elementen ein bestimmtes Verhalten zuweisen kannst. Hier ist ein Beispiel für einen interaktiven Block:

<div
	<?php echo get_block_wrapper_attributes(); ?>
	data-wp-interactive='{ "namespace": "create-block" }'
	data-wp-context='{ "isOpen": false }'
	data-wp-watch="callbacks.logIsOpen"
>
	<button
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
		aria-controls="<?php echo esc_attr( $unique_id ); ?>"
	>
		<?php esc_html_e( 'Toggle', 'inter-block' ); ?>
	</button>

	<p
		id="<?php echo esc_attr( $unique_id ); ?>"
		data-wp-bind--hidden="!context.isOpen"
	>
		<?php
			esc_html_e( 'Inter Block - hello from an interactive block!', 'inter-block' );
		?>
	</p>
</div>

WordPress verarbeitet diese Direktiven auf dem Server und erzeugt das entsprechende Markup.

Wie man mit der Interaktivitäts-API anfängt

Die Implementierung der Interaktivitäts-API hat keinen Einfluss auf den Workflow der Blockerstellung. Du kannst ein Plugin erstellen, das einen interaktiven Block mit dem Befehl @wordpress/create-block und einer bestimmten interaktiven Vorlage registriert.

Starte dein bevorzugtes Kommandozeilentool, navigiere zu deinem Plugins-Verzeichnis und führe den folgenden Befehl aus:

npx @wordpress/create-block@latest my-interactive-block --template @wordpress/create-block-interactive-template

Dies erzeugt einen interaktiven Block aus einer Vorlage, die das Metadatenfeld viewScriptModule verwendet. Das Skriptmodul, das in viewScriptModule deklariert ist, wird in die Warteschlange gestellt, wenn ein Block auf dem Frontend gerendert wird. (Siehe auch viewScriptModule und Script Modules dev notes.)

Ein interaktives Blockprojekt in Visual Studio Code

Sobald der Installationsprozess abgeschlossen ist, findest du ein neues Plugin in deinem WordPress-Dashboard. Aktiviere es, gehe dann zurück zur Kommandozeile, navigiere zum Verzeichnis des neuen Plugins und starte den Dienst:

cd my-interactive-block && npm start

Erstelle nun einen neuen Beitrag oder eine neue Seite, öffne den Block-Inserter und scrolle nach unten zum Abschnitt Widgets. Dort findest du einen neuen Block namens Mein interaktiver Block, den du als Vorlage für neue spannende und interaktive Kreationen verwenden kannst:

Füge den Block zu deinem Inhalt hinzu und speichere den Beitrag. In der Beitragsvorschau wird ein Kippschalter angezeigt, der einen Blindtext ein-/ausblendet. Und das war’s. Jetzt kannst du anfangen, interaktive Blöcke zu erstellen.

Mehr darüber, wie du mit der Interaktivitäts-API interaktive Blöcke erstellst, erfährst du im WordPress Core Blog, in der GitHub-Dokumentation und in der Interaktivitäts-API-Entwicklungsnotiz.

Ein gutes Beispiel für die Interaktivitäts-API ist die Demo-Website wpmovies.dev.

Neue Design-Tools

Mit WordPress 6.5 werden auch neue Design-Tools eingeführt, mit denen du dein Design weiter anpassen kannst, ohne auf eigenen CSS-Code angewiesen zu sein.

Unterstützung für Größe und Wiederholung des Hintergrundbildes für den Gruppenblock

Der Gruppenblock unterstützt jetzt die Größen- und Wiederholungsfunktionen für Hintergrundbilder. Damit kannst du auch die Größe des Hintergrundbildes so einstellen, dass es das Seitenverhältnis beibehält.

Steuerung der Größe des Hintergrundbildes für einen Gruppenblock

Wenn du die Größe des Hintergrunds auf Fest eingestellt hast, wird außerdem ein Umschalter für die Wiederholung angezeigt, mit dem du den sich wiederholenden Hintergrund aktivieren oder deaktivieren kannst.

Unterstützung des Seitenverhältnisses für den Cover-Block

Der Cover-Block hat Unterstützung für das Seitenverhältnis erhalten. Du kannst das Seitenverhältnis des Blocks auf globaler Ebene über die Schnittstelle Globaler Stil steuern oder es individuell in deinem Inhalt anpassen.

Die Steuerung des Seitenverhältnisses für den Cover-Block

Schattenunterstützung für weitere Blöcke

Bislang war der Button-Block der einzige Block, der Schatten unterstützt hat. Mit WordPress 5.6 werden nun auch die Blöcke Columns, Column und Image von Schatten unterstützt.

Du kannst diesen Blöcken auf der Registerkarte Stile in den Blockeinstellungen einen Schatten hinzufügen.

Der Image-Block unterstützt jetzt Schatten

Aktualisierungen im Seiteneditor

Mehrere Verbesserungen am Seiteneditor sollen dein Bearbeitungserlebnis deutlich verbessern und deinen Arbeitsablauf rationalisieren.

Erweiterungen der Listenansicht

Die Listenansicht ist ein zentrales Element des Design-Workflows, und WordPress 6.5 führt eine Handvoll Verbesserungen ein.

Erstens kannst du jetzt mit der rechten Maustaste auf die Listenansicht klicken, um das Dropdown-Menü für die Blockeinstellungen aufzurufen. Dies ist eine kleine, aber nützliche Verbesserung, die deinen Erstellungsprozess vereinfacht, da du nun leichter von der Listenansicht aus auf die Blockeinstellungen zugreifen kannst.

Eine zweite Verbesserung ermöglicht es dir, fast alle Blöcke in der Listenansicht umzubenennen, mit Ausnahme der folgenden Blöcke:

core/block
core/template-part
core/pattern
core/navigation

Auch die Listenansicht wurde um ein Tastaturkürzel erweitert. Du kannst jetzt alle Blöcke in der Listenansicht mit der Tastenkombination STRG + A unter Windows und CMD + A auf dem Mac auswählen. Auf diese Weise kannst du ganz einfach Aktionen in großen Mengen durchführen.

Duplizieren und Umbenennen von Mustern

Muster, die von Themes bereitgestellt werden, können nicht bearbeitet werden. Du kannst sie also nicht verwenden, um deine eigenen Muster zu erstellen oder einfach etwas im Muster zu ändern. Mit WordPress 6.5 wurde eine kleine, aber nützliche Funktion hinzugefügt, mit der du Muster aber duplizieren und umbenennen kannst.

Es ist jetzt möglich, Muster umzubenennen und zu löschen

Außerdem wurden zwei neue Musterkategorien hinzugefügt: Audio und Video.

Das Muster-Kategorien-Panel in WordPress 6.5

Ein verbessertes Einstellungsfenster

Mit WordPress 6.5 wurde das Einstellungsfeld aktualisiert und die bestehenden Einstellungen wurden neu organisiert. Zu den wichtigsten Änderungen gehören:

Neue Bereiche „Erscheinungsbild“ und „Barrierefreiheit“.
Eine neue Einstellung für die obere Symbolleiste unter Erscheinungsbild.

Wenn du die Top-Symbolleiste aktivierst, werden alle Block- und Dokumentwerkzeuge in einer einzigen Symbolleiste am oberen Rand des Editors zusammengefasst.

Die überarbeitete Einstellungsoberfläche mit aktivierter Top-Symbolleiste

Symbolleiste im ablenkungsfreien Modus blockieren

Vor WordPress 6.5 war der Zugriff auf die Block-Symbolleiste im ablenkungsfreien Modus nicht möglich, und du warst gezwungen, sie bei jeder Änderung ein- und auszuschalten. Seit WordPress 6.5 wird die Blocksymbolleiste für deine Anpassungen angezeigt, wenn du den Mauszeiger über den oberen Bereich des Editors bewegst.

Verbesserte LinkControl-Komponente

Das LinkControl wurde verbessert und das Hinzufügen von Links ist jetzt einfacher. Das folgende Bild zeigt das neue Panel, das erscheint, wenn du auf einen Link klickst, um ihn zu bearbeiten.

Eine vollständige Liste der Änderungen an der Komponente LinkControl findest du in PR #50891.

Verbesserungen bei Drag & Drop

Drag & Drop wurde in mehreren Bereichen des Editors verbessert.

In der Listenansicht:

Wenn du einen Block in einen eingeklappten Block ziehst, wird der eingeklappte Block ausgeweitet.
Ein Ziehcursor wird angezeigt, wenn du Elemente ziehst.

Im Editor-Canvas:

Du kannst jetzt Elemente an den Anfang oder das Ende deines Inhalts ziehen und dort ablegen.
Das Ziehen und Ablegen von Elementen zwischen geschwisterlichen Containerblöcken wurde verbessert.
Es ist auch möglich, Blöcke in Vorlagenteile zu ziehen.
Ein neuer visueller Hinweis informiert dich jetzt darüber, dass ein Block nicht gezogen werden kann.
Du kannst Elemente an den Anfang oder das Ende eines Dokuments ziehen und dort ablegen.
Du kannst Reihen oder Galerien erstellen, indem du Blöcke einfach in die Nähe anderer Blöcke ziehst und fallen lässt. Wenn du zum Beispiel ein Bild neben einem anderen Bild hinzufügst, wird der bestehende Bildblock in einen Galerieblock umgewandelt.

Ziehen und Ablegen eines Bildes neben einem Bildblock

Du kannst jetzt einen Bildblock durch Ziehen und Ablegen von Bildern in eine Galerie umwandeln

Eine umfassendere Liste der Verbesserungen beim Ziehen und Ablegen findest du in der Ausgabe über das Ziehen und Ablegen von Blöcken.

Weitere Änderungen und Verbesserungen

Aber halt, das ist noch nicht alles! WordPress 6.5 bringt auch eine Reihe anderer Änderungen und Verbesserungen, die es wert sind, erwähnt zu werden.

Erscheinungsbild-Tools für klassische Themes

Klassische Themes können auch ohne die Verwendung der theme.json einige der im Site-Editor eingeführten Gestaltungsfunktionen nutzen. Ab WordPress 6.5 kann man mit der Theme-Unterstützung von appearanceTool die folgenden Design-Funktionen nutzen:

Umrandung
Farbe
Abstände
Typografie

So können Nutzerinnen und Nutzer klassischer Themes eine Vorschau auf die Möglichkeiten des Website-Editors erhalten und den Übergang von klassischen zu Block-Themes vereinfachen.

Erscheinungsbild-Tools in WordPress 6.5 mit Twenty Twenty-One Theme

AVIF-Unterstützung

WordPress 6.5 führt auch die Unterstützung für das AVIF-Bildformat ein, das sich durch einen fortschrittlichen Kompressionsalgorithmus auszeichnet, der eine bessere Bildqualität bei einer höheren Kompressionsrate ermöglicht. Daher liefert AVIF kleinere Bilddateien als herkömmliche Formate, einschließlich des WebP-Formats.

Nutzer/innen können AVIF-Dateien jetzt nahtlos über die WordPress-Mediathek hochladen, ähnlich wie andere Bildformate. Überprüfe jedoch, ob deine Hosting-Plattform mit dem AVIF-Dateiformat kompatibel ist.

AVIF-Bildformat Browserunterstützung (Quelle: Can I Use)

Du kannst überprüfen, ob dein Hoster das AVIF-Bildformat unterstützt, indem du auf dem Bildschirm Site Health deiner WordPress-Installation auf die Registerkarte Info klickst und den Abschnitt Media Handling erweiterst.

Plugin-Abhängigkeiten

Einige Plugins fügen neue Funktionen als Erweiterungen/Add-ons zu anderen Plugins hinzu. Damit diese Plugins funktionieren, musst du zuerst ihre Abhängigkeiten installieren und aktivieren – also die Plugins, auf die sie angewiesen sind.

Seit WordPress 6.5 können Plugin-Entwickler einen neuen Plugin-Header „Requires Plugins“ verwenden. Dieser Header schaltet eine leistungsstarke Funktion frei, die den Prozess der Installation und Aktivierung von Abhängigkeiten vereinfacht. Er enthält eine durch Kommata getrennte Liste der Abhängigkeiten, die ein abhängiges Plugin benötigt, um zu funktionieren.

Er enthält Informationen für den Nutzer des Plugins mit Links zum WordPress.org Plugins Repository, um die Abhängigkeiten zu installieren und zu aktivieren.

Außerdem bietet das Abhängigkeits-Plugin eine „Erforderlich für“-Angabe, in der die abhängigen Plugins aufgelistet sind, die es benötigen, um zu funktionieren. Du wirst außerdem feststellen, dass du das Abhängigkeits-Plugin nur löschen kannst, wenn du das abhängige Plugin löschst.

WordPress 6.5 führt auch einen neuen wp_plugin_dependencies_slug Filter ein, mit dem du Abhängigkeits-Plugins programmatisch filtern kannst.

In der Dev Note zu Plugin-Abhängigkeiten findest du eine ausführlichere Beschreibung.

Aktualisierungen der HTML-API

Mit WordPress 6.5 wurde der HTML-API-Tag-Prozessor verbessert. Er scannt jetzt alle Arten von Syntax-Token, einschließlich Tag- und Nicht-Tag-Token, Kommentare, Doctype-Definitionen und Textknoten.

Dies ermöglicht die Änderung des Textes innerhalb der Token-Grenzen, der als veränderbarer Text bezeichnet wird, ohne die Struktur eines Dokuments zu beeinträchtigen.

Veränderbarer Text ist der gesamte Inhalt eines Textknotens, der Inhalt eines HTML-Kommentars oder der Inhalt zwischen den öffnenden und schließenden Tags spezieller Elemente, wie script oder style.

Es wurden eine Reihe neuer Methoden eingeführt:

next_token() – springt zum nächsten Token im Dokument
get_token_type() – ermittelt den Typ des gefundenen Tokens
get_token_name() – ermittelt den Namen eines Tokens
get_modifiable_text() – gibt den korrekt dekodierten Textinhalt für ein bestimmtes Token zurück.
get_comment_type() – liefert den Typ des Kommentars
paused_at_incomplete_token() – gibt true zurück, wenn der Tag-Prozessor das Ende eines Dokuments erreicht, das in der Mitte eines Tokens abgeschnitten wurde.

Eine ausführlichere Übersicht findest du in der Dev Note Updates to the HTML API in 6.5.

Vereinheitlichung von Site- und Post-Editor

In WordPress 6.5 erhalten die Editoren mehrere Updates, um die Benutzeroberfläche und das Verhalten zu vereinheitlichen.

Mehrere Sidebar-Panels wurden aus dem Edit-Post-Paket in das @wordpress/editor -Paket verschoben, um die entsprechenden Funktionalitäten in den Site-Editor zu bringen:

Seitenattribute (PR #57151)
Beitrags-Taxonomie (PR #57049)
Der Link Ansicht wurde zum Site-Editor für Beitragstypen hinzugefügt (PR #57153)
Das Diskussions-Panel wurde zur Seitenleiste des Seiteneditors für Beitragstypen hinzugefügt, die es unterstützen (PR #57150)
Das Bedienfeld „Featured Image“ wurde hinzugefügt (PR #57053)
Das Revisions-Panel wurde zum Editor hinzugefügt (PR #57010)

Eine weitere Änderung ermöglicht es dir, eine Vorschau der Vorlage zu sehen, wenn du eine Seite im Beitragseditor bearbeitest, wie es bereits im Seiteneditor möglich war.

Leistungsverbesserungen

Mehr als 110 Leistungsverbesserungen führen zu einem deutlichen Geschwindigkeits- und Effizienzsprung sowohl im Post-Editor als auch im Site-Editor. Die Ladezeiten sind jetzt doppelt so schnell wie in Version 6.4, und die Geschwindigkeit der Eingabeverarbeitung ist fast viermal so hoch. Außerdem trägt die Integration der i18-Bibliothek von Performant Translations dazu bei, den Speicherverbrauch und die Ladezeiten übersetzter Websites zu reduzieren.

Verbesserungen der Zugänglichkeit

Mit der Veröffentlichung von WordPress 6.5 werden mehr als 65 Aktualisierungen in den Kern integriert, um die Zugänglichkeit im gesamten Verwaltungsbereich zu verbessern. Zu diesen Verbesserungen gehören der Fokus-Stil, das Kontrastverhältnis, die Anordnung des Customizer-Menüs und vieles mehr.

Updates für Block Hooks

Die mit WordPress 6.4 eingeführten Block Hooks ermöglichen es, einen Block automatisch an einer bestimmten Stelle zu platzieren, wenn ein anderer Block zum Inhalt hinzugefügt wird.

Block Hooks waren bisher für Vorlagen, Vorlagenteile und Muster verfügbar, die keine Änderungen durch den Benutzer enthielten. Jetzt können sie auch mit geänderten Layouts verwendet werden.

Vor WordPress 6.5 konnte ein Hooked Block nur vor oder nach dem Navigationsblock hinzugefügt werden. Mit dieser Version können Hooked Blocks auch als erstes oder letztes Kind zu einem Navigationsblock hinzugefügt werden.

Außerdem führt diese Iteration die neuen Filter hooked_block und hooked_block_{$hooked_block_type} ein.

Einen tieferen Überblick und Beispiele für die Verwendung findest du in der Dev Note zu den Block Hook Updates.

Zusammenfassung

WordPress 6.5 bringt viele Änderungen mit sich, die dich bei der Erstellung von Seiten und Inhalten glücklich machen werden.

Die neue WordPress-Schriftartenbibliothek ermöglicht es dir, Schriften ähnlich wie in der Mediathek zu verwalten und gibt dir so mehr Kontrolle über die Typografie. Mit DataViews kannst du deine Datensätze mit verschiedenen Layouts, Filtern und Suchoptionen darstellen und so das Gesamterlebnis verbessern. Mit der Block Bindings API und der Interactivity API kannst du den Nutzern deiner Website ein dynamischeres und persönlicheres Erlebnis bieten.

Mit all diesen spannenden Neuerungen ist WordPress 6.5 ein echter Wendepunkt.

Hast du die neue WordPress-Version in deiner Entwicklungsumgebung getestet? Was sind deine Lieblingsfunktionen von WordPress 6.5? Teile uns deine Meinung in den Kommentaren mit.

Carlo Daniele Kinsta

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