Divi 5 May Progress Update : aperçu de la vitesse de Divi 5

Publié: 2023-06-02

Nous sommes au milieu d'un projet massif, Divi 5, et j'aime informer la communauté chaque mois de nos progrès. Le mois dernier, nous avons approfondi les cinq étapes du programme bêta de Divi 5 pour mieux comprendre comment nous abordons un si gros projet de la manière la plus avantageuse pour les utilisateurs de Divi. Nous sommes en phase 1, Dev Alpha, et nous nous rapprochons du lancement de Dev Beta, moment auquel la nouvelle API Divi 5 sera solidifiée. Nous inviterons davantage de développeurs à rejoindre le programme pendant que nous travaillons à la première version publique plus tard cette année.

Dans la mise à jour de ce mois-ci, nous parlerons des mises à jour que nous avons apportées à Divi 5. Je vous montrerai également à quel point Divi 5 est rapide, puis je vous donnerai un aperçu de notre prochaine fonctionnalité Divi AI ! Creusons.

Ce que nous avons accompli ce mois-ci

Nous avons fait beaucoup de choses ce mois-ci ! Il y a beaucoup de petites choses que nous remplissons, une par une, à mesure que nous nous rapprochons de notre première version publique, où l'interface utilisateur devra être peaufinée et un ensemble solide de fonctionnalités Divi devra être terminé. Nous avons travaillé sur les séparateurs de section, les vidéos d'arrière-plan, les options de condition, le contenu réactif et corrigé quelques bugs.

La majeure partie de notre travail s'est concentrée sur la solidification de l'API Divi 5, ce sur quoi portent les versions Dev Beta. La tendance générale ici est que nous construisons une base pour permettre à notre équipe et à la communauté de développement de créer plus facilement de superbes modules et fonctionnalités Divi. Nous devons bien faire cette partie pour que tout le reste se mette en place comme nous le voulons.

Nous avons travaillé sur l'unification et la simplification de la nouvelle API REST de Divi 5. Nous avons terminé plusieurs nouvelles fonctions et leurs implémentations, qui visent à réduire considérablement le temps nécessaire à la création d'un module Divi. Encore une fois, nous mettons un travail supplémentaire au niveau de la base afin que le reste du projet Divi 5 aille plus vite, et tous les modules et fonctionnalités que nous ajoutons après Divi 5 seront développés plus rapidement.

Nous avons également refactorisé la méthode de conversion des shortcodes de Divi, qui jouera un rôle essentiel dans la rétrocompatibilité.

Si vous êtes intéressé par les détails les plus fins, voici les entrées les plus récentes des journaux des modifications :

Divi 5.0.0-dev-alpha.4

Correction du rendu des champs d'arrière-plan dans le modal des paramètres du module Shortcode
Correction de la visibilité des champs de réglage du module de shortcode avec des conditions de modèle regex.
Ajout du rendu frontal des options des séparateurs de section.
Correction des options de survol ne fonctionnant pas correctement dans le constructeur visuel et le front-end pour les options de module qui ont plusieurs sélecteurs.
Refactorisation du package @divi/scripts et ajout de tests
Paquets de types publiés sur npm en préparation de la publication au public

Divi 5.0.0-dev-alpha.5

