{"id":40666,"date":"2021-03-17T22:12:11","date_gmt":"2021-03-17T21:12:11","guid":{"rendered":"https:\/\/kinsta.com\/?p=90307"},"modified":"2023-10-03T15:19:26","modified_gmt":"2023-10-03T14:19:26","slug":"wordpress-5-7","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/wordpress-5-7\/","title":{"rendered":"Was ist neu in WordPress 5.7 (Lazy-Loading, HTTPS, UI Updates, neue APIs und vieles mehr)"},"content":{"rendered":"

Wir sind daran gew\u00f6hnt, dass bei jeder neuen Version kleine und nicht so kleine \u00c4nderungen und neue Funktionen zum WordPress-Core<\/a> hinzugef\u00fcgt werden. WordPress 5.7 ist da keine Ausnahme und es ist gro\u00dfartig zu sehen, wie jede neue Version uns dem gro\u00dfen Ganzen<\/a> ein St\u00fcck n\u00e4her bringt.<\/p>\n

Mit mehreren Versionen des Block-Editors, die in den Core integriert wurden, verbessert die neue Version das gesamte Bearbeitungserlebnis und erm\u00f6glicht es Entwicklern, fortgeschrittenere Bl\u00f6cke zu erstellen und dem Block-Editor leistungsf\u00e4higere Anpassungen hinzuzuf\u00fcgen.<\/p>\n

Abgesehen vom Editor bringt WordPress 5.7 auch tonnenweise \u00c4nderungen und gro\u00dfartige Funktionen mit sich, darunter Lazy Loading Iframes, Aktualisierungen der Anmelde- und Registrierungsschnittstelle, Links zum Zur\u00fccksetzen von Passw\u00f6rtern, eine gro\u00dfe Anzahl von Bugfixes und vieles mehr.<\/p>\n

Wir haben unsere Tests auf DevKinsta<\/a> durchgef\u00fchrt und sind bereit, unsere Lieblingsfunktionen und -\u00e4nderungen, die mit WordPress 5.7 kommen, mit euch zu teilen – nat\u00fcrlich mit zahlreichen Screenshots und Code-Snippets.<\/p>\n

Wenn du tiefer in die erste gro\u00dfe Version von 2021 eintauchen m\u00f6chtest, schau dir den WordPress 5.7 Entwicklungszyklus<\/a>, die Planungs\u00fcbersicht<\/a> und den Praxisleitfaden<\/a> an.<\/p>\n

W\u00e4hrend wir also weiterhin auf die vollst\u00e4ndige Website-Bearbeitung<\/a> (im Core von WordPress 5.8) warten, machen wir es uns gem\u00fctlich und genie\u00dfen, was in WordPress 5.7 neu ist!<\/p>\n

<\/span><\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist neu im Block Editor<\/h2>\n

WordPress 5.7 bringt viele Versionen des Gutenberg Plugins<\/a> in den Core. Es w\u00e4re unm\u00f6glich, all diese Erg\u00e4nzungen hier zu erw\u00e4hnen, zus\u00e4tzlich zu den vielen \u00c4nderungen und Fehlerbehebungen, die dem Editor hinzugef\u00fcgt wurden, aber du kannst die folgenden Links besuchen, um tief in jede Version einzutauchen: 9.3<\/a>, 9.4<\/a>, 9.5<\/a>, 9.6<\/a>, 9.7<\/a>, 9.8<\/a>, 9.9<\/a>.<\/p>\n

Fehlerbehebungen und Leistungsverbesserungen aus Gutenberg 10.0 und 10.1 sind auch Teil von WordPress 5.7.<\/p>\n

Gehen wir also durch unsere handverlesene Liste der spannendsten Features und \u00c4nderungen, die mit WordPress 5.7 zum Block-Editor hinzugef\u00fcgt wurden:<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Blockvariationen Funktionen, Erweiterungen und APIs<\/h3>\n

Die mit WordPress 5.4 eingef\u00fchrten Blockvariationen<\/a> bieten dem Nutzer die M\u00f6glichkeit, eine andere Instanz desselben Blocks auszuw\u00e4hlen.<\/p>\n

Diese Funktion arbeitet mit der Block Variations API<\/a> zusammen, einem m\u00e4chtigen Tool, das es Entwicklern erlaubt, Variationen von Bl\u00f6cken hinzuzuf\u00fcgen, zu verwalten oder zu entfernen.<\/p>\n

WordPress 5.7 f\u00fchrt mehrere Verbesserungen, Funktionen und neue APIs f\u00fcr Blockvariationen ein, die ein besseres UI und leistungsf\u00e4higere Tools f\u00fcr Entwickler bieten. Lass uns eintauchen.<\/p>\n

Block Variationen Transformationen<\/h4>\n

Erstmals mit Gutenberg 9.4<\/a> eingef\u00fchrt und nun in WordPress 5.7 hinzugef\u00fcgt, erscheint ein Transform to variation<\/strong> Switcher unterhalb der Blockkarte f\u00fcr Bl\u00f6cke, die dieses Feature unterst\u00fctzen.<\/p>\n

\"Der
Der Transform to Variation Schalter f\u00fcr einen Buttons Block<\/figcaption><\/figure>\n

Bei der Registrierung einer neuen Blockvariation k\u00f6nnen Blockentwickler den Variationswechsler zum Blockinspektor hinzuf\u00fcgen, indem sie die neue transform<\/code> option zum Blockvariations scope<\/code>-Feld hinzuf\u00fcgen, wie im folgenden Beispiel gezeigt (nur JS-Code):<\/p>\n

wp.blocks.registerBlockVariation( 'core\/heading', { \n\tname: 'green-text', \n\ttitle: 'Green Text', \n\tdescription: 'This block has green text. It overrides the default description.',  \n\tattributes: { \n\t\tcontent: 'Green Text', \n\t\ttextColor: 'vivid-green-cyan' \n\t}, \n\ticon: 'palmtree', \n\tscope: [ 'inserter', 'transform' ] \n} );<\/code><\/pre>\n
In diesem Beispiel erscheint eine Block-Variation in zwei Bereichen der Editor-Oberfl\u00e4che – dem Block-Inserter und dem Block-Inspektor.<\/p>\n
\"Block
Block Variation Beispiel mit Transformationsbereich<\/figcaption><\/figure>\n
F\u00fcr einen detaillierten \u00dcberblick \u00fcber Block Variation Transformations, siehe auch PR #26687<\/a>.<\/p>\n
Blockinformationen passen nun zu Blockvariationen<\/h4>\n
Seit WordPress 5.7 (und Gutenberg 9.7<\/a>) zeigt das UI spezifischere Informationen zu Blockvariationen an, w\u00e4hrend es vorher nur generische Informationen anzeigte.<\/p>\n
\"Vor
Vor WordPress 5.7 zeigten die Interface-Elemente generische Informationen \u00fcber Blockvariationen<\/figcaption><\/figure>\n
Embed-Bl\u00f6cke und Social Icons sind als Block-Variationen aufgebaut; sie sind gute Beispiele daf\u00fcr, dass WordPress Block-Informationen mit Block-Variationen zusammenbringt.<\/p>\n
\"Die
Die Oberfl\u00e4chenelemente zeigen nun Informationen, die spezifisch f\u00fcr die Blockvarianten sind<\/figcaption><\/figure>\n
Diese \u00c4nderungen betreffen den Block-Inspektor, die Block-Navigationsleiste und die Breadcrumbs. Seit Gutenberg 9.8<\/a> gilt diese UI-Verbesserung auch f\u00fcr den Block-Switcher.<\/p>\n
\"UI-Erweiterung
UI-Erweiterung f\u00fcr Blockvariationen im Block Switcher<\/figcaption><\/figure>\n
Neue Block-Variationen APIs<\/h4>\n
WordPress 5.7 f\u00fchrt auch neue APIs<\/a> ein, die Entwickler bei der Registrierung von Blockvariationen verwenden k\u00f6nnen, um die korrekten Informationen einer Blockvariation anzuzeigen (Gutenberg 9.7<\/a>).<\/p>\n
\u00a0<\/p>\n
Die neue Eigenschaft isActive<\/code> ist eine Funktion, die die Attribute eines Blocks akzeptiert. Du kannst die Attribute der Variation verwenden, um festzustellen, ob eine Variation aktiv ist (siehe auch Block-API-Referenz<\/a>).<\/p>\n
Blockentwickler k\u00f6nnen diese Funktion verwenden, um Variationsinformationen anstelle von Blockinformationen anzuzeigen. Ein Beispiel k\u00f6nnte der embed<\/code>-Block sein, wo wir den Wert des providerNameSlug<\/code>-Attributs \u00e4ndern k\u00f6nnen (ein Beispiel aus der Dev Note<\/a>):<\/p>\n
const variations = [\n{\n\tname: 'wordpress',\n\ttitle: 'WordPress',\n\tkeywords: [ __( 'post' ), __( 'blog' ) ],\n\tdescription: __( 'Embed a WordPress post.' ),\n\tattributes: { providerNameSlug: 'wordpress' },\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.providerNameSlug === variationAttributes.providerNameSlug,\n},\n];<\/code><\/pre>\n
Im folgenden Beispiel wird die Eigenschaft isActive<\/code> verwendet, um das Farbattribut zu \u00e4ndern:<\/p>\n
variations: [\n{\n\tname: 'blue',\n\ttitle: __( 'Blue Quote' ),\n\tisDefault: true,\n\tattributes: { color: 'blue', className: 'is-style-blue-quote' },\n\ticon: 'format-quote',\n\tisActive: ( blockAttributes, variationAttributes ) =>\n\t\tblockAttributes.color === variationAttributes.color\n},\n],<\/code><\/pre>\n
Der neue useBlockDisplayInformation<\/code> Hook gibt Informationen \u00fcber einen bestimmten Block zur\u00fcck. Der neue Hook ber\u00fccksichtigt die isActive<\/code> -Eigenschaft einer Blockvariation und gibt den title<\/code>, das icon<\/code>, und die description<\/code>\u00a0des Blocks zur\u00fcck.<\/p>\n
Diese \u00c4nderungen betreffen die Blockkarte (Inspector Tools), die Navigationslistenansicht (Top Bar) und Breadcrumbs (siehe auch PR #27469<\/a>).<\/p>\n
Neue Buttons Block Features<\/h3>\n
Ein paar neue Features verbessern die Funktionalit\u00e4t und das Interface des Buttons Blocks.<\/p>\n
Button Abmessungen<\/h4>\n
Ein neues Steuerelement in den Einstellungen der Sidebar erlaubt es uns nun, eine prozentuale Breite f\u00fcr Buttons in Buttons-Bl\u00f6cken festzulegen (Gutenberg 9.4<\/a>).<\/p>\n
\"Breite
Breite Einstellungen f\u00fcr Tasten<\/figcaption><\/figure>\n
W\u00e4hle einfach einen Button und w\u00e4hle 25%, 50%, 75% oder 100%. Die Prozentangaben beziehen sich auf den \u00fcbergeordneten Container. Das Bild unten zeigt verschiedene Kombinationen von Buttongr\u00f6\u00dfen.<\/p>\n
\"Kombinationen
Kombinationen von Buttons mit unterschiedlichen Breitenwerten<\/figcaption><\/figure>\n
F\u00fcr weitere technische Einblicke, schau dir die Pull Requests #25999<\/a> und #26781<\/a> an.<\/p>\n
Vertikales Layout<\/h4>\n
Diese neue Funktion f\u00fcgt Variationen f\u00fcr die vertikale Ausrichtung des Buttons-Blocks hinzu. Nutzer k\u00f6nnen von einem horizontalen Layout zu einem vertikalen Layout wechseln, indem sie den Transformations-Switcher im Block-Einstellungspanel nutzen (Gutenberg 9.6<\/a>).<\/p>\n
\"Buttons
Buttons Block mit vertikaler Ausrichtung<\/figcaption><\/figure>\n
Social Icons Erweiterungen<\/h3>\n
WordPress 5.7 f\u00fcgt neue Anpassungsoptionen f\u00fcr Social Icons<\/a> hinzu: Support f\u00fcr benutzerdefinierte Gr\u00f6\u00dfe und benutzerdefinierte Farben.<\/p>\n
Social Icons Gr\u00f6\u00dfe<\/h4>\n
Wenn der Social Icons-Block ausgew\u00e4hlt ist, bietet die Block-Symbolleiste jetzt ein Gr\u00f6\u00dfen<\/strong>-Optionsmen\u00fc mit verf\u00fcgbaren Gr\u00f6\u00dfen (Gutenberg 9.4<\/a>).<\/p>\n
\"'Riesige'
‚Riesige‘ Gr\u00f6\u00dfe f\u00fcr soziale Symbole<\/figcaption><\/figure>\n
Benutzerdefinierte Farben in sozialen Icons<\/h4>\n
Der gleiche Block unterst\u00fctzt nun Farbeinstellungen, wodurch wir verschiedene benutzerdefinierte Farben f\u00fcr Icons und Hintergr\u00fcnde einstellen k\u00f6nnen (Gutenberg 9.9<\/a>).<\/p>\n
\"Soziale
Soziale Icons mit schwarzer Hintergrundfarbe<\/figcaption><\/figure>\n
Du kannst nun die Farbpalette des Themes f\u00fcr Social Icons verwenden, um zu verhindern, dass die Farben der Icons mit dem Farbschema deiner Webseite<\/a> kollidieren (siehe auch PR #28084<\/a>).<\/p>\n
Font Size Support<\/h3>\n
WordPress 5.7 f\u00fcgt Support f\u00fcr die Schriftgr\u00f6\u00dfe<\/a> f\u00fcr Listen- und Code-Bl\u00f6cke hinzu.<\/p>\n
Schriftgr\u00f6\u00dfe im Listenblock<\/h4>\n
Eine Typografiekarte mit Steuerelementen f\u00fcr die Schriftgr\u00f6\u00dfe wurde zu den Einstellungen des Listenblocks hinzugef\u00fcgt (Gutenberg 9.4<\/a>).<\/p>\n
\"Schriftgr\u00f6\u00dfe
Schriftgr\u00f6\u00dfe in den Einstellungen des Listenblocks<\/figcaption><\/figure>\n
Der Benutzer kann eine der verf\u00fcgbaren Schriftgr\u00f6\u00dfen f\u00fcr Listenelemente ausw\u00e4hlen oder eine eigene Schriftgr\u00f6\u00dfe in Pixeln festlegen. Die Schaltfl\u00e4che „Zur\u00fccksetzen“ stellt die Standardwerte wieder her.<\/p>\n
Schriftgr\u00f6\u00dfen Support im Code Block<\/h4>\n
WordPress 5.7 bietet auch Support f\u00fcr die Verwaltung der Schriftgr\u00f6\u00dfe in Code-Bl\u00f6cken. Wenn ein Code-Block ausgew\u00e4hlt ist, wird in der Sidebar der Blockeinstellungen ein neues Steuerelement f\u00fcr die Schriftgr\u00f6\u00dfe<\/strong> angezeigt. Mit diesem Steuerelement kannst du entweder eine der voreingestellten Gr\u00f6\u00dfen ausw\u00e4hlen, die in deinem Theme<\/a> verf\u00fcgbar sind, oder einen benutzerdefinierten Wert in Pixel festlegen (Gutenberg 9.5<\/a>).<\/p>\n
\"Globale
Globale Schriftgr\u00f6\u00dfen in Twenty Twenty verf\u00fcgbar<\/figcaption><\/figure>\n
Die Implementierung dieses Features erlaubt auch die Verwendung von globalen Style-Variablen im CSS von Code-Bl\u00f6cken (siehe auch PR #27294<\/a>). Das Bild unten zeigt einen Code-Block im Frontend mit dem installierten Twenty Twenty Theme<\/a>.<\/p>\n
\"Globale
Globale CSS Stile in einem Code Block<\/figcaption><\/figure>\n
Ausrichtung in voller H\u00f6he im Cover Block<\/h3>\n
WordPress 5.7 f\u00fchrt eine neue Full Height Toolbar Alignment Komponente ein. Es wurde erstmals mit Gutenberg 9.5<\/a> in den Block-Editor integriert. Jetzt wurde es in den Core integriert und in den Cover-Block implementiert.<\/p>\n
\"Full
Full Height Alignment wurde im Cover Block implementiert<\/figcaption><\/figure>\n
Wenn du den Block-Toolbar-Button umschaltest und dabei die minimale H\u00f6he im Auge beh\u00e4ltst, wirst du sehen, dass die Ausrichtung in voller H\u00f6he nur eine Abk\u00fcrzung f\u00fcr 100vh<\/code> ist (lies mehr \u00fcber die prozentuale L\u00e4nge des Viewports<\/a>).<\/p>\n
\"Ausrichtung
Ausrichtung in voller H\u00f6he in einem Abdeckblock<\/figcaption><\/figure>\n
Du kannst Full Height Alignment in Kombination mit anderen Steuerungseinstellungen wie fester Hintergrund, Inhaltsposition und so weiter verwenden. Du wirst wahrscheinlich von der Anzahl der beeindruckenden Effekte \u00fcberrascht sein, die du auf deinen Seiten erzeugen kannst.<\/p>\n
Drag & Drop von Bl\u00f6cken und Mustern aus dem Inserter<\/h3>\n
Der Block-Inserter unterst\u00fctzt jetzt Drag & Drop f\u00fcr Bl\u00f6cke und Muster<\/a>. Nutzer k\u00f6nnen jeden Block oder jedes Muster aus dem Inserter ziehen und es an einer beliebigen Stelle auf der Beitragsfl\u00e4che platzieren (Gutenberg 9.6<\/a> und 9.7<\/a>).<\/p>\n
\"Jetzt
Jetzt kannst du Bl\u00f6cke oder Muster aus dem Inserter auf die Post Canvas ziehen<\/figcaption><\/figure>\n
Beachte, dass Drag & Drop nur funktioniert, wenn dein Theme Blockmuster unterst\u00fctzt.<\/p>\n
Semi-transparenter Spacer-Block<\/h3>\n
Anstelle der fr\u00fcheren undurchsichtigen grauen Farbe hat der Spacer-Block jetzt einen halbtransparenten Hintergrund (Gutenberg 9.8<\/a>).<\/p>\n
\"Ein
Ein undurchsichtiger Spacer Block in WordPress 5.6<\/figcaption><\/figure>\n
Dieses Feature soll es einfacher machen, den Spacer-Block auf einer beliebigen Hintergrundfarbe zu identifizieren.<\/p>\n
\"Ein
Ein halbtransparenter Spacer-Block in WordPress 5.7<\/figcaption><\/figure>\n
Zus\u00e4tzliche Verbesserungen im Block-Editor, die erw\u00e4hnenswert sind<\/h3>\n
Unsere Liste wird nicht alle Features und Verbesserungen abdecken, die in Core integriert wurden, daher solltest du dir die offizielle Dokumentation und die Dev-Notes ansehen, um ein umfassenderes Register der Neuerungen im Block-Editor mit WordPress 5.7 zu erhalten.<\/p>\n
Aber um nur einige zu nennen, in 5.7 wirst du auch Folgendes finden:<\/p>\n