Lasst die Korken knallen! Mit der Version 7.0 beginnt für WordPress eine neue Ära.

Es ist wahrscheinlich der größte Sprung, den die Plattform in den letzten Jahren gemacht hat. Jetzt kannst du mit deinem Team in Echtzeit zusammenarbeiten – genau wie bei Google Docs – und eine „agentechnische Architektur“ nutzen, die mit Large Language Models (LLMs) interagieren kann.

Aber das ist nur der Anfang. Neben der Echtzeit-Zusammenarbeit verbessert WordPress 7.0 auch die Verwaltungsoberfläche und führt neue Blöcke und Entwickler-Tools ein, wie z. B. den iframed Post Editor und reine PHP-Blöcke.

Mach dir eine Tasse Kaffee und mach es dir bequem, denn dies wird eine lange und spannende Lektüre werden.

Integration mit KI

Mit 7.0 hat WordPress einen großen Evolutionssprung gemacht. Vergiss die Blogging-Plattform aus den Anfangstagen. Heute ist WordPress eine kollaborative Plattform, die künstliche Intelligenz integriert.

Dieses ehrgeizige Projekt hatte zum Ziel, eine zuverlässige, sichere Infrastruktur zu schaffen, die es WordPress-Nutzern und Plugin-Entwicklern ermöglicht, auf standardisierte Weise mit Large Language Models (LLMs) zu interagieren.

Das neue architektonische Paradigma ebnet den Weg für „agentic WordPress“. Es ist ein Wandel hin zu agentenbasierter Benutzerfreundlichkeit, bei der WordPress von Haus aus in der Lage ist, über standardisierte, maschinenfreundliche Schnittstellen mit externen KI-Agenten zu interagieren.

Es gibt viel zu sagen, aber bevor wir uns mit den Details der KI-Integration befassen, hier ein paar vorläufige Definitionen.

WordPress KI-Architektur: Grundlegende Konzepte

Um die KI-Architektur von WordPress 7.0 zu verstehen, ist es wichtig, vier wichtige Komponenten zu identifizieren.

  • KI-Client: Eine anbieterunabhängige KI-Infrastruktur, die einen standardisierten Weg für WordPress-PHP- und JS-Code zur Interaktion mit generativen KI-Modellen bietet. Da der KI-Client anbieterunabhängig ist, kann das System unabhängig von einem bestimmten KI-Anbieter arbeiten.
  • KI-Anbieter: Die Einrichtung oder das Unternehmen, das Large Language Models (LLMs) entwickelt, besitzt und verwaltet, wie z. B. Anthropic, Google und OpenAI.
  • Konnektor: Die Komponente, die die Integration zwischen WordPress und KI-Anbietern ermöglicht. WordPress 7.0 enthält 3 Standardkonnektoren – OpenAI, Anthropic und Google -, die unter Einstellungen > Konnektoren zugänglich sind.
  • Abilities API: Eine neue funktionale Schnittstelle, die es Plugins, Themes und dem WordPress-Kern ermöglicht, ihre Fähigkeiten sowohl in menschen- als auch in maschinenlesbaren Formaten offenzulegen, damit KI-Agenten auf strukturierte Weise mit WordPress-Funktionen interagieren können (z. B. Beiträge erstellen oder einen Auszug hinzufügen). Das macht WordPress 7.0 zu einem nativen Agentensystem.
Konnektoren Bildschirm in WordPress 7.0.
Konnektoren Bildschirm in WordPress 7.0.

Konnektoren

In früheren Versionen von WordPress war für jeden KI-Anbieter, den du auf deiner Website nutzen wolltest, ein eigenes Plugin erforderlich. WordPress 7.0 führt eine einheitliche Oberfläche für die Verwaltung von KI-Anbietern unter Einstellungen > Anbieter ein.

Du musst deine API-Schlüssel nicht mehr an mehreren Stellen einfügen. Gib deine Schlüssel nur einmal auf dem Bildschirm Verbindungen ein, und alle kompatiblen Plugins können diese Verbindung über den KI-Client nutzen.

Außerdem kannst du mit der neuen Schnittstelle von einer einzigen Stelle aus zwischen den KI-Anbietern wechseln, ohne dass du Gefahr läufst, etwas kaputt zu machen.

Klicke in der Schnittstelle Konnektoren auf die Schaltfläche Installieren für deinen KI-Anbieter und gib deinen API-Schlüssel ein. Speichere deine Einstellungen und du bist bereit, mit dem KI-Anbieter auf deiner WordPress-Website zu interagieren.

Hinzufügen eines API-Schlüssels in der Konnektoren-Oberfläche
Hinzufügen eines API-Schlüssels in der Konnektoren-Oberfläche

Wenn du dir nicht sicher bist, wo du anfangen sollst, installiere und aktiviere das KI-Experimente-Plugin. Mit diesem Plugin kannst du KI-generierte Bilder, Alt-Text, Auszüge und mehr hinzufügen.

Einstellungen des KI-Experimente-Plugins
Einstellungen des KI-Experimente-Plugins

Die neue KI-Integration führt nicht nur eine neue Benutzeroberfläche ein, sondern ermöglicht es Entwicklern auch, neue KI-Anbieter über die Connectors API zu registrieren.

Entwickler können jetzt Konnektoren mit den neuen Kernklassen und Methoden registrieren und verwalten. Nach der Registrierung erscheint jeder Konnektor als Karte auf dem Bildschirm Konnektoren.

Die neue API bietet außerdem drei öffentliche Funktionen.

  • wp_is_connector_registered(): Prüft, ob ein Konnektor registriert ist.
  • wp_get_connector(): Ruft die Daten eines einzelnen Konnektors ab.
  • wp_get_connectors(): Ruft alle registrierten Konnektoren ab.

Außerdem kannst du mit dem neuen Aktionshaken wp_connectors_init die Metadaten der registrierten Konnektoren überschreiben.

Bauen mit dem KI-Client

Der Bildschirm Konnektoren bietet die KI-Schnittstelle. Der KI-Client ist der Motor unter der Haube – eine einheitliche Abstraktionsschicht, die standardisiert, wie WordPress mit AI interagiert. Ob OpenAI, Anthropic oder Google Gemini, dein Code bleibt derselbe. WordPress kümmert sich um die Übersetzung, damit du dich auf die Logik deiner Anwendung konzentrieren kannst.

Die neue Funktion wp_ai_client_prompt() ist das Herzstück dieser Implementierung.

Hier ist ein einfaches Beispiel in PHP:

$ai_response = wp_ai_client_prompt( "Create a professional post about WordPress" )
	->generate_text();

if ( is_wp_error( $ai_response ) ) {
	wp_die( $ai_response->get_error_message() );
}

echo wp_kses_post( $ai_response );

Das folgende Beispiel zeigt, wie du das Antwortschema definierst, um die Daten direkt nutzbar zu machen.

$taxonomy_schema = array(
	'type'       => 'object',
	'properties' => array(
		'category' => array( 'type' => 'string' ),
		'tags'     => array( 
			'type'  => 'array',
			'items' => array( 'type' => 'string' )
		),
	),
	'required'   => array( 'category', 'tags' ),
);

$post_body = "Working from a small tavern in Crete was a game-changer. I realized that Greece is becoming the ultimate hub for remote workers in 2026.";

$json = wp_ai_client_prompt( "Based on this text, suggest the most appropriate category and 3-5 relevant tags: $post_body" )
	->using_temperature( 0.1 )
	->as_json_response( $taxonomy_schema )
	->generate_text();

