Divi 5-Fortschrittsupdate für Mai: Vorschau auf die Geschwindigkeit von Divi 5

Wir stecken mitten in einem riesigen Projekt, Divi 5, und ich möchte die Community jeden Monat über unsere Fortschritte informieren. Letzten Monat haben wir uns eingehend mit den fünf Phasen des Divi 5-Betaprogramms befasst, um besser zu verstehen, wie wir ein so großes Projekt auf die für Divi-Benutzer vorteilhafteste Weise angehen. Wir befinden uns in Phase 1, Dev Alpha, und wir nähern uns dem Start der Dev Beta. Zu diesem Zeitpunkt wird die neue Divi 5-API gefestigt. Wir werden weitere Entwickler einladen, dem Programm beizutreten, während wir auf die erste öffentliche Veröffentlichung später in diesem Jahr hinarbeiten.

Im Update dieses Monats sprechen wir über die Updates, die wir an Divi 5 vorgenommen haben. Ich zeige Ihnen auch, wie schnell Divi 5 ist, und gebe Ihnen dann einen kleinen Vorgeschmack auf unsere kommende Divi AI-Funktion! Lassen Sie uns eintauchen.

Was wir diesen Monat erreicht haben

Wir haben diesen Monat viel geschafft! Es gibt viele kleine Dinge, die wir nach und nach ausfüllen, während wir uns unserer ersten öffentlichen Veröffentlichung nähern, bei der die Benutzeroberfläche aufpoliert und ein solider Satz an Divi-Funktionen fertiggestellt werden muss. Wir haben an Abschnittstrennern, Hintergrundvideos, Bedingungsoptionen und responsiven Inhalten gearbeitet und einige Fehler behoben.

Der Großteil unserer Arbeit konzentrierte sich auf die Konsolidierung der Divi 5-API, worum es in den Dev Beta-Versionen geht. Der allgemeine Trend geht hier dahin, dass wir eine Grundlage schaffen, um es unserem Team und der Entwickler-Community einfacher zu machen, großartige Divi-Module und -Funktionen zu erstellen. Wir müssen diesen Teil richtig machen, damit alles andere so zusammenpasst, wie wir es wollen.

Wir haben an der Vereinheitlichung und Vereinfachung der neuen REST-API von Divi 5 gearbeitet. Wir haben mehrere neue Funktionen und deren Implementierungen fertiggestellt, die darauf abzielen, den Zeitaufwand für die Erstellung eines Divi-Moduls deutlich zu verkürzen. Auch hier investieren wir zusätzliche Arbeit auf der Grundlagenebene, damit der Rest des Divi 5-Projekts schneller voranschreitet und alle Module und Funktionen, die wir nach Divi 5 hinzufügen, schneller entwickelt werden.

Wir haben auch die Shortcode-Konvertierungsmethode von Divi überarbeitet, die eine wesentliche Rolle bei der Abwärtskompatibilität spielen wird.

Wenn Sie an den feineren Details interessiert sind, finden Sie hier die neuesten Changelog-Einträge:

Divi 5.0.0-dev-alpha.4

• Korrigieren Sie das Rendering für Hintergrundfelder im Shortcode-Moduleinstellungen-Modal
• Korrigieren Sie die Sichtbarkeit der Einstellungsfelder des Shortcode-Moduls mit Regex-Musterbedingungen.
• Frontend-Rendering der Optionen für Abschnittsteiler hinzugefügt.
• Es wurde behoben, dass Hover-Optionen im Visual Builder und im Front-End für Moduloptionen mit mehreren Selektoren nicht ordnungsgemäß funktionierten.
• @divi/scripts-Paket überarbeitet und Tests hinzugefügt
• Veröffentlichte Typenpakete für npm zur Vorbereitung der Veröffentlichung für die Öffentlichkeit

Divi 5.0.0-dev-alpha.5

