Was ist neu in WordPress 6.6: Pattern Overrides, Block Bindings API, Data Views, neue Design Tools und vieles mehr!

Die Veröffentlichung von WordPress 6.6 ist für den 16. Juli 2024 geplant. Die neue Version konzentriert sich auf das Finetuning und die Verbesserung mehrerer Funktionen, die in früheren Versionen eingeführt wurden. Viele Neuerungen bringen den Kern jedoch einen Schritt weiter auf dem Weg der Phase 3 der WordPress-Entwicklung.

Insgesamt 299 Core Track Tickets sind in WordPress 6.6 enthalten, zusammen mit 392 Erweiterungen, 462 Bugfixes und 46 Verbesserungen der Zugänglichkeit des Blockeditors.

Von den vielen neuen Funktionen, die mit WordPress 6.6 kommen, gefallen uns die Blockmuster-Überschreibungen am besten. Ursprünglich war die Veröffentlichung mit WordPress 6.5 geplant, wurde dann aber auf 6.6 verschoben. Die Pattern Overrides sind die zweite Implementierung der Block Bindings API und geben uns eine bessere Vorstellung davon, was in zukünftigen WordPress-Versionen kommen wird.

Die Pattern Overrides sind jedoch nur eine von vielen großartigen Neuerungen in der kommenden WordPress-Version. Beginnen wir also damit, die aufregendsten neuen Funktionen und Erweiterungen von WordPress 6.6 zu beleuchten.

Synchrone Musterüberschreibungen

Die erste Implementierung der Block Bindings API diente der Verbindung von Blockattributen und benutzerdefinierten Feldern. Mit WordPress 6.6 wird in einer zweiten Iteration eine Erweiterung der Synced Patterns namens Synced Pattern Overrides freigeschaltet.

Es gibt zwei Arten von Blockmustern:

• Synchrone Blockmuster
• Standard-Blockmuster (nicht synchronisiert)

Der Unterschied zwischen den beiden Typen besteht darin, dass alle Änderungen, die an einem synchronisierten Muster vorgenommen werden, für jedes Vorkommen des Musters auf deiner gesamten Website gelten. Im Gegensatz dazu wirken sich Änderungen an einem Standard-Blockmuster nur auf eine bestimmte Instanz des Musters aus.

Synced Pattern Overrides liegen irgendwo in der Mitte zwischen diesen beiden Extremen. Dank der Block Bindings API kannst du jetzt Blockmuster erstellen, die überall auf deiner Website die gleiche Struktur haben und sich synchron mit den Anpassungen der Musterstruktur und des Stils im Website-Editor ändern. Du kannst jedoch den Inhalt des Musters in einer einzelnen Instanz ändern, ohne dass dies Auswirkungen auf andere Instanzen desselben Musters auf der Website hat.

Hier erfährst du, wie das Überschreiben von Mustern funktioniert.

Zuerst brauchst du ein synchronisiertes Muster. Du kannst es im Post-Editor von Grund auf neu erstellen oder im Abschnitt Muster des Website-Editors nach vorhandenen synchronisierten Mustern suchen.

Schritt 1: Gehe zu Muster und dupliziere eines der vorhandenen Muster, z. B. das Muster Hero des Standardthemes Twenty Twenty-Four. Füge einen Namen hinzu und lege die Kopie als synchronisiertes Muster fest.

Schritt 2: Navigiere zu dem Bereich Meine Muster und finde dein neues synchronisiertes Muster. Öffne es im Seiteneditor und wähle alle Blöcke aus, die du einzeln überschreiben willst.

Gehe zur Seitenleiste mit den Blockeinstellungen und scrolle nach unten in den Bereich Erweitert. Hier findest du die Schaltfläche Überschreibungen aktivieren.

Wenn du auf die Schaltfläche klickst, wirst du aufgefordert, einen Namen hinzuzufügen und die Art des Musters festzulegen.

Schritt 3: Wiederhole den gleichen Vorgang für jeden Block, den du überschreiben möchtest. Wenn du fertig bist, erstelle einen neuen Beitrag oder eine neue Seite und füge dein benutzerdefiniertes Muster ein.

Schritt 4: Ändere den Inhalt der Blöcke in Override und speichere den Beitrag. Überprüfe abschließend das Ergebnis auf dem Frontend.