if ( is_wp_error( $json ) ) {
	return $json;
}

$suggested_taxonomies = json_decode( $json, true );

In diesem Code,

  • Mit as_json_response() stellt WordPress sicher, dass die Ausgabe reines JSON ist, das dem angegebenen Schema ($taxonomy_schema) entspricht.
  • using_temperature() steuert die Reaktion der KI und macht sie mehr oder weniger deterministisch (oder zufällig). Eine niedrige Temperatur (0,1) sorgt für mehr Präzision, während eine hohe Temperatur eine kreativere Reaktion fördert.
  • Das Array $suggested_taxonomies enthält die von der KI generierten Kategorien und Tags. Du kannst diese automatisch deinem Beitrag zuweisen.

Eine strukturierte Ausgabe sorgt für vorhersehbare Ergebnisse und bietet ein ideales Format für die Verwendung mit der Abilities API. Der obige Code könnte zum Beispiel verwendet werden, um automatisch einen Beitrag mit der angegebenen Kategorie und den Tags zu erstellen.

Die API unterstützt nicht nur Text. Dank der Methode generate_image() kann der KI-Client auch Bilder erzeugen. Du kannst mit einem einzigen Aufruf mehrere Ergebnisse anfordern.

Du kannst zum Beispiel 3 Text- oder Bildoptionen anfordern, indem du einen numerischen Wert an die Methoden generate_text() oder generate_image() übergibst: Der Aufruf von generate_image( 3) liefert 3 Varianten desselben Bildes.

Die API bietet auch eine Reihe von Methoden, die zusätzliche Informationen zurückgeben. Diese Methoden geben ein GenerativeAiResult-Objekt zurück, das umfangreiche Metadaten enthält, z. B. die Verwendung des Tokens, den Anbieter und das Modell, das auf die Anfrage geantwortet hat:

  • generate_text_result()
  • generate_image_result()
  • convert_text_to_speech_result()
  • generate_speech_result()
  • generate_video_result()

Wie du siehst, bieten diese Methoden eine Reihe zusätzlicher Funktionen, darunter die Unterstützung von Text-zu-Sprache-, Sprach- und Videoumwandlung. Weitere API-Methoden sind:

  • using_max_tokens(): Begrenzt die Länge der Antwort (z. B. ->using_max_tokens( 500 ))
  • using_model_preference(): Ein bestimmtes Modell festlegen (z. B. ->using_model_preference( 'gemini-2.5-flash' ))

Eine ausführlichere Analyse und zusätzliche Codebeispiele findest du auf der WP KI-Client GitHub-Projektseite und in den Änderungen, die in Vorbereitung auf WordPress 7.0 vorgenommen wurden.

Zusammenarbeit in Echtzeit im Block-Editor

Die Echtzeit-Zusammenarbeit (Real-Time Collaboration, RTC) im Block-Editor ist eine der am sehnlichsten erwarteten Funktionen des Core. Mit WordPress 7.0 wird die Möglichkeit eingeführt, denselben Beitrag oder dieselbe Seite synchron mit mehreren Nutzern zu bearbeiten, ähnlich wie bei einem Google Doc.

Im Wesentlichen wird WordPress 7.0 von einer Einzelbenutzerplattform zu einer Multi-User-Plattform umgewandelt. Das bedeutet eine grundlegende Veränderung für Redaktionen, die mit WordPress arbeiten.

Mit diesem Projekt werden mehrere Ziele verfolgt:

  • Ermöglichung der Echtzeit-Zusammenarbeit an Inhalten, einschließlich Beiträgen, Seiten und Vorlagen.
  • Offline-Bearbeitung und Datensynchronisation ermöglichen.
  • Ein optimiertes Entwicklungserlebnis bieten, damit sich Entwickler/innen nicht um die gemeinsame Bearbeitung kümmern müssen, da die Daten standardmäßig gemeinsam bearbeitet und synchronisiert werden.

Diese erste Implementierung führt eine Reihe von neuen Funktionen ein, die sowohl die Nutzer/innen des Editors als auch die Entwickler/innen betreffen. Lasst uns eintauchen.

Zusammenarbeit in Echtzeit im Block-Editor: Was ist neu für Benutzer?

Wenn du in einem Team arbeitest, musst du nicht mehr darauf warten, dass dein Kollege den Editor verlässt, um Inhalte zu überprüfen oder Änderungen vorzunehmen, denn ihr könnt jetzt in Echtzeit an der Produktion von Inhalten mitarbeiten.

Vergewissere dich zunächst, dass die Option Echtzeit-Zusammenarbeit aktivieren in den Schreibeinstellungen aktiviert ist.

Echtzeit-Zusammenarbeit in WordPress 7.0 aktivieren.
Echtzeit-Zusammenarbeit in WordPress 7.0 aktivieren

Als Nächstes öffnest du den Post-Editor mit anderen Mitgliedern deines Teams oder öffnest mehrere Sitzungen mit verschiedenen Nutzern und fängst an zu experimentieren.

Dies sind die wichtigsten Punkte der kollaborativen Bearbeitung.

Bewusstseinsbildung

Wenn mehrere Nutzer/innen gemeinsam an einem Beitrag oder einer Seite arbeiten, erscheinen die Avatare der anderen Nutzer/innen in der oberen Symbolleiste des Blockeditors.

Avatare der Mitwirkenden erscheinen oben im Editor
Avatare der Mitwirkenden erscheinen oben im Editor

Änderungen, die ein/e Mitarbeiter/in vornimmt, sind für den Rest des Teams fast in Echtzeit sichtbar. Wenn ein/e Nutzer/in an einem Textelement arbeitet, erscheint sein/ihr Avatar auch in der Blocksymbolleiste und bewegt sich mit dem Cursor mit.

Ein anderer Nutzer bearbeitet einen Absatzblock
Ein anderer Nutzer bearbeitet einen Absatzblock
Ein anderer Benutzer bearbeitet einen Bildblock
Ein anderer Benutzer bearbeitet einen Bildblock

Wenn ein Benutzer einen neuen Block hinzufügt, wird er mit einem farbigen Rahmen hervorgehoben.

Ein von einem anderen Nutzer hinzugefügter Bildblock erscheint mit einem farbigen Rahmen
Ein von einem anderen Nutzer hinzugefügter Bildblock erscheint mit einem farbigen Rahmen

Synchronisierung mit dem Backend

Dank der Yjs-Integration behandelt das System Konflikte intelligent mit CRDT. Wenn zwei Nutzer/innen zur gleichen Zeit am gleichen Block arbeiten oder das gleiche Wort schreiben, gleicht das System die Änderungen reibungslos ab. Auch Änderungen an Blockeigenschaften, wie Farben und Schriftarten, werden nahtlos übernommen.

Bearbeitung von Blockstileinstellungen in Zusammenarbeit in WordPress 7.0
Bearbeitung von Blockstileinstellungen in Zusammenarbeit in WordPress 7.0

Offline-Bearbeitung und Datensynchronisierung

Das System funktioniert auch dann reibungslos, wenn du offline bist. Wenn du also in Gebieten mit langsamen Verbindungen arbeitest oder für ein paar Minuten offline gehst, kannst du trotzdem schreiben. Wenn das Signal wieder da ist, werden deine Änderungen mit den Änderungen der anderen zusammengeführt und es gibt keine unerwünschten Überschreibungen.

