WordPress 6.2 „Dolphy“ wurde veröffentlicht und es ist Zeit für uns zu erkunden, was es mit der ersten Version von 2023 Neues gibt.
Mit WordPress 6.2 treten wir in die letzte Phase der zweiten Phase der langfristigen Gutenberg-Entwicklungs-Roadmap ein und der Block-Editor verlässt offiziell die Beta-Phase.
Diese Version konzentriert sich vor allem auf die Verbesserung der Benutzeroberfläche und die Vereinfachung des Bearbeitungsprozesses.
Es gibt einen neuen Ansatz für die Navigation zwischen Templates und Templateteilen, die Möglichkeit, Widgets in Blockthemen zu importieren, einen neuen, ablenkungsfreien Schreibmodus, eine skalierte Blockeinstellung und viele große und kleine Verbesserungen an bestehenden Blöcken, der Leistung und der Benutzerfreundlichkeit.
Aber wenn es etwas gibt, das in Bezug auf Funktionalität und Benutzerfreundlichkeit einen Sprung nach vorne macht, dann ist es der Navigationsblock. Seit seiner ersten Veröffentlichung hat das Navigationsmenü mehrere Iterationen durchlaufen, die den Bearbeitungsprozess im Laufe der Zeit deutlich vereinfacht haben. Mit WordPress 6.2 geht die Entwicklung weiter, und in diesem Artikel zeigen wir dir, wie einfach du jetzt ein Navigationsmenü verwalten kannst.
Schau dir unseren Video-Guide an, um zu erfahren, was in WordPress 6.2 neu ist
Verbessertes Editier-Erlebnis
WordPress 6.2 bietet ein verbessertes Bearbeitungserlebnis, bei dem die gesamte Website-Struktur in den Mittelpunkt gestellt wird. Du kannst jetzt Navigationsmenüs einfacher verwalten, Stiländerungen von einem einzelnen Block auf globale Stile übertragen und mühelos zwischen Vorlagen und (farbigen) Vorlagenteilen und wiederverwendbaren Blöcken navigieren.
Aber es gibt noch viel mehr. Schauen wir uns die wichtigsten Neuerungen und Änderungen an der Benutzeroberfläche des Editors im Detail an.
Überarbeitete Editoroberfläche und Browsing-Modus
Mit WordPress 6.2 gibt es mehrere Verbesserungen an der Editoroberfläche, die den Kern ausmachen. Das erste und interessanteste Update betrifft die Benutzeroberfläche des Site Editors. Dank eines neuen Browse-Modus ist es jetzt einfacher, durch Vorlagen und Vorlagenteile zu navigieren.
Mit der neuen Oberfläche kannst du auch direkt aus der Seitenleiste des Editors eine neue Vorlage oder einen neuen Vorlagenteil hinzufügen, indem du einfach auf das Plus-Symbol (+) rechts neben dem Menütitel klickst.
Laut Ryan Welcher, Wp Core and Documentation contributor, „[D]ie Arbeit an dieser Funktion ist im Gange und wird mit der Veröffentlichung neuer Gutenberg-Versionen weiter verbessert.“
Der Arbeitsablauf ist jetzt noch reibungsloser und nahtloser. Um mit der Bearbeitung der aktuellen Vorlage/des aktuellen Vorlagenteils zu beginnen, klicke einfach auf die Schaltfläche Bearbeiten im linken Menü oder auf die Vorlagenvorschau in der Mitte der Seite.
Ablenkungsfreier Modus
WordPress 6.2 führt einen neuen ablenkungsfreien Bearbeitungsmodus ein, der das Durcheinander im Canvas beseitigt und es dir ermöglicht, dich auf den Inhalt der Seite zu konzentrieren.
Du kannst diese Funktion in den Optionen aktivieren, indem du auf das Ellipsen-Symbol (drei Punkte) in der oberen rechten Ecke klickst.
Sobald der ablenkungsfreie Modus aktiviert ist, verschwinden überflüssige Seiten- und Symbolleisten und es bleibt nur noch der Inhalt auf dem Bildschirm, an dem du arbeitest.
Blockinspektor mit Registerkarten
WordPress 6.2 führt einen neuen Block-Inspektor ein, der Ordnung in die Seitenleiste bringen soll, indem er die Einstellungselemente in separate Bereiche unterteilt.
Die Blockeinstellungen sind jetzt in Registerkarten unterteilt, um die Stileinstellungen von anderen Blockeinstellungen zu trennen.
Wenn verfügbar, werden die Registerkarten des Blockinspektors in der folgenden Reihenfolge angezeigt:
- Listenansicht: Enthält Steuerelemente für die Verwaltung der untergeordneten Blöcke, wie z. B. Untermenüs und Links im Navigationsblock
- Einstellungen: Enthält Konfigurationseinstellungen, die sich nicht auf das Aussehen des Blocks beziehen
- Erscheinungsbild: Enthält Einstellungen, die sich speziell auf das Styling des aktuellen Blocks beziehen, z. B. Typografie und Farben
Dies ist eine bemerkenswerte Verbesserung der Benutzerfreundlichkeit der Oberfläche, vor allem für fortgeschrittene Blöcke mit vielen Konfigurationsoptionen wie den Gruppenblock oder den Navigationsblock.
Beachte das:
- Der neue Inspektor zeigt eine Registerkarte nur an, wenn sie Elemente enthält, die angezeigt werden sollen.
- Wenn die Registerkarte „Einstellungen“ nur das Panel „Erweitert“ enthält, wird es auf die Registerkarte „Erscheinungsbild“ verschoben.
- Wenn der Blockinspektor nur eine Registerkarte enthält, wird er wie vor WordPress 6.2 angezeigt.
In den Entwicklerhinweisen findest du einen genaueren Blick auf den neuen Blockinspektor.
Eingefärbte Vorlagenteile und wiederverwendbare Blöcke
Um sie leichter von Gruppen und Blöcken unterscheiden zu können, werden Vorlagenteile und wiederverwendbare Blöcke jetzt in der Listenansicht, im Block-Inserter, in der Block-Symbolleiste und im Editor-Canvas farblich hervorgehoben.
Dies geschieht sowohl im Site-Editor als auch im Beitragseditor, wie in der folgenden Abbildung zu sehen ist.
Ein überarbeiteter Block-Inserter
Der Block-Inserter ist von mehreren Änderungen betroffen, die das gesamte Bearbeitungserlebnis deutlich verbessern.
Erstens verbessert ein neues Oberflächendesign die Navigation zwischen Muster- und Medienkategorien und bietet größere Vorschauen für Muster und Medienelemente.
Wenn Medien auf der Website vorhanden sind, wird im Block-Inserter eine Registerkarte Medien angezeigt, um das Einfügen von Medien in den Inhalt zu vereinfachen. Du kannst Bilder/Medien per Drag & Drop verschieben oder einfach auf deine Medien klicken, um sie dem Inhalt hinzuzufügen.
Innerhalb der Registerkarte gibt es eine Schaltfläche Medienbibliothek öffnen, die dich zur WordPress-Medienbibliothek bringt.
Openverse-Integration im Block-Inserter
Openverse ist ein Tool, das darauf abzielt, offen lizenzierte oder gemeinfreie Werke zur Nutzung durch jedermann freizugeben. Mit WordPress 6.2 ist Openverse jetzt in den Block-Inserter integriert.
Um auf diese neue Funktion zuzugreifen, klicke auf die Registerkarte Medien im Block-Inserter. Dort findest du ein Suchfeld und Bildvorschauen, die direkt aus dem Openverse-Repository stammen.
Die technischen Details findest du im Pull Request zur Openverse-Integration.
Widgets auf Block-Themes migrieren
Ab WordPress 6.2 können Nutzer/innen, die eine Website mit einem klassischen Theme betreiben und zu einem Block-Theme wechseln möchten, ihre bestehenden Widget-Bereiche in das neue Theme migrieren und sie in Template-Teile umwandeln.
Wir wollen herausfinden, wie das funktioniert.
Erstelle zunächst einen Widget-Bereich in einem klassischen Theme. Du könntest zum Beispiel Twenty-Eleven aktivieren und einen Kalender zum Footer Area One hinzufügen.
Wechsle nun das Theme zu Twenty Twenty-Three. Öffne den Seiteneditor, wähle eine Vorlage zum Bearbeiten und füge einen Vorlagenteil hinzu.
Wähle in der Block-Seitenleiste den zu importierenden Widget-Bereich aus dem Dropdown-Menü Widget-Bereich importieren aus.
Und das war’s. Jetzt kannst du deinen bisherigen Widget-Bereich wie jeden anderen Template-Teil verwalten.
Dokumentendetails und Listenansicht kombiniert
Vor WordPress 6.2 gab es in der Symbolleiste des Editors zwei separate Schaltflächen für Details und Listenansicht. In der folgenden Abbildung siehst du das Popover für die Dokumentendetails in WordPress 6.1, einschließlich der Anzahl der Wörter, der Anzahl der Zeichen, der Lesedauer und der Anzahl der Überschriften, Absätze und Blöcke sowie der Dokumentgliederung.
Ab WordPress 6.2 wurden die Listenansicht und die Details in ein einziges Dokumentübersichtsfenster verschoben, das in zwei Registerkarten unterteilt ist: Listenansicht und Gliederung.
Diese Änderung soll die Verwaltung des Dokuments erleichtern.
Erweiterte Block-Fähigkeiten
Mit WordPress 6.2 wurden die Möglichkeiten einiger zentraler Blocktypen erweitert. Das gilt vor allem für den Navigationsblock, der von mehreren Änderungen und Verbesserungen bei der Bearbeitung betroffen ist.
Werfen wir einen Blick auf die wichtigsten Änderungen im Detail.
Listenbasiertes Editieren für den Navigationsblock
Mit der Veröffentlichung von WordPress 6.2 ist es möglich, die Anordnung der Elemente des Navigationsblocks über eine Listenansicht in der Seitenleiste der Blockeinstellungen zu ändern.
Wenn du auf den Menüpunkt klickst, gelangst du zur Einstellungsseitenleiste des ausgewählten Seitenlinks, wo du die Linkdetails bearbeiten kannst, einschließlich Label, URL, Beschreibung, Linktitel und Link rel.
Diese Änderung vereinfacht die Bearbeitung von Navigationsmenüs erheblich und ermöglicht es dir, Elemente in deinem Menü hinzuzufügen, anzuordnen und zu löschen oder sogar neue Navigationsmenüs zu erstellen.
Navigation sperren
Eine weitere Verbesserung des Navigationsblocks ist die Möglichkeit, die Bearbeitung von Menüs auf eine genauere Weise zu sperren. Jetzt kannst du die Bearbeitung einschränken, die Verschiebung deaktivieren und das Entfernen verhindern, während in WordPress 6.1 nur die Optionen Bearbeitung einschränken und Verschiebung deaktivieren verfügbar waren.
Darüber hinaus können die ausgewählten Optionen auch auf die inneren Blöcke (Links und Untermenüs) angewendet werden.
Beschriftungen aus der Block-Symbolleiste hinzufügen/entfernen
Eine neue Schaltfläche zum Hinzufügen/Entfernen von Untertiteln ermöglicht es Nutzern, Untertitel aus der Blocksymbolleiste für verschiedene Blöcke (Audio, Video, Bild) zu steuern.
Wenn du bereits eine Beschriftung festgelegt hast, wird sie automatisch eingefügt, wenn du das Bild zu deinem Inhalt hinzufügst.
Verbesserungen am Seitenlistenblock
Zwei Verbesserungen betreffen den Seitenlistenblock.
Erstens kann der Seitenlistenblock jetzt erweitert werden, um die Liste der Seiten in der Listenansicht anzuzeigen.
Außerdem kannst du mit einer neuen Option in der Seitenleiste des Blocks eine Anfangsseite festlegen und nur die Seiten anzeigen, die von dieser Seite absteigen.
Neuer Gruppenblock-Platzhalter
Der Gruppenblock-Platzhalter zeigt jetzt eine Variationsauswahl an, wenn der Block zum Seiteninhalt hinzugefügt wird.
Sticky Positioning Block Unterstützung
WordPress 6.2 führt eine neue Funktion zur Unterstützung von Positionsblöcken ein, beginnend mit der Sticky-Positionierung.
Diese neue Funktion gilt derzeit nur für Gruppenblöcke, für die sie standardmäßig aktiviert ist.
Theme-Entwickler können die Sticky-Positionierung in ihren Themes über die Funktion appearanceTools in der theme.json aktivieren. Wenn du eine detailliertere Kontrolle über die Werkzeuge für das Erscheinungsbild haben möchtest, kannst du auch die Eigenschaft settings.position.sticky auf true setzen.
Du kannst die Sticky-Positionierung im Positions-Panel in der Inspektor-Seitenleiste aktivieren.
Wenn die Sticky-Positionierung aktiviert ist, erhält das HTML-Tag die Klasse is-position-sticky und einige CSS-Regeln gelten für das entsprechende Element:
.wp-container-6 {
top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
position: sticky;
z-index: 10;
}
Die Sticky-Positionierung funktioniert nur für Gruppenblöcke am Anfang des Dokuments. Das kann zwar Verwirrung und Fehler für die Nutzerinnen und Nutzer verhindern, aber du könntest die eingebaute Sticky-Positionierung im Moment noch etwas schwierig finden (und du möchtest vielleicht andere Methoden ausprobieren, um deiner WordPress-Website eine Sticky-Überschrift hinzuzufügen). In der Entwicklungsnotiz heißt es jedoch
… haben wir bei manuellen Tests festgestellt, dass es ohne zusätzliche UI- oder UX-Arbeiten verwirrend sein könnte, wenn Nutzer/innen versehentlich einen Nicht-Root-Block oder einen Block innerhalb einer Kopfzeilenvorlage auf „sticky“ setzen. Wir haben beschlossen, die Funktion in Version 6.2 auf die Wurzelblöcke zu beschränken, um mehr Zeit zu haben, eine geeignete Lösung für verschachtelte Blöcke zu finden.
Die Positionierungsfunktion ist nur für einzelne Blöcke verfügbar, du wirst sie also nicht in den globalen Stilen finden.
Weitere Verbesserungen bei der Blockbearbeitung
Zu den weiteren bemerkenswerten Verbesserungen bei der Blockbearbeitung gehören die folgenden:
- Du kannst jetzt Bilder per Drag & Drop auf einen leeren Absatz ziehen, um ihn durch einen Bildblock zu ersetzen.
- Typografische Steuerelemente wurden in Panels gruppiert. Dadurch wird die Oberfläche für die Formatvorlagen einheitlicher mit der Oberfläche für die Einstellungen und die Benutzerfreundlichkeit wird verbessert, da du die Steuerelemente jetzt wie in der Oberfläche für die Blockeinstellungen ein- und ausblenden kannst.
Typografie-Steuerelemente in WordPress 6.1 vs. WordPress 6.2 - Es ist jetzt möglich, den Buchstabenabstand der Überschriftenblöcke direkt in der Schnittstelle für globale Stile zu ändern.
- Du kannst jetzt die Hintergrund-, Link- und Textfarbe des Kalenderblocks einstellen.
- Es wurden zwei neue Blockmusterkategorien für Banner und Fußzeilen eingeführt, die die Struktur von Webseiten besser widerspiegeln.
- Es ist jetzt möglich, Links in jedem Block mit dem Kürzel
[[automatisch zu vervollständigen. Vor dieser Änderung mussten Blöcke die Unterstützung für die automatische Vervollständigung von Links explizit mit__experimentalSlashInserterdeklarieren. - Mit dem neuen Tastaturkürzel
control+option+1–6kannst du einen Absatz in eine Überschrift verwandeln. - Der Seitenlistenblock unterstützt jetzt alle Typografieoptionen, einschließlich Schriftfamilie, Schriftgröße, Aussehen, Zeilenhöhe, Buchstabenabstand, Verzierung und Groß- und Kleinschreibung.
Einstellungen für die Typografie des Seitenlistenblocks in WordPress 6.2
Verbesserte Design-Tools
Viele der neuen Funktionen und Verbesserungen, die mit WordPress 6.2 eingeführt wurden, verbessern die Styling- und Designmöglichkeiten des CMS. Nachfolgend findest du eine Liste der interessantesten Design-Funktionen von Version 6.2, die wir weiter unten näher erläutern.
Style Book
WordPress 6.2 führt eine neue Style Book-Funktion ein, mit der Nutzer/innen eine Vorschau aller Blöcke sehen können, die auf ihren Websites verwendet werden können, ohne diese Blöcke zu einer Vorlage/einem Vorlagenteil hinzufügen zu müssen. Du kannst das Style Book starten, indem du auf die Schaltfläche „Style Book öffnen“ (das Augensymbol) klickst, die jetzt in der Kopfzeile der Styles innerhalb der globalen Styles angezeigt wird.
Dadurch wird eine Oberfläche geöffnet, die eine Vorschau aller Kern- und Drittanbieterblöcke nach Kategorien zeigt.
Die neue Style Book-Oberfläche vereinfacht den Entwurfsprozess, indem sie Voransichten aller Blockstile an einem einzigen zentralen Ort bereitstellt.
Technisch gesehen wird die neue Schnittstelle durch eine neue StyleBook Komponente generiert, die zu @wordpress/edit-site hinzugefügt wurde, um eine Vorschau jedes registrierten Blocks in einem iframe anzuzeigen (siehe auch PR #45960).
Dieselbe Schnittstelle bietet auch Vorschauen für einzelne Blöcke. Das folgende Bild zeigt zum Beispiel die Vorschau eines angepassten Kalender-Widgets.
Entwickler können auf zwei Arten verhindern, dass ein Block eingefügt und in der Vorschau angezeigt wird. Erstens kannst du supports.inserter in der Datei block.json auf false setzen:
{
"supports": {
"inserter": false
}
}Eine andere Möglichkeit, die Blockvorschau auszublenden, besteht darin, die Eigenschaft example zu vermeiden, die verwendet wird, um eine Vorschau des Blocks im Inspector Help Panel zu erstellen (mehr dazu hier).
Schatten in globalen Stilen
Mit WordPress 6.2 ist es jetzt möglich, einigen Blöcken über die Globalen Stile oder die theme.json Schatten hinzuzufügen und anzupassen (zum jetzigen Zeitpunkt ist die Schattenfunktion nur für den Button-Block verfügbar).
In Themes, die diese Funktion unterstützen, kannst du Schatten über die Oberfläche der Globalen Stile hinzufügen.
Um das in Aktion zu sehen, aktiviere das Twenty Twenty-Three-Theme, gehe zu Styles > Blocks > Button und klicke auf die Schaltfläche Shadow.
Im Pop-up-Fenster „Schatten“ kannst du einen Schatten aus den Voreinstellungen des Themas auswählen.
Themenentwickler/innen und fortgeschrittene Nutzer/innen können Blöcken über theme.json auch einen Schatten hinzufügen. Die folgende Definition fügt den Schaltflächenblöcken einen schwarzen 4-Pixel-Schatten hinzu:
"styles": {
"blocks": {
"core/button": {
"shadow": "4px 4px #000000"
}
}
},Du kannst auch Voreinstellungen definieren, damit die Nutzer/innen des Themas eine aus dem Styles-Interface auswählen können:
"settings": {
"shadow": {
"presets": [
{
"shadow": "4px 4px #FF0000",
"name": "Red",
"slug": "red"
},
{
"shadow": "4px 4px #00FF00",
"name": "Green",
"slug": "green"
},
{
"shadow": "4px 4px #0000FF",
"name": "Blue",
"slug": "blue"
}
]
},
}Sobald du sie definiert hast, erscheinen deine Voreinstellungen im Schatten-Panel im Block Stile.
Du kannst auch den Wert einer Voreinstellung auswählen und als Blockvorgabe verwenden:
"styles": {
"blocks": {
"core/button": {
"shadow": "var(--wp--preset--shadow--blue)"
}
}
}Neue Steuerung der Mindesthöhe
Seit WordPress 6.2 gibt es in der Seitenleiste der Blockeinstellungen für die Blöcke „Gruppe“ und „Beitragsinhalt“ ein neues Steuerelement für die Mindesthöhe, das in Themes, die die Funktion appearanceTools verwenden, standardmäßig aktiviert ist.
Mit diesem neuen Steuerelement können Nutzer/innen eine Mindesthöhe für Gruppen- und Post-Content-Blöcke festlegen und damit die Fußzeile am unteren Rand der Seite darstellen, auch wenn sie wenig Inhalt hat.
In Kombination mit den neuen Werkzeugen für die vertikale Ausrichtung ermöglicht es auch die vertikale Ausrichtung innerer Elemente am oberen/mittleren/unteren Rand der Seite.
Entwickler können die Unterstützung für die Mindesthöhe zu Themes hinzufügen, indem sie die Einstellung minHeight zur theme.json hinzufügen:
{
"settings": {
dimensions: "minHeight": true
}
}Du kannst auch die Eigenschaft appearanceTools verwenden:
{
"settings": {
"appearanceTools": true
}
}Die neue Eigenschaft minHeight kann auch verwendet werden, um einen bestimmten Wert direkt in theme.json zu setzen:
{
"styles": {
"blocks": {
"core/post-content": {
"dimensions": {
"minHeight": "80vh"
}
}
}
}
}Blockentwickler können die Eigenschaft supports.dimensions.minHeight zu ihrer block.json-Datei hinzufügen und ihren Wert auf true setzen. Bei statischen Blöcken wird die CSS-Regel min-height als Inline-Style gespeichert, während sie bei dynamischen Blöcken in das Style-Attribut aufgenommen wird, das von get_block_wrapper_attributes zurückgegeben wird.
Benutzerdefiniertes CSS im Styles Panel
Eine der Funktionen, die im Site Editor im Vergleich zum Theme Customizer fehlte, war die Möglichkeit, eigene CSS-Stile hinzuzufügen. Mit WordPress 6.2 wurde diese Lücke geschlossen und die Schnittstelle für globale Stile enthält jetzt ein Textfeld, in das du benutzerdefinierte CSS-Regeln einfügen kannst, die nicht überschrieben werden, wenn du dein Theme aktualisierst.
Du kannst benutzerdefinierte Stile entweder pro Block über das Blockstil-Panel hinzufügen oder indem du auf die Schaltfläche Weitere Stile in der Stil-Symbolleiste klickst. Dadurch wird ein Pop-up-Menü mit einem zusätzlichen CSS-Element angezeigt.
Um benutzerdefinierte CSS zu unterstützen, wurde der theme.json eine neue Eigenschaft styles.css hinzugefügt.
Benutzerdefinierte CSS-Regeln können alle benutzerdefinierten Stile, die in theme.json festgelegt wurden, vollständig überschreiben. Wenn du das nicht möchtest, solltest du in Erwägung ziehen, das Stylesheet mit den vorhandenen Enqueuing-Methoden einzubinden.
Du kannst auch benutzerdefinierte CSS-Regeln pro Block in theme.json hinzufügen, indem du die Eigenschaft styles.blocks.block.css verwendest:
"styles": {
"blocks": {
"core/button": {
"css": "background: #FF0000"
}
}
}Du kannst & auch für verschachtelte Elemente und Pseudo-Selektoren verwenden.
Einen genaueren Blick auf die neue Funktion für benutzerdefinierte CSS findest du unter Benutzerdefinierte CSS für globale Stile und pro Block.
Kopieren und Einfügen von Stilen zwischen Blöcken
Eine neue Gruppe im Menü Optionen in der Symbolleiste des Blocks zeigt jetzt zwei Schaltflächen zum Kopieren und Einfügen von Stilen an. Vor dieser Ergänzung war es nur möglich, Stile zu kopieren, aber es war nicht klar, wie man Stile einfügt.
Um diese neue Funktion auszuprobieren, füge einen neuen Block hinzu, z. B. eine Überschrift. Ändere den Stil und wähle Stile kopieren aus dem Menü Blockoptionen.
Wähle dann einen anderen Block aus und wähle Stil einfügen. Die kopierten Stile werden automatisch auf den zweiten Block angewendet.
Beachte, dass diese Funktion nur auf sicheren (https) Websites in unterstützenden Browsern verfügbar ist. Weitere Details findest du in der Pull-Anfrage.
Blockänderungen global anwenden
WordPress 6.2 führt außerdem eine Schaltfläche „Global anwenden“ im Bereich „Erweitert“ für einzelne Blöcke ein, mit der du deine Änderungen an den Blockstilen in die globalen Stile übertragen kannst, um sie auf der gesamten Website anzuwenden.
Dank dieser neuen Funktion ist es jetzt so einfach wie ein Knopfdruck, Typografie, Abstände, Abmessungen und Farben auf alle Blöcke des jeweiligen Typs anzuwenden (siehe auch diesen Pull Request).
Verbesserte Design-Erfahrung mit Spacing Visualizern
Mit den Spacing Visualizern kannst du in der Vorschau sehen, wie viel Rand oder Polsterung auf einen Block angewendet wird. Mit WordPress 6.2 wird diese Funktion durch einige Ergänzungen erweitert, die das Bearbeitungserlebnis verbessern.
Erstens werden die Spacing Visualizer jetzt angezeigt, sobald du mit dem Mauszeiger über den Rand oder das Padding fährst.
Zweitens blendet der Spacing Visualizer jetzt automatisch die Block-Symbolleiste aus, sobald du mit dem Mauszeiger über die Abstandseinstellung fährst, damit du eine Vorschau der neuen Rand- und Auffüllungseinstellungen sehen kannst, ohne dass die Block-Symbolleiste überladen wirkt.
Dies sind kleine, aber wichtige Änderungen, die sich auf eine große Anzahl von Kernblöcken auswirken.
Änderungen für Entwickler
WordPress 6.2 bringt auch viele neue Funktionen für Entwickler: neue APIs, Fehlerbehebungen, Leistungsverbesserungen und vieles mehr. Schauen wir uns die interessantesten Neuerungen an.
Eine neue HTML-API
WordPress 6.2 führt den HTML Tag Processor ein, einen HTML5-konformen Parser, der eine sichere Möglichkeit bietet, bestimmte HTML-Tags zu finden und Attribute über PHP hinzuzufügen, zu entfernen oder zu aktualisieren. Der HTML Tag Processor ist die erste Komponente einer neuen HTML-Verarbeitungs-API.
Die neue API erleichtert die Durchführung komplexer Aufgaben, für die bisher oft reguläre Ausdrücke verwendet werden mussten.
Im folgenden Beispiel fügen wir einfach das Attribut alt zu einem img Tag hinzu:
$html = '<img src="/my-image.jpg" />';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag() ) {
$p->set_attribute( 'alt', 'Hello WordPress 6.2' );
}
echo $p->get_updated_html();Dieser Code würde den folgenden img Tag erzeugen:
<img alt="Hello WordPress 6.2" src="/my-image.jpg">Die Methode $p->next_tag() wechselt zum nächsten verfügbaren Tag in der HTML-Datei. Sie akzeptiert auch einen Tag-Namen, eine CSS-Klasse oder beides, um bestimmte Tags zu finden, wie im Beispiel oben gezeigt.
Um HTML-Tags zu bearbeiten, musst du zunächst den Ziel-Tag auswählen:
$p->next_tag();Sobald du den Ziel-Tag ausgewählt hast, kannst du die API-Methoden nutzen, um verschiedene Operationen durchzuführen:
$p->get_tag()$p->set_attribute()$p->get_attribute()$p->remove_attribute()$p->add_class()$p->remove_class()
Du kannst ein Stilattribut setzen:
$html = '<a href="https://example.com">example.com</a>';
$p = new WP_HTML_Tag_Processor( $html );
if ( $p->next_tag( 'a' ) ) {
$p->set_attribute( 'style', 'text-decoration: wavy underline purple;' );
}
echo $p->get_updated_html();Du kannst auch eine Klasse oder ein Attribut hinzufügen oder entfernen. Im folgenden Code fügen wir eine benutzerdefinierte Klasse zu einem h1 Tag hinzu:
$html = '<div><h1>Page Title</h1></div>';
$p = new WP_HTML_Tag_Processor( $html );
if( $p->next_tag( 'h1' ) ) {
$p->add_class( 'title' );
}
echo $p->get_updated_html();Anschließend kannst du das aktualisierte Tag mit der Methode $p->get_updated_html() zurückgeben.
Wenn du einen genaueren Blick auf die neue HTML-API werfen willst, schau dir dieses interaktive PHP-Tutorial von Adam Zieliński, WordPress Core Committer, an.
Patterns API und eine neue template_types Eigenschaft
Die Patterns API ermöglicht es WordPress-Entwicklern, „vorgefertigte Inhaltsblöcke zu erstellen, die einfach in Beiträge, Seiten, benutzerdefinierte Beitragstypen und Vorlagen eingefügt werden können“.
Mit WordPress 6.2 enthält die Patterns-API jetzt eine neue Eigenschaft template_types, mit der du festlegen kannst, in welchen Vorlagen ein bestimmtes Blockmuster verwendet werden kann.
Jorge Costa weist darauf hin, dass es sich hierbei um ein reines Backend-Update handelt und es derzeit keine entsprechende UX-Funktionalität gibt. Wir können jedoch davon ausgehen, dass wir mit WordPress 6.3 weiterentwickelte Implementierungen dieser Funktion sehen werden:
Die erste Anwendung, die für WordPress 6.3 angedacht ist, besteht darin, dem Nutzer einige Muster zu zeigen, die für eine Vorlage sinnvoll sind, wenn der Nutzer mit der Erstellung einer Vorlage beginnt. Der Nutzer kann mit einem Muster beginnen, anstatt mit einer leeren Vorlage oder der Fallback-Vorlage.
Auf der technischen Seite wurde die Funktion register_block_pattern() um einen neuen Parameter template_types erweitert, der ein Array von Strings ist, die die Namen der Vorlagen enthalten, für die das Blockmuster gedacht ist.
Die REST-API wurde außerdem so geändert, dass sie die Vorlagentypen eines Blockmusters zurückgibt, wenn mindestens einer definiert wurde.
React v18.0 und Gleichzeitigkeitsmodus
WordPress 6.2 enthält auch eine neue Version der React-Bibliothek, die jetzt auf Version 18.0 aktualisiert wurde. Die neue Version enthält neue APIs, Funktionen, Verbesserungen und Fehlerbehebungen. Eine der wichtigsten Funktionen von React v18.0 ist die Einführung des Concurrency-Modus, „ein neuer Mechanismus hinter den Kulissen, der es React ermöglicht, mehrere Versionen deiner Benutzeroberfläche gleichzeitig vorzubereiten“.
Eines der Hauptmerkmale des Concurrent Mode in React ist, dass er unterbrechbar ist:
React garantiert, dass die Benutzeroberfläche auch dann konsistent aussieht, wenn ein Rendering unterbrochen wird. Dazu wartet es mit der Durchführung von DOM-Mutationen bis zum Ende, wenn der gesamte Baum ausgewertet worden ist. Mit dieser Fähigkeit kann React neue Bildschirme im Hintergrund vorbereiten, ohne den Hauptthread zu blockieren. Das bedeutet, dass die Benutzeroberfläche sofort auf Benutzereingaben reagieren kann, selbst wenn sie sich mitten in einer großen Rendering-Aufgabe befindet, was ein flüssiges Benutzererlebnis schafft.
Der Hauptvorteil besteht darin, dass die Benutzeroberfläche sofort auf Benutzereingaben reagiert, während die Aufgabe im Hintergrund weiterläuft.
Die Gleichzeitigkeit birgt jedoch auch potenzielle Fallstricke, die Entwickler/innen kennen sollten. Einen ausführlicheren Überblick über den Concurrent Mode in React in WordPress 6.2 findest du in den Beispielen in der Dev Note.
Weitere Änderungen für Entwickler
Weitere bemerkenswerte Änderungen, die Entwickler beachten sollten, sind
- WordPress 6.2 führt einen neuen JavaScript-Filter ein, mit dem Blockeinstellungen gefiltert werden können, bevor der Editor auf dem Bildschirm dargestellt wird. Der neue
blockEditor.useSetting.beforeFilter ermöglicht es Entwicklern außerdem, die Einstellungen basierend auf der Position des Blocks, der aktuellen Benutzerrolle, benachbarten Blöcken und mehr zu ändern. Weitere Informationen und Anwendungsbeispiele findest du unter Anpassen der Einstellungen für jeden Block in WordPress 6.2. - Eine neue
skipBlockSupportAttributesProp wurde eingeführt, um Attribute und Stile auszuschließen, die sich auf die Blockunterstützung in der KomponenteServerSideRenderbeziehen. - Eine neue theme.json API ermöglicht es jetzt, bestehende Core-Block-Varianten aus der theme.json zu stylen.
- Google Fonts werden jetzt lokal eingebunden und nicht mehr von Google-Adressen in gebündelten Themes von Twenty Twelve bis Twenty Seventeen geholt.
Aber das ist noch nicht alles. WordPress 6.2 führt viele Funktionen, Verbesserungen und Fehlerbehebungen ein, die wir hier der Kürze halber nicht erwähnt haben. Einen umfassenderen Überblick findest du im WordPress 6.2 Field Guide.
Zusammenfassung
Mit WordPress 6.2 nähern wir uns dem Ende von Phase 2 des Gutenberg-Projekts, der Anpassungsphase. Wie Matias Ventura betont, bedeutet dies jedoch nicht, dass die Arbeit an der Anpassung abgeschlossen ist und in zukünftigen Versionen fortgesetzt wird. Wie immer können wir mit weiteren Verbesserungen des Editors rechnen, die auf dem Feedback der Community basieren.
In diesem Beitrag haben wir einige der wichtigsten Funktionen, Verbesserungen und Fehlerbehebungen von WordPress 6.2 vorgestellt. Aber es gibt noch viel mehr in 6.2. Mit zehn Versionen des Gutenberg-Plugins im Core – von 14.2 bis 15.1 – werden wir einen neuen Browse-Modus, einen Tabbed Block Inspector, die Migration von Widgets zu Block-Themes, neue APIs und jede Menge Verbesserungen und Fehlerbehebungen sehen. Außerdem wird es Verbesserungen bei der Barrierefreiheit und der Internationalisierung geben.
Und wenn du WordPress liebst und dir neue WordPress-Entwicklungsfähigkeiten aneignen oder das CMS testen und mit gestalten möchtest, solltest du DevKinsta, die völlig kostenlose lokale WordPress-Entwicklungssuite von Kinsta, unbedingt ausprobieren.
Und nun zu dir: Hast du die neue Version bereits in deiner Entwicklungsumgebung getestet? Welche Funktionen gefallen dir in WordPress 6.2 am besten? Teile uns deine Meinung in den Kommentaren unten mit.
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