Divi 5 Public Alpha, test complet et état d’avancement

Si la sortie officielle de Divi 5 peut sembler longue à venir, le développement soutenu depuis deux ans par ce leader du marché des thèmes WordPress permet aujourd’hui à ses équipes de développeurs de nous proposer une démo fonctionnelle, somme toute assez bluffante. La refonte du builer profitant ainsi pleinement de React et de l’interface de Gutemberg, ce premier aperçu de la version 5 de Divi allie la performance à la continuité d’un écosystème qui a fait les beaux jours de ce thème WordPress.  

Le 7 mars 2023 Nick Roach le CEO de Elegant Theme annonçait la sortie de Divi 5 Dev Alpha, une version réservée aux développeurs de modules tierce partie, désireux de s’engager au plus vite sur la portabilité de leurs extensions pour Divi.

Le 22 août suivant Nick Roach encore, proposait une nouvelle vidéo à l’occasion de la sortie de Divi 5 Dev Beta, une pre realease du thème, destinée à ces mêmes développeurs.

Quid d’une version publique ? C’est désormais chose faite depuis le 1^er mai 2024, et un nouvel article nous annonçant la mise en ligne d’une démo publique de Divi 5, une version étiquetée « pré alpha », autant destinée à rassurer les utilisateurs Divi qui pouvaient craindre un bouleversement de l’écosystème qui avait jusqu’ici fait les beaux jours du thème premium WordPress, qu’à recueillir les premiers retours d’expérience si nécessaires à l’avancement du projet.

Au-delà d’une communication marketing très réussie (je vous invite à ce titre à visiter la nouvelle landing page dédiée à Divi 5), les premiers tests de cette démo de Divi 5 semblent bien être à la hauteur des attentes du public.

À l’occasion de cette rentrée 2024, je vous propose ici de faire un état des lieux de la version Apha de Divi 5 pour nous commencer à nous préparer à la sortie publique tant attendue.

Prise en main de l’interface de Divi 5

Une interface basée sur l’éditeur Gutenberg de WordPress

En arrivant sur la page de démo de Divi 5 Alpha, on comprend très vite la volonté d’intégration de cette nouvelle version du thème premium à l’écosystème de Gutenberg, l’éditeur de blocs désormais natif de WordPress.

Les développeurs de Elegant Themes proposent ici une interface basée sur les blocs de Gutenberg et non plus sur le système de shortcodes de WordPress. On retrouve donc logiquement en colonne de droite un « inspecteur » de propriété proposant, à l’instar de Gutenberg, des options contextuelles en fonction du bloc sélectionné.

Cet inspecteur correspond finalement aux 3 onglets de réglages initialement présents sur le Divi Builder : « contenu », « Design » et « Avancé ».

Outils et navigation de la nouvelle interface de Divi 5

Les développeurs de Divi ont également fusionné les fonctionnalités de navigation de Gutenberg et de Divi en intégrant sur la gauche de l’interface, une seconde barre de menu proposant pêle-mêle :

• Un onglet d’import de layout  Elegant Theme ou de pages internes ;
• Un onglet de navigation par « layers » affichant l’arborescence du document ;
• La vue du document en « fil de fer » (si chère aux concepteurs de site internet) ;
• Les réglages du builder Divi.

Petit bonus à ce niveau, l’inspecteur propose un breadcrumbs permettant de remonter dans la structure éditée jusqu’au bloc de section.

Le bouton de « Iayers » en colonne de gauche fournit quant à lui une vision arborescente du document, permettant de naviguer rapidement sur l’ensemble de la page Divi.

L’icône d’engrenage de la barre supérieure du constructeur de page permet quant à lui d’accéder aux réglages de la page WordPress et aux fonctionnalités d’import-export du template et de l’historique Divi.

On remarque ici la possibilité laissée à l’utilisateur de modifier son environnement de travail, en déplaçant à l’envi les barres latérales pour personnaliser son espace de travail en fonction de ses besoins (ici l’inspecteur de propriété a été basculé à gauche de l’interface) :

De même, on pourra aussi, à l’aide des icônes centraux de la barre supérieure, basculer la fenêtre d’édition sur le support de son choix (smartphone, tablette ou bureau), et ajuster ce viewport pour travailler le rendu d’une page Divi pour n’importe quel support.