Wenn du einen Vorgang rückgängig machst (Cmd Z), werden nur deine letzten Änderungen rückgängig gemacht, nicht die, die deine Kollegen eine Sekunde zuvor gemacht haben.

Du musst dir keine Gedanken darüber machen, dass du deine Arbeit ständig speichern musst, um sie mit anderen zu teilen. Die Synchronisierung erfolgt fast in Echtzeit. Andere Nutzer, die mit dir verbunden sind und an denselben Inhalten arbeiten, sehen deine Änderungen nahezu sofort.

Zusammenarbeit in Echtzeit im Block Editor: Eine Einführung für Entwickler

Das neue WordPress-Echtzeit-Kollaborationssystem basiert auf Yjs, „einer leistungsstarken CRDT für die Erstellung von kollaborativen Anwendungen, die sich automatisch synchronisieren.“

Yjs ist eine JavaScript-Bibliothek zur Verwaltung von Daten, wie z. B. WordPress-Inhalten, die von mehreren Personen gleichzeitig und in Echtzeit bearbeitet werden müssen. Sie ist die Sync-Engine für die Echtzeit-Zusammenarbeit im Editor.

Technisch gesehen, ist Yjs eine Implementierung von CRDT (Conflict-free Replicated Data Types):

Es stellt sein internes CRDT-Modell als gemeinsam genutzte Datentypen zur Verfügung, die gleichzeitig bearbeitet werden können. Shared Types ähneln gängigen Datentypen wie Map und Array. Sie können manipuliert werden, bei Änderungen Ereignisse auslösen und automatisch zusammengeführt werden, ohne dass es zu Konflikten bei der Zusammenführung kommt.

Vor WordPress 7.0 wurden Beiträge als ein einziger, statischer HTML-String gespeichert. Yjs verwendet das Delta-Format, um den Inhalt und die Änderungen der einzelnen Mitwirkenden zu beschreiben. Deltas sind ein Datenformat, das Dokumente ohne die Komplexität von HTML beschreibt, einschließlich Formatierungsinformationen.

Betrachten wir zum Beispiel den Text „Hallo WordPress“ Das folgende JSON-Objekt beschreibt eine Änderung der Schriftstärke:

[
	{ "retain": 6 }, // Skip "Hello " (6 characters)
	{ "retain": 9, "attributes": { "bold": true } } // Apply bold to the next 9 characters
]

Wenn ein Benutzer „7.0“ an das Ende des Strings anfügt, sieht das resultierende JSON-Objekt wie folgt aus:

[
	{ "retain": 15 },
	{ "insert": " 7.0" }
]

Die Verwendung von Yjs und die Implementierung des Delta-Formats bietet mehrere Vorteile:

  • Es verhindert alle Arten von Konflikten. Wenn mehrere Nutzer/innen denselben Absatz oder sogar dasselbe Wort bearbeiten, kann WordPress erkennen, wer welchen Buchstaben geschrieben hat. Dies ermöglicht granulare Revisionen und ebnet den Weg für die Wiederherstellung von Revisionen auf Blockebene.
  • Es sorgt für chirurgische Präzision und sofortige Synchronisierung. Wenn du ein einziges Wort in einem Artikel mit 20.000 Wörtern bearbeitest, wird nur diese kleine Änderung registriert. Dies ermöglicht eine sofortige Synchronisierung der Inhalte für alle verbundenen Nutzer/innen.
  • Mit dem gleichen Ansatz können Blockeinstellungen (wie Farben oder Layout-Optionen) als gemeinsame Kartenattribute synchronisiert werden.

Einen ausführlichen Überblick darüber, was Entwickler/innen wissen müssen, um die Zusammenarbeit im Editor zu ermöglichen, findest du in der Dev Note und in dieser Diskussion über kollaborative Bearbeitung.

Infrastruktur und Datentransport: Warum dein Hoster wichtig ist

Wenn mehrere Nutzer/innen gleichzeitig am WordPress-Backend arbeiten, kann das die Ressourcen deiner Website belasten. Deshalb ist es wichtig zu verstehen, was bei der gemeinsamen Bearbeitung hinter den Kulissen passiert.

Wie bereits erwähnt, bilden die Editoroberfläche und die Yjs-Engine die Grundlage für die Zusammenarbeit in Echtzeit. Wir haben jedoch noch nicht erklärt, wie die Daten zwischen den Nutzern übertragen werden. Dieser Prozess wird von der Transportschicht gesteuert, die deine Änderungen von deinem Browser zum Server und dann zu anderen Nutzern, die denselben Inhalt bearbeiten, überträgt.

Von den vielen verfügbaren Optionen für die Transportebene haben HTTP Polling, WebSockets und WebRTC die meiste Aufmerksamkeit erhalten. Jede Option hat ihre Vor- und Nachteile.

  • HTTP Polling wird wegen seiner universellen Unterstützung geschätzt – es funktioniert auf jedem PHP-Server und in jeder Shared-Hosting-Umgebung ohne zusätzliche Einrichtung – ist aber aufgrund des hohen Overheads der ständigen HTTP-Anfragen weniger effizient.
  • WebSockets zeichnet sich durch Ressourceneffizienz und geringe Latenz aus, da Änderungen sofort angezeigt werden.
  • WebRTC ist sehr effizient für kleine Gruppen von Nutzern, da die Browser Daten direkt aneinander senden, ohne dass ein zentraler Server für die Synchronisierung benötigt wird. Allerdings gilt es als unzuverlässig.

Letztendlich wurde die Entscheidung getroffen, die HTTP Polling Lösung zu implementieren. Dies gewährleistet zwar die Zusammenarbeit auf jedem Server, ist aber mit einem höheren Aufwand verbunden und die am wenigsten „echtzeitfähige“ Option. WordPress ist so konzipiert, dass es vom einfachen Shared Hosting bis hin zu großen Unternehmensinfrastrukturen eingesetzt werden kann, weshalb diese Lösung gewählt wurde.

Die Transportebene ist jedoch darauf ausgelegt, ersetzt oder erweitert zu werden. Hosting-Anbieter oder spezialisierte Plugins können das standardmäßige Abfragesystem durch einen leistungsstarken WebSocket-Anbieter ersetzen.

Neue Blöcke und Design-Tools

Mit WordPress 7.0 werden neue Blöcke und Design-Tools eingeführt, die das Bearbeitungserlebnis deutlich verbessern werden. Hier erfährst du, was neu ist und wie sich deine kreativen Arbeitsabläufe verändern.

Neuer Breadcrumbs-Block

WordPress 7.0 führt einen neuen Breadcrumbs-Block ein, der die angezeigte Hierarchie der Website widerspiegelt.

Im Kern enthält der neue Block eine dynamische Komponente, die die WordPress-Datenstruktur abfragt, um automatisch den aktuellen Standort der Website-Besucher/innen auf der Grundlage der Websitehierarchie (Parent/Child) oder der Post-Taxonomiebegriffe zu ermitteln.

In der folgenden Abbildung zeigt der Breadcrumbs-Block die Kategorienhierarchie eines normalen Blogbeitrags an.

Der Breadcrumbs-Block zeigt die Kategorienhierarchie des Beitrags an
Der Breadcrumbs-Block zeigt die Kategorienhierarchie des Beitrags an

Der Breadcrumbs-Block unterstützt auch die Abfrage-Schleife. Wenn du einen Breadcrumbs-Block zu einem Query Loop-Block hinzufügst, zeigt der Block die Pfade der einzelnen Beiträge an, die aus der Abfrage extrahiert wurden.