Und schon bist du fertig. Du kannst eine beliebige Anzahl dieser Muster überall auf deiner Website einfügen, und jede neue Instanz zeigt denselben ursprünglichen Inhalt, ist aber bereit für deine Anpassungen.

Jetzt wollen wir uns den Code dieser Muster ansehen. Navigiere zurück zum Abschnitt Muster im Site Editor. Wähle Meine Muster und füge dein Muster hinzu. Öffne dann das Menü Optionen und wähle Code-Editor, um den Code des Musters anzuzeigen.

In unserem Beispiel sollte der Code wie folgt aussehen:

<div class="wp-block-group">
	<!-- wp:heading {
		"textAlign":"center",
		"level":1,
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
				}
			},
		"name":"Hero title"
	},"fontSize":"x-large"} -->
		<h1 class="wp-block-heading has-text-align-center has-x-large-font-size">A commitment to innovation and sustainability</h1>
	<!-- /wp:heading -->
	...
</div>

Im Blockbegrenzer wirst du die Eigenschaft metadata.bindings bemerken. Dadurch wird der Überschriftenblock editierbar. Die Bindung __default weist WordPress an, alle unterstützten Attribute mit einer bestimmten Quelle zu verbinden, die "core/pattern-overrides" ist.

Dieselbe Eigenschaft gilt für alle Blöcke, die du bearbeitbar machen willst. Siehe z. B. den Button-Block:

<div class="wp-block-buttons">
	<!-- wp:button {
		"metadata":{
			"bindings":{
				"__default":{
					"source":"core/pattern-overrides"
					}
				},
			"name":"Hero button"
			}
		} -->
	<!-- /wp:button -->
	<div class="wp-block-button">
		<a class="wp-block-button__link wp-element-button">About us</a>
	</div>
	...
</div>

Kehren wir nun zum Beitragseditor zurück und wechseln wir zum Code-Editor. Der Code sollte in etwa so aussehen wie der folgende:

<!-- wp:block {
	"ref":261,
	"content":{
		"Hero title":{
			"content":"Managed WordPress Hosting"
		},
		"Hero body":{
			"content":"Kinsta is an extension of your business. Fast, secure, feature-rich hosting that makes your work so much easier. Built for WordPress websites and agencies worldwide."
		},
		"Hero button":{
			"text":"Learn more",
			"url":"https://kinsta.com/wordpress-hosting/",
			"linkTarget":"",
			"rel":""
		},
		"Second button":{
			"text":"View pricing",
			"url":"https://kinsta.com/wordpress-hosting/pricing/",
			"linkTarget":"_blank",
			"rel":"noreferrer noopener"
		},
		"Hero image":{
			"id":268,
			"alt":"",
			"url":"http://wordpress.kinsta.cloud/wp-content/uploads/2024/06/homepage-featured-image.jpg"
		}
	}
} /-->

Hier siehst du keine Blöcke, sondern nur einen Verweis auf das Blockmuster und eine Reihe von Eigenschaften für jeden Block, die als bearbeitbar eingestellt sind.

Auch hier kannst du eine beliebige Anzahl von Blockmustern an beliebiger Stelle auf deiner Website einfügen, und diese Muster entsprechen der gleichen Struktur und dem gleichen Design, das du im Site Editor erstellt hast.

Dann kannst du den Inhalt der bearbeitbaren Blöcke einzeln ändern, ohne die Struktur zu verändern.

Da Pattern Overrides eine Implementierung der Block Bindings API sind, können wir nur unterstützte Blöcke außer Kraft setzen: Überschrift, Absatz, Bild und Schaltflächen.

In diesem WordPress TV-Video und diesem Blogbeitrag von Nick Diego kannst du tiefer in die Musterüberschreibungen eintauchen.

Pattern Overrides werden in Zukunft noch verbessert und ergänzt. Die Diskussion wird auf GitHub hier und hier fortgesetzt.

Benutzerdefinierte Feldwerte aus verbundenen Blöcken bearbeiten

Mit WordPress 6.5 wurden benutzerdefinierte Felder als Datenquelle (core/post-meta) für Blockattribute eingeführt, so dass Benutzer benutzerdefinierte Feldwerte mit Blöcken verbinden können. WordPress 6.6 bringt neue Verbesserungen für diese Funktion, z. B. die Möglichkeit, benutzerdefinierte Feldwerte direkt im verbundenen Block zu bearbeiten.