Fluidité et performances de l’interface

La raison pour laquelle la sémantique utilisée sur cet article se rapproche de celle des éléments d’interface de WordPress, est que Divi 5, autrefois basé sur le système de shortcodes WordPress, repose désormais sur l’écosystème de Gutenberg et React (18). Ce changement de technologie apporte une réactivité sans comparaison possible à Divi 5, et permet une gestion améliorée des feuilles de styles générées, notamment avec l’introduction des « presets » de modules (on en reparle un peu plus loin).

Le résultat est une interface hyper véloce qui s’appuie même sur le système d’enregistrement de WordPress pour sauvegarder en base de données la page Divi éditée (la barre mauve de menu de bas de page du constructeur Divi 4 disparaît de l’interface DIvi 5).

Mais voyons maintenant comme se passe l’accès aux modules portés sur Divi 5.

Accès aux modules sur Divi 5

Bonne nouvelle ! La gestion des modules (désormais les blocs) sur la version 5 de Divi reste en tout point identique aux précédentes versions du thème WordPress. On crée ici une rangée depuis le bloc de section, en choisissant le nombre de colonnes souhaitées, avant de se voir proposer par l’interface de choisir parmi une liste de modules proposée dans une fenêtre modale.

La fenêtre de choix des modules de Divi 5 correspond peu ou prou au pop-up modal des blocs de Gutenberg, les modules présents sur l’interface Divi sont donc désormais des « blocs Gutenberg », mais spécifiques au thème premium.

N.B. Un accès à une bibliothèque des modules, sur le site ou le Divi Cloud est proposé sur le même modale de blocs via le bouton « Add from Library ».

Sections lignes et colonnes

On retrouve pour les réglages des lignes du builder Divi, les options correspondant aux à celles de la version 4, avec notamment dans l’onglet « Content » :

•  Un contrôle de réglage du schéma de colonnes (celui-ci est nouveau sur l’interface Divi 5) ;
• Un sélecteur de réglages des colonnes présentes ;
• Un champ de réglage de lien
• Un contrôle de background (image, vidéo, couleur et dégradé) ;
• Un champ d’étiquette d’administration.

Au sein de l’onglet « Design » :

• Les réglages de dimensions, gouttières et alignement ;
• Les marges internes et externes ;
• Les bordures ;
• Les ombres portées ;
• Les filtres ;
• Les transformations et animations de la ligne.

On retrouve aussi dans l’inspecteur de propriétés du bloc « ligne », un onglet « avancé » proposant les options de réglages similaires à éléments de configuration proposés sur DIvi 4 :

• Champs ID et classes CSS ;
• Champs e personnalisation CSS (sans champ de saisie CSSS de forme libre à ce stade) ;
• À noter la présence d’un contrôle de visibilité, lorsqu’il était accessible via un menu contextuel au clic droit sur l’outil de réglage de la ligne du Divi Builder ;
• Condition d’affichage par type de contenu, étiquette, catégorie, utilisateur, navigateur ou autres éléments dits « d’interaction ».

Modules Divi 5

Question modules, on se rend vite compte que le portage de Divi 4 sur Divi 5 avance très rapidement.

Il serait bien sûr inutile à ce stade de lister les blocs disponibles, mais notons qu’un bon nombre des modules existant ont déjà été converti par les développeurs de Elegant Themes.

Texte, image, portfolio, slider vidéo, modules Woocommerce, etc., force est de constater que cette démo Divi 5 propose d’ores et déjà les éléments suffisants pour la création de sites internet standards.

Là encore, on notera que l’ensemble des options de réglages ont été transposées dans la barre latérale du constructeur de page, y compris la zone d’accès à la bibliothèque de médias, dans le cas du bloc d’image.

N.B. À ce stade du développement, une particularité notable de l’interface Divi 5 est de conserver dans l’inspecteur un mini éditeur de texte de type classique TinyMCE, là où l’éditeur Gutenberg propose une barre d’outils de type popup. Je ne parierai pas trop sur le maintien à long terme de cette solution sur Divi 5, mais nul ne sait de quoi demain sera fait !