Der Breadcrumbs-Block hat einige Konfigurationsoptionen, mit denen du:

  • Den Link zur Startseite als Startpunkt der Navigation ein-/ausblenden.
  • Den aktuellen Breadcrumb ein-/ausblenden.
  • Den Breadcrumb-Trenner ändern.
  • Breadcrumbs auf der Startseite anzeigen.
  • Die Beitragshierarchie (Standard) oder die Hierarchie der Taxonomiebegriffe auswählen kannst.

Der Breadcrumbs-Block unterstützt die Gutenberg-Designtools und führt zwei Filter ein, mit denen Entwickler die Breadcrumbs programmatisch steuern können.

Mit dem neuen Filter block_core_breadcrumbs_post_type_settings können Entwickler/innen festlegen, welche Taxonomie und welcher Begriff in den Breadcrumbs verwendet werden soll, wenn ein Beitrag mehrere Taxonomien oder Begriffe enthält.

Im folgenden Beispiel wird der Filter verwendet, um Tags anstelle von Kategorien anzuzeigen:

add_filter( 'block_core_breadcrumbs_post_type_settings', function( $settings, $post_type ) {
	if ( 'post' === $post_type ) {
		$settings['taxonomy'] = 'post_tag';
	}
	return $settings;
}, 10, 2 );

Der Filter block_core_breadcrumbs_items ermöglicht es Entwicklern, Elemente im endgültigen Breadcrumb-Trail zu ändern, hinzuzufügen oder zu entfernen, bevor dieser gerendert wird. Hier sind einige Anwendungsfälle:

  • Ersetze das Home-Symbol durch ein Bild (ein SVG, dein Firmenlogo usw.), um Platz zu sparen oder die Blockausgabe mit dem Branding deiner Website in Einklang zu bringen.
  • Kürze den Titel eines Beitrags in den Breadcrumbs, wenn er zu lang ist.
  • Füge benutzerdefinierte Kategorien oder Begriffe ein, indem du z. B. einen Schritt in den Breadcrumb-Trail erzwingst.

Der folgende Code verwendet den neuen Filter, um die Breadcrumb-Labels zu kürzen, wenn sie länger als 20 Zeichen sind:

add_filter( 'block_core_breadcrumbs_items', function( $items ) {
	foreach ( $items as $key => $item ) {
		if ( mb_strlen( $item['label'] ) > 20 ) {
			// Truncate the string to 17 characters and append '...'
			$items[$key]['label'] = mb_strimwidth( $item['label'], 0, 17, '...' );
		}
	}
	return $items;
}, 10, 1 );

Einen tieferen Überblick über die Breadcrumbs-Blockfilter und weitere Codebeispiele findest du in der Dev Note.

Neuer Icon-Block

Mit dem neuen Icon-Block kannst du SVG-Symbole in deinen Inhalt einfügen. Der neue Block soll eine native Standardlösung für die Verwaltung von Markup und die Sicherstellung der Barrierefreiheit bieten, ohne dass die Installation von Plugins von Drittanbietern erforderlich ist, nur um ein paar Icons hinzuzufügen.

Zurzeit wird der neue Icon-Block mit einem Standardset geliefert, aus dem du deine Icons auswählen kannst. Es ist jedoch geplant, dass die Nutzer/innen in Zukunft auch Iconsets von Drittanbietern registrieren können.

Die Icon-Bibliothek in WordPress 7.0
Die Icon-Bibliothek in WordPress 7.0

Der Block basiert auf einer neuen serverseitigen SVG Icon Registration API. Dadurch wird sichergestellt, dass Aktualisierungen der Icon-Registrierung ohne Fehler an alle Nutzer/innen weitergegeben werden. Die Einführung des neuen Icon-Blocks ist mit einem neuen /wp/v2/icons API-Endpunkt verbunden.

Mit dem neuen Icon-Block ist das Hinzufügen von Icons zu deinen Inhalten ganz einfach
Mit dem neuen Icon-Block ist das Hinzufügen von Icons zu deinen Inhalten ganz einfach

Anpassbare Navigations-Overlays

Vor WordPress 7.0 waren die mobilen Navigationsmenüs fest vorgegeben, und du konntest weder das Design noch das Layout oder den Standardinhalt ändern. Mit WordPress 7.0 werden anpassbare Navigations-Overlays eingeführt, die dir die volle Kontrolle über deine Navigationsmenüs geben. Du kannst ein Menü-Overlay mit Blöcken und Mustern erstellen und mit dem neuen Block Navigation Overlay Close eine Schaltfläche zum Schließen an beliebiger Stelle im Navigations-Overlay einfügen.

Sobald du dein Overlay erstellt hast, findest du es im Bereich Muster in der Seitenleiste des Seiteneditors. Jedes Overlay wird einem Navigationsblock zugewiesen, aber du kannst mehrere Navigationsblöcke demselben Overlay zuweisen.

Im Grunde genommen sind sie eine Blockleinwand, die jede Art von Block aufnehmen kann. Du kannst einen Navigationsblock hinzufügen, aber es liegt ganz bei dir, welche Blöcke du hinzufügst. Das können soziale Symbole, ein Suchfeld, dein Website-Logo und vieles mehr sein.

Navigationsüberlagerungen können nur im Navigationsblock verwendet werden. Um zu verhindern, dass sie versehentlich in anderen Teilen einer Vorlage verwendet werden, sind sie vom Block-Inserter ausgeschlossen.

Erstellen eines Navigations-Overlays in WordPress 7.0
Erstellen eines Navigations-Overlays in WordPress 7.0

Du kannst ein benutzerdefiniertes Navigations-Overlay im Abschnitt Overlays in der Seitenleiste des Navigationsblocks im Seiteneditor erstellen.

Wenn du den Navigationsblock auswählst, werden in der Seitenleiste des Vorlagenteils die Einstellungen für das Navigations-Overlay angezeigt, die in zwei Abschnitte unterteilt sind. Der Abschnitt Inhalt zeigt die im Overlay enthaltenen Blocktypen an, während der Abschnitt Design eine Reihe von vordefinierten Designs bietet.

Einstellungen des Vorlagenteils Navigation Overlay
Einstellungen des Vorlagenteils Navigation Overlay

Die Block-Seitenleiste ist in zwei Registerkarten unterteilt, eine für die Einstellungen und die andere für die Stile der Navigationsüberlagerungsvorlage.

Blöcke in einem Navigations-Overlay konfigurieren
Blöcke in einem Navigations-Overlay konfigurieren

Auf der Registerkarte Stile des Blocks „Navigations-Overlay“ kannst du das Aussehen deines Overlays anpassen, indem du Farben, Hintergrundbild, Typografie, Größe, Rahmen und Schatten einstellst.

Navigation Overlay Stil-Einstellungen
Navigation Overlay Stil-Einstellungen

Theme-Entwickler können ganz einfach vorgefertigte Navigations-Overlays zu ihren Themes hinzufügen. Sie können sowohl einen Standard-Overlay-Vorlagenteil (das Overlay selbst) als auch eine Reihe von Overlay-Mustern (vorgefertigte Designs, die beim Bearbeiten eines Navigations-Overlays erscheinen) bereitstellen.

Der Abschnitt Designs in der Seitenleiste des Vorlagenteils bietet eine Reihe von vorgefertigten Mustern
Der Abschnitt Designs in der Seitenleiste des Vorlagenteils bietet eine Reihe von vorgefertigten Mustern