Du kannst es selbst ausprobieren, indem du einen neuen Satz von benutzerdefinierten Feldern über ein Plugin oder die Funktionsdatei deines Themes registrierst und dabei sicherstellst, dass du show_in_rest auf true setzt, wenn du die Post-Meta registrierst. Hier ist ein Beispiel:

register_post_meta( 
	'post', 
	'book_title', 
	array(
		'show_in_rest' => true,
		'type' => 'string',
		'single' => true,
		'sanitize_callback' => 'sanitize_text_field'
	)
);

Erstelle einen neuen Beitrag oder eine neue Seite und füge ein neues benutzerdefiniertes Feld mit demselben Namen hinzu. Füge einen der unterstützten Blöcke (z. B. einen Überschriftenblock) zum Canvas hinzu, wechsle zum Code-Editor und ändere den Block wie unten gezeigt:

<!-- wp:heading 
{
	"metadata":{
		"bindings":{
			"content":{
				"source":"core/post-meta",
				"args":{
					"key":"book_title"
				}
			}
		}
	}
} -->
<h2 class="wp-block-heading"></h2>
<!-- /wp:heading -->

Speichere den Beitrag/die Seite und überprüfe das Ergebnis. Jetzt kannst du den Inhalt der Überschrift direkt in dem Block bearbeiten. Der Wert des benutzerdefinierten Feldes sollte deine Änderungen widerspiegeln.

Außerdem gibt es jetzt ein neues Panel, das Informationen über die Blockattribute liefert, die mit benutzerdefinierten Feldern verbunden sind und die Blockattribute anzeigt, die mit benutzerdefinierten Feldern verknüpft sind.

Dieses Feature kommt mit einigen verwandten Funktionalitäten:

• Du kannst benutzerdefinierte Feldwerte aus einer Abfrageschleife heraus aktualisieren.
• Wenn mehrere Blöcke mit demselben benutzerdefinierten Feld verbunden sind, teilen sie sich denselben benutzerdefinierten Feldwert und ändern sich synchron mit ihm.
• Benutzer können benutzerdefinierte Felder nur in Beiträgen bearbeiten, für die sie berechtigt sind.

Abschließende Anmerkung: Wie bereits erwähnt, sind Blöcke, die die Block Bindings API unterstützen, immer noch auf Folgendes beschränkt:

Block	Attribute
Bild	url, alt, title
Überschrift	content
Absatz	content
Schaltfläche	url,text, linkTarget, rel

Verbesserungen bei den Datenansichten

Data Views wurde mit WordPress 6.5 eingeführt und ist eine verbesserte Benutzeroberfläche für Sammlungen von Vorlagen, Mustern, Beiträgen, Medien und mehr. Die neue Oberfläche spielt eine wichtige Rolle in Phase 3 der Entwicklungs-Roadmap – Zusammenarbeit – und daher können wir in zukünftigen WordPress-Releases weitere Verbesserungen erwarten, „einschließlich Workflow-Verbesserungen für die Zuweisung von Personen zur Überprüfung von Beiträgen oder die Erstellung benutzerdefinierter Ansichten zur Rationalisierung von Prozessen.“ In WordPress 6.6 gibt es die neue Schnittstelle nur im Site-Editor, aber sie soll in zukünftigen Versionen auf weitere Verwaltungsbereiche ausgeweitet werden.

WordPress 6.6 führt neue Layouts für die Verwaltungsseiten ein. Die Verwaltung der Vorlagenteile wurde entfernt und in den Bereich „Muster“ integriert, während das Menü Muster im Site-Editor in zwei Bereiche aufgeteilt wurde, wobei die Vorlagenteile oben und die Muster unten angeordnet sind.

Für Seiten gibt es ein neues Panel mit einer Liste von Seiten und der Möglichkeit, mit einem einzigen Klick eine Vorschau jeder Seite anzuzeigen.

Du wirst auch neue Layout-Optionen im Menü Ansichtsoptionen sehen. (Das Symbol in der oberen rechten Ecke.)

Neben diesen umfangreicheren Änderungen gibt es bei den Datenansichten weitere kleinere Verbesserungen, die die Benutzeroberfläche verbessern und sie funktionaler und informativer machen, wie z. B. eine neue Massenbearbeitungsfunktion und ein Abzeichen auf der Startseite oder der Beitragsseite.