On remarquera aussi le sélecteur de vue en haut à droite de cette barre latérale, permettant, depuis l’inspecteur de propriétés, un travail « responsive » sur smartphones, tablettes, bureau ainsi qu’en option de survol.

Amélioration de préréglages et de la performance du rendu des modules Divi

Nous l’avons rapidement évoqué plus haut dans cet article, l’apparition des presets de stylisation (annoncée dans le rapport de progression du 5 septembre 2024 repose sur des classes CSS à l’échelle du site et contribue à ce titre à une amélioration significative du workflow sur Divi 5, ainsi qu’à un rendu en front end beaucoup plus véloce.

On notera aussi depuis le 3 juillet 2024, que la fonctionnalité de « scroll effects » des modules de Divi 5 est totalement finalisée et peut désormais être testés sur la démo en ligne du thème WordPress.

On remarquera enfin que les mises à jour des pages construites avec Divi passent désormais par le système d’enregistrement de WordPress, ce qui contribue au gain substantiel de performances de l’ensemble du thème.

Mais une surprise supplémentaire nous attend à l’occasion de cet état d’avancement de Divi 5. En effet, l’article nous annonce la création de « Divi Dash », un gestionnaire de sites reposant sur Divi 5, permettant d’en faciliter la maintenance.

Avec Divi Dash, il sera ainsi possible de gérer les mises à jour de l’ensemble des sites Divi déclarés, de créer des calendriers de mise à jour, de gérer le versioning des thèmes Divi, et d’avoir la main sur les thèmes enfants et autres et plugins installés sur les sites.

En bonus – et pas des moindres – ce gestionnaire de sites Divi sera totalement gratuit et accessible à l’ensemble des clients de Divi.

Ouverture aux développeurs Divi Tierces partie

Les concepteurs de Divi ont voulu proposer rapidement une API de programmation aux développeurs tierce partie. Si l’accès à la Dev 5 alpha était initialement limité à quelques développeurs dits « actifs » du Divi Marketplace, son accès a été ensuite été étendu à l’occasion de la sortie de la Divi 5 Dev 5 Beta, le 9 septembre 2024.

Cette version, qui propose une liste quasi exhaustive des fonctionnalités de Divi portées sur l’environnement Gutenberg, devrait donc permettre à une communauté plus large d’enrichir le nouvel écosystème de Divi 5.

L’API de programmation de Divi 5

L’API proposée aux développeurs reposant sur React 18, celle-ci devrait permettre non seulement de créer des modules sur le modèle standard du Divi Builder, mais aussi d’apporter de nouveaux types de paramètres, spécifiques au bloc développé.

Pour ce faire Nick Roach annonce que la plateforme de programmation initialement dédiée aux développeurs d’Elegant Themes sera ouverte à l’ensemble des développeurs tierce partie.

Sortie officielle de Divi 5

Si la sortie définitive de Divi 5.0 n’est actuellement pas annoncée, celle d’une version bêta est désormais annoncée pour le début 2025.

Les versions dev alpha et bêta ainsi que la version publique alpha ayant déjà vu le jour, le planning de développement de Divi 5 prévoit désormais celle de la bêta publique avant la sortie officielle de thème WordPress.

Quoi qu’il en soit, la démo de Divi 5 répond à ce stade à beaucoup d’attentes de la communauté Divi, et dissipe les craintes d’une transformation trop radicale de l’écosystème du Divi Builder. La patiente des utilisateurs Divi devrait donc être récompensée, pour leur permettre – nous l’espérons – de bénéficier de toute la puissance de cette mise à jour dans le courant 2025.

Mise à jour importante !

Aujourd’hui les équipes de Elegant Themes annoncent au leur utilisateurs la possibilité de télécharger la version Alpha en de Divi 5 !

Bien que dans cet article, Nick Roach rappelle clairement que cette version n’est ni finalisée ni exempt de bug à résoudre, celle-coi va nous permettre de tester plus largement Divi en vers ion local…

Je reviendrai donc très vite pour vous proposer une analyse plus détaillée de Divi 5 !

En attendant, amusez-vous bien, 😉