Einen ausführlicheren Überblick und Codebeispiele findest du in der offiziellen Dev Note und in diesem Pull Request.

Navigation Overlay Blockeinstellungen schließen
Navigation Overlay Blockeinstellungen schließen

Verbesserungen für den Absatz-Block

Mehrere neue Ergänzungen im Absatzblock bieten mehr Flexibilität bei der Textgestaltung.

Erstens kannst du mit einer neuen Option in den Typografieeinstellungen den Einzug der ersten Zeile festlegen.

Zeileneinzugskontrolle in WordPress 7.0
Zeileneinzugskontrolle in WordPress 7.0

Du kannst den Texteinzug für einzelne Absätze steuern oder ihn über die globalen Stileinstellungen unter Editor > Stile > Blöcke > Absatz auf alle Absätze anwenden.

Zeileneinzugskontrolle in Globalen Stilen
Zeileneinzugskontrolle in Globalen Stilen

Theme-Entwickler können den Zeileneinzug in der Datei theme.json mit der neuen Eigenschaft textIndent aktivieren/deaktivieren und granular steuern.

Der Absatzblock unterstützt jetzt auch die breite und vollständige Ausrichtung. Das folgende Bild zeigt das neue Align-Steuerelement.

Der Paragraph-Block unterstützt jetzt eine breite und vollständige Ausrichtung
Der Paragraph-Block unterstützt jetzt eine breite und vollständige Ausrichtung

Eine weitere nützliche Ergänzung des Absatzblocks ist die Unterstützung von Textspalten. Diese neue Option ist unter den Typografieeinstellungen in der Seitenleiste des Blocks verfügbar.

Der Absatz-Block unterstützt jetzt Textspalten
Der Absatz-Block unterstützt jetzt Textspalten

Eingebettete Hintergrundvideos für den Cover-Block

Mit WordPress 7.0 kannst du eingebettete Videos, z. B. von YouTube oder Vimeo, als Hintergrundvideos für den Titelblock verwenden. Zuvor konntest du nur hochgeladene Videos verwenden.

Diese Funktion ist besonders nützlich für diejenigen, die Bandbreite sparen wollen, indem sie Videos auf externen Plattformen hosten.

Video von URL einbetten in WordPress 7.0
Video von URL einbetten in WordPress 7.0

Um ein gehostetes Video hinzuzufügen, klicke in der Symbolleiste des Titelblocks auf Medien hinzufügen und wähle dann Video von URL einbetten.

Video-URL für den Titelblock eingeben
Video-URL für den Titelblock eingeben

Du wirst dann aufgefordert, die Video-URL einzugeben.

Eingebettetes Video als Hintergrundvideo für den Titelblock
Eingebettetes Video als Hintergrundvideo für den Titelblock

Dein eingebettetes Video erscheint als Hintergrundvideo für deinen Cover-Block, sowohl im Editor als auch im Frontend.

Responsiver Rasterblock

Der Grid-Block wurde aktualisiert und ist jetzt nativ responsiv. In früheren WordPress-Versionen konnten Nutzer nur zwischen den Modi Auto und Manuell wählen. Im Auto-Modus konntest du die minimale Spaltenbreite einstellen, um den Block responsiv zu machen. Im manuellen Modus konntest du die Anzahl der Spalten festlegen, die jedoch fest blieb.

Rasterblockeinstellungen in WordPress 6.9
Rasterblockeinstellungen in WordPress 6.9

Ab WordPress 7.0 ist der Grid-Block nativ responsive. Die Anzahl der Spalten verhält sich jetzt wie das Maximum, und du kannst die minimale Spaltengröße und die maximale Anzahl der Spalten feinabstimmen, während der Block responsive bleibt.

Der Grid-Block auf einem großen Bildschirm
Der Grid-Block auf einem großen Bildschirm
Der Grid-Block auf einem kleinen Bildschirm
Der Grid-Block auf einem kleinen Bildschirm

Benutzerdefinierte CSS-Unterstützung für einzelne Blöcke

Du kannst jetzt benutzerdefinierte Stile für einzelne Blöcke in den erweiterten Einstellungen des Blocks hinzufügen.

Benutzerdefinierte CSS-Unterstützung für einzelne Blöcke in WordPress 7.0
Benutzerdefinierte CSS-Unterstützung für einzelne Blöcke in WordPress 7.0

Wenn du einem Block benutzerdefinierte Stile hinzufügst, fügt WordPress automatisch die Klasse has-custom-css hinzu. Wenn du dir den Block im Code-Editor ansiehst, siehst du einen Codeblock ähnlich dem folgenden:

<!-- wp:image {
	"id":848,
	"sizeSlug":"large",
	"linkDestination":"none",
	"style":{ "css":"border: 4px solid blue;" }
} -->
	<figure class="wp-block-image size-large has-custom-css">
		<img src="http://example.com/wp-content/uploads/2026/03/example-768x1024.jpg" alt=" class="wp-image-848"/>
	</figure>
<!-- /wp:image -->

Der benutzerdefinierte Stil wird nach den WordPress-Standardeinstellungen und den globalen Stilen geladen, so dass Änderungen, die du vornimmst, keine Auswirkungen auf das Aussehen anderer Instanzen desselben Blocks haben.

Blocksichtbarkeit basierend auf dem Viewport

In WordPress 7.0 kannst du Blöcke individuell ein- und ausblenden, je nachdem, ob sich der Nutzer auf einem Mobilgerät, einem Tablet oder einem Desktop befindet.

Diese erste Iteration fügt die neue Eigenschaft viewport zu blockVisibility hinzu.

{
	"metadata": {
		"blockVisibility": {
			"viewport": {
				"mobile": false,
				"tablet": true,
				"desktop": true
			}
		}
	}
}

Du kannst die Sichtbarkeitskontrolle aktivieren, indem du das obige JSON-Objekt direkt im Code-Editor oder über die Befehlspalette zu dem Block hinzufügst.

Aktiviere die Sichtbarkeitskontrolle des Blocks über die Befehlspalette
Aktiviere die Sichtbarkeitskontrolle des Blocks über die Befehlspalette

Wenn du die Blocksichtbarkeitskontrolle aktiviert hast, kannst du auf die Optionen für die Blocksichtbarkeit zugreifen, indem du das Modal über die Blocksymbolleiste, die Seitenleiste des Blockinspektors oder die Befehlspalette öffnest.

Das Blocksichtbarkeitsmodal in WordPress 7.0
Das Blocksichtbarkeitsmodal in WordPress 7.0

Zukünftige Versionen sollen konfigurierbare Haltepunkte und eine Integration mit theme.json für die Blocksichtbarkeit enthalten.

Styling-Optionen für den Math-Block

Vor WordPress 7.0 konnten die Nutzer das Aussehen des Mathe-Blocks nicht anpassen. Die neue WordPress-Version fügt Optionen für Farbe, Typografie, Abmessungen und Umrandung für den Mathe-Block hinzu.

Das folgende Bild zeigt ein Beispiel für die Gestaltung des Mathe-Blocks:

Styling-Optionen für den Mathe-Block
Styling-Optionen für den Mathe-Block

Aktualisierungen des HTML-Blocks

Der HTML-Block wurde komplett umgestaltet. Wenn du jetzt einen HTML-Block in deinen Inhalt einfügst, erscheint ein modales Fenster mit drei separaten Registerkarten für die Eingabe von HTML, CSS und JavaScript.