WordPress 6.6 bringt Data Views einen Schritt weiter, aber wir befinden uns noch in einem frühen Stadium. In Zukunft werden wir eine Erweiterungs-API einführen, die es Entwicklern ermöglicht, direkt auf Views zu reagieren. Einen tieferen Einblick in die Zukunft von Data Views findest du im Data Views Update – Juni 2024 von Anne McCarthy.

Weitere Verbesserungen im Block-Editor

WordPress 6.6 bringt 8 Gutenberg-Versionen in den Kern – von 17.8 bis 18.5 – mit vielen Verbesserungen an der Oberfläche, der React-Bibliothek, der Block-API und vielem mehr. Hier sind nur ein paar davon:

Ein neuer Veröffentlichungsfluss

Mit der Version 6.6 wurde die Seitenleiste für die Beitrags- und Seiteneinstellungen aufgeräumt, übersichtlicher und einheitlicher gestaltet. Mit dieser Iteration macht der Vereinheitlichungsprozess zwischen dem Beitrags- und dem Seiteneditor einen Schritt nach vorne, und beide Editoren haben jetzt denselben Veröffentlichungsfluss.

Das Veröffentlichungserlebnis wurde vereinheitlicht, und eine neue Status- und Sichtbarkeitsleiste ermöglicht es dir, den Status des Beitrags/der Seite an einer bequemeren Stelle einzustellen.

Weitere Änderungen betreffen die Steuerelemente für das Featured Image und den Excerpt, die an den oberen Rand der Seitenleiste verschoben wurden, sowie das verbesserte Aktionsmenü in der rechten oberen Ecke.

Alle Blöcke anzeigen

Wenn du in früheren WordPress-Versionen einen Block ausgewählt hast, zeigte der Block-Inserter nur den Block an, den du zu dem ausgewählten Block hinzufügen konntest. Wenn du zum Beispiel eine Spalte ausgewählt hast, konntest du im Block-Inserter nur den Spaltenblock sehen, weil du nur eine Spalte hinzufügen konntest.

Ab WordPress 6.6 zeigt der Block-Inserter zwei Gruppen von Blöcken an: Blöcke, die du in den ausgewählten Block einfügen kannst, und Blöcke, die du unterhalb des ausgewählten Blocks einfügen kannst.

Ein Tastaturkürzel zum Gruppieren von Blöcken

Jetzt kannst du eine Auswahl von Blöcken mit ⌘ + G unter MacOS oder Ctrl + G unter Windows gruppieren.

Blockmuster in klassischen Themes

Seit WordPress 6.6 unterstützen klassische Themes die gleiche Musterschnittstelle wie Block-Themes. Wenn du also klassische Themes auf deiner WordPress-Website verwendest, genießt du dieselbe umfassende Erfahrung bei der Verwaltung von Mustern wie bei Blockthemen.

Die folgenden Bilder zeigen einen Vergleich zwischen dem Muster-Bildschirm in WordPress 6.5 und dem Muster-Verwaltungsbereich in WordPress 6.6.

Du kannst jetzt Muster bearbeiten, duplizieren, umbenennen, als JSON exportieren und löschen, wie du es von Blockthemen gewohnt bist.

Du kannst Massen-Aktionen durchführen, indem du Muster einzeln auswählst oder auf die Schaltfläche Massen bearbeiten klickst. Sortier- und Filterfunktionen sind ebenfalls verfügbar.

Du kannst auch Muster erstellen, wie du sie in Block-Themes erstellst. Klicke auf die Schaltfläche Neues Muster hinzufügen in der oberen rechten Ecke und du wirst aufgefordert, das Formular mit den Musterdetails auszufüllen.

Dann kannst du dein Muster wie gewohnt im Site-Editor erstellen oder bearbeiten.

Dieses Update gibt Nutzern von klassischen Themes mehr Macht, schaltet neue Funktionen frei und macht die Bearbeitung von klassischen und Block-Themes einheitlicher.

Neue Tools und Funktionen für Designer und Theme-Entwickler

WordPress 6.6 bringt so viele leistungsstarke Funktionen und Verbesserungen für Designer/innen und Theme-Entwickler/innen mit sich, und wir freuen uns, die, die uns am besten gefallen haben, hier zu teilen. Designerinnen und Designer haben mehr Möglichkeiten, ihre Websites zu gestalten, dank Abschnittsstilen, seitenweiten Hintergrundbildern, einem brandneuen Schatten-Editor und einer Grid-Layout-Variante. Und weitere Tools bieten den Themenautoren noch mehr Flexibilität. Lass uns eintauchen.