Autoriser le module Shortcode à envoyer une autre requête lorsque la requête précédente est automatiquement abandonnée.
Rendre le bouton d'options collant lorsque le module Shortcode actuel est collant.
Rendre le bouton d'options collant lorsque le module Shortcode actuel est à l'intérieur d'un module collant.
Suppression de la valeur par défaut inutilisée Record<number, string | Record<string, string>> type dans le module Shortcode.
Correction d'éléments incorrects du module Woo Shortcode apparaissant sur une seule page de produit. Modules Shortcode concernés : avis de produit Woo, images de produits Woo, ajout au panier Woo, stock de produits Woo, prix des produits Woo, produits liés à Woo, vente incitative de produits Woo et produits Woo.
Renommez le module Unsupported en module Shortcode avec le slug de module, la route de l'API REST, l'étiquette, les scénarios de test et le livre d'histoires.
Ajout de champs vidéo d'arrière-plan dans les options d'arrière-plan du module.
Rendu refactorisé de la vidéo d'arrière-plan dans Visual Builder sans appels d'API REST.
Ajout du rendu des options du module vidéo d'arrière-plan dans Frontend.
Ajout de ScriptData pour initialiser la vidéo d'arrière-plan dans Frontend.
Ajout de la prise en charge des options du module vidéo d'arrière-plan à l'état collant.
Mise à jour de la visibilité des champs de séparateur dans les options du module pour masquer des options supplémentaires si un style de séparateur n'a pas été sélectionné.
Mise à jour de la visibilité du paramètre Répétition horizontale du diviseur dans les options de module pour qu'il soit masqué pour les options de style de diviseur qui rejettent explicitement la répétition.
Mise à jour de la visibilité du paramètre Disposition des séparateurs dans les options du module pour qu'il soit masqué dans les paramètres de la section pleine largeur (où seule la valeur par défaut "ci-dessous" est autorisée).
Mise à jour de l'aperçu du champ Style de séparateur dans les options du module pour refléter tout retournement horizontal et/ou vertical actuellement appliqué au séparateur.
Mise à jour du champ Hauteur du diviseur dans les options du module pour permettre l'enregistrement des valeurs de pourcentage ("%") en plus de l'unité de pixel ("px") par défaut.
Mise à jour du paramètre Répétition horizontale du diviseur dans les options du module uniquement pour accepter les valeurs numériques positives ("1x" ou plus).
Base d'options de conditions ajoutées, y compris les conditions initiales pour l'auteur, la connexion et le rôle de l'utilisateur, les conditions restantes seront ajoutées progressivement dans les versions futures.
Ajout du composant ElementComponents, l'équivalent de <ElementStyle /> mais pour les éléments HTML rendus.
Ajout de la fonction elementClassnames(), l'équivalent de <ElementStyle /> mais pour les fonctions qui génèrent des noms de classe.
Correction de l'erreur de niveau d'en-tête de police.
Correction des avertissements PHP déclenchés dans le module Portfolio.
Le rappel d'autorisation REST approprié a été ajouté à toutes les routes REST enregistrées.
Une nouvelle classe RoleEditor a été introduite pour déterminer les rôles Divi, y compris des tests pour la fonctionnalité qui a été refactorisée de D4 à D5.
Les fonctionnalités .sendRequest(), telles que l'ajout automatique ET et WP nonce et la prise en charge de la réponse de flux, ont été ajoutées à fetch().
Le fetch() a été complètement refactorisé pour une meilleure maintenabilité et évolutivité, permettant l'introduction de nouvelles conditions et fonctionnalités complexes, par exemple les options de .sendRequest().
Tous les appels de l'API REST, fetch(), logFetch() et .sendRequest(), ont été unifiés, et désormais seul logFetch() est utilisé.
Mécanisme de conversion refactorisé pour les modules.

Divi 5.0.0-dev-alpha.6