Hinzufügen von Code zum HTML-Block in WordPress 7.0
Hinzufügen von Code zum HTML-Block in WordPress 7.0

Wenn du mehr Platz brauchst, kannst du über eine Schaltfläche in der oberen rechten Ecke des modalen Fensters den Vollbildmodus aktivieren oder deaktivieren.

Das Modal des HTML-Blocks im Vollbildmodus
Das Modal des HTML-Blocks im Vollbildmodus

Verbesserungen am Bildblock

Der Bildblock wurde mit mehreren Verbesserungen aktualisiert, die größere Anpassungsmöglichkeiten bieten.

Der Bildblock unterstützt jetzt die Steuerung des Seitenverhältnisses für die breite und volle Ausrichtung (PR #74519). Diese neue Funktion ist auf der Registerkarte Stile in der Seitenleiste der Blockeinstellungen verfügbar.

Seitenverhältnissteuerung für den Bildblock in WordPress 7.0
Seitenverhältnissteuerung für den Bildblock in WordPress 7.0

Eine weitere nützliche Ergänzung ist die Brennpunktsteuerung. Mit dieser neuen Funktion kannst du den sichtbaren Teil eines Bildes anpassen, wenn es beschnitten wird (PR #73115)

Steuerung des Bildschwerpunkts in WordPress 7.0
Steuerung des Bildschwerpunkts in WordPress 7.0

Die Komponente zum Zuschneiden von Bildern im Editor wurde in ein spezielles Paket verschoben und kann nun in der gesamten Anwendung verwendet werden, nicht nur im Block-Editor (PR #73277)

Verbessertes Admin-Erlebnis

Mit der Veröffentlichung von WordPress 7.0 wurde der WordPress-Adminbereich neu gestaltet und modernisiert. Es handelt sich um eine wesentliche Verbesserung des Admin-Bereichs, die darauf abzielt, die Navigation auf der Website flüssiger, einheitlicher und optisch ansprechender zu gestalten.

Visuelle Verbesserungen

Wenn du das WordPress 7.0 Admin-Panel öffnest, wirst du sofort bemerken, wie anders die Oberflächenelemente aussehen. Diese Änderungen wurden breit diskutiert und als notwendig erachtet, um das Erscheinungsbild des Dashboards zu modernisieren und Unstimmigkeiten zwischen dem alten Dashboard und dem Block-Editor zu verringern.

Ziel ist es, das Erscheinungsbild des Admin-Bereichs zu modernisieren, Unstimmigkeiten zwischen den alten Bildschirmen und den neueren Bildschirmen des Block-Editors / Site-Editors zu verringern und ihn besser an das WordPress-Designsystem insgesamt anzupassen.

Die visuelle Neugestaltung konzentrierte sich auf eine Reihe von Kernkomponenten, die überall im WordPress-Adminbereich erscheinen. Wie Fabian Kaegy betonte, handelt es sich dabei um rein visuelle Änderungen ohne architektonische oder funktionale Neuerungen.

Du kannst die neuen Menüs, Schaltflächen und Übergänge in WordPress 7.0 im offiziellen WordPress Design System auf Figma entdecken.

Admin-Buttons Neugestaltung in WordPress 7.0
Admin-Buttons Neugestaltung in WordPress 7.0 (Bildquelle: WordPress Design System)

Visuelle Überarbeitungen

Überarbeitungen werden jetzt als Vorschau in einer editorähnlichen Oberfläche dargestellt, die visuelle Unterschiede hervorhebt. Du musst nicht mehr den ganzen Artikel lesen, um zu sehen, was sich geändert hat, denn die Unterschiede zwischen den Versionen desselben Inhalts werden jetzt auf Blockebene hervorgehoben. Das System erkennt auch Stiländerungen, sodass du Anpassungen an der Farbpalette, der Typografie, den Abmessungen usw. leicht erkennen kannst.

Revisionen bieten jetzt eine visuelle Vorschau auf Änderungen auf Blockebene
Revisionen bieten jetzt eine visuelle Vorschau auf Änderungen auf Blockebene

Verschiedene Farben kennzeichnen unterschiedliche Arten von Änderungen:

  • Gelb hebt einen Block oder Text hervor, der geändert wurde.
  • Rot hebt einen Block oder Text hervor, der gelöscht wurde.
  • Grün kennzeichnet einen Block oder Text, der hinzugefügt wurde.

Bei Überarbeitungen kannst du die volle Leistung von Yjs sehen, denn wenn du eine frühere Version wiederherstellst, stellt das System nur die Änderungen wieder her, die an dem Dokument pro Block vorgenommen wurden, nicht den gesamten Inhalt.

Es wird erwartet, dass das System mit zukünftigen Updates verbessert wird, und wir können neue, leistungsstarke Funktionen erwarten. Einen detaillierteren Überblick über die bisherigen und zukünftigen Änderungen findest du in diesem Beitrag von Mathias Ventura aus dem Jahr 2023 sowie in den Ausgaben #60096 und #61161.

Übergänge ansehen

Mit WordPress 7.0 erhält das Boot-Paket – die Komponente, die für die Initialisierung des Editors und die Verwaltung der Übergänge zwischen den verschiedenen Verwaltungsbildschirmen zuständig ist – ein bedeutendes Upgrade. Dank dieser neuen Infrastruktur muss die Navigation zwischen den Dashboard-Bildschirmen nicht mehr abrupt neu geladen werden, sondern bietet elegante Übergänge, die das Admin-Erlebnis deutlich verbessern.

Technisch gesehen kann WordPress durch die Implementierung der View Transitions API im Boot-Paket jetzt Zoom- und Slide-Animationen bei Zustandsänderungen orchestrieren. Dadurch wird ein erneutes Aufziehen des Canvas bei Routenänderungen vermieden und ein fließender Übergang für die Root-Navigation gewährleistet.

Änderungen für Entwickler

WordPress 7.0 ist mehr als nur ein visuelles Update; es führt strukturelle Änderungen ein, die den Entwicklungsworkflow drastisch vereinfachen. Zu den wichtigsten Neuerungen gehören weniger benutzerdefiniertes CSS dank einer leistungsfähigeren theme.json, eine vorhersehbarere Layout-Verwaltung durch den erweiterten Einsatz von iframes und neue deklarative Tools für Admin-Interfaces mit verbesserten DataViews, DataForm und Field API sowie eine neue Client-seitige Abilities API, die eine standardisierte Möglichkeit bietet, Anwendungsfähigkeiten über JavaScript darzustellen und mit ihnen zu interagieren.

Für Entwickler/innen gibt es mit WordPress 7.0 die wichtigsten technischen Änderungen, die sie kennen sollten.

Pseudoklassen-Unterstützung in theme.json

Gute Nachrichten für Theme-Entwickler. Ab WordPress 7.0 kannst du Pseudo-Klassen-Selektoren (:hover, :focus, :focus-visible und :active) direkt in deinen Blöcken und Stilvariationen in deiner theme.json verwenden.

Vor WordPress 7.0 wurden Pseudoklassen nur für HTML-Elemente wie Schaltflächen und Links unterstützt, und ihre Verwendung auf Blockebene war nur in benutzerdefinierten CSS möglich.

Um Pseudo-Klassen auf der Blockebene zu verwenden, musst du deine Style-Konfiguration in den styles-Abschnitt deiner theme.json-Datei einfügen. Hier ist ein einfaches Beispiel für die Verwendung von Pseudo-Klassen für einen Button-Block (siehe auch PR #71418):

{
	"version": 3,
	"styles": {
		"blocks": {
			"core/button": {
				"border": {
					"width": "2px",
					"style": "solid",
					"color": "#000000"
				},
				":hover": {
					"border": {
						"color": "#ff4400"
					},
					"shadow": "0 8px 15px rgba(255, 68, 0, 0.3)",
					"typography": {
						"textDecoration": "underline"
					}
				},
				":active": {
					"filter": "brightness(0.8)",
					"shadow": "none"
				}
			}
		}
	}
}

Das folgende Bild zeigt die verschiedenen Zustände des Button-Blocks.

Verwendung der Pseudoklassen: hover und: active in einem Button-Block
Verwendung der Pseudoklassen: hover und: active in einem Button-Block

Das folgende Beispiel zeigt, wie du Pseudo-Klassen für eine Blockvariation in theme.json verwendest:

{
	"version": 3,
	"styles": {
		"blocks": {
			"core/button": {
				"variations": {
					"neon": {
						"border": {
							"width": "2px",
							"style": "solid",
							"color": "#00ff00"
						},
						"color": {
							"text": "#00ff00",
							"background": "transparent"
						},
						":hover": {
							"border": {
								"color": "#ffffff"
							},
							"shadow": "0 0 20px #00ff00, 0 0 40px #00ff00",
							"color": {
								"text": "#ffffff"
							},
							"typography": {
								"textDecoration": "none"
							}
						},
						":active": {
							"filter": "brightness(1.5) blur(1px)",
							"shadow": "0 0 10px #ffffff"
						}
					}
				}
			}
		}
	}
}

Iframed Post Editor

Ab WordPress 7.0 wird der Post-Editor in einem Iframe geladen, wenn der Inhalt nur Blöcke enthält, die Block API Version 3 oder höher verwenden. Vor Version 7.0 wurde der Post-Editor nur dann in einem Iframe geladen, wenn alle registrierten Blöcke (auch die, die nicht im Inhalt enthalten sind) die Block API v3 verwendeten.

Der Hauptvorteil des Ladens des Editors in einem Iframe ist, dass er die UI-Stile des Editors von den Inhaltsstilen des Themas isoliert. Ohne einen iframe werden die Stylesheets des Editors und des Themes im selben Dokument verwendet, was oft zu Kompatibilitätsproblemen führt und es den Entwicklern erschwert, die visuelle Konsistenz zwischen Backend und Frontend herzustellen.

Die wichtigsten Vorteile des iframed Post Editors sind:

Stil-Isolierung

  • Kein CSS-Ausbluten: Der iframe verhindert, dass die Stile des WordPress-Administrators in den Editor-Canvas übergehen und umgekehrt. So wird sichergestellt, dass das Erscheinungsbild des Blocks nicht von der umgebenden Benutzeroberfläche beeinflusst wird.
  • Kein CSS-Reset erforderlich: Entwickler/innen müssen die CSS-Regeln des WordPress-Administrators nicht mehr manuell zurücksetzen, damit der Inhalt des Editors mit dem Erscheinungsbild des Frontends übereinstimmt.
  • Keine Präfixe: Theme-Entwickler müssen ihren CSS-Regeln keine Präfixe oder hochspezifischen Selektoren mehr hinzufügen, um die Admin-Oberfläche nicht zu beschädigen.

Layout-Konsistenz

  • Viewport-relative Einheiten: Ohne Iframes beziehen sich Einheiten wie vw (Viewport-Breite) und vh (Viewport-Höhe) auf die gesamte Admin-Seite (einschließlich der Seitenleiste); sie sollten nur im Editor-Canvas verwendet werden.
  • Native Medienabfragen: Medienabfragen funktionieren nativ innerhalb des Iframes und spiegeln die Größe der Editor-Canvas wider und nicht die des gesamten Browserfensters.

Erfahrung für Entwickler

  • Vereinfachter Arbeitsablauf: Theme- und Plugin-Autoren können Stile aus dem Frontend mit minimalen oder gar keinen Änderungen in den Editor „übertragen“.
  • Dauerhafte Auswahlen: Iframes sorgen dafür, dass die Auswahl im Editor (z. B. ausgewählter Text) auch dann sichtbar bleibt, wenn der/die Nutzer/in mit UI-Elementen, wie z. B. Seitenleisten, interagiert.
  • Vorhersehbarkeit: Der iframed-Editor löst auch das Problem der visuellen Inkonsistenz und verhindert, dass der Editor je nach installierten Plug-ins plötzlich den Modus wechselt.

Abwärtskompatibilität

Wenn ein Beitrag einen Block enthält, der ältere API-Versionen verwendet, wird der Iframe automatisch entfernt, um die Abwärtskompatibilität zu gewährleisten. Um von diesen Verbesserungen zu profitieren, sollten Block-Entwickler ihre Blöcke auf die Block-API-Version 3 aktualisieren.

Block-Registrierung nur für PHP

WordPress 7.0 führt die Möglichkeit ein, Blöcke ausschließlich über PHP mit automatisch generierten Inspektorsteuerungen zu registrieren. Diese Neuerung vereinfacht die Arbeitsabläufe von Entwicklern und ermutigt Websites, die hybride Themes oder veraltete PHP-Funktionen und Shortcodes verwenden, den Block-Editor zu übernehmen und weiterzuentwickeln. Hier ist ein Beispiel für einen per PHP registrierten Block:

/**
 * Render callback (frontend and editor)
 */
function my_php_only_block_render( $attributes ) {
	return '<div>
		<h3>🚀 PHP-only Block</h3>
		<p>This block was created with only PHP!</p>
	</div>';
}

/**
 * Register the block on the 'init' hook.
 */
add_action( 'init', function() {
	register_block_type( 'my-plugin/php-only-test-block', array(
		'title'		   => 'My PHP-only Block',
		'icon'			=> 'welcome-learn-more',
		'category'		=> 'text',
		'render_callback' => 'my_php_only_block_render',
		'supports'		=> array(
			// Automatically registers the block in the Editor JS (previously auto_ssr)
			'auto_register' => true, 
		),
	) );
});

Zum Zeitpunkt der Erstellung dieses Artikels sind reine PHP-Blöcke nicht dynamisch und können nur bestimmte Konfigurationskontrollen verwenden. Aber es gibt noch viele Anwendungsfälle zu entdecken. Aus diesem Grund haben wir ein Tutorial veröffentlicht, das nur PHP-Blöcke behandelt. Wenn du ein PHP-Entwickler bist, lohnt es sich, einen Blick darauf zu werfen.

Ein einfacher reiner PHP-Block
Ein einfacher reiner PHP-Block

Verbesserungen bei DataViews, DataForm und Field API

WordPress 7.0 führt mehrere Verbesserungen an DataViews ein und markiert damit einen entscheidenden Schritt hin zu einer moderneren, modularen Verwaltungsoberfläche. Dieses Update verwandelt die Datenverwaltung in eine hochgradig anpassbare Erfahrung mit einem deklarativen Ansatz. Entwickler können jetzt komplexe benutzerdefinierte Schnittstellen erstellen, indem sie einfach ihre Regeln im JSON-Format definieren, damit der Kern die Schnittstelle generieren kann.

Neu hinzugekommen sind unter anderem:

  • Verbesserungen bei der Datenvisualisierung (DataViews): Das neue Activity-Layout verwendet einen Activity-Feed-Timeline-Stil. Außerdem gibt es einen neuen kompakten Ansichtsmodus für Listen.
  • Verbesserungen am Formular (DataForm): Das neue Layout Details ist jetzt verfügbar, ebenso wie Bearbeitungssymbole für das Layout Panel. Diese Icons können so konfiguriert werden, dass sie nur bei Bedarf angezeigt werden.
  • Verbesserungen bei der Datenkontrolle (Feld-API): Es gibt eine automatische Feldüberprüfung und neue Optionen zur Anpassung der Formatierung von numerischen und Datumsfeldern.

Das folgende Beispiel zeigt, wie du eine Ansicht definierst, die Daten gruppiert und in einem kompakten Modus anzeigt:

const myCompactView = {
	type: 'list',
	layout: { 
		density: 'compact' 
	},
	groupBy: {
		field: 'status',
		direction: 'desc',
		showLabel: true
	}
};

Einen detaillierten Überblick über die Verbesserungen der DataViews, DataForm und Field API findest du in der Dev Note.

Client-seitige Abilities API

Mit WordPress 6.9 wurde die Abilities API eingeführt, eine neue funktionale Schnittstelle, die eine standardisierte Registrierung für Plugins, Themes und den WordPress-Kern bereitstellt, um mit WordPress zu interagieren, indem sie ihre Fähigkeiten sowohl in menschen- als auch in maschinenlesbaren Formaten offenlegt.

Mit WordPress 7.0 wird nun eine JavaScript-API eingeführt, mit der du clientseitige Funktionen wie die Navigation oder das Hinzufügen von Blöcken zu deinen Inhalten direkt über JavaScript auf sichere und standardisierte Weise implementieren kannst.

Die neue Client-side Abilities API ist in zwei Pakete unterteilt.

  • @wordpress/core-abilities: Wenn dein Plugin auf die registrierten Fähigkeiten des Servers zugreifen muss, musst du dich in das @wordpress/core-abilities-Paket einklinken. Dieses Paket ruft alle registrierten Fähigkeiten und Kategorien über die REST-API ab und speichert sie im Speicher @wordpress/abilities.
  • @wordpress/abilities: Dieses Paket stellt den Fähigkeiten-Speicher bereit, ohne die auf dem Server registrierten Fähigkeiten zu laden. Wenn dein Plugin nur clientseitige Fähigkeiten registrieren muss und keinen Zugriff auf die auf dem Server registrierten Fähigkeiten benötigt, muss es @wordpress/abilities einbinden.

In den Entwicklerhinweisen findest du eine detaillierte Analyse der neuen Client-seitigen Fähigkeiten-API und einige Codebeispiele.

Änderungen an der Interaktivitäts-API

Die Interaktivitäts-API ist eine WordPress-eigene API, die es Entwicklern ermöglicht, ihren Websites auf standardisierte Weise Interaktivität hinzuzufügen. WordPress 7.0 verbessert die Interaktivitäts-API mit einer neuen watch()-Funktion, mit der du Zustandsänderungen programmatisch beobachten kannst. Bisher war es nur möglich, die data-wp-watch-Direktive zu verwenden, um auf Zustandsänderungen zu reagieren.

Weitere Änderungen in WordPress 7.0 beziehen sich auf den Core/Router Store.

Eine genauere Beschreibung der Änderungen an der Interaktivitäts-API findest du in der Dev Note.

Weitere Änderungen für Entwickler

Hier sind ein paar weitere Änderungen für Entwickler, die erwähnenswert sind:

  • Ab WordPress 7.0 unterstützen Blockattribute, die Block Bindings unterstützen, auch Pattern Overrides. Das bedeutet, dass du Pattern Overrides mit jedem Block verwenden kannst, auch mit benutzerdefinierten Blöcken.
  • Unsynchronisierte Muster und Vorlagenteile sind jetzt standardmäßig auf "contentOnly" eingestellt. So sehen die Nutzer/innen die Steuerelemente für die Bearbeitung von Text und Medien zuerst, ohne zu riskieren, dass die Blockstruktur versehentlich unterbrochen wird. Wenn du benutzerdefinierte Blöcke erstellt hast und möchtest, dass sie bearbeitbar bleiben, stelle sicher, dass du die "role": "contentOnly" in der block.json-Datei änderst. Entwickler/innen können diese Funktion über PHP mit dem Filter block_editor_settings_all oder über JavaScript deaktivieren, indem sie disableContentOnlyForUnsyncedPatterns auf true setzen.
  • Mit WordPress 7.0 wird die Unterstützung für PHP 7.2 und 7.3 eingestellt. Die empfohlene Mindestversion von PHP bleibt bei 8.3.
  • Das System zur Unterstützung von Dimensions-Blöcken wurde deutlich verbessert. Du kannst Breite und Höhe als Standard-Blockunterstützung unter Dimensionen in der block.json verwenden und Themes können in ihrer theme.json Voreinstellungen für Dimensionsgrößen definieren.

Ein Blick in die Zukunft: 7.0 markiert eine neue Ära für WordPress

WordPress 7.0 ist nicht einfach nur ein Update, sondern stellt einen Wendepunkt für Nutzer/innen und Entwickler/innen dar. Dank der KI-Integration und der Abilities API kann KI jetzt im Dashboard navigieren, neue Inhalte erstellen, bestehende Beiträge bearbeiten und mit Menschen in Echtzeit zusammenarbeiten. Wir haben das Gefühl, dass wir an einem historischen Wendepunkt stehen, und wir können es kaum erwarten, diese KI-gestützten Tools zu erkunden und selbst etwas völlig Neues zu schaffen.

Aber WordPress 7.0 ist mehr als nur KI und RTC. Das Bearbeitungserlebnis wurde komplett überarbeitet und bietet nun Zusammenarbeit in Echtzeit, eine neue Revisionsarchitektur auf Blockebene, neue Kernblöcke und bedeutende Aktualisierungen des Designsystems.

Neben der KI-Integration profitieren Entwickler/innen von Verbesserungen, die den Entwicklungsworkflow rationalisieren und bisher ungeahnte Möglichkeiten eröffnen. Vom iframed-Editor und der Unterstützung von Pseudoklassen in der theme.json über die Client-side Abilities API bis hin zu reinen PHP-Blöcken bietet WordPress 7.0 eine Vielzahl von Werkzeugen, um immer leistungsfähigere Websites und Anwendungen zu erstellen.

Um das Potenzial von WordPress 7.0 voll auszuschöpfen, brauchst du einen hochmodernen Hosting-Service, der für Leistung und Sicherheit optimiert ist. Bei Kinsta findest du alles, was du brauchst, um das volle Potenzial von WordPress auszuschöpfen. Schau dir unsere Angebote an und finde dasjenige, das am besten zu den Anforderungen deiner Website passt.

Carlo Daniele Kinsta

Carlo ist ein leidenschaftlicher Liebhaber von Webdesign und Frontend-Entwicklung. Er beschäftigt sich seit über 10 Jahren mit WordPress, auch in Zusammenarbeit mit italienischen und europäischen Universitäten und Bildungseinrichtungen. Er hat Dutzende von Artikeln und Leitfäden über WordPress geschrieben, die sowohl auf italienischen und internationalen Websites als auch in gedruckten Magazinen veröffentlicht wurden. Du kannst Carlo auf X und LinkedIn finden.