Theme.json v.3

WordPress 6.6 bringt auch eine neue theme.json Version, jetzt Version 3 ist. Die neue Version ändert die Art und Weise, wie vordefinierte Eigenschaften außer Kraft gesetzt werden können. Um die Standardwerte von fontSizes oder spacingSizes zu ändern, musst du jetzt defaultFontSizes oder defaultSpacingSizes auf false unter settings.typography oder settings.spacing setzen.

Um es noch einmal zusammenzufassen:

• Wenn defaultFontSizes oder defaultSpacingSizes auf true gesetzt ist, werden die Standard-Schriftgrößen und -Zwischenräume im Editor angezeigt, und Themes können keine Voreinstellungen mit den Standard-Slugs erstellen. defaultFontSizes ist standardmäßig auf true gesetzt.
• Wenn defaultFontSizes oder defaultSpacingSizes auf false eingestellt ist, werden die Standard-Schriftgrößen und -Zwischenräume im Editor nicht angezeigt und Themes können die Standard-Slugs verwenden.

In der Dev Note findest du eine ausführlichere Übersicht über die Theme.json Version 3.

CSS-Spezifität in WordPress 6.6

Mit WordPress 6.6 ändert sich die CSS-Spezifität und es ist jetzt einfacher, Core-Styles zu überschreiben, während die Unterstützung für globale Styles erhalten bleibt.

Bis 6.6 war es oft schwierig, Core Styles zu überschreiben, und Theme-Entwickler mussten komplexe CSS-Regeln ausarbeiten, um die gewünschten Ergebnisse zu erzielen. Mit 6.6 wurden die Core Block Styles und Global Styles (theme.json) geändert, indem der bestehende Selektor in :root :where(...) eingeschoben wurde, um die Spezifität der Core Styles auf 0-1-0 zu reduzieren und sie einheitlich zu gestalten, damit auch die neuen Section Styles unterstützt werden.

So wurde zum Beispiel .wp-block-image.is-style-rounded img in :root :where(.wp-block-image.is-style-rounded img) geändert.

Blockentwickler, die sich für globale Stile entscheiden, werden aufgefordert, die gleichen Änderungen an ihren Stilen vorzunehmen, damit sie auf vorhersehbare Weise über die Schnittstelle für Stile angepasst werden können. Wenn du also einen benutzerdefinierten Block mit dem folgenden Stil hast:

.wp-block-custom-block {
	padding: 0;
}

Du solltest ihn in :root :where() einschieben:

:root :where(.wp-block-custom-block) {
	padding: 0;
}

So können die Benutzer die Blockauffüllung über die Schnittstelle für globale Stile außer Kraft setzen.

Theme-Entwickler sollten das Gleiche tun, damit die Blockstile über die Schnittstelle für globale Stile konfiguriert werden können.

In der Dev Note findest du einen ausführlicheren Überblick über die CSS-Spezifikationen in WordPress 6.6.

Abschnittsstile

Mit WordPress 6.6 kannst du einzelne Abschnitte eines Beitrags/einer Seite stylen, ohne die gleichen Stile auf mehrere Blöcke nacheinander anwenden zu müssen. Das heißt, du kannst mehrere Blöcke und Unterblöcke auswählen und der gesamten Auswahl eine Stilvariation zuweisen.

Dies ist dank der Erweiterung der Blockstilvariationen möglich, die jetzt auch das Styling von inneren Blöcken und Elementen unterstützen und die reduzierte Styling-Spezifizität für globale Stile ausnutzen.

Blockstilvariationen können nur dann über Globale Stile definiert und manipuliert werden, wenn du sie mit einer der folgenden Methoden registriert hast:

• Mit Hilfe von theme.json-Partials im Verzeichnis /styles des Themes
• Verwendung der Funktion register_block_style
• Definiere Blockstilvariationen unter styles.blocks.variations in deiner theme.json

Lass uns eintauchen.

Blockstil-Variationen mit theme.json-Partials definieren

Wie die Style-Variationen eines Themes können auch die Block-Style-Variationen ihre eigene theme.json-Datei im Verzeichnis /styles deines Themes haben.

