- Beta 1 & Feature Freeze: 20. September 2022 – Ab diesem Datum konzentrieren sich die Hauptmitwirkenden auf das Testen und die Behebung von Fehlern
- Release Candidate 1: 4. Oktober 2022 – Veröffentlichung des Handbuchs mit Entwicklungshinweisen
- Dry Run: 24. Oktober 2022
- WordPress 6.1 General Release: November 1, 2022
Automatische Bildkonvertierung ins WebP-Format
WebP wurde mit WordPress 5.8 eingeführt und ist ein modernes Bildformat, das eine hervorragende verlustfreie und verlustbehaftete Komprimierung für Bilder im Internet bietet. Obwohl du deine WebP-Bilder über die Mediathek in WordPress hochladen kannst, unterstützt WordPress keine automatische Umwandlung von Bildern in das WebP-Format. Um diese Funktion auf deiner Website zu aktivieren, musst du ein WebP-WordPress-Plugin eines Drittanbieters verwenden. Mit WordPress 6.1 werden nun automatisch Bilduntergrößen in alternativen Dateiformaten erstellt. Außerdem führt WordPress 6.1 drei neue Filter ein, mit denen Entwickler/innen den Mime-Typ der Untergrößen steuern können, die von WordPress im Frontend erzeugt und verwendet werden. Und mit 6.1 wird WordPress standardmäßig WebP-Untergrößen erzeugen und verwenden, wenn diese verfügbar sind. Wenn ein Nutzer ein JPEG-Bild hochlädt, kann WordPress automatisch sowohl WebP- als auch JPEG-Subgrößen erzeugen. WordPress ist dann in der Lage, WebP-Bilder auf dem Frontend zu verwenden. JPEG-Bilder werden in Kontexten verwendet, in denen WebP noch nicht unterstützt wird (z. B. bei E-Mails). Dies ist das Standardverhalten. Die Entwickler können die Standardeinstellungen außer Kraft setzen und mit Hilfe von Filtern festlegen, welches Bildformat verwendet werden soll. Wenn neue Mime-Typen erstellt werden, werden nur die Bilder beibehalten, die kleiner sind als ihre jeweiligen Originale. Standardmäßig werden zusätzliche Mime-Typen nur für Standardbildgrößen und für benutzerdefinierte Größen erzeugt, wenn du dich für die Unterstützung entschieden hast. Mit dieser Änderung werden auch drei neue Filter eingeführt, die eine vollständige Kontrolle über die Ausgabe sekundärer Mime-Typen ermöglichen:wp_image_sizes_with_additional_mime_type_supportermöglicht es Entwicklern, den Bild-Mime-Typ für jede Größe zu steuernwp_upload_image_mime_transformsermöglicht es Entwicklern, den Mime-Typ für eine bestimmte Eingabe zu steuern und sogar den ursprünglichen Mime-Typ zu überschreibenwp_content_image_mimeskann verwendet werden, um die Reihenfolge der Mime-Typ-Ausgabe für Inhaltsbilder zu steuern. Beim Rendern von Bildern auf der Seite wird der erste verfügbare Mime-Typ verwendet.
Die Ressourcen für die Bilderzeugung beim Hochladen eines Bildes werden drastisch erhöht, die Ressourcen für die Bereitstellung eines Bildes werden jedoch gesenkt. Da das Hochladen von Bildern im Vergleich zum Bereitstellen von Bildern sehr selten ist, sollte sich der zusätzliche Aufwand für das Komprimieren und Speichern von Bildern lohnen.Und:
Der dramatische Anstieg des Ressourcenverbrauchs beim Hochladen eines Bildes ist ein sehr schlechter Nebeneffekt. Das bedeutet, dass viele Uploads fehlschlagen und die Nutzer/innen im Stich lassen werden. Außerdem werden dadurch die Supportanfragen sowohl bei WordPress als auch bei den Hosting-Unternehmen drastisch ansteigen. Das ist nicht akzeptabel. Selbst wenn die Unterstützung von Multimime-Bildern in WordPress notwendig ist, scheint der aktuelle Ansatz keine gute Lösung zu sein.Zum Zeitpunkt der Erstellung dieses Artikels ist noch unklar, ob die Verwendung des WebP-Formats in Bilduntergrößen standardmäßig aktiviert sein wird oder ob der Website-Administrator das WebP-Format im Frontend seiner Website aktivieren muss. In der Zwischenzeit wurde die automatische Umwandlung von JPEG in WEBP vorübergehend deaktiviert. Eine aussagekräftige Zusammenfassung der laufenden Diskussion findest du im Artikel von Sara Gooding auf WP Tavern.
Fluid Typography
WordPress 6.1 bietet Unterstützung für Fluid Typography übercalc/clamp CSS-Funktionen.
Der Ausdruck Fluid Typography beschreibt die Fähigkeit von Text, sich an die Breite des Viewports anzupassen, indem er sanft von einer minimalen zur maximalen Breite skaliert.
Das ist etwas anderes als das, was du mit Media-Queries erreichen kannst, denn Media-Queries ermöglichen es Themes, die Größe von Text in Abhängigkeit von bestimmten Viewport-Größen zu verändern, tun aber nichts zwischen verschiedenen Werten.
Einige Themes unterstützen bereits Fluid Typography. Twenty Twenty-Two zum Beispiel nutzt die CSS-Funktion clamp() für verschiedene Schriftgrößen. Ein Beispiel:
"settings": {
...
"custom": {
"spacing": {
"small": "max(1.25rem, 5vw)",
"medium": "clamp(2rem, 8vw, calc(4 * var(--wp--style--block-gap)))",
"large": "clamp(4rem, 10vw, 8rem)",
"outer": "var(--wp--custom--spacing--small, 1.25rem)"
},
"typography": {
"font-size": {
"huge": "clamp(2.25rem, 4vw, 2.75rem)",
"gigantic": "clamp(2.75rem, 6vw, 3.25rem)",
"colossal": "clamp(3.25rem, 8vw, 6.25rem)"
}
}
}
}typography.fluid wie folgt deklarieren:
"settings": {
....
"typography": {
"fluid": true,
"fontSizes": [
{
"size": "2rem",
"fluid": {
"min": "2rem",
"max": "2.5rem"
},
"slug": "medium",
"name": "Medium"
}
]
}typography.fluid und typography.fontSizes[].fluid wird der Wert jeder Schriftgröße automatisch nach der folgenden Formel berechnet:
--wp--preset--font-size--{slug}: clamp({fluid.min}, {fluid.min} + ((1vw - 0.48rem) * 1.592), {fluid.max});--wp--preset--font-size--large: clamp(2rem, 2rem + ((1vw - 0.48rem) * 1.592), {2.5rem});Siehe auch How to add Fluid Typography to WordPress Block Themes von Rich Tabor und Fluid typography with Gutenberg von Carolina Nymark.Fluid typography is a significant improvement for building modern #WordPress websites. We just updated @frostwp to include this feature. Here’s a great read from @richard_tabor into what it is and why it matters. https://t.co/Bq5YuHX3wi
— Brian Gardner (@bgardner) August 8, 2022
Neue und verbesserte Blocktypen
Da so viele Gutenberg-Versionen in den Kern integriert wurden, wird WordPress 6.1 einen brandneuen Inhaltsverzeichnis-Block und jede Menge Änderungen und Verbesserungen an bestehenden Blocktypen bringen.Der neue Inhaltsverzeichnis-Block
Erstmals mit Gutenberg 13.3 eingeführt, ist der neue Inhaltsverzeichnis-Block jetzt als experimenteller Block verfügbar. Sobald du ihn zu deinem Beitrag oder deiner Seite hinzufügst, erkennt der Inhaltsverzeichnis-Block alle Überschriftenblöcke, die dem Inhalt hinzugefügt wurden, und zeigt sie als Ankerlinks in einer geordneten Liste an.
Randunterstützung für den Columns-Block hinzugefügt
Der Columns-Block nutzt jetzt die neue BorderBoxControl-Komponente, mit der WordPress-Nutzer/innen benutzerdefinierte Ränder für Spalten festlegen und für jeden Rand einen anderen Stil einstellen können (siehe auch Column: Add border support to column blocks pull request).
"core/column": {
"border": {
"top": {
"color": "#CA2315",
"style": "dashed",
"width": "6px"
},
"right": {
"color": "#FCB900",
"style": "solid",
"width": "6px"
}
}
}Border Controls für Bildblöcke
Gutenberg 13.8 hat die Unterstützung für alle Rahmensteuerungen für den Bildblock eingeführt. Die Änderung wird mit WordPress 6.1 in den Kern integriert und öffnet die Tür für neue und großartige Möglichkeiten für Webkreative.
Verbesserungen am Kommentarblock
WordPress 6.1 bringt uns auch einen verbesserten Kommentarblock. Ab der nächsten Version von WordPress können Nutzer/innen erweiterte Bearbeitungsfunktionen für den Kommentarbereich nutzen. In der Abbildung unten siehst du die Seitenleiste mit den Einstellungen für den Kommentarblock und die Änderungen am Kommentartitel.
Variationen des Post Terms Blocks für benutzerdefinierte Taxonomiebegriffe
Der Post Terms-Block wurde um eine neue benutzerdefinierte Taxonomie-Variante erweitert. Du kannst jetzt eine neue benutzerdefinierte Taxonomie registrieren, z. B. den Beitragstyp „Schauspieler in einem Film“, und du kannst dem aktuellen Beitrag oder dem benutzerdefinierten Beitragstyp eine Liste von Taxonomiebegriffen hinzufügen.
Ein neuer Parents-Filter für den Abfrageblock
Für den Abfrageblock gibt es jetzt einen neuen Parents-Filter, der hierarchische Beiträge und Seiten mit demselben Elternteil anzeigt.
Schriftfamiliensteuerung im Überschriftenblock
Der Überschriftenblock unterstützt jetzt Schriftfamilien-Steuerelemente.
Horizontale und vertikale Abstände im Galerie-Block
Seit WordPress 6.1 gibt es ein neues Steuerelement für den Achsenabstand, mit dem du unterschiedliche horizontale und vertikale Abstände für Bilder im Galerie-Block festlegen kannst. Diese Änderung sorgt für mehr Flexibilität bei der Gestaltung von Bildergalerien.
Hervorgehobene Bilder im Titelblock
Featured Images bekommen nach wie vor viel Aufmerksamkeit, und in WordPress 6.1 wird der Umfang ihrer Verwendung noch erweitert. Ab 6.1 kann das Featured Image direkt aus dem Platzhalter des Cover-Blocks ausgewählt werden, wie die folgenden Bilder zeigen.
Erscheinungsbild-Tools für Post-Navigationslinks
Mit der EinstellungseigenschaftappearanceTools kannst du verschiedene Einstellungen vornehmen, die standardmäßig deaktiviert sind.
Seit WordPress 6.1 kannst du bei Themes, die die Einstellungseigenschaft appearanceTools unterstützen, die Linkfarbe und die Schriftart im Post Navigation Link anpassen.
appearanceTools in unserer Einführung in das Twenty Twenty-Two-Theme lesen.
Sperre innerhalb des Container-Blocks mit einem Klick
Ein neuer Schalter ermöglicht es jetzt, Blöcke in einem Container von Blöcken mit einem einzigen Klick zu sperren. Dies gilt für Gruppen-, Cover- und Spaltenblöcke.
Zusätzliche Funktionen und Verbesserungen im Block-Editor
Obwohl es sich um eine Konsolidierungsversion handelt, bringt WordPress 6.1 so viele Änderungen und Verbesserungen, dass es unmöglich wäre, sie alle in einem Artikel aufzulisten. Neben dem neuen Inhaltsverzeichnis-Block und den oben genannten Änderungen werden wir sehen:Variationen von Vorlagenteilen im Block-Inserter
Variationen von Vorlagenteilen sind jetzt im Block-Inserter verfügbar, was das Hinzufügen von Vorlagenteilen zu deiner Website erleichtert.
Ränder und Abstände visualisieren
Eine kleine, aber nützliche Verbesserung ist die Hervorhebung der Ränder und Auffüllungen, während der Nutzer sie anpasst. Dadurch wird es viel deutlicher, wie viel Platz innerhalb oder außerhalb der Elemente hinzugefügt wird.
Verbesserungen an der Einstellungs-Seitenleiste
WordPress 6.1 bringt auch einige Verbesserungen an der Einstellungen-Seitenleiste mit sich. Die Seitenleiste für die Beitragseinstellungen wurde leicht umgestaltet. Die Felder für das Beitragsformat, den Slug, die Vorlage und die Autoren sind jetzt aneinander ausgerichtet und haben die gleiche Breite. Außerdem wurde der Beitragsplaner vereinfacht, um das Erlebnis verständlicher zu machen. Der Bereich für die Vorlagen wurde außerdem in ein Popover verschoben, um Platz zu sparen und die Benutzeroberfläche aufzuräumen.
Design-Updates für das Veröffentlichungs-Popover
Die Datumsauswahl im Veröffentlichen-Popover wurde neu gestaltet und verwendet jetzt „bestehende WordPress-Komponenten und Emotion-Styling“
DateTimePicker).
Zeit zum Lesen im Info-Panel
Das Informationsfeld in der oberen Symbolleiste wurde verbessert und zeigt jetzt zusätzlich zu Wörtern, Zeichen, Überschriften, Absätzen und Blöcken auch die Lesezeit an.
Neue und verbesserte Bauwerkzeuge
WordPress 6.1 wird auch die Funktionalität des Site Builders erweitern. Blockmuster werden an mehr Stellen zur Verfügung stehen und eine größere Auswahl an Vorlagentypen wird das Bearbeitungserlebnis im Vorlageneditor verbessern.Erstellungsmuster für Beitragstypen
Mit WordPress 6.0 wurden Seitenerstellungsmuster eingeführt, mit denen jedes Mal, wenn ein Nutzer eine neue Seite erstellt, eine Auswahl an Mustern bereitgestellt wird. Auf diese Weise musst du die Seite nicht mehr von Grund auf neu erstellen, sondern kannst ein Muster aus einem Modal auswählen, den Inhalt eingeben und schon bist du startklar. Um diese Funktion zu aktivieren, muss mindestens ein Blockmuster die Unterstützung für diecore/post-content Blocktypen deklarieren.
Ab WordPress 6.1 wird diese Funktion auf alle Beitragstypen ausgeweitet. Alles, was du tun musst, ist, core/post-content in dein Muster blockTypes einzubinden und die entsprechende postTypes zu setzen.
Anhand eines praktischen Beispiels wollen wir nun herausfinden, wie du die Vorteile dieser neuen Funktion nutzen kannst. Angenommen, du hast einen Beitragstyp Film.
Zuerst musst du ein Blockmuster registrieren, wie hier beschrieben.
Du kannst auch den einfachen Weg gehen und die implizite Musterregistrierung verwenden (der Einfachheit halber werden wir in diesem Beispiel die implizite Musterregistrierung verwenden).
Erstelle eine PHP-Datei für dein Blockmuster im Verzeichnis /patterns im Ordner deines Themes (für dieses Beispiel haben wir Twenty Twenty-Two verwendet). Füge dann die folgende Überschrift hinzu:
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
<?php
/**
* Title: Pattern with columns
* Slug: twentytwentytwo/pattern-with-columns
* Block Types: core/post-content
* Post Types: movie, book
* Categories: text
*/
?>
<!-- wp:heading -->
<h2>Hello there!</h2>
Mehr Vorlagentypen im Seiteneditor
Mit WordPress 6.0 kann nur eine begrenzte Anzahl von Vorlagen im Seiteneditor erstellt werden:
Änderungen für Entwickler
WordPress 6.1 bringt auch eine neue API und einige Verbesserungen für Entwickler/innen.Neue Preferences Persistence API
WordPress 6.1 führt eine brandneue API für die Persistenz von Einstellungen ein, die die Einstellungen des Redakteurs in der WordPress-Datenbank speichert, anstatt sie lokal zu speichern. Auf diese Weise können die Benutzereinstellungen in allen Browsern und auf allen Geräten gespeichert werden. Zu diesem Zweck wurde das bisherige Persistenzsystem im Paket@wordpress/data veraltet und ein neues Paket preferences-persistence eingeführt. Das neue Paket speichert Daten über die Rest-API in der Benutzer-Meta. Die Daten werden auch im lokalen Speicher als Fallback gespeichert, falls der Nutzer offline geht oder eine Anfrage unterbrochen wird (siehe auch Pull #39795).
Unterstützung für Button Styles in theme.json
Mit WordPress 6.1 könnt ihr euren Themes mithilfe von theme.json Button-Stile hinzufügen. So können Theme-Entwickler Buttons in verschiedenen Blöcken einheitlich gestalten. Ein Beispiel ist der Suchblock, aber auch Blöcke von Drittanbietern werden von dieser Änderung profitieren. Um dies zu ermöglichen, wird eine neuewp-element-button Klasse zu den Button-Elementen hinzugefügt, damit sie denselben Stil haben.
Du kannst diese Änderung testen, indem du den folgenden Code in deiner theme.json in einer Entwicklungsumgebung hinzufügst:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "blue"
}
}
}
}
}Suchblock-Variationen unterstützen jetzt Query Vars
WordPress 6.1 unterstützt Suchblockvariationen, die auf Query Vars basieren. Das bedeutet, dass du deinen Nutzern Suchfelder zur Verfügung stellen kannst, mit denen sie jede Art von Inhalt durchsuchen können. Im folgenden Beispiel registrieren wir eine Blockvariation für einenmovies Beitragstyp. Das Beispiel basiert auf dem Tutorial von Carolina Nymar über Blockvariationen.
Füge in der Funktionsdatei deines (Child-)Themes den folgenden Code ein:
function movies_editor_assets() {
wp_enqueue_script(
'movies-block-variations',
get_template_directory_uri() . '/assets/block-variations.js',
array( 'wp-blocks' )
);
}
add_action( 'enqueue_block_editor_assets', 'movies_editor_assets' );wp.blocks.registerBlockVariation(
'core/search',
{
name: 'movie-search',
title: 'Movie Search Block',
attributes: {
query: {
post_type: 'movies'
}
}
}
);
Ein neues Buttons-Element in den Globalen Stilen
Mit WordPress 5.9 wurde eine Schnittstelle für globale Stile eingeführt, mit der Nutzer/innen Stilvorgaben für ihre Websites anpassen können, entweder global oder auf Blockebene. Bei der ersten Implementierung konntest du die Farben für Hintergrund, Text und Links anpassen. Mit WordPress 6.1 wurde das Farben-Panel um ein neues Element Buttons erweitert, mit dem du das Aussehen von Buttons auf deiner gesamten Website steuern kannst.
Zusammenfassung
Es gibt in der Tat viele neue Funktionen, die mit WordPress 6.1 kommen, aber es ist noch zu früh, um eine endgültige Bewertung der neuesten Version von 2022 abzugeben. Außerdem haben wir zum Zeitpunkt der Erstellung dieses Artikels noch nicht den Feature Freeze erreicht. Es kann also noch weitere Funktionen und Änderungen geben, über die wir vor der endgültigen Veröffentlichung am 1. November sprechen können. Obwohl wir dank der 11 Versionen von Gutenberg, die in den Kern integriert wurden, bereits ziemlich sicher sein können, welche neuen Funktionen wir sehen werden, wissen wir noch nicht, wie die JPEG-zu-WebP-Konvertierung implementiert wird und welche weiteren Änderungen zu den oben genannten hinzukommen könnten. Wir werden diesen Artikel aktualisieren, sobald es Änderungen gibt, die unsere Aufmerksamkeit verdienen, und neue Funktionen in den Kern integriert werden. Jetzt liegt es an dir. Was erwartest du von der nächsten Version von WordPress? Hast du den Nightly Build bereits in deiner Entwicklungsumgebung getestet? Teile uns deine Gedanken zu WordPress 6.1 in den Kommentaren unten mit.
Carlo Daniele
Kinsta
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for over 10 years, also in collaboration with Italian and European universities and educational institutions. He has written dozens of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find Carlo on Twitter.
