WordPress 6.0 Arturo ist da und wie immer haben wir einen Blick hinter die Kulissen geworfen, um unseren Lesern eine Vorschau auf die Neuerungen der neuesten WordPress-Hauptversion zu geben.
Um es gleich vorweg zu nehmen: Wenn WordPress 5.9 uns in das Herz der Phase 2 von Gutenberg geführt hat, zielt WordPress 6.0 darauf ab, die bereits verfügbaren Anpassungswerkzeuge zu konsolidieren.
Aber die neue Version ist nicht nur das. Wie Matias Ventura in der vorläufigen Roadmap für 6.0 dargelegt hat, ist die Einführung des Webseiten-Editors ein großer Meilenstein, aber auch nur ein erster Schritt auf dem Weg.
WordPress 6.0 bringt erhebliche Verbesserungen in verschiedenen Bereichen des CMS, von der Benutzerfreundlichkeit bis zur Leistung, einschließlich der folgenden:
- Verbesserte Informationsarchitektur und Vorlagendurchsuchung
- Verbesserte Vorlagenerstellung
- Neue Hooks
- Webfonts API
- Ein neuer Browse-Modus für den Webseiten-Editor
- Alternative globale Stile
- Ein verbesserter Navigationsblock
- Neue Design-Tools
- Verbesserte Leistung
- Und vieles mehr…
Aber das ist noch nicht alles. WordPress 6.0 bringt eine beeindruckende Anzahl von Änderungen mit sich: 251 Trac-Tickets, darunter 97 Funktionen und Verbesserungen und 131 Fehlerbehebungen.
Ja, es gibt eine Menge zu besprechen. Also lass uns nicht länger zögern und herausfinden, was es in WordPress 6.0 Neues gibt.
Webfonts API
Eine neue Webfonts-API bietet jetzt eine standardisierte Möglichkeit, Webfonts in WordPress zu laden, um die Leistung und den Datenschutz der Nutzer/innen zu gewährleisten.
Seit WordPress 6.0 kannst du neue Webfonts nur noch über deine theme.json registrieren.
Die Verwendung der theme.json ist ganz einfach. Alles, was du tun musst, ist, eine neue Schriftfamilie zum Abschnitt typography hinzuzufügen. Der folgende Code zeigt ein Beispiel für die Registrierung einer Webfont:
{
"settings": {
"typography": {
"fontFamilies": [
{
"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
"name": "System Font",
"slug": "system-font"
},
{
"fontFamily": "\"Source Serif Pro\", serif",
"name": "Source Serif Pro",
"slug": "source-serif-pro"
},
{
"fontFamily": "\"Inter\", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
}
]
}
]
}
}
}Der obige Code fügt die Schriftfamilie Inter zu den standardmäßig verfügbaren fontFamilies in Twenty Twenty-Two hinzu. Wenn du es selbst ausprobieren willst, lade die Inter Webfont von Google Fonts in den Ordner ./assets/fonts herunter und füge den obigen Code in den Abschnitt settings.typography der theme.json von Twenty Twenty-Two ein. Sobald du fertig bist, speicherst du die Datei und kehrst zur Webseiten-Bearbeitungsoberfläche zurück.
Das folgende Bild zeigt das Ergebnis im Editor.
Die Webfonts-API registriert nur Schriftarten, die für die Darstellung von Blöcken auf der aktuellen Seite benötigt werden. Das ist besonders nützlich bei Webfonts, die in Stilvarianten definiert sind. Außerdem optimiert die API die Anzahl der HTTP-Anfragen, indem sie die Schriften nach Schriftfamilien registriert und in die Warteschlange stellt.
Mehr über die neue API erfährst du im Webfonts API Pull Request, in Status of Webfonts API for WordPress 6.0 Inclusion und in Global Styles variations in WordPress 6.0.
Globale Stile umschalten
Globale Stilvariationen sind eine der am meisten erwarteten Funktionen, die mit WordPress 6.0 kommen. Theme-Autoren können jetzt mehrere Sets von Global Styles mit ihren Themes bündeln, so dass Nutzer/innen mit einem einzigen Klick zwischen den Stilvarianten wechseln können.
Das ist fast so, als hätte man fertige Child-Themes mit vordefinierten Styles für jedes Theme.
Um eine Stilvariation zu deinem Block-Theme hinzuzufügen, fügst du eine alternative JSON-Datei in einen Styles-Ordner im Stammverzeichnis deines Themes ein.
Themes, die globale Stilvariationen unterstützen, zeigen ein neues Element Stile durchsuchen in der Seitenleiste Globale Stile an. Dieser führt zu einem Panel, in dem Themenutzer eine Liste der verfügbaren Stile finden.
Wähle einen globalen Stil aus der Liste und das Styling wird automatisch auf deine gesamte Webseite angewendet.
Die neue Funktion ermöglicht es Theme-Entwicklern, eine unbegrenzte Anzahl von Style-Variationen zu erstellen und ist perfekt auf die neue Webfonts API abgestimmt.
Das folgende Bild zeigt einen benutzerdefinierten Stil aus dem vorherigen Beispiel, bei dem eine andere Schriftart auf die Überschriften angewendet wurde.
Wenn du es selbst ausprobieren willst, füge einen Styles-Ordner zum Stammverzeichnis deines Block-Themes hinzu, erstelle eine neue JSON-Datei mit einem aussagekräftigen Namen, öffne sie in deinem Lieblingscode-Editor und füge den folgenden Code ein:
{
"version": 2,
"settings": {
"color": {
"duotone": [
{
"colors": [ "#143F6B", "#EFEFEF" ],
"slug": "foreground-and-background",
"name": "Foreground and background"
},
{
"colors": [ "#143F6B", "#FEB139" ],
"slug": "foreground-and-secondary",
"name": "Foreground and secondary"
},
{
"colors": [ "#143F6B", "#F6F54D" ],
"slug": "foreground-and-tertiary",
"name": "Foreground and tertiary"
},
{
"colors": [ "#F55353", "#EFEFEF" ],
"slug": "primary-and-background",
"name": "Primary and background"
},
{
"colors": [ "#F55353", "#FEB139" ],
"slug": "primary-and-secondary",
"name": "Primary and secondary"
},
{
"colors": [ "#F55353", "#F6F54D" ],
"slug": "primary-and-tertiary",
"name": "Primary and tertiary"
}
],
"palette": [
{
"slug": "foreground",
"color": "#143F6B",
"name": "Foreground"
},
{
"slug": "background",
"color": "#EFEFEF",
"name": "Background"
},
{
"slug": "primary",
"color": "#F55353",
"name": "Primary"
},
{
"slug": "secondary",
"color": "#FEB139",
"name": "Secondary"
},
{
"slug": "tertiary",
"color": "#F6F54D",
"name": "Tertiary"
}
]
},
"typography": {
"fontFamilies": [
{
"fontFamily": ""Inter", sans-serif",
"name": "Inter",
"slug": "inter",
"fontFace": [
{
"fontFamily": "Inter",
"fontWeight": "200 900",
"fontStyle": "normal",
"fontStretch": "normal",
"src": [ "file:./assets/fonts/inter/Inter.ttf" ]
}
]
}
]
}
},
"styles": {
"blocks": {
"core/post-title": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"core/query-title": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)"
}
}
},
"elements": {
"h1": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h2": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h3": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h4": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h5": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
},
"h6": {
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)",
"fontWeight": "700"
}
}
},
"typography": {
"fontFamily": "var(--wp--preset--font-family--inter)"
}
}
}Den vollständigen Code, der im obigen Beispiel verwendet wird, findest du auf GitHub und gist.
Ausführliche Übersichten über Global Styles und Theme.json finden Entwickler in den Dokumentationsartikeln Global Settings & Styles und Theme.json.
Du kannst dir auch die neueste Version von Twenty Twenty-Two ansehen, die jetzt drei neue Stilvarianten enthält.
Blockmuster überall
Eines ist sicher, Blockmuster spielen in der aktuellen Phase der WordPress-Entwicklung eine zentrale Rolle. Erstmals mit WordPress 5.5 eingeführt, wurden die Blockmuster im Laufe der Zeit regelmäßig verbessert.
Ab WordPress 5.9 haben die Muster aus dem Patterns-Verzeichnis ihren Weg in unsere WordPress-Webseiten gefunden, indem sie dynamisch aus dem Patterns-Verzeichnis abgerufen und in den Block-Inserter geladen werden.
Und jetzt kann jeder ein Musterentwickler werden, dank eines brandneuen Online-Tools. Mit dem Pattern Creator kannst du deine besten Blockmuster erstellen, bearbeiten und an das Pattern Directory senden. Alles, was du für den Anfang brauchst, ist ein WordPress.org-Konto.
Und mit WordPress 6.0 gibt es weitere Verbesserungen bei den Blockmustern.
Erstens sind Blockmuster in der Vorlagenbearbeitung leichter zu finden. Der Quick-Inserter zeigt jetzt nur noch Blockmuster an, wenn du ihn auf der obersten Ebene einer Vorlage aufrufst, d.h. wenn der Block, den du zu deiner Vorlage hinzufügen willst, der direkte Nachkomme des Dokuments ist.
Das ist der Fall, wenn die folgenden Bedingungen erfüllt sind:
- Du bearbeitest gerade eine Blockvorlage
- Der Quickinserter befindet sich auf der Stammebene
- Du fügst einen Block zwischen anderen Blöcken ein (d.h. weder der erste noch der letzte Block auf der Seite)
Eine weitere nützliche Funktion ermöglicht es Theme-Entwicklern jetzt, empfohlene Muster in die theme.json aufzunehmen. Um das auszuprobieren, durchsuchst du das Patterns-Verzeichnis, suchst die Patterns, die du den Nutzern deines Themes empfehlen möchtest, nimmst den Pattern-Slug aus der URL und fügst ihn wie folgt zu deiner theme.json hinzu:
"patterns": [
"image-with-angled-overlay-shape-call-to-action-button-and-description",
"hero-section-with-overlap-image"
],Die Nutzer/innen finden deine empfohlenen Muster im Block-Inserter.
Eine leistungsstarke Funktion für Muster, die mit WordPress 6.0 eingeführt wird, ist die implizite Musterregistrierung. Themes können nun implizit Muster registrieren, indem sie diese als PHP-Dateien in einem neuen Verzeichnis /patterns im Stammverzeichnis des Themes deklarieren.
Der Prozess ist ziemlich einfach:
- erstelle einen neuen Musterordner im Stammverzeichnis deines Themes,
- erstelle eine Blockgruppe im Blockeditor,
- kopiere dein HTML und füge es in eine neue Textdatei ein,
- stelle die folgende Überschrift voran,
- und speichere die Datei als PHP in deinem Patterns-Ordner.
<?php
/**
* Title: My pattern
* Slug: my-theme/my-pattern
* Categories: text
*/
?>Und das war’s. Du hast jetzt ein neues Blockmuster, das im Block Inserter angezeigt wird.
Muster für die Seitenerstellung sind eine weitere Funktion, die mit WordPress 6.0 eingeführt wurde und sich auf Blockmuster bezieht. Wenn du eine neue Seite erstellst, wird ein Modal mit einer Reihe von Blockmustern angezeigt, die du für die Erstellung deiner Seite auswählen kannst.
Das Modal wird nur angezeigt, wenn mindestens ein Muster die Unterstützung für die core/post-content-Blocktypen deklariert.
WordPress 6.0 enthält standardmäßig keines dieser Muster. Das Modal wird also erst angezeigt, wenn du einem vorhandenen Muster Unterstützung hinzufügst. Das Hinzufügen des Modals zum Seitenerstellungsbildschirm ist jedoch ziemlich einfach.
Wenn du ein Blockmuster für dein Theme registriert hast, wie im obigen Beispiel gezeigt, kannst du die Unterstützung für das Modal über die Eigenschaft BlockTypes hinzufügen, wie im Beispielmuster unten gezeigt:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<!-- /wp:heading -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>Heading</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:list -->
<ul><li>List item</li></ul>
<!-- /wp:list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->Speichere diesen Code in einer PHP-Datei im Verzeichnis /patterns deines Themes. Erstelle dann in deinem WordPress Dashboard eine neue Seite. Du solltest ein neues Modal sehen, wie in der folgenden Abbildung dargestellt:
Einen genaueren Blick auf die Seitenerstellungsmuster findest du unter Seitenerstellungsmuster in WordPress 6.0.
Einen umfassenderen Überblick über die Entwicklung von Blockmustern findest du unter Neue Funktionen für die Arbeit mit Mustern und Themen in WordPress 6.0 und im Tracking Issue auf GitHub.
Site Editing Funktionen
Die Entwicklung des Site Editing ist mit WordPress 5.9 noch nicht abgeschlossen. WordPress 6.0 geht noch einen Schritt weiter, indem es die Funktionen für die visuelle Themeerstellung verbessert und neue Vorlagenoptionen für Blockthemen bereitstellt. Und weitere Funktionen sind auf dem Weg.
Visuelle Themeerstellung
WordPress 6.0 führt ein verbessertes Export-Tool für Block-Themes ein, mit dem du das aktuelle Theme mit all deinen Änderungen und Anpassungen herunterladen kannst.
Falls du das Export-Tool für Block-Themes noch nicht benutzt hast: Es ist ein leistungsfähiges Tool zur Webseiten-Bearbeitung, mit dem du deine Styles und Vorlagen als ganzes Theme exportieren kannst.
Wenn du mit deinen Änderungen zufrieden bist, öffnest du in der Benutzeroberfläche des Website-Editors die Optionen-Seitenleiste und suchst den Bereich Tools. Über die Schaltfläche Exportieren kannst du das aktuelle Thema mit all deinen Stil- und Vorlagenanpassungen in einer Zip-Datei herunterladen.
Anschließend kannst du dein Theme exportieren und auf einer beliebigen WordPress-Webseite installieren.
Wir haben das verbesserte Theme-Export-Tool an einer lokalen WordPress-Installation getestet und festgestellt, dass fast alles so funktioniert, wie wir es erwartet haben… 😅
Wie auch immer, das Export-Tool befindet sich noch in der Entwicklung und wir können heute nur einen kleinen Einblick in sein enormes Potenzial geben. Stell dir die Möglichkeit vor, deine Themes von der Bearbeitungsoberfläche deiner Webseite aus zu erstellen und sie auf eine beliebige Anzahl von Installationen zu verteilen. Und zwar unabhängig davon, ob du ein Entwickler bist oder nicht…
Es gibt noch eine Menge offener Probleme, die behoben werden müssen, weshalb wir davon ausgehen, dass wir bald einige Verbesserungen sehen werden. Wenn du neugierig bist und mehr über Visual Theme Building erfahren möchtest (so wie wir), kannst du das Tracking Issue auf GitHub verfolgen.
Mehr Template-Optionen in Block-Themes
In früheren WordPress-Versionen hatten wir nur eine begrenzte Anzahl von Vorlagentypen zur Verfügung.
Mit WordPress 6.0 gibt es jetzt mehrere neue Vorlagentypen, darunter Autor, Kategorie, Datum, Tag und Taxonomie.
Diese Ergänzung sollte den Arbeitsablauf bei der Bearbeitung deiner Webseite vereinfachen. Um sie auszuprobieren, wählst du einfach eine neue Vorlage aus der Dropdown-Liste aus, fügst die erforderlichen Blöcke hinzu, speicherst deine Änderungen und schaust dir an, wie sie im Frontend aussieht. Ja, so einfach ist das. Wenn du das mit der oben erwähnten Funktion zum Exportieren von Themes kombinierst, verstehst du besser, was wir bald von der Webseiten-Bearbeitung erwarten können.
Verbesserungen der Benutzeroberfläche und der Benutzerfreundlichkeit
WordPress 6.0 führt eine Reihe von Änderungen an der Benutzeroberfläche ein, von denen viele dazu dienen, Ordnung in die Seitenleiste zu bringen. Insgesamt dürften diese Änderungen einen erheblichen Einfluss auf das gesamte Bearbeitungserlebnis haben. Hier werden wir nur ein paar davon erwähnen, aber du kannst in den Gutenberg-Versionshinweisen eine umfassendere Liste der Änderungen nachlesen (siehe Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0).
Verbesserungen in der Listenansicht
An der Listenansicht wurden zahlreiche Änderungen vorgenommen, die die Benutzerfreundlichkeit der Komponente verbessern.
Erweitern der Listenansicht bei Auswahl
Wenn du im Editor auf einen Block klickst, wird der Block jetzt automatisch in der Listenansicht hervorgehoben. Wenn der Block in einem übergeordneten Block verschachtelt ist, wird der übergeordnete Block aufgeklappt und das Element im Blockbaum angezeigt.
Listenansicht standardmäßig eingeklappt
Vor WordPress 6.0 war die Listenansicht standardmäßig aufgeklappt, wenn du sie geöffnet hast.
Da ein Beitrag aber oft aus komplexen Strukturen von verschachtelten Blöcken besteht, macht es durchaus Sinn, den Blockbaum beim Öffnen der Listenansicht einzuklappen.
In Version 6.0 ist die Listenansicht in allen Editoren standardmäßig eingeklappt, so dass der Blockbaum auf einen Blick viel verständlicher ist.
Fokus auf die Schaltfläche Listenansicht
Wenn du das Listenansicht-Panel öffnest, kehrt der Fokus jetzt korrekt zum Listenansicht-Button zurück. Das ist besonders nützlich, wenn du die Listenansicht mit der Tastatur durchsuchst, und sorgt für ein flüssigeres und nahtloseres Bearbeitungserlebnis.
Mehrfache Blockauswahl und Drag & Drop
Eine weitere Änderung in der Listenansicht ermöglicht es dir, mehrere Blöcke auf derselben Ebene auszuwählen und sie per Drag & Drop an eine andere Position innerhalb der Liste zu ziehen.
Blockstil-Vorschauen
Vor WordPress 6.0 befanden sich die Blockstilvorschauen in der Blockseitenleiste und nahmen einen beträchtlichen Teil des Stile-Panels ein.
In Version 6.0 erscheinen nur noch die Namen der Stilvariationen im Stil-Panel, während die Stilvorschauen außerhalb der Seitenleiste angezeigt werden, wenn der Stilname mit dem Mauszeiger bewegt wird oder den Fokus erhält.
Diese Änderung verringert die Größe der Seitenleiste und macht die Stilnamen besser sichtbar.
Abschnitt Absatztypografie
Um Ordnung in die Block-Seitenleiste zu bringen, wurde das Drop Cap-Steuerelement für den Absatz-Block von seinem Abschnitt in den Typografie-Abschnitt verschoben.
Mit dieser Änderung befinden sich nun alle Steuerelemente für Typografieeinstellungen im selben Abschnitt, was zu einer einheitlicheren Benutzererfahrung führt.
Rahmen- und Farbeinstellungen wurden in die Werkzeugleiste verschoben
Um Ordnung in die unübersichtliche Einstellungs-Seitenleiste zu bringen, wurden die Steuerelemente für die Rahmen- und Farbeinstellungen in das ToolsPanel verschoben und können in verschiedenen Kontexten ein- und ausgeklappt werden.
Diese Änderung soll die Bearbeitung mit mehreren Blöcken vereinfachen und mehr Konsistenz in die Seitenleiste bringen.
Kategorie-Erinnerung im Post-Publishing-Panel
Wenn du es eilig hast oder regelmäßig eine große Anzahl von Blogbeiträgen veröffentlichst, kannst du leicht Tags oder Kategorien vergessen. Wenn du dich oft in einer solchen Situation befindest, wirst du die Tag-Erinnerung im Post-Publishing-Panel sehr nützlich finden.
Damit Webseiten-Administratoren und Autoren sicherstellen können, dass ihren Beiträgen die erforderlichen Kategorien zugewiesen sind, gibt es in WordPress 6.0 einen neuen Vorschlag: Eine Kategorie zuweisen, wenn dem Beitrag noch keine Kategorie zugewiesen wurde.
Die folgende Abbildung zeigt einen Vergleich zwischen dem Beitragspublikationsfenster in WordPress 5.9 und 6.0.
Code-Editor zum Site-Editor hinzugefügt
Seit WordPress 6.0 ist der Code-Editor nun auch im Seiteneditor verfügbar. Wie beim Beitragseditor findest du den Code-Editor unter dem Menüpunkt Optionen.
Block Locking UI
Ein neuer Punkt „Sperren“ im Dropdown-Menü „Weitere Einstellungen“ öffnet ein Popup, mit dem du verhindern kannst, dass Nutzer/innen Blöcke verschieben oder entfernen (oder beides).
Dies ist besonders nützlich bei der Bearbeitung von Vorlagen und wiederverwendbaren Blöcken, wo du auch die Bearbeitung von Blöcken einschränken kannst.
Die neue Funktion kann programmatisch mit der neuen Einstellung canLockBlocks deaktiviert werden.
Der folgende Code aktiviert die Blocksperrfunktion nur für Benutzer mit der Rolle Editor oder höher:
add_filter(
'block_editor_settings_all',
function( $settings, $context ) {
$settings['canLockBlocks'] = current_user_can( 'delete_others_posts' );
return $settings;
},
10,
2
);Entwickler können die Block Locking UI auch für bestimmte Blocktypen ausblenden, indem sie die Eigenschaft lock verwenden:
{
"apiVersion": 2,
"supports": {
"lock": false
}
}Mehr über das Sperren von Blöcken erfährst du unter Einstellungen für das Sperren von Blöcken in WordPress 6.0.
Mehrfache Auswahl
Es ist jetzt möglich, Text über mehrere Blöcke hinweg auszuwählen.
Beibehaltung von Stilen
Wenn du Blöcke umwandelst oder neue Schaltflächen erstellst, werden jetzt mehrere Stile beibehalten.
Das Bild unten zeigt einen Listenblock mit verschiedenen Stilen.
Wenn du den Listenblock in Absätze umwandelst, behalten die neuen Blöcke die gleichen Stile wie die vorherigen Listenelemente.
Die gleiche Verbesserung gilt für neue Schaltflächen, die zu einem Schaltflächenblock hinzugefügt werden. Diese übernehmen jetzt das Styling der angrenzenden Schaltflächen.
Neue Kernblöcke
Die Anzahl der Kernblöcke nimmt ständig zu. Wenn du dich fragst, welche Core-Blöcke derzeit verfügbar sind, gibt es jetzt eine Handbuchseite mit einer vollständigen Liste der Core-Blöcke, die im Gutenberg-Plugin enthalten sind. Für jeden Block werden Name, Kategorie, Unterstützungen und Attribute angegeben sowie ein nützlicher Link zum Quellcode, den Blockentwickler/innen lieben werden.
Und mit WordPress 6.0 werden noch mehr Blöcke kommen. Hier findest du die Blöcke, die du in der kommenden Version erwarten kannst.
Kommentare Query Loop
Ähnlich wie der Block „Query Loop“ zeigt der neue Block „Comment Query Loop“ die Kommentare der Beiträge an. Es handelt sich um einen erweiterten Block, der mehrere innere Blöcke enthält, die du separat bearbeiten und konfigurieren kannst.
Wie die Abbildung unten zeigt, kannst du jeden der Blöcke im Block Kommentarabfrage-Schleife auswählen, um sein Aussehen nach Belieben anzupassen. Du kannst auch weitere Blöcke hinzufügen oder bestehende Blöcke verschieben oder entfernen (Quellcode).
Mehr lesen
Ein neuer und anpassbarer Read More -Block ermöglicht es dir, verschiedene Aspekte der Read More-Schaltfläche anzupassen: Rahmen, Farben, Ecken, Typografie und mehr (Quellcode).
Das ist eine großartige Ergänzung, denn so kannst du den Weiterlesen-Link auch außerhalb des Auszugsblocks hinzufügen und anpassen.
Keine Ergebnisse in der Abfrageschleife
Der Block „Keine Ergebnisse“ ist ein Blockcontainer, in den du einen beliebigen Text oder Block einfügen kannst, der angezeigt wird, wenn die Abfrage keine Ergebnisse liefert. Um den Block „Keine Ergebnisse“ zu einer Abfrageschleife hinzuzufügen, wählst du die Abfrageschleife aus und klickst auf das Plus-Symbol in der unteren rechten Ecke, um den Quick-Inserter zu starten. Suche dann nach „Keine Ergebnisse“. Der Block ist außerhalb der Abfrageschleife (Quellcode) nicht verfügbar.
Avatar und Beitragsautoren-Biografie
WordPress 6.0 führt auch neue Blocktypen ein, mit denen du den Autorenblock in seine Bestandteile aufteilen und separat in deinem Inhalt verwenden kannst.
Der Block „Post Author Biography“ enthält die Beschreibung des Autors (Quellcode).
Der Avatar-Block zeigt einfach den Avatar eines Nutzers an und ermöglicht es dir, zwischen den Autoren der Website zu wählen (Quellcode).
Dieser Block ist besonders nützlich, um den Avatar eines Autors außerhalb des Autoreninfoblocks oder der Kommentare zu zeigen. Du könntest ihn zum Beispiel auf einer Seite verwenden, die allen Autoren gewidmet ist, oder auf einer Seite, auf der die Bewertungen deiner Nutzer/Leser angezeigt werden.
Verbesserungen an bestehenden Blöcken
WordPress 6.0 führt auch einige Änderungen und Verbesserungen an bestehenden Blöcken ein, die sich stark auf deinen Bearbeitungsprozess auswirken können. Der Navigationsblock wird von mehreren Änderungen betroffen sein, aber auch in anderen Blöcken wie Query Loop, Featured Image, Group und Social Icons gibt es Verbesserungen.
Verbesserungen am Navigationsblock
In den letzten Monaten wurde der Navigationsblock mehrfach verbessert und bietet jetzt eine deutlich benutzerfreundlichere Oberfläche.
Zunächst wurde dem Navigationslink-Block eine umfangreiche Vorschau hinzugefügt. Wenn du einen Link hinzufügst, der auf eine öffentlich zugängliche Ressource verweist, wird ein Vorschaubild dieser Ressource angezeigt, wenn du auf die Link-Schaltfläche in der Symbolleiste des Blocks klickst.
Einige weitere Änderungen wirken sich auf das gesamte Bearbeitungserlebnis aus.
Wenn du jetzt ein neues Menü hinzufügst und nur ein Navigationsmenü existiert, wird es standardmäßig als einziges verfügbares Menü angezeigt. Diese Änderung sollte deinen Bearbeitungsprozess beschleunigen, wenn du nur ein einziges Navigationsmenü hast.
Navigationslinks hatten bereits ein Beschreibungsfeld, in das die Nutzer/innen einen Text zur Beschreibung ihrer Navigationslinks eingeben konnten. In früheren WordPress-Versionen konnten Themes diese Funktion jedoch nicht unterstützen.
Jetzt, mit WordPress 6.0, erscheint ein <span class="wp-block-navigation-item__description"> nach der Bezeichnung des Links.
In Twenty Twenty-Two wird das Element .wp-block-navigation-item__description per CSS ausgeblendet, aber Themes können eine display: block Eigenschaft hinzufügen, um die Linkbeschreibung anzuzeigen.
Abfrage-Schleifen-Filter und Featured Images
Im Einstellungsbereich der Abfrageschleifenfilter werden jetzt Eingabefelder für benutzerdefinierte Taxonomien angezeigt. Damit können Nutzer den aktuellen Beitragstyp nach einer oder mehreren benutzerdefinierten Taxonomien filtern, die für den ausgewählten Beitragstyp registriert sind.
Es ist jetzt auch möglich, Beiträge nach mehreren Autoren zu filtern, während du in früheren Versionen nur einen einzelnen Autor aus einer Dropdown-Liste auswählen konntest.
Außerdem kannst du jetzt auch die Abmessungen des Featured Image innerhalb eines Query Loop-Blocks festlegen.
Typografie- und Rahmenunterstützung in responsiven Gruppenblöcken
Gruppen- und Zeilenblöcke unterstützen jetzt Typografie-Einstellungen. Mit dieser Änderung können Nutzer/innen dieselben Typografie-Einstellungen auf eine ganze Gruppe von Blöcken auf einmal anwenden und so ein paar Klicks sparen, wenn es darum geht, eine Gruppe mit mehreren verschachtelten Blöcken zu formatieren.
Der Gruppenblock wurde weiter verbessert. Jetzt kannst du Blöcke ganz einfach mit einem einzigen Klick in Stapel oder Reihen gruppieren.
Markiere einfach die Blöcke, die du gruppieren möchtest, und wähle eines der drei Steuerelemente in der Blocksymbolleiste: Gruppe, Reihe, Stapel.
Sobald du die Blöcke gruppiert hast, zeigt ein neues Panel in der Einstellungsseitenleiste die Beschreibungen der Gruppenvariationen an, so dass du mit ein paar Klicks zwischen den Variationen wechseln kannst.
WordPress 6.0 führt auch die Unterstützung von Seitenrändern für Gruppenblöcke ein, so dass die Benutzer/innen die oberen und unteren Ränder separat steuern können.
Featured Image im Titelblock
Mit WordPress 6.0 gibt es in der Symbolleiste des Blocks einen Schalter für die Verwendung von Featured Images. Dank dieses neuen Steuerelements kannst du mit einem einzigen Klick vom aktuellen Bild zum Featured Image wechseln.
Labels in sozialen Symbolen ein-/ausblenden
Eine kleine, aber nützliche Verbesserung des Social Icons-Blocks ermöglicht es den Nutzern jetzt, die Beschriftung der Icon-Links ein- und auszuschalten.
Wenn du diese Option aktivierst, kannst du den Standardnamen des Dienstes anzeigen lassen oder eigene Beschriftungen für deine Icons festlegen.
Zusätzliche Block-Verbesserungen
Die kommende WordPress-Version bringt auch eine Vielzahl von Verbesserungen für viele andere Blöcke.
Zum Beispiel kannst du jetzt die Ränder von Columns-Blöcken kontrollieren (Gutenberg 12.7).
Eine weitere nützliche UX-Verbesserung ermöglicht es dir, interne Links mit einem einfachen [[ Tastaturtrigger einzufügen.
Es ist jetzt einfacher, den Abstand um die Bilder in einem Galerie-Block zu kontrollieren, dank der neuen Block-Abstandskontrolle.
Änderungen für Entwickler und Leistungsverbesserungen
WordPress 6.0 bietet auch viele neue Funktionen für Entwickler.
- Ein neuer
wp_content_img_tag-Filter ermöglicht die Anpassung von Bildern in einem Blob von HTML-Inhalten (siehe Neuer Filter zur Änderung von Inhaltsbildern in WordPress 6.0). - Die
parse_request-Methode wurde geändert, um die Anzahl der Abfragen zu reduzieren, wenn derdo_parse_request-Filter false zurückgibt (siehe Änderungen am do_parse_request-Filter in WordPress 6.0). - Jetzt kannst du Blöcke aus einem Theme heraus registrieren (siehe Registrierung von Blöcken aus Themes heraus).
- Eine neue Eigenschaft
ancestormacht einen Block nur innerhalb der angegebenen Blocktypen verfügbar (siehe Neue Eigenschaft ancestor in block.json).
Die neue Version bringt auch einen Leistungsschub, mit einigen Ergänzungen der WordPress Caching API, Leistungsverbesserungen bei Taxonomie-Term-Abfragen und weiteren Leistungsverbesserungen für einzelne Websites mit großen Nutzerzahlen.
Damit endet unser Überblick über die neuen Funktionen und Änderungen, die du nach dem Update deiner WordPress-Webseiten auf 6.0 sehen wirst.
Aber das sind nur einige der Verbesserungen, die mit WordPress 6.0 kommen. Eine vollständige Liste findest du in den Versionshinweisen von Gutenberg und im WordPress 6.0 Field Guide.
Zusammenfassung
Wie oben erwähnt, können wir jetzt sagen, dass wir uns mitten in der zweiten Phase der Gutenberg-Entwicklung befinden, der Anpassungsphase.
Full Site Editing ist jetzt Teil des WordPress-Kerns und 6.0 und die folgenden Versionen werden weitere Verbesserungen voranbringen, zusätzlich zu dem was wir jetzt schon haben und nutzen können.
All dies wird enorme Auswirkungen auf das WordPress-Ökosystem und das Web insgesamt haben, auch wenn man bedenkt, dass zum Zeitpunkt der Erstellung dieses Artikels
WordPress von 64,2 % aller Webseiten genutzt wird, deren Content Management System wir kennen. Das sind 43,0 % aller Webseiten. (Quelle W3Techs)
Wir hören hier erst einmal auf. Die Liste der Funktionen und Verbesserungen, die mit WordPress 6.0 eingeführt werden, kann nicht in einem einzigen Beitrag abgearbeitet werden, aber wir hoffen, dass wir zumindest die Neuerungen hervorgehoben haben, die die größte Auswirkung auf die Art und Weise haben werden, wie wir WordPress tagtäglich nutzen.
Wir möchten diesen Artikel mit einigen Fragen an unsere Leserinnen und Leser abschließen!
Bitte teile deine Meinung mit der Community im Kommentarbereich unten. 👇
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.
Schreibe einen Kommentar