Neben dem Editor f\u00fchrt WordPress 5.4 interessante Verbesserungen im Site Health Tool<\/a>\u00a0und in der REST-API<\/a> ein, w\u00e4hrend einige mit WordPress 5.4 erwartete Funktionen verz\u00f6gert wurden und mit der n\u00e4chsten Version von WordPress 5.5 im Core geb\u00fcndelt werden sollten (siehe Block Native Lazy Loading f\u00fcr Bilder<\/a> und Navigation Block<\/a>).<\/p>\n Die folgenden Daten und Links aus dem Entwicklungszyklus von WordPress 5.4<\/a> sollten gespeichert werden:<\/p>\n Was gibt es Neues in WordPress mit WordPress 5.4?<\/p>\n Eine betr\u00e4chtliche Anzahl der Gutenberg<\/a> Plugin-Versionen wurde in den Core integriert, von 6.6 bis 7.5. Wenn man also nicht das Gutenberg-Plugin verwendet, findet man beim Upgrade auf WordPress 5.4 im Block-Editor eine Menge neuer Funktionen, Verbesserungen und Fehlerbehebungen.<\/p>\n Aber es gibt mehr als nur Bl\u00f6cke und Funktionen im Editor, wobei \u00fcber allgemeine Leistungsverbesserungen berichtet wird:<\/p>\n \u201cDas Blockeditor-Team hat seit WordPress 5.3 bei einem besonders umfangreichen Beitrag (~ 36.000 W\u00f6rter, ~1.000 Bl\u00f6cke) eine Reduzierung der Ladezeit um 14% und der Zeit bis zur Eingabe um 51% erreicht.\u201d<\/p><\/blockquote>\n Das ist eine Menge toller Sachen, also lasst uns eintauchen.<\/p>\n Wir sind uns zwar einig, dass sich der Blockeditor noch in der Entwicklung befindet, aber WordPress 5.4 bringt eine Menge \u00c4nderungen mit sich, die die Benutzerfreundlichkeit des Editors sowohl auf dem Desktop als auch auf mobilen Ger\u00e4ten verbessern.<\/p>\n Einige dieser \u00c4nderungen beziehen sich ausschlie\u00dflich auf die Benutzeroberfl\u00e4che, darunter der standardm\u00e4\u00dfig aktivierte Vollbildmodus, die verbesserte Blockauswahl, der einfache Wechsel zwischen Bearbeitungs- und Auswahlmodus, die feste mobile Symbolleiste und die Breadcrumbs f\u00fcr die Blocknavigation. Zwei neue Bl\u00f6cke und zus\u00e4tzliche Optionseinstellungen f\u00fcgen dem Editor weitere Funktionalit\u00e4ten hinzu.<\/p>\n Hier ist eine kurze Liste der Funktionen und Verbesserungen unseres bevorzugten Blockeditors, der mit WordPress 5.4 geliefert wird:<\/p>\n Urspr\u00fcnglich als Social Links bezeichnet, erlaubt der Block Social Icons<\/strong> den Autoren, schnell Icons mit Links zu sozialen Profilen<\/a> hinzuzuf\u00fcgen, und bietet eine gute Anzahl von Child-Bl\u00f6cken f\u00fcr Social Icons zur Auswahl. Dieser Block war eine Zeit lang experimentell und ist seit Gutenberg 7.5<\/a> stabil.<\/p>\n Der Social Icons-Block wird mit drei vordefinierten Stilen f\u00fcr die visuelle Anpassungen geliefert: Standard<\/strong>, nur Logos<\/strong> und Pillenform<\/strong>.<\/p>\n Seit ihrer Einf\u00fchrung als experimentelle Funktion in Gutenberg 6.5 (und der Zusammenf\u00fchrung in WordPress 5.3<\/a>) wurden Social Icons zu Gutenberg 7.5 hinzugef\u00fcgt, und sie funktionieren m\u00f6glicherweise nicht wie erwartet, wenn man eine veraltete Version des Gutenberg-Plugins verwendet.<\/p>\n Laut Jorge Costa<\/a> gibt es zwei M\u00f6glichkeiten, Probleme mit Social Icons zu verhindern:<\/p>\n Der in\u00a0Gutenberg 7.2<\/a> zum Block-Editor hinzugef\u00fcgte Buttons-Block<\/strong> ersetzt den einzelnen Button-Block<\/a> und erm\u00f6glicht es WordPress-Benutzern, innerhalb desselben Block-Containers weitere Buttons zu ihrem Inhalt hinzuzuf\u00fcgen.<\/p>\n Einzelne Buttons werden mit zwei voreingestellten Stilen zur Auswahl und mehreren zus\u00e4tzlichen Optionen zur Feinabstimmung des Erscheinungsbildes der Buttons geliefert.<\/p>\n Mit WordPress 5.4 erhalten Webseiten-Besitzer dank der Hinzuf\u00fcgung von Farbverlaufshintergr\u00fcnden, die auch mit einer Handvoll von Farbverlaufsvoreinstellungen<\/a> geliefert werden, die den Seiten-Administratoren als Ausgangspunkt f\u00fcr weitere Anpassungen zur Verf\u00fcgung stehen, eine bessere Kontrolle \u00fcber das Aussehen und die Handhabung ihrer Call-to-Actions.<\/p>\n WordPress 5.4 f\u00fcgt eine brandneue Willkommens-Slideshow hinzu, die grundlegende Informationen \u00fcber den Blockeditor und einen Link zur Online-Dokumentation<\/a> (hinzugef\u00fcgt mit Gutenberg 7.1<\/a>) bietet.<\/p>\n Das Modal ist nur unmittelbar nach der Aktualisierung auf 5.4 sichtbar. Wenn du es wieder ausl\u00f6sen m\u00f6chtest, \u00f6ffne einfach das Men\u00fc Weitere Werkzeuge & Optionen<\/strong> von der Schaltfl\u00e4che oben rechts und finde den Link Welcome Guide<\/strong>.<\/p>\n Ab WordPress 5.4 \u00f6ffnet sich der Editor bei neuen Installationen und Ger\u00e4ten standardm\u00e4\u00dfig im Vollbildmodus<\/a>. Du kannst den Vollbildmodus<\/strong> ein- und ausschalten, indem du auf das Men\u00fc Weitere Werkzeuge & Optionen<\/strong> klickst, wie in der Abbildung unten gezeigt.<\/p>\n Vorerst wird diese Einstellung lokal gespeichert, was bedeutet, dass sie bei jeder Einstellungs\u00e4nderung \u00fcberschrieben wird, wie es beim Zugriff auf die Webseite im Inkognito-Modus geschieht. In Zukunft wird diese Einstellung in der Datenbank gespeichert, so dass die Wahl des Benutzers in jedem Fall erhalten bleibt.<\/p>\n Beachte, dass die Entscheidung<\/a>, den Editor standardm\u00e4\u00dfig im Vollbildmodus zu betreiben, nicht einhellig als potenziell verwirrend f\u00fcr Anf\u00e4nger und nicht fortgeschrittene Benutzer angesehen wird.<\/p>\n Wenn du mehr \u00fcber die Bedenken der Leute in Bezug auf den Vollbildmodus wissen m\u00f6chtest, schau dir die Kommentare zu diesem Beitrag<\/a> an.<\/p>\n Blockeditor-Entwickler k\u00f6nnen den Vollbildmodus programmatisch mit nur wenigen Zeilen JavaScript steuern:<\/p>\n Wenn man normalerweise Artikel in Langform<\/a> schreibt, sollte man die Unterst\u00fctzung von Inline-Textfarben zu sch\u00e4tzen wissen. Vor diesem Update waren wir gezwungen, Rich-Text-Bl\u00f6cke im HTML-Modus hart zu programmieren, um die Farbe einzelner W\u00f6rter und Zeichenketten zu \u00e4ndern.<\/p>\n Ab WordPress 5.4 k\u00f6nnen wir W\u00f6rter und Substrings in RichText-Bl\u00f6cken ausw\u00e4hlen und ihre Farben mit der integrierten Farbauswahl schnell \u00e4ndern.<\/p>\n WordPress 5.4 f\u00fcgt dem Blockeditor eine lange Liste von farbbezogenen Funktionen und Verbesserungen hinzu. Wie oben gesehen, sind wir nicht mehr auf Volltonfarben beschr\u00e4nkt. Mehrere Bl\u00f6cke unterst\u00fctzen jetzt Farbverlaufshintergr\u00fcnde und vordefinierte S\u00e4tze von Farbverl\u00e4ufen.<\/p>\n Hier ist eine kurze Liste mit einigen farbbezogenen Verbesserungen:<\/p>\n Eine weitere bemerkenswerte Erg\u00e4nzung des Blockeditors ist die Unterst\u00fctzung f\u00fcr die im Block „Neueste Beitr\u00e4ge“ (Gutenberg 7.5<\/a>) dargestellten Bilder.<\/p>\n Dies ist nur die neueste von mehreren Verbesserungen, die im Laufe der Zeit dem Neueste Beitr\u00e4ge Block hinzugef\u00fcgt wurden, und stellt einen weiteren Schritt<\/a> zu „komplexeren dynamischen oder globalen Bl\u00f6cken“ dar.<\/p>\n In WordPress 5.4 erm\u00f6glicht der Block Letzte Beitr\u00e4ge“ das Abrufen von Beitr\u00e4gen aus einer bestimmten Kategorie, aber es ist nicht m\u00f6glich, erweiterte Abfragen nach Kategorie\/Tag\/Posttyp zu erstellen und\/oder einzelne Beitr\u00e4ge ein- oder auszuschlie\u00dfen.<\/p>\n Wir hoffen, in Zukunft weitere Verbesserungen bei diesem Block zu sehen.<\/p>\n Seit Version 6.7<\/a> f\u00fcr Gutenberg-Benutzer verf\u00fcgbar und jetzt in den Core integriert, soll die neue Breadcrumb-Leiste die Navigation in verschachtelten Bl\u00f6cken vereinfachen.<\/p>\n Das Bild unten zeigt mehrere verschachtelte Bl\u00f6cke und das neue Breadcrumb-Men\u00fc<\/a> am unteren Rand.<\/p>\n Theme- und Blockentwickler sollten sich \u00fcber viele \u00c4nderungen im Blockeditor mit WordPress 5.4 informieren. Diese \u00c4nderungen umfassen:<\/p>\n Blockentwickler und fortgeschrittene Benutzer k\u00f6nnen jetzt benutzerdefinierte Verkn\u00fcpfungen zum Blockeditor hinzuf\u00fcgen.<\/p>\n Ein neues Paket namens Entwickler<\/a> k\u00f6nnen ihre benutzerdefinierten Shortcuts hinzuf\u00fcgen, indem sie die Dadurch wird automatisch die benutzerdefinierte Verkn\u00fcpfung zu den modalen Verkn\u00fcpfungen hinzugef\u00fcgt, die unter der Schaltfl\u00e4che Weitere Werkzeuge & Optionen<\/strong> in der oberen rechten Ecke des Editors verf\u00fcgbar sind.<\/p>\n Dann k\u00f6nnen wir einen Keyboard Shortcut<\/a> Handler mit der Funktion Mehr zu den Tastaturk\u00fcrzeln findest du im Blog Make WordPress Core<\/a>.<\/p>\n WordPress 5.4 f\u00fchrt Farbverlaufshintergr\u00fcnde mit einer Handvoll Voreinstellungen f\u00fcr Schaltfl\u00e4chen und Cover-Bl\u00f6cke ein. Dies geschieht dank der neuen Gradient Theme API<\/a>s.<\/p>\n Die neuen APIs bieten die Du kannst benutzerdefinierte Farbverl\u00e4ufe mit der Option Die Farbverlauf-Funktionalit\u00e4t kann sowohl mit Hilfe von WordPress 5.4 f\u00fchrt mehrere \u00c4nderungen an der DOM-Struktur ein, die Entwickler beachten sollten.<\/p>\n Eine detaillierte Ansicht der DOM- und CSS-\u00c4nderungen findet man unter Markup- und stilbezogene \u00c4nderungen<\/a> in WordPress 5.4<\/p>\n Mit dem neuen @wordpress\/create block Paket f\u00fcr Blockger\u00fcste haben Entwickler eine neue M\u00f6glichkeit, die Verzeichnisstruktur f\u00fcr ein Blockeditor-Plugin zu generieren. Diese Struktur umfasst typischerweise index.php, index.js und style.css.<\/p>\n Block-Entwickler k\u00f6nnen jetzt einfach den folgenden Befehl ausf\u00fchren:<\/p>\n Blocksammlungen<\/a> bieten eine M\u00f6glichkeit, Sammlungen von Bl\u00f6cken im Blockeditor-Inserter visuell zu gruppieren. Sammlungen unterscheiden sich von Kategorien und bieten eine zus\u00e4tzliche M\u00f6glichkeit, Bl\u00f6cke zu gruppieren.<\/p>\n Die neue API bietet eine neue Funktion:<\/p>\n Die neue API, die mit Gutenberg 7.3<\/a> eingef\u00fchrt und jetzt in den Core integriert<\/a> wurde, erm\u00f6glicht es den Theme- und Blockentwicklern, Bl\u00f6cke besser zu organisieren, wodurch es f\u00fcr die Benutzer einfacher wird, Bl\u00f6cke zu finden und dem Inhalt hinzuzuf\u00fcgen.<\/p>\n\n
Was ist neu am Block-Editor?<\/h2>\n
\n
Neue Blockeditor-Funktionen und Verbesserungen<\/h3>\n
\n
Neuer Block mit Social Icons<\/h4>\n
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/social-icons-block-de.jpg\"){kind=icon}
![\"Social](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/social-icons-stile.jpg\"){kind=icon}
\n
Neuer Button Block<\/h4>\n
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/neue-nutton-block.png\")
![\"Button](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/button-einstellungen-wordpress54.jpg\")
![\"\u00dcberarbeitete](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/uberarbeitete-farbfunktionen-buttons.jpg\")
Ein Willkommens Leitfaden Modal<\/h4>\n
![\"Willkommens](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/willkommens-leitfaden-modal.jpg\")
![\"Willkommens](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/willkommens-leitfaden.jpg\")
Vollbildmodus standardm\u00e4\u00dfig aktiviert<\/h4>\n
![\"Der](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/volllbildmodus-wordpress54-standardmasig-aktiviert.png\")
const isFullscreenMode = wp.data.select( 'core\/edit-post' ).isFeatureActive( 'fullscreenMode' );\n\nif ( isFullscreenMode ) {\t\n wp.data.dispatch( 'core\/edit-post' ).toggleFeature( 'fullscreenMode' );\n}<\/code><\/pre>\nUnterst\u00fctzung von Inline-Textfarben in RichText-Bl\u00f6cken<\/h4>\n
![\"RichText](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/richtext-farboptionen.jpg\")
![\"RichText](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/richtext-farbauswahl.jpg\")
Zus\u00e4tzliche Farboptionen f\u00fcr mehrere Bl\u00f6cke<\/h4>\n
\n
![\"Cover-Block](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/block-voreingestelltem-farbverlauf-hitergrund.jpg\")
Featured Images im Block der neuesten Posts<\/h4>\n
![\"Neueste](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/neueste-beitrage-block.jpg\")
Eine neue Breadcrumb-Bar f\u00fcr die Block-Navigation<\/h4>\n
![\"Das](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/neue-breadcrumbs-menu.jpg\")
Blockeditor-\u00c4nderungen f\u00fcr Themes- und Blockentwickler<\/h3>\n
\n
Block-Editor-Tastaturk\u00fcrzel<\/h4>\n
@wordpress\/keyboard-shortcuts<\/code> wurde eingef\u00fchrt<\/a>, um die Registrierung, Entfernung und Dokumentation von Editor-Shortcuts zu zentralisieren.<\/p>\nregisterShortcut<\/code> Aktion auf diese Weise aufrufen:<\/p>\nwp.data.dispatch( 'core\/keyboard-shortcuts' ).registerShortcut( {\n\n\t\/\/ Shortcut identifier\n\tname: 'plugin\/shortcut-test',\n\n\t\/\/ Shortcut category (possible values global, block, selection)\n\tcategory: 'global',\n\n\t\/\/ Shortcut description\n\tdescription: 'My first shortcut',\n\n\t\/\/ The key combination that triggers the shortcut\n\tkeyCombination: {\n\n\t\t\/\/ Available modifiers:\n\t\t\/\/ primary, primaryShift, primaryAlt,\n\t\t\/\/ secondary, access, ctrl, alt,\n\t\t\/\/ ctrlShift, shift, shiftAlt\n\t\tmodifier: 'alt',\n\t\tcharacter: 'w',\n\t},\n\n\t\/\/ An alias for the key combination\n\taliases: [\n\t\t{\n\t\t\tmodifier: 'primary',\n\t\t\tcharacter: 'q',\n\t\t},\n\t],\n} );<\/code><\/pre>\n![\"Eine](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/benutzerdefinierte-blockeditor-verknupfung-hinzufuge.jpg\")
useShortcut<\/code> anh\u00e4ngen:<\/p>\nimport { useShortcut } from '@wordpress\/keyboard-shortcuts';\nimport { useCallback } from '@wordpress\/element';\n\nconst MyComponent = () => {\n\tuseShortcut(\n\n\t\t'plugin\/shortcut-test',\n\n\t\tuseCallback(\n\t\t\t( event ) => {\n\t\t\t\t\/\/ Do something\n\t\t\t},\n\t\t\t[]\n\t\t)\n\t);\n}<\/code><\/pre>\nTheme-APIs f\u00fcr Farbverl\u00e4ufe<\/h4>\n
editor-gradient-presets<\/code> f\u00fcr Theme-Unterst\u00fctzung, die es den Themeentwicklern erm\u00f6glicht, die Standardvorgaben zu \u00fcberschreiben und eigene Voreinstellungen zu definieren<\/a>:<\/p>\nadd_theme_support(\n\t'editor-gradient-presets',\n\tarray(\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'CadetBlue to Chartreuse', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(95,158,160,1) 0%,rgb(127,255,0) 100%)',\n\t\t\t'slug'\t\t=> 'cedetblue-chartreuse'\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'Chocolate to Coral', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(210,105,30,1) 0%,rgba(255,127,80,1) 100%)',\n\t\t\t'slug'\t\t=> 'chocolate-to-coral',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DarkMagenta to DarkOrchid', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgb(139,0,139) 0%,rgb(153,50,204) 100%)',\n\t\t\t'slug'\t\t=> 'darkmagenta-to-darkorchid',\n\t\t),\n\t\tarray(\n\t\t\t'name'\t\t=> __( 'DeepSkyBlue to DodgerBlue', 'themeLangDomain' ),\n\t\t\t'gradient'\t=> 'linear-gradient(135deg,rgba(0,191,255,1) 0%,rgba(30,144,255,1) 100%)',\n\t\t\t'slug'\t\t=> 'deepskyblue-to-dodgerblue',\n\t\t),\n\t)\n);<\/code><\/pre>\n![\"Benutzerdefinierte](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/benutzerdefinierte-voreinstellungen-farbverlaufe.jpg\")
\n
name<\/code>: eine aussagekr\u00e4ftige Beschriftung f\u00fcr den Tooltip mit Informationen \u00fcber den Farbverlauf. Dies ist besonders n\u00fctzlich f\u00fcr Screenreader und Benutzer, die Schwierigkeiten haben, bestimmte Farben zu unterscheiden.<\/li>\ngradient<\/code>: CSS-Werte f\u00fcr den Farbverlauf.<\/li>\nslug<\/code>: ein Bezeichner zur Erzeugung von CSS-Klassen, die im Blockeditor verwendet werden.<\/li>\n<\/ul>\n![\"Benutzerdefinierte](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/benutzerdefinierte-farbverlaufsvoreinstellungen-de.jpg\")
disable-custom-gradients<\/code> theme-support deaktivieren:<\/p>\nadd_theme_support( 'disable-custom-gradients' );<\/code><\/pre>\ndisable-custom-gradients<\/code> als auch mit Hilfe von editor-gradient-presets<\/code> vollst\u00e4ndig entfernt werden:<\/p>\nadd_theme_support( 'disable-custom-gradients' );\nadd_theme_support( 'editor-gradient-presets', array() );<\/code><\/pre>\nMarkup- und Stil\u00e4nderungen im Blockeditor<\/h4>\n
\n
editor-<\/code> wurde aus den Blockeditor-Skripten entfernt und Entwickler sollten nur noch das block-editor-<\/code> Pr\u00e4fix verwenden.<\/li>\nedit-post-layout__content<\/code> wurde aus dem DOM des Blockeditors entfernt.<\/li>\ndiv<\/code>-Wrapper wurden aus Bl\u00f6cken und RicheText als \u00fcberfl\u00fcssig entfernt. Diese \u00c4nderung bringt eine erhebliche Leistungsverbesserung und vereinfacht den DOM-Baum, was von Block- und Themeentwicklern<\/a> gesch\u00e4tzt werden sollte.<\/li>\nBlock-Ger\u00fcst<\/h4>\n
$ npm init @wordpress\/block block-name<\/code><\/pre>\nBlock-Sammlungen<\/h4>\n
registerBlockCollection( namespace, { title, icon } );<\/code><\/pre>\n\n
namespace<\/code>: mit einem Block-Pr\u00e4fix abgeglichen.<\/li>\ntitle<\/code>: Dies ist die Bezeichnung, die im Block-Inserter angezeigt wird.<\/li>\nicon<\/code>: dies ist das Icon, das mit dem Titel im Block-Inserter angezeigt wird.<\/li>\n<\/ul>\nBlock-Variationen<\/h4>\n
![\"Heading](\"https:\/\/kinsta.com\/de\/wp-content\/uploads\/sites\/5\/2020\/03\/heading-block-variationen.jpg\")