Der Unterschied zwischen den beiden Arten von Variationen besteht darin, dass Blockstilvariationen eine neue Top-Level-Eigenschaft blockTypes haben, die ein nicht leeres Array von Blocktypen ist, die die Blockstilvariation unterstützen. Außerdem wurde eine neue Eigenschaft slug hinzugefügt, „um Konsistenz zwischen den verschiedenen Quellen zu schaffen, die Blockstilvariationen definieren können, und um den Slug von der übersetzbaren Eigenschaft title zu entkoppeln.“

Die Dev Note enthält das folgende Beispiel für eine theme.json Teildatei:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Variation A",
	"slug": "variation-a",
	"blockTypes": [ "core/group", "core/columns", "core/media-text" ],
	"styles": {
		"color": {
			"background": "#eed8d3",
			"text": "#201819"
		},
		"elements": {
			"heading": {
				"color": {
					"text": "#201819"
				}
			}
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "#825f58",
					"text": "#eed8d3"
				},
				"elements": {
					"heading": {
						"color": {
							"text": "#eed8d3"
						}
					}
				}
			}
		}
	}
}

Programmatische Definition von Blockstilvariationen über register_block_style

Die Funktion register_block_style bietet eine zweite Möglichkeit, Blockstilvariationen zu registrieren. Du kannst sie auf diese Weise in der functions.php deines Themes verwenden:

register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'			=> 'light',
		'label'			=> __( 'Light' ),
		'style_data'	=> array(
			'color'		=> array(
				'background'	=> '#973C20',
				'text'			=> '#d2e3c8',
			),
			'blocks'   => array(
				'core/group'	=> array(
					'color'		=> array(
						'background'	=> '#739072',
						'text'			=> '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link'   => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Wenn du jetzt einen Gruppen- oder Spaltenblock auswählst, wird im Styles-Panel der Block-Seitenleiste eine Schaltfläche für den registrierten Abschnittsstil angezeigt.

Einen tieferen Überblick und weitere Beispiele für Abschnittsstilvariationen findest du in Styling von Abschnitten, verschachtelten Elementen und mehr mit Blockstilvariationen in WordPress 6.6 von Justin Tadlock, in der Dev Note von Aaron Robertshaw und in Blockstile: Erweitern der Blockstilvariationen Pull Request.

Blockstilvariationen mit Theme-Stilvariationen definieren

Obwohl es derzeit möglich ist, die Eigenschaft theme.json styles.variations zu verwenden, ist diese Methode nur vorübergehend verfügbar und sollte bald veraltet sein. Eine detailliertere Beschreibung findest du in diesem Abschnitt der Dev Note.

Voreinstellungen für Farbe und Typografie

Du kannst jetzt die Farbpalette und die Schriftfamilien deines Themes über die Schnittstelle für globale Stile ändern, indem du eine der verfügbaren Voreinstellungen auswählst.

Wenn dein aktuelles Theme Farb- und Typografievorgaben unterstützt, werden sie unter Farben und Typografieeinstellungen in den Globalen Stilen angezeigt.

Die folgenden Bilder zeigen zwei Farbpaletten, die von Twenty Twenty-Four bereitgestellt werden.

Um diese Funktion zu deinen Themes hinzuzufügen, musst du Stilvariationen erstellen, die nur Farben und Typografie enthalten. Die so definierten Stile werden extrahiert und für die Erstellung von Voreinstellungen verwendet.

Zu dieser Funktion siehe auch Core Editor Optimierung: Aktualisiere deine Designs und Erstelle individuelle Typografie- und Farbvariationen…

Seitenweite Hintergrundbilder

Ab WordPress 6.6 kannst du seitenweite Hintergrundbilder in der theme.json und im Site Editor definieren.

Ein seitenweites Bild ist der Wert einer background-image Eigenschaft, die auf dem body-Element auf der Site-Ebene festgelegt wird und auf jeder Website-Website erscheint.

In der theme.json kannst du unter der Eigenschaft styles.background die backgroundImage.url verwenden, um ein seitenweites Hintergrundbild zu definieren:

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "https://example.com/bg.png"
			}
		}
	}
}

Im obigen Beispiel haben wir einen absoluten Pfad zum Bild festgelegt, aber du kannst auch Hintergrundbilder mit Pfaden relativ zum Stammverzeichnis des Themes auf diese Weise definieren.

{
	"styles": {
		"background": {
			"backgroundImage": {
				"url": "file:./assets/bg.png"
			}
		}
	}
}

