Was ist neu in WordPress 5.9 – Vollständige Website-Bearbeitung, globale Stile, Blöcke, Muster, APIs, UI-Verbesserungen und vieles mehr
Veröffentlicht: 2022-01-13WordPress 5.9 Josephine ist da! Die erste WordPress-Version des Jahres sollte ursprünglich am 14. Dezember 2021 veröffentlicht werden. Aufgrund mehrerer offener Probleme und ungelöster Fehler hatte sich die endgültige Veröffentlichung verzögert und wurde am 25. Januar 2022 endgültig veröffentlicht.
Wenn Sie sich fragen, was in WordPress 5.9 neu ist, lautet die kurze Antwort Full Site Editing (FSE).
Und tatsächlich sind viele 5.9-Funktionen nur verfügbar, wenn Sie ein Design verwenden, das die vollständige Site-Bearbeitung unterstützt, wie z. B. das brandneue Standarddesign Twenty Twenty-Two.
Mit WordPress 5.9 kommen wir zum Kern der zweiten Phase der Gutenberg-Roadmap: der Anpassungsphase , die sich hauptsächlich auf die vollständige Site-Bearbeitung, Blockmuster, Blockverzeichnis und blockbasierte Themen konzentriert.
Mit 5.9, das nächsten Monat herauskommt, sind wir – würde ich sagen – beim MVP, dem Minimum Viable Product dieser Anpassungsphase von Gutenberg.
Diese Worte von Matt Mullenweg von 2021 State of the Word fassen die wichtigsten Funktionen der neuen WordPress-Version am besten zusammen.
Was ist neu an der ersten WordPress-Version von 2022?
Lass es uns herausfinden!
Globale Stile: Eine grafische Oberfläche für theme.json
Mit der Veröffentlichung von WordPress 5.8 im Jahr 2021 wurde die Bearbeitung der theme.json-Datei zur Standardmethode für Theme-Entwickler, um Editoreinstellungen und -stile anzupassen.
WordPress 5.9 bringt die Dinge auf die nächste Stufe, indem es eine grafische Benutzeroberfläche einführt, die es Benutzern ermöglicht, Stilvoreinstellungen für ihre Websites entweder global oder auf Blockebene anzupassen, ohne eine einzige Codezeile zu schreiben.
Der Global Styles-Mechanismus sollte die Art und Weise, wie Sie es gewohnt sind, das Erscheinungsbild Ihrer Websites anzupassen, erheblich verändern, da Global Styles mehrere Aspekte des WordPress-Site-Designs beeinflussen.
Zunächst einmal ersetzt die Global Styles-Oberfläche den Customizer und ist jetzt die einzige Möglichkeit, Einstellungen und Stile mit Blockdesigns anzupassen. Ebenso werden komplexe Verwaltungsseiten für Themenoptionen nicht mehr benötigt. Dies bietet eine neue Standardmethode zum Konfigurieren von Designeinstellungen und -stilen und sollte gleichzeitig den Workflow für die Designentwicklung optimieren.
Mit Global Styles erhalten WordPress-Benutzer mehr Kontrolle über die Darstellung ihrer Websites, sowohl global als auch pro Blocktyp, über den Kontext einzelner Seiten oder Beiträge hinaus.
Im Site-Editor ist jetzt eine neue Seitenleiste verfügbar, in deren oberen Bereich Sie ein kleines Vorschaufenster und vier Komponenten in der folgenden Reihenfolge finden:
- Typografie
- Farben
- Layout
- Blöcke
Wir können davon ausgehen, dass im Laufe der Zeit neue Komponenten hinzugefügt werden.
Werfen wir einen genaueren Blick auf die neue Benutzeroberfläche.
[CTA]
Stilvorschau
Das erste Element in der Seitenleiste „Globale Stile“ ist ein Vorschaufenster. Dieses Bedienfeld ermöglicht es Ihnen, das Ergebnis Ihrer Anpassungen zu überprüfen, und ist besonders nützlich, wenn Ihre Änderungen Elemente betreffen, die nicht auf der Website-Editor-Leinwand sichtbar sind.
Das folgende Bild zeigt drei verschiedene Stilkombinationen im Vergleich:
Typografie
Im Bereich „Typografie“ steuern Sie die Typografie Ihrer Website. Die in diesem Bereich verfügbaren Steuerelemente hängen natürlich von Ihren theme.json- Einstellungen ab.
Beispielsweise deklariert das Design Twenty Twenty-One Blocks (TT1 Blocks) die folgenden Typografieeigenschaften:
"settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }Das nächste Bild zeigt die resultierenden Typografie-Einstellungen in der Seitenleiste „Globale Stile“:
Lassen Sie uns etwas tiefer eintauchen und sehen, wie das TT1 Blocks- fontFamilies deklariert:
"fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]Sie können diese Schriftfamilien im Vorschaufenster „Globale Stile“ überprüfen:
Farben
Im Abschnitt Farben können Sie Farbpaletten anzeigen und bearbeiten und die Farbe mehrerer Website-Elemente anpassen.
Durch Klicken auf diese Elemente erhalten Sie Zugriff auf ein neues Bedienfeld, in dem Sie Farben aus drei Farbpaletten auswählen können: Kern-, Design- und benutzerdefinierte Palette (lesen Sie mehr unter Standardfarben, Designfarben und benutzerdefinierte Farben).
In diesem Bereich können Sie die Farbe für das aktuelle Element festlegen und ändern.
Layout
Die letzte Gruppe von Werkzeugen ist für Layoutanpassungen gedacht. Im globalen Kontext ist dies auf den Site-Container beschränkt.
Blöcke
Mit der Implementierung des Global Styles-Mechanismus ist es jetzt auch möglich, das Erscheinungsbild bestimmter Blöcke zu ändern, z. B. Absatz (Typografie und Farben), Schaltflächen (Layout) und Spalte (Farben und Layout).
Beachten Sie, dass Blockstile nur dann über die Schnittstelle „Globale Stile“ angepasst werden können, wenn der Block Unterstützung für bestimmte Funktionen in der entsprechenden Datei „block.json “ deklariert. Beispielsweise unterstützt der core/post-title Block derzeit die folgenden Stile:
"supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } }, Da der core/post-title Block Farben, Abstände und Typografie unterstützt, finden Sie die entsprechenden Einträge in den Global Styles-Einstellungen des Post-Title-Blocks.
Das folgende Bild zeigt Typografieeinstellungen, die Sie leicht mit dem obigen Code vergleichen können:
Es ist erwähnenswert, dass WordPress 5.9 nur die erste Implementierung der Global Styles-Oberfläche liefert. Wie Matias Ventura betont, können wir vernünftigerweise eine Weiterentwicklung der neuen Style-Control-Funktion erwarten:
In Zukunft wird es in das System integrierte Abläufe geben, mit denen Sie von lokalen Stilen zu globalen wechseln können – wie z. B. Anpassungen an einem Schaltflächenblock und die Option, diese Änderungen global auf alle Schaltflächen dieses Typs anzuwenden.
Wir werden also möglicherweise bald größere Verbesserungen sehen. Das folgende Bild ist nur ein Beispiel dafür, was wir erwarten könnten:
Zusätzliche Verbesserungen könnten die Fähigkeit für Designs umfassen, alternative Farbpaletten und mehrere globale Stilvariationen bereitzustellen.
Letzte Woche habe ich eine Handvoll Farb- und Schriftartvariationen von Twenty Twenty-Two in supereinfache Child-Themes eingebaut. Sie sind wirklich leichtgewichtig und ich liebe die Idee, den Leuten mit einem Klick eine völlig andere Website anzubieten. https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A
– kjellr (@kjellr) 15. November 2021
Entwickler können im Support-Artikel Globale Einstellungen und Stile (theme.json) tiefer in den globalen Stilmechanismus eintauchen. Weitere Beispiele finden Sie in unserer Einführung zum Standardthema Twenty Twenty-Two.
Der Navigationsblock
Der Navigationsblock wurde als „einer der wirkungsvollsten Themenblöcke“ bezeichnet, und wir scheuen uns nicht, zu sagen, dass wir dem zustimmen.
Der Block befindet sich seit einiger Zeit in der Embryonalphase (siehe auch Navigationsblock-Tracking-Problem und Tracking-Problem i2). Jetzt, da alle ausstehenden Probleme und Blocker, die als WordPress 5.9-Must-Haves aufgeführt sind, behoben wurden, können wir endlich damit beginnen, eine der leistungsstärksten Funktionen zu verwenden, die mit WordPress 5.9 in den Kern integriert wurden.
[CTA]
Ein kurzer Überblick über die Navigationsblock-Oberfläche
Die Verwendung des neuen Blocks mag anfangs etwas verwirrend sein, aber sobald Sie den Dreh raus haben, werden Sie sein volles Potenzial zu schätzen wissen.
Wenn Sie zum ersten Mal einen Navigationsblock hinzufügen, bietet der Blockplatzhalter drei Optionen zum Auswählen eines vorhandenen blockbasierten Menüs, zum Erstellen eines Menüs mit allen Seiten oder zum Neubeginnen mit einem leeren Menü.
Mit dem neuen Navigationsmenü können Sie auch Menüs importieren, die über den Bildschirm „Darstellungsmenüs“ erstellt wurden, der mit klassischen Designs verfügbar ist.
Wenn Sie also von einem klassischen Design zu einem Blockdesign wechseln, müssen Sie Ihre vorhandenen Menüs nicht neu erstellen. Sie müssen nur eines Ihrer derzeit verfügbaren „klassischen Menüs“ auswählen und es wird automatisch in ein blockbasiertes Navigationsmenü umgewandelt.
Sie können den Navigationsblock überall auf Ihren Seiten hinzufügen. In langen Artikeln kann es beispielsweise nützlich sein, ein Inhaltsverzeichnis zu erstellen, das es Benutzern ermöglicht, zu bestimmten Inhaltsabschnitten zu springen.
Neue Navigationslinks werden dem Navigationsblock sofort hinzugefügt, indem Sie auf das Pluszeichen ( + ) auf der rechten Seite klicken (siehe auch Versionshinweise zu Gutenberg 11.7), es sei denn, es wurden bereits andere Arten von Blöcken zum Menü hinzugefügt.
Durch Klicken auf die Schaltfläche Bearbeiten in der Symbolleiste des Navigationslink-Blocks wird ein Menüelement in einen benutzerdefinierten Link umgewandelt. Auf diese Weise können Sie Elemente einzeln hinzufügen, bearbeiten, neu anordnen und entfernen.
Sie können auch Verknüpfungen zu Blöcken umwandeln, indem Sie auf die Schaltfläche „Umwandeln“ in der Blocksymbolleiste klicken. Auf diese Weise können Sie bestimmte Blöcke direkt zum Navigationsmenü hinzufügen.
Benutzerdefinierter Link, Abstandshalter, Site-Logo, Home-Link, soziale Symbole und Suchblöcke werden Benutzern jetzt angezeigt, wenn sie Blöcke zu Navigationsmenüs hinzufügen.
In der Seitenleiste „Einstellungen“ finden Sie eine umfassende Reihe von Optionen zum Steuern verschiedener Aspekte Ihrer Navigationsmenüs.
Das Bedienfeld „Layout“ enthält Steuerelemente für Ausrichtung, Ausrichtung und Umbruch.
Der Navigationsblock verfügt außerdem über ein verbessertes Anzeigeeinstellungsfeld mit einer Option für ein immer aktives Burger-Menü.
Sie können auch Text- und Hintergrundfarben für Ihre Menüs und Untermenüs anpassen.
Eine weitere hilfreiche Ergänzung, die kürzlich dem Navigationsblock hinzugefügt wurde, ist die Unterstützung von Blocklücken, die Benutzern die Möglichkeit bietet, den Abstand zwischen Menüelementen zu steuern.
Das Typografie-Bedienfeld bietet eine Reihe von Steuerelementen für Schriftfamilie, Aussehen, Zeilenhöhe, Dekoration und Groß- und Kleinschreibung. Alle diese Steuerelemente können über ein Dropdown-Menü ein- und ausgeschaltet werden, das angezeigt wird, wenn Sie rechts auf das Ellipsensymbol klicken.
Der Navigationsblock: Unter der Haube
Navigationsblockdaten werden in der Datenbank unter Verwendung eines dedizierten Beitragstyps wp_navigation gespeichert.
Warum ist das für WordPress-Benutzer interessant und wie funktioniert es?
Angenommen, Sie haben ein Navigationsmenü erstellt, das aus zwei benutzerdefinierten Links und einem Suchfeld besteht. Wenn das Design Twenty Twenty-Two installiert ist, könnte das Menü wie in der folgenden Abbildung aussehen:
Der obige Navigationsblock wird wie folgt in der Datenbank als wp_navigation gespeichert:
<!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->Durch das Speichern des Inhalts des Navigationsblocks in der Datenbank können Benutzer dieselben Navigationsmenüs über verschiedene Blockthemen hinweg verwenden. Wenn das Menü nicht sofort sichtbar ist, wählen Sie einfach das gewünschte Navigationsmenü in der Menüauswahl (siehe auch Ausgabe Nr. 36087 und PR Nr. 36178).
Das folgende Bild zeigt das obige Menü mit dem Thema Twenty Twenty-One Blocks:
Der Navigationsblock hat mehrere Iterationen durchlaufen. In den Versionshinweisen zu Gutenberg 11.7, 11.8 und 11.9 können Sie tiefer in die einzelnen Implementierungen eintauchen.
Weitere Informationen zum Navigationsblock finden Sie auch in den Entwicklerhinweisen zum neuen Navigationsblock und im Support-Artikel zum Navigationsblock.
[CTA]
Bildergalerien, ausgewählte Bilder und Website-Symbole
Mit dem Ziel, das Verhalten von Bildern in verschiedenen Kontexten einheitlicher zu gestalten, liefert WordPress 5.9 neue Funktionen und Verbesserungen für mehrere Blöcke. Der Galerie-Block wurde komplett überarbeitet, während verschiedene Änderungen an den Blöcken Featured Image und Site Icon den Benutzern eine genauere Kontrolle über die jeweiligen Bilder geben.
Ein umgestalteter Galerieblock
In WordPress 5.8 war die Möglichkeit, das Erscheinungsbild von Bildern in Galerien anzupassen, etwas eingeschränkt. Es gab keine Möglichkeit, den Bildstil zu ändern oder einen Duotone-Filter anzuwenden.
Außerdem fehlten wichtige Funktionen bei Galeriebildern, wie z. B. das Hinzufügen benutzerdefinierter Links zu einzelnen Bildern in einer Galerie.
Um den Grund für diese Asymmetrie zwischen Bildern in den zwei unterschiedlichen Kontexten eines einzelnen Bildes und eines Bildes in einer Galerie besser zu verstehen, werfen wir einen Blick auf den Galerie-Block in der Codeansicht in WordPress 5.8:
Beachten Sie, dass Bilddetails nur im Galerie-Blocktrennzeichen gespeichert werden (siehe auch Was ist ein Gutenberg-Block?).
Dadurch verhalten sich einzelne Bilder anders als Bilder in Galerien.
Damit sich Bilder in den beiden unterschiedlichen Kontexten konsistent verhalten, führt WordPress 5.9 einen vollständig umgestalteten Galerie-Block ein, der sich jetzt wie ein Container für eine Sammlung von Abbildungselementen verhält, anstatt wie eine ungeordnete Liste von Bildern.
In WordPress 5.9 werden Galeriebilder mit den zentralen innerBlocks APIs verschachtelt, und jedes Bild speichert seine eigenen Details, genau wie einzelne Bilder.
Das ist eine großartige Verbesserung, da Galerie-Blockbilder jetzt die gleichen Funktionen unterstützen, die in den Kern-Bildblöcken verfügbar sind , wie z. B. Bildabmessungen und Duplex-Filter, sowie Standard-Blockfunktionen wie Drag-and-Drop, Kopieren, Duplizieren und Entfernen von Funktionen .
Mit dem neuen Galerie-Block können Sie Bilder individuell gestalten. Dies gewährt eine breite Palette von Anpassungsmöglichkeiten.
Das folgende Bild zeigt mehrere Bilder in einer Galerie, jedes mit unterschiedlich abgerundeten Ecken:
Sie können auch verschiedene Duotone-Filter für verschiedene Bilder in derselben Galerie verwenden.
Und natürlich können Sie jedem Bild eine bestimmte CSS-Klasse zuweisen, wodurch Sie zusätzliche Superkräfte erhalten, um Ihre Galeriebilder beliebig anzupassen.
Eine nähere Betrachtung des neuen Galerie-Blocks finden Sie auch unter Galerie-Block-Refactoring-Entwicklerhinweis, Bevorstehende Verbesserungen des Galerie-Blocks und Versionshinweise zu Gutenberg 11.4.
Ausgewählte Bildverbesserungen
Auch der Featured Image-Block wurde verbessert.
Steuerelemente für grundlegende Abmessungen
Der Featured Image-Block verfügt jetzt über ein neues Einstellungsfeld für Abmessungen mit Steuerelementen für Höhe, Breite und Skalierung.
Die Dimensionssteuerung gilt auch für ausgewählte Bilder in Abfrageschleifenblöcken, wie in der folgenden Abbildung gezeigt:
Duotone-Filter für ausgewählte Bilder
Wir haben oben erwähnt, dass wir den Duotone-Filter jetzt auf Bilder anwenden können, die in den neuen umgestalteten Galerie-Block eingeschlossen sind.
Ab WordPress 5.9 sind Duotone-Filter jetzt auch in Featured Image-Blöcken in jedem Kontext verfügbar, von Beitrags- und Seitenvorlagen bis hin zu Query Loop-Blöcken.
Diese Funktion öffnet die Tür zu kreativen und konsistenten Farbkombinationen auf der gesamten Website.
Bildzuschnitt im Site-Logo
Vor WordPress 5.9 (und Gutenberg 11.6) konnten Logobilder vor dem Hochladen nur bearbeitet werden. Mit WordPress 5.9 können Sie Bilder, die im Site-Logo-Block verwendet werden, direkt von der Block-Symbolleiste aus zuschneiden, zoomen und drehen.
Neue Design-Tools, Blöcke und Verbesserungen der Benutzeroberfläche
Elf Gutenberg-Versionen werden mit WordPress 5.9 in den Kern integriert und liefern so viele Funktionen, Verbesserungen und Fehlerbehebungen, dass es nicht möglich wäre, sie alle in einem einzigen Artikel zu behandeln.
Also haben wir einige von denen ausgewählt, die unserer Meinung nach am meisten Aufmerksamkeit verdienen. Für einen tieferen Überblick über diese Funktionen und Verbesserungen möchten Sie vielleicht auch die Release-Posts für Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 und 11.9 lesen.
Vor diesem Hintergrund behandelt dieser Abschnitt die folgenden Änderungen:
Border unterstützt die Benutzeroberfläche
Beginnend mit WordPress 5.9, wenn die theme.json Rahmeneinstellungen border und ein Block Rahmenunterstützung über die Block Supports API deklariert, bietet ein neues Einstellungsfenster Steuerelemente für Rahmenradius, -breite, -stil, -farbe und -einheiten (siehe auch Gutenberg 11.1). .
Der Kerngruppenblock ist ein gutes Beispiel für diese nützliche Erweiterung der Benutzeroberfläche. Die block.json -Datei des Group-Blocks enthält jetzt die folgenden supports :
{ ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }Mit dieser Funktion können Benutzer mit minimalem Aufwand fantastische Grafikeffekte auf ihren Websites erstellen. Sie können es mit dem neuen Thema Twenty Twenty-Two in Aktion sehen.
Erstellen Sie in einem neuen Beitrag oder einer neuen Seite einen neuen Gruppenblock und wählen Sie ihn aus. In der Seitenleiste der Blockeinstellungen wird ein Rahmenfenster angezeigt. Ändern Sie die Rahmenbreite und den Stil nach Bedarf und genießen Sie das Ergebnis.
Wenn Sie ein Designentwickler sind und diese Funktion zu Ihren Designs hinzufügen möchten, öffnen Sie Ihre theme.json -Datei und deklarieren Sie die Rahmenunterstützung, wie im folgenden Code gezeigt:
{ "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }Speichern Sie die Datei und kehren Sie zu Ihrem WordPress-Dashboard zurück. Erstellen Sie in einem neuen Beitrag oder einer neuen Seite einen neuen Gruppenblock und wählen Sie ihn aus. Sie sollten jetzt ein Border-Panel in der Seitenleiste der Blockeinstellungen sehen (siehe auch diese experimentelle theme.json).
Verbesserungen der Listenansicht
Mit WordPress 5.9 wurde die Listenansicht verbessert und bietet jetzt Drag-and-Drop, zusammenklappbare Abschnitte und HTML-Anker.
Drag-and-Drop in der Listenansicht
Wie in der Pull-Anforderung Nr. 33320 erwähnt, wurde Drag-and-Drop in der Listenansicht implementiert, aber aufgrund von Leistungsproblemen deaktiviert.
Ab WordPress 5.9 wurde Drag-and-Drop in der Listenansicht neu implementiert. Sie können wieder Blöcke und Blockgruppen überall in der Listenansicht ziehen und ablegen. Dies ist eine große Verbesserung der Benutzerfreundlichkeit des Editors, da Sie Blöcke und Blockgruppen schnell und einfach auf Ihren Seiten verschieben können. Es ist maßgeblich an Artikeln und Seiten in Langform und der Verwaltung komplexer Strukturen verschachtelter Blöcke beteiligt.
Zusammenklappbare Abschnitte der Listenansicht
Eine weitere wesentliche Verbesserung der Listenansicht ist die Möglichkeit, Abschnitte verschachtelter Blöcke zu erweitern/zu reduzieren. Auf diese Weise können Sie einfach durch komplexe Blockstrukturen navigieren und einzelne Gruppen von Blöcken erweitern, während der Rest zusammengeklappt bleibt.
Sie können die Abschnitte der Listenansicht auch mit den Links- und Rechtspfeilen erweitern und reduzieren.
HTML-Anker für Listenansichtselemente
Eine weitere hilfreiche Verbesserung ist die Möglichkeit, HTML-Anker zu Ihren Blöcken in der Listenansicht hinzuzufügen und sie auf einen Blick zu sehen.
Blockabstandssteuerung
Erstmals in Gutenberg 11.4 eingeführt und jetzt mit WordPress 5.9 in den Kern integriert, ermöglicht Ihnen die neue Blockabstandssteuerung, einen benutzerdefinierten Abstand zwischen Elementen innerhalb eines Blocks festzulegen. Unten sehen Sie eine Vorschau mit unterschiedlichen Blockabstandswerten in einem Spaltenblock mit dem Standardthema Twenty Twenty-Two:
Gap Spacing ist zunächst für bestimmte Blöcke verfügbar, darunter Schaltflächen, Bilder, Spalten, Titel und Navigation, aber die Unterstützung sollte in Zukunft auf weitere Blöcke ausgeweitet werden.
Designs sollten Gap Spacing in theme.json mithilfe der neuen Eigenschaft „ erscheinungsbildTools “ aktivieren. Sie können mehr über Darstellungswerkzeuge in unserem Deep Dive in Twenty Twenty-Two lesen. Siehe auch Pull-Requests Nr. 33991 und Nr. 34630.
Rich-URL-Vorschau für die Link-Steuerung
Durch die Nutzung des neuen REST-URL-Details-Endpunkts bietet das Link-Steuerelement jetzt eine umfangreiche URL-Vorschau mit Details für eine Link-Zielressource.
In der ersten Implementierung war diese Funktion nur in der Richtext-Komponente des Post-Editors verfügbar. Zum Zeitpunkt des Schreibens dieses Artikels ist es auch im Site-Editor verfügbar, jedoch nicht in den Navigations- und Widget-Editoren.
Seiten aus Link-Popup erstellen
WordPress 5.9 bietet auch eine verbesserte Inline-Link-Benutzeroberfläche, die eine brandneue Schaltfläche zum Erstellen neuer Seiten direkt aus dem Inline-Link-Popup zeigt. Diese Funktion ist nur im Post-Editor verfügbar.
Verbesserungen am Suchblock
Der Suchblock zeigt jetzt die Farbeinstellungen für Schaltflächen und Rahmen an.
Sie können jetzt auch die Hintergrund- und Textfarbe sowie die Randfarbe und den Radius anpassen.
Neue Steuerelemente für Blockabmessungen
Ein neues Einstellungsfeld für Dimensionen ist jetzt für Benutzer verfügbar, um den Platz zu steuern, der von einem Block auf der Seite belegt wird. Das Bedienfeld sollte Steuerelemente für Höhe, Breite, Auffüllung, Rand und möglicherweise Ausrichtung enthalten, aber nicht alle Attribute sind für jeden Block verfügbar.
Blockentwickler werden die Komponente <DimensionControl /> auf GitHub dokumentiert finden, aber beachten Sie, dass sie immer noch als experimentelles Feature gekennzeichnet ist und zum Zeitpunkt des Schreibens dieses Artikels bahnbrechenden Änderungen unterliegen könnte.
Ein neuer Widget-Gruppenblock wurde dem Widgets-Bildschirm hinzugefügt
Ein neuer Widget-Gruppen-Block ist jetzt im blockbasierten Widget-Editor verfügbar. Mit dem neuesten Block können Sie eine Gruppe von Blöcken in einem Widget mit einem Titel im Widgets-Editor des klassischen Designs und im Customizer hinzufügen.
Sie können mehr über den Widget-Editor im Editor für blockbasierte Widgets und über Block-Widgets im Customizer lesen.
Flex-Layout und der Neue-Zeilen-Block
Ursprünglich als experimentelles Feature mit Gutenberg 11.2 eingeführt, wurde das Flex-Layout auf mehrere Blöcke erweitert, darunter Social Links und Group-Blöcke.
Benötigen Sie blitzschnelles, zuverlässiges und absolut sicheres Hosting für Ihre WordPress-Site? Kinsta bietet all dies und rund um die Uhr erstklassigen Support von WordPress-Experten. Sehen Sie sich unsere Pläne an
Einige Blöcke, wie z. B. der Block „Soziale Links“, bieten jetzt eine Reihe von Symbolleisten-Steuerelementen und Seitenleisteneinstellungen, mit denen Sie das Flex-Layout anpassen können.
Dieselbe Funktionalität ist im Navigationsblock und Zeilenblock verfügbar, einer neuen Variante des Gruppenblocks, der mit Gutenberg 11.5 eingeführt wurde.
Das folgende Bild zeigt den Zeilenblock mit Layout-Steuerelementen in der Seitenleiste mit den Einstellungen:
Unten sehen Sie denselben Zeilenblock im Frontend und im Inspektor-Tool von Chrome.
Blockmuster-Verbesserungen
Blockmuster, die erstmals mit WordPress 5.5 eingeführt wurden, ermöglichen es WordPress-Benutzern, komplexe, gebrauchsfertige Strukturen aus verschachtelten Blöcken mit nur wenigen Klicks in ihre Inhalte einzufügen.
Jetzt bringt WordPress 5.9 die Dinge einen Schritt vorwärts in Richtung Designdemokratisierung und Benutzerermächtigung, indem es einige Verbesserungen am Blockmustersystem einführt.
Was ist also neu an Blockmustern in WordPress 5.9?
Ausgewählte Muster aus dem Musterverzeichnis
Der Block-Inserter zeigt jetzt Featured Block Patterns an, die dynamisch aus dem Pattern-Verzeichnis abgerufen werden, und bietet Benutzern eine schnelle und einfache Möglichkeit, beliebte Patterns zur Verwendung in ihren Inhalten zu finden.
Da Muster direkt in das WordPress-Dashboard gelangen, sollten WordPress-Entwickler aus dem gleichen Grund ermutigt werden, im Laufe der Zeit immer mehr Muster zu erstellen und zu veröffentlichen, was zu immer fortschrittlicheren Designmöglichkeiten für Benutzer führt.
Ein neuer Muster-Explorer im Vollbildmodus
Da die Anzahl der im Musterverzeichnis verfügbaren Blockmuster weiter zunimmt und immer mehr Themes sie verwenden, führt WordPress 5.9 eine neue Blockmuster-Navigationsoberfläche ein: den Muster-Explorer.
Eine neue Explore -Schaltfläche öffnet jetzt ein Vollbild-Modal, das es Benutzern ermöglicht, Blockmuster mit nur wenigen Klicks zu durchsuchen, zu suchen und einzufügen. Das Ergebnis ist eine verbesserte Benutzererfahrung.
In unserem ausführlichen Einblick in das Twenty Twenty-Two WordPress-Theme finden Sie auch zusätzliche Hinweise und mehrere Beispiele für Blockmuster.
Wenn Sie interessiert sind und mehr erfahren möchten, hören Sie sich die Podcast-Episoden 16 und 21 von Josepha Haden Chomphosy an und sehen Sie sich das YouTube-Video Exploring WordPress 5.9 von Anne McCarthy an.
The Twenty Twenty-Two Theme und WordPress Block Themes
Mit WordPress 5.9 müssen Sie das Gutenberg-Plugin nicht mehr installieren, um die vollständige Seitenbearbeitung auf Ihrer WordPress-Website zu aktivieren. Sie müssen nur einem Blockdesign erlauben, alle FSE-Funktionen zu nutzen.
Darüber hinaus wurde WordPress 5.9 mit einem brandneuen Standardthema, Twenty Twenty-Two, gebündelt, und es ist ein Game-Changer, da Twenty Twenty-Two das erste Standard-Blockdesign überhaupt ist.
Twenty Twenty-Two ist ein sehr flexibles und anpassbares Thema. Es bietet eine perfekte Sandbox, um den neuen Vorlagenbearbeitungsablauf, neue Blöcke, Schnittstellenverbesserungen und alle zum Kern hinzugefügten Seitenbearbeitungsfunktionen auszuprobieren, beginnend mit WordPress 5.9.
Wie oben erwähnt, müssen Sie lediglich ein Blockdesign wie Twenty Twenty-Two installieren und aktivieren. Sobald das Design aktiv ist, erscheint ein neues Menüelement Editor (Beta) im Admin-Menü des WordPress-Dashboards.
Die Benutzeroberfläche des Site-Editors verfügt jetzt über einen überarbeiteten Site-Bearbeitungsablauf. Über die Bearbeitungsoberfläche können Sie die Homepage, Vorlagen und Vorlagenteile der Website visuell bearbeiten und auf die Oberfläche für globale Stile zugreifen.
Wenn Sie ein Blockdesign aktivieren, finden Sie den Customizer nicht. Das liegt daran, dass der Customizer keine Blockdesigns unterstützt, die nur den Site-Editor verwenden. Das ist auch der Grund, warum Sie inaktive Blockdesigns nicht in der Vorschau anzeigen können .
Ab WordPress 5.9 ist der Zugangspunkt zum Customizer also nicht mehr im Admin-Menü verfügbar, wenn ein Block-Theme aktiv ist (es sei denn, Sie verwenden ein Plugin, das davon Gebrauch macht).
Wenn Sie immer noch an traditionelle Themen gebunden sind und sich Sorgen um die Abwärtskompatibilität machen, seien Sie beruhigt: Sie können Ihr Thema weiterhin verwenden.
Sie haben derzeit vier verschiedene Themenkategorien zur Auswahl:
- Themen blockieren : Themen, die für FSE entwickelt wurden
- Universelle Themen : Themen, die sowohl mit dem Customizer als auch mit dem Site-Editor funktionieren
- Hybriddesigns : Klassische Designs, die FSE-Funktionen wie theme.json unterstützen
- Klassische Themen : Themen mit PHP-Vorlagen, functions.php usw.
Aufgrund der Auswirkungen, die Blockthemen wahrscheinlich auf das WordPress-Ökosystem haben werden, haben wir einen ganzen Artikel über Twenty Twenty-Two und WordPress-Blockthemen. Schauen Sie es sich unbedingt an, um einen tieferen Überblick zu erhalten.
Leistungsverbesserungen
Hier bei Kinsta sind wir besessen von der Website-Geschwindigkeit. Deshalb freuen wir uns über die Leistungsverbesserungen, die mit WordPress 5.9 kommen.
Diese Verbesserungen wirken sich auf mehrere Bereiche des CMS aus, vom Blockeditor bis hin zu Blockdesigns, Lazy Loading und mehr. Tauchen wir ein.
Block-Inserter-Verbesserungen
Seit WordPress 5.9 werden Blocktypen, Muster und Kategorien faul im Block Inserter gerendert. Der Browser lädt Inhalte mit höherer Priorität zuerst, was dem Benutzer ein reibungsloseres Bearbeitungserlebnis und eine verbesserte Leistung bietet.
Weitere bemerkenswerte Leistungsverbesserungen im Kontext des Blockeditors betreffen wiederverwendbare Blöcke und die Listenansicht.
Weniger geladenes CSS
Was das Frontend betrifft, so hat WordPress 5.9 die Menge an CSS, die von Blockthemen geladen wird, drastisch reduziert, was dazu führte, dass Seiten deutlich schneller geladen wurden.
Die wichtigste Verbesserung, die in diesem Zusammenhang erwähnt werden sollte, ist die Einführung des Mechanismus für Einstellungen und Stile von theme.json , der verhindert, dass Designs riesige Stylesheets verwenden, einschließlich Hunderter von CSS-Deklarationen. Die Menge an CSS-Code, die ein Design verwendet, wurde jetzt auf wenige benutzerdefinierte CSS-Eigenschaften reduziert, die jeder Blocktyp wiederverwenden kann.
Lazy Loading-Leistungsverbesserungen
Das verzögerte Laden von Bildern wurde erstmals in WordPress 5.5 eingeführt. Ab WordPress 5.7 wurde die Lazy-Loading-Funktionalität auf iFrames erweitert, sodass Websitebesitzer schnellere Websites erstellen und ihre SEO verbessern können.
Jedenfalls hat sich nach einer Analyse des Largest Contentful Paint (LCP) herausgestellt, dass die Zuweisung des Attributs loading="lazy" an alle Bilder und Iframes auf der Seite zu leichten Leistungseinbußen führt.
Das Attribut loading="lazy" einfach zu überspringen, war keine Lösung, da dies dazu führen würde, die klaren Vorteile des Lazy Loading zu verlieren.
Die optimale Lösung wäre, das Attribut loading="lazy" nur bei Bildern wegzulassen, die "above the fold" erscheinen. Da serverseitig jedoch das Attribut loading="lazy" vergeben wird, kann WordPress nicht genau bestimmen, welche Bilder "above the fold" angezeigt werden. Es hängt hauptsächlich vom aktiven Thema ab.
Als Kompromisslösung wird jetzt ab WordPress 5.9 das loading="lazy" -Attribut nicht auf das erste Inhaltsbild oder den Iframe angewendet. Eine Analyse von 50 beliebten WordPress-Themes ergab, dass diese Lösung zu erheblichen Leistungsverbesserungen und bis zu 30 % schnelleren Seitenladezeiten führt.
Felix Arntz erklärt, wie es funktioniert:
… um die Leistung sofort zu verbessern, ohne dass ein Entwickler das Verhalten anpassen muss, überspringt WordPress jetzt das allererste „Inhaltsbild oder Iframe“ auf der Seite, damit es nicht verzögert geladen wird. Der Begriff „Inhaltsbild oder Iframe“ bezeichnet hier alle Bilder oder Iframes, die im Inhalt eines beliebigen Beitrags in der aktuellen Hauptabfrageschleife zu finden sind, sowie jedes gekennzeichnete Bild eines solchen Beitrags. Dies gilt sowohl für „singuläre“ als auch für „archivierte“ Inhalte: In einem „singulären“ Kontext wird das erste Bild oder iframe des (einzigen) Beitrags nicht verzögert geladen, während in einem „archivierten“ Kontext das erste Bild oder iframe des Der erste Beitrag in der Abfrage wird nicht verzögert geladen.
Theme-Entwickler können jetzt den neuen Filter wp_omit_loading_attr_threshold verwenden, um die Anzahl der Bilder/Iframes zu ändern, die beim verzögerten Laden übersprungen werden sollen.
Mehrere Stylesheets pro Block
Block- und Designentwickler können mehrere Stylesheets für jeden Block registrieren und bei Bedarf Stile aus anderen Blöcken laden. Dies ermöglicht das Laden von Stylesheets in Abhängigkeit vom Seiteninhalt und verhindert, dass Themes riesige Stylesheets auf jeder Seite laden.
Laut Ari Stathopoulos:
Blöcke können jetzt mehrere Stylesheets registrieren und bei Bedarf Stile aus anderen Blöcken laden. Designs können Stile auf Blockbasis hinzufügen, anstatt monolithische Stylesheets zu laden, die irgendwo erzwungen werden. Dies hat größere Auswirkungen auf Blockdesigns, bei denen das Laden von Stylesheets basierend auf den Seiten- und Layoutinhalten optimiert wird, kann aber auch von klassischen Designs verwendet werden.
Zusätzliche Funktionen für Entwickler
Zusätzlich zu den vielen Funktionen und Verbesserungen der Benutzeroberfläche, die bisher besprochen wurden, führt WordPress 5.9 auch mehrere Funktionen für Entwickler ein.
Ein neues Attribut zum Sperren von Blöcken
Blockentwickler können Benutzer jetzt daran hindern, einzelne Blöcke zu verschieben oder zu löschen, indem sie ein lock in den Blockeinstellungen hinzufügen:
{ ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }Wenn diese Funktion aktiviert ist, können Benutzer den Blockinhalt bearbeiten, aber den Block nicht auf der Seite verschieben oder aus der Editor-Leinwand entfernen. Die folgende Abbildung zeigt einen benutzerdefinierten Block mit einem Standardsatz von Symbolleisten-Steuerelementen:
Durch das Definieren des lock , wie im obigen Code zu sehen, werden die Block-Mover und die Steuerelemente Move to und Remove aus der Blocksymbolleiste ausgeblendet. Das folgende Bild zeigt das Endergebnis auf dem Bildschirm:
Sie können auch einen bestimmten Block in einem Blockmuster sperren. Als Beispiel siehe auch Sperren von Blöcken in WordPress 5.9.
Neue API für den Zugriff auf globale Einstellungen und Stile
WordPress 5.9 führt eine neue öffentliche PHP-API ein, um Daten aus theme.json zu lesen.
Lesen von Einstellungen und Stilen aus theme.json
Es gibt zwei neue Funktionen zum Lesen von Daten aus Abschnitten mit settings und styles , die in theme.json deklariert sind:
wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );-
$pathist ein Array, das den Pfad zur angegebenen Einstellung auflistet -
$contextist ein Array, das den Kontext für diese Daten festlegt. Entwickler können aus einem bestimmten Blockeinstellungsabschnitt lesen – zum Beispielarray( 'block_name' => 'core/paragraph' ). Der aufbasegesetzteoryginSchlüssel ermöglicht das Ignorieren benutzerdefinierter Daten, die vom Benutzer gespeichert wurden.
Der folgende Beispielcode würde den contentSize Einstellungswert zurückgeben. In Twenty Twenty-Two wären es 650px :
wp_get_global_settings( array( 'layout', 'contentSize' ) ); Indem Sie einen Kontext festlegen, können Sie Stile für bestimmte Blöcke abrufen. Der folgende Code zeigt, wie der Rahmenradiuswert für den core/button -Block abgerufen wird:
function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }Die obige Funktion gibt den erforderlichen Eigenschaftswert unter Berücksichtigung von Standardeinstellungen, Designeinstellungen und Benutzerdaten zurück. Der benutzerdefinierte Wert wird bereitgestellt, wenn der Benutzer den Randradius der Schaltfläche in der Oberfläche „Globale Stile“ konfiguriert.
Um Benutzerdaten zu ignorieren, würden Sie den folgenden Code verwenden:
function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }Abrufen des generierten Stylesheets
WordPress 5.9 führt auch eine neue Funktion ein, um das Stylesheet zu erhalten, das sich aus Standard-, Design- und benutzerdefinierten Stilen ergibt:
wp_get_global_stylesheet( $types = array() ); $types ist eine Liste der zu generierenden Stile.
Sie können mehr über die neue API unter Neue API lesen, um auf globale Einstellungen und Stile zuzugreifen.
Mehr Funktionen für Entwickler
Zusätzliche WordPress 5.9-Änderungen für Entwickler, über die Sie vielleicht wissen möchten, sind:
- Themen blockieren, eine neue Art, Themen in WordPress 5.9 zu erstellen
- Updates für Einstellungen, Stile und theme.json
- Themenbezogene Änderungen und Filter in WordPress 5.9
- Neue Funktionsabfragen in WordPress 5.9
- Verschiedene Core-Änderungen in WordPress 5.9
- Verschiedene Blockeditor-Änderungen in WordPress 5.9
- Übernehmen Sie mehr Kontrolle über die inneren Blockbereiche (als Blockentwickler)
Zusammenfassung
Wir schließen diesen Artikel mit einer kurzen Anmerkung zum Marktanteil von WordPress ab. WordPress betreibt derzeit über 65 % aller Websites, deren Content-Management-System bekannt ist, und liegt nördlich von 43 % aller Websites .
Diese Zahlen sind beeindruckend, insbesondere im Vergleich zu den engsten Wettbewerbern mit weniger als 5 % Marktanteil, wie Shopify.
Und das bedeutet auch, dass Sie die Evolution des WP CMS nicht übersehen können. Jede neue Version von WordPress bringt neue Funktionen, Schnittstellenverbesserungen, Leistungsverbesserungen und WordPress 5.9 ist da keine Ausnahme. Alles, was Sie brauchen, um die neuen Funktionen zu testen, ist ein Blockdesign, wie das neue Standarddesign Twenty Twenty-Two, und Sie können loslegen.
Jetzt zu dir! Sind Sie bereit, auf Themen und FSE zu blockieren? Und was sind deine Lieblingsänderungen, die mit WordPress 5.9 kommen?