• Erlauben Sie dem Shortcode-Modul, eine weitere Anfrage zu senden, wenn die vorherige Anfrage automatisch abgebrochen wird.
• Rendern Sie die Schaltfläche „Sticky-Optionen“, wenn das aktuelle Shortcode-Modul „Sticky“ ist.
• Rendern Sie die Schaltfläche „Sticky-Optionen“, wenn sich das aktuelle Shortcode-Modul in einem Sticky-Modul befindet.
• Nicht verwendeter Standardwert Record<Nummer, Zeichenfolge | entfernt Record<string, string>>-Typ im Shortcode-Modul.
• Fehler behoben, bei denen Elemente des Woo Shortcode-Moduls auf einer einzelnen Produktseite angezeigt wurden. Betroffene Shortcode-Module: Woo Product Notice, Woo Product Images, Woo Add To Cart, Woo Product Stock, Woo Product Price, Woo Related Products, Woo Product Upsell und Woo Products.
• Benennen Sie das nicht unterstützte Modul zusammen mit dem Modul-Slug, der REST-API-Route, der Bezeichnung, den Testfällen und dem Storybook in das Shortcode-Modul um.
• Hintergrundvideofelder in den Hintergrundoptionen des Moduls hinzugefügt.
• Überarbeitetes Rendering von Hintergrundvideos in Visual Builder ohne REST-API-Aufrufe.
• Rendering der Optionen für Hintergrundvideomodule im Frontend hinzugefügt.
• ScriptData hinzugefügt, um Hintergrundvideo im Frontend zu initialisieren.
• Unterstützung für Hintergrundvideomoduloptionen im Sticky-Status hinzugefügt.
• Die Sichtbarkeit von Trennfeldern in den Moduloptionen wurde aktualisiert, um zusätzliche Optionen auszublenden, wenn kein Trennlinienstil ausgewählt wurde.
• Die Sichtbarkeit der Einstellung „Horizontale Wiederholung des Teilers“ in den Moduloptionen wurde aktualisiert und wird nun für Teilerstil-Optionen ausgeblendet, die Wiederholungen explizit ablehnen.
• Die Sichtbarkeit der Einstellung „Teileranordnung“ in den Moduloptionen wurde aktualisiert, sodass sie in den Einstellungen für „Vollbreite Abschnitte“ ausgeblendet wird (wobei nur der Standardwert „unten“ zulässig ist).
• Die Feldvorschau „Teilerstil“ in den Moduloptionen wurde aktualisiert, um alle derzeit auf den Teiler angewendeten horizontalen und/oder vertikalen Spiegelungen anzuzeigen.
• Das Feld „Teilerhöhe“ in den Moduloptionen wurde aktualisiert, um zusätzlich zur Standardeinheit Pixel („px“) das Speichern von Prozentwerten („%“) zu ermöglichen.
• Die Einstellung „Horizontale Wiederholung des Teilers“ in den Moduloptionen wurde aktualisiert, um nur positive Zahlenwerte („1x“ oder höher) zu akzeptieren.
• Es wurde eine Grundlage für die Optionen „Bedingungen“ hinzugefügt, einschließlich anfänglicher Bedingungen für „Autor“, „Angemeldet“ und „Benutzerrolle“. Die restlichen Bedingungen werden in zukünftigen Versionen schrittweise hinzugefügt.
• ElementComponents-Komponente hinzugefügt, das Äquivalent von <ElementStyle />, jedoch für gerenderte HTML-Elemente.
• Funktion elementClassnames() hinzugefügt, das Äquivalent von <ElementStyle />, jedoch für Funktionen, die Klassennamen ausgeben.
• Fehler bei der Schriftartüberschriftenebene behoben.
• Die im Portfolio-Modul ausgelösten PHP-Warnungen wurden behoben.
• Der richtige REST-Berechtigungsrückruf wurde allen registrierten REST-Routen hinzugefügt.
• Zur Bestimmung von Divi-Rollen wurde eine neue RoleEditor-Klasse eingeführt, einschließlich Tests für die Funktionalität, die von D4 auf D5 umgestaltet wurde.
• Die .sendRequest()-Funktionen, wie das automatische Hinzufügen von ET- und WP-Nonces und die Unterstützung von Stream-Antworten, wurden zu fetch() hinzugefügt.
• fetch() wurde zur besseren Wartbarkeit und Skalierbarkeit komplett überarbeitet und ermöglicht die Einführung neuer und komplexer Bedingungen und Funktionen, z. B. der Optionen von .sendRequest().
• Alle REST-API-Aufrufe fetch(), loggedFetch() und .sendRequest() wurden vereinheitlicht und jetzt wird nur noch loggedFetch() verwendet.
• Überarbeiteter Konvertierungsmechanismus für Module.

Divi 5.0.0-dev-alpha.6

• Verbesserte und optimierte REST-API-Registrierung, Logik, Schemata und Tests. Divi/Ajax-Paket in Divi/Rest-Paket umbenannt.
• InlineTextEditorContainer- und InlineTextEditor-Komponenten für den Inline-Texteditor hinzugefügt.
• OnBlur-, onClick-, onDoubleClick-, onKeyDown-, onKeyUp-, onMouseDown- und onMouseUp-Handler für den Inline-Texteditor hinzugefügt.
• Es wurde ein Speichermechanismus hinzugefügt, um den Attributwert aus dem Feld „Inline-Texteditor“ zu aktualisieren.
• Ereignishandler hinzugefügt, um den Bearbeitungsmodus für den Inline-Texteditor zu aktivieren und zu deaktivieren.
• Klassennamen basierend auf Aktivierung/Deaktivierung und anderen Zuständen wie __empty, __editing, __html hinzugefügt.
• CSS/Inline-Stil für den Inline-Text-Editor hinzugefügt.
• WindowEventEmitterInstance wurde überarbeitet, um einen Mousedown-Ereignis-Listener hinzuzufügen.
• Einführung des PHP-Helfers für responsive Inhalte.
• Einführung des JS-Helfers für responsive Inhalte.
• Responsive Content-Funktionalität in den FE-Skripten hinzugefügt.
• Responsive Content-Implementierung in den Elementen „Name“, „Position“, „Bild“ und „Inhalt“ des Moduls „Teammitglied“ hinzugefügt
• Responsive Content-Implementierung in den Elementen „Prozentsatz verwenden“, „Prozent“ und „Titel“ des Moduls „Bartheken“ hinzugefügt
• Responsive Content-Implementierung im Button Text-Element des Button-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Title- und Content-Elementen des Toggle-Moduls hinzugefügt.
• Responsive Content-Implementierung im Text Inner-Element des Textmoduls hinzugefügt.
• Responsive Content-Implementierung im Title-Element des Countdown-Timer-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Elementen „Titel“, „Bild“, „Künstlername“ und „Albumname“ des Audiomoduls hinzugefügt.
• Responsive Content-Implementierung im Content-Element des Code-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Elementen Title, Content und Button des CTA-Moduls hinzugefügt.
• Responsive Content-Implementierung im Bildmodul hinzugefügt.
• Responsive Content-Implementierung im Title-Element des Circle Counter-Moduls hinzugefügt.
• Responsive Content-Implementierung im Title-Element des Number Counter-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Title- und Content-Elementen des Tabs-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Title- und Content-Elementen des Login-Moduls hinzugefügt.
• Responsive Content-Implementierung in der Option „Show Divider“ des Divider-Moduls hinzugefügt.
• Responsive Content-Implementierung in den Elementen „Titel“, „Unterüberschrift“, „Inhalt“, „Logobild“, „Kopfzeilenbild“, „Button One Text“ und „Button Two Text“ des Moduls „Fullwidth Header“ hinzugefügt.
• Responsive Content-Implementierung im Fullwidth Image-Modul hinzugefügt.
• Responsive Content-Implementierung in den Titel- und Inhaltselementen des Portfolio-Moduls hinzugefügt.
• Verschieben Sie Code im Zusammenhang mit dem Shortcode-Modul in das Shortcode-Modulpaket.
• Fügen Sie der ElementStyle-Komponente einen Schriftarten-Überschriftenstil-Renderer hinzu.

Die Geschwindigkeit von Divi 5

Bevor wir den heutigen Beitrag abschließen, möchte ich auf die Geschwindigkeit eingehen. Wie Sie vielleicht wissen, planen wir, wenn überhaupt, nicht viele neue Funktionen zu Divi 5 hinzuzufügen. Eine der bedeutendsten Änderungen, die diese neue Version mit sich bringen wird, ist jedoch eine massive Geschwindigkeitssteigerung, insbesondere im Visual Builder , wo wir alle so viel Zeit verbringen.

Auch wenn die Divi 5-Benutzeroberfläche noch nicht fertig ist und dem Builder Funktionen fehlen, wollte ich Ihnen dennoch einen kleinen Einblick in den Leistungsunterschied geben, über den ich immer wieder spreche. Bitte urteilen Sie nicht darüber, wie die Dinge in diesem Video aussehen, das sich ändern wird, und konzentrieren Sie sich nur auf die Geschwindigkeit der Interaktionen!

Sie werden sofort bemerken, dass alles sofort angezeigt wird, wenn Sie mit der Maus über Elemente auf der Seite fahren. Das Öffnen des Einstellungs-Popups ist ebenso einfach wie das Anpassen der Designeinstellungen. Es ist auf der ganzen Linie ein Unterschied wie Tag und Nacht. Außerdem spielt es keine Rolle, wie groß und komplex die Seite wird. Der Visual Builder kann damit umgehen und bleibt dabei schnell.

In Divi 4 war es nicht möglich, dieses Geschwindigkeitsniveau zu erreichen, und das ist einer der Gründe, warum diese Neuarchitektur von Divi 5 so wichtig ist.

Demnächst erhältlich: Divi AI

Das ist alles für das Divi 5-Update dieses Monats. Allerdings habe ich noch einen Teaser für Sie. Während sich fast unser gesamtes Team auf Divi 5 konzentriert, haben wir immer noch eine kleine Gruppe von Leuten, die an Divi 4-Funktionen arbeiten, die sich nicht auf die Entwicklung von Divi 5 auswirken werden, und im Moment arbeiten wir an etwas sehr Spannendem.

Es heißt Divi AI und nutzt große Sprachmodelle, um Ihnen bei der Erstellung von Inhalten wie Text und Bildern für Ihre Divi-Websites direkt im Builder zu helfen! Da es in Divi integriert ist, können wir Ihnen Dinge über den Builder und Ihre Website beibringen, um ihm dabei zu helfen, Ihre Inhalte auf eine sinnvolle und unglaublich intuitive Weise zu erstellen oder zu verbessern.

Schauen Sie sich das heutige Youtube-Video an, um einen ersten Blick auf Divi AI zu werfen.

Bleiben Sie dran für weitere Updates

Das ist alles für unseren Fortschrittsbericht vom Mai. Wenn Sie Fragen haben, hinterlassen Sie unbedingt einen Kommentar. Seien Sie gespannt auf das Update für den nächsten Monat und wir sehen uns im nächsten!