Dann kannst du die folgenden Bildrequisiten verwenden:

• backgroundPosition
• backgroundSize
• backgroundRepeat

Wenn du kein Theme-Entwickler bist, kannst du seitenweite Hintergrundbilder über das Styles-Panel des Site-Editors verwenden. In WordPress 6.6 findest du die entsprechenden Steuerelemente unter Stile > Layout.

Dies ist die erste Iteration für Hintergrundbilder. Wie es funktioniert, welche Einschränkungen es gibt und was als Nächstes kommt, erfährst du in der Dev Note Hintergrundbilder für die gesamte Website in WordPress 6.6.

Grid-Layout-Variante

Eine neue Layoutvariante des Gruppenblocks ermöglicht es dir, Elemente innerhalb einer Gruppe als Raster darzustellen.

Du kannst es ausprobieren, indem du einen Gruppenblock zur Arbeitsfläche des Editors hinzufügst und das Rasterlayout in den Blockeinstellungen auswählst.

Das Grid-Layout gibt es in zwei Varianten:

• Auto erzeugt die Rasterzeilen und -spalten automatisch
• Manuell ermöglicht es dir, die Anzahl der Spalten festzulegen, die du dem Grid hinzufügen möchtest

Füge Inhalte zu den Gitterelementen hinzu und ändere ihre Größe mithilfe der Griffe. Du kannst auch die Mindestspalte mit oder die Anzahl der Spalten anpassen, je nachdem, welche Art von Raster du ausgewählt hast.

Negative Ränder

Du kannst jetzt negative Ränder für alle Blöcke festlegen, die Randsteuerungen unterstützen. Vor WordPress 6.6 war diese Funktion nur in der theme.json verfügbar, während es jetzt einfach ist, negative Ränder auf Elemente anzuwenden, um Überlappungseffekte zu erzeugen.

Beachte, dass du ab WordPress 6.6 den negativen Wert manuell hinzufügen musst, wie in der folgenden Abbildung gezeigt.

Benutzerdefinierte Schatten

In WordPress 6.6 kannst du benutzerdefinierte Schatten in der Schnittstelle für globale Stile erstellen und bearbeiten. Um deine benutzerdefinierten Schatten zu erstellen, navigiere zum Site-Editor und wähle Schatten aus dem Menü Globale Stile. Hier findest du das Feld Benutzerdefiniert. Wenn du auf die Schaltfläche + klickst, erhältst du über ein neues Element Zugriff auf eine Reihe von Steuerelementen, mit denen du deinen Schatten anpassen oder ihn umbenennen/löschen kannst.

Benutzerdefinierte Voreinstellungen für das Seitenverhältnis

Theme-Entwickler können jetzt benutzerdefinierte Voreinstellungen für das Seitenverhältnis definieren, indem sie die Option settings.dimensions.aspectRatios in der theme.json setzen.

Zusätzliche Änderungen für Entwickler

Die Änderungen für Entwickler sind jedoch nicht auf Themes beschränkt. Weitere Ergänzungen und Verbesserungen betreffen die React-Bibliothek und verschiedene APIs.

Optionen-API: Deaktivierung von Autoload für große Optionen

Vor WordPress 6.6 wurde eine große Anzahl von Optionen bei jedem Laden der Seite automatisch geladen. Um dieses Standardverhalten zu verhindern, mussten Entwickler entweder "yes"/true oder "no"/false an den dritten Parameter der Funktionen add_option() oder update_option() übergeben. Da dieser Parameter jedoch optional war und der Standardwert "yes" lautete, wurden bei jedem Seitenaufruf große Mengen an unnötigen Daten geladen, was sich negativ auf die Leistung der Website auswirkte.

Um dieses Verhalten zu verhindern, führt WordPress 6.6 einige Änderungen an der Optionen-API ein:

Damit WordPress bestimmen kann, ob eine Option auf der aktuellen Seite geladen werden soll, wurde der Standardwert für den Parameter $autoload von add_option() und update_option() von "yes" auf null geändert. Der Parameter akzeptiert jetzt einen der folgenden Werte:

• true: Lade die Option auf jeder Seite, um eine zusätzliche DB-Abfrage zu vermeiden.
• false: Never autoload, die Option, um zu vermeiden, dass Daten auf jeder Seite geladen werden.
• null: Maybe autoload, was bedeutet, dass der Autoload-Wert dynamisch bestimmt werden soll. Standardmäßig werden Optionen automatisch geladen, wenn sie keine großen Werte enthalten.