Enregistrement, logique, schémas et tests améliorés et rationalisés de l'API REST. Package divi/ajax renommé en package divi/rest.
Ajout des composants InlineTextEditorContainer et InlineTextEditor pour l'éditeur de texte en ligne.
Ajout des gestionnaires onBlur, onClick, onDoubleClick, onKeyDown, onKeyUp, onMouseDown et onMouseUp pour l'éditeur de texte en ligne.
Ajout d'un mécanisme d'enregistrement pour mettre à jour la valeur de l'attribut à partir du champ de l'éditeur de texte en ligne.
Ajout de gestionnaires d'événements pour activer et désactiver le mode d'édition pour l'éditeur de texte en ligne.
Ajout de ClassNames basés sur l'activation/la désactivation et d'autres états comme __empty, __editing, __html.
Ajout du style CSS/Inline pour l'éditeur de texte en ligne.
WindowEventEmitterInstance refactorisé pour ajouter un écouteur d'événement mousedown.
Introduction de l'assistant PHP de contenu réactif.
Introduction de l'assistant JS de contenu réactif.
Ajout d'une fonctionnalité de contenu réactif dans les scripts FE.
Ajout de la mise en œuvre de contenu réactif dans les éléments Nom, Position, Image et Contenu du module Membre de l'équipe
Ajout de la mise en œuvre de contenu réactif dans les éléments Utiliser le pourcentage, le pourcentage et le titre du module Bar Counters
Ajout de la mise en œuvre de contenu réactif dans l'élément Button Text du module Button.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre et Contenu du module Toggle.
Ajout de la mise en œuvre de contenu réactif dans l'élément Text Inner du module Text.
Ajout de la mise en œuvre de contenu réactif dans l'élément Titre du module Compte à rebours.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre, Image, Nom de l'artiste et Nom de l'album du module Audio.
Ajout de la mise en œuvre du contenu réactif dans l'élément Contenu du module Code.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre, Contenu et Bouton du module CTA.
Ajout de la mise en œuvre de contenu réactif dans le module Image.
Ajout de la mise en œuvre de contenu réactif dans l'élément Titre du module Circle Counter.
Ajout de la mise en œuvre de contenu réactif dans l'élément Titre du module Compteur de nombres.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre et Contenu du module Onglets.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre et Contenu du module de connexion.
Ajout de la mise en œuvre de contenu réactif dans l'option Afficher le diviseur du module Diviseur.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre, Sous-titre, Contenu, Image du logo, Image d'en-tête, Texte du bouton un et Texte du bouton deux du module En-tête pleine largeur.
Ajout de la mise en œuvre de contenu réactif dans le module Fullwidth Image.
Ajout de la mise en œuvre de contenu réactif dans les éléments Titre et Contenu du module Portfolio.
Déplacez le code lié au module Shortcode vers le package du module Shortcode.
Ajoutez un rendu de style de titre de police sur le composant ElementStyle.

La vitesse de Divi 5

Avant de conclure le post d'aujourd'hui, je veux parler de la vitesse . Comme vous le savez peut-être, nous ne prévoyons pas d'ajouter beaucoup de nouvelles fonctionnalités, voire aucune, à Divi 5. Cependant, l'un des changements les plus importants qui viendra avec cette nouvelle version est une augmentation massive de la vitesse, en particulier dans le Visual Builder. , où nous passons tous tant de temps.

Même si l'interface utilisateur de Divi 5 n'est pas terminée et qu'il manque des fonctionnalités au constructeur, je voulais quand même vous donner un aperçu de la différence de performances dont je ne cesse de parler. Alors, s'il vous plaît, ne portez pas de jugement sur l'apparence des choses dans cette vidéo, qui va changer, et concentrez-vous uniquement sur la vitesse des interactions !

Vous remarquerez immédiatement que tout apparaît instantanément lorsque les éléments sont survolés sur la page. L'ouverture de la fenêtre contextuelle des paramètres est tout aussi rapide, tout comme l'ajustement des paramètres de conception. C'est une différence jour et nuit à tous les niveaux. De plus, peu importe la taille et la complexité de la page. Le Visual Builder peut le gérer, et il reste rapide.

Atteindre ce niveau de vitesse n'était pas possible dans Divi 4, et c'est l'une des raisons pour lesquelles cette ré-architecture de Divi 5 est si importante.

Prochainement : Divi AI

C'est tout pour la mise à jour Divi 5 de ce mois-ci. Cependant, j'ai encore un teaser pour vous. Alors que presque toute notre équipe se concentre sur Divi 5, nous avons encore un petit groupe de personnes travaillant sur des fonctionnalités de Divi 4 qui n'affecteront pas le développement de Divi 5, et en ce moment, nous travaillons sur quelque chose de très excitant.

Il s'appelle Divi AI et exploite de grands modèles de langage pour vous aider à créer du contenu, tel que du texte et des images, pour vos sites Web Divi directement dans le constructeur ! Puisqu'il est intégré à Divi, nous pouvons enseigner des choses sur le constructeur et votre site Web pour l'aider à créer ou à améliorer votre contenu d'une manière qui a du sens et qui semble incroyablement intuitive.

Découvrez la vidéo Youtube d'aujourd'hui pour un aperçu de Divi AI.

Restez connectés pour plus de nouvelles

C'est tout pour notre rapport d'étape de mai. Si vous avez des questions, assurez-vous de laisser un commentaire. Restez à l'écoute pour la mise à jour du mois prochain, et je vous verrai dans la prochaine !