Die Datenbankwerte haben sich entsprechend geändert, und jetzt ist der Autoload-Wert für jede Option einer der folgenden:

• on: muss auf jeder Seite automatisch geladen werden. Es wird mit einem expliziten true Wert hinzugefügt.
• off: darf nicht automatisch geladen werden und wird nur auf einer einzigen Verwaltungsseite verwendet. Es wird mit einem expliziten false Wert hinzugefügt.
• auto: sich auf das Standard-Autoloading-Verhalten von WP verlassen. In WP 6.6 sollte es automatisch geladen werden, aber das Verhalten kann sich in Zukunft ändern.
• auto-on: sollte automatisch geladen werden. Es wird dynamisch auf true gesetzt.
• auto-off: sollte nicht automatisch geladen werden. Es wird dynamisch auf false gesetzt.

Zusammen mit diesen Änderungen führt WordPress 6.6 mehrere Funktionen und Filter ein:

• Die Funktion wp_autoload_values_to_autoload() gibt alle Datenbankwerte zurück, die automatisch geladen werden sollen.
• Mit dem Filter wp_autoload_values_to_autoload kannst du die Liste der Optionen bearbeiten, die automatisch geladen werden sollen.
• Der wp_default_autoload_value Filter setzt den Wert einer Option, für die kein expliziter Wert festgelegt wurde.
• Der Filter wp_max_autoloaded_option_size ändert den Schwellenwert, ab dem Optionen standardmäßig nicht mehr automatisch geladen werden. Der Standardwert ist 150000. (150kb)

Diese Änderung ist besonders nützlich für komplexe Websites mit vielen Plugins und verdient die Aufmerksamkeit von Plugin-Entwicklern. Für einen gründlicheren Überblick empfehlen wir, die Voreinstellungen für das Seitenverhältnis zu überprüfen.

Verbesserungen an der React-Bibliothek

Zwei wichtige Änderungen betreffen die React-Bibliothek. Erstens enthält WordPress 6.6 React 18.3, das Warnungen für Verwerfungen und andere Änderungen hinzufügt, um Entwicklern zu helfen, sich auf React 19 vorzubereiten, sobald es stabil wird.

Zweitens können Entwickler jetzt die neue React JSX-Transformation verwenden, die mit React 17 eingeführt wurde.

Eine genauere Übersicht über diese Änderungen findest du unter Vorbereitung auf das React 19 Upgrade und in den JSX in WordPress 6.6 Dev Notes.

Verbesserungen an der Block-API

WordPress 6.6 bringt auch einige technische Änderungen an der Block-API, darunter die folgenden:

• Vereinheitlichte Erweiterungs-APIs
• Verbesserungen bei der Erkennung aktiver Blockvariationen
• Änderungen am Block Soziale Links in WordPress 6.6

Zusammenfassung

In diesem langen Beitrag haben wir uns mit vielen spannenden Funktionen und Änderungen beschäftigt, die mit WordPress 6.6 auf uns zukommen. Dazu gehören Überschreibungen von Blockmustern, Verbesserungen an Datenansichten, neue Funktionen für Theme-Entwickler und die Vereinheitlichung der Bearbeitungsmöglichkeiten in Site- und Post-Editoren. Aber es gibt noch viel mehr, das wir in diesem Artikel nicht behandelt haben, wie z. B. Rollbacks für automatische Updates.

Wenn du noch tiefer eintauchen willst, solltest du dir eine Reihe hervorragender Ressourcen von WordPress-Core-Mitarbeitern nicht entgehen lassen, die wir während unseres Tests von WordPress 6.6 herangezogen haben. Unter den vielen Ressourcen empfehlen wir die WordPress 6.6 Source of Truth von Anne McCarthy, die Learn WordPress Online Workshops auf Meetup, den WordPress Developer Blog, die Dev Notes, die im Make WordPress Core Blog veröffentlicht werden, und die regelmäßigen Updates von Birgit Pauli-Haack auf Gutenberg Times, um nur einige zu nennen.

Jetzt liegt es an dir. Hast du die Funktionen von WordPress 6.6 schon getestet? Welche Funktion oder Änderung hat dir am besten gefallen? Hinterlasse einen Kommentar und beteilige dich an der Diskussion.