Introduction à DatoCMS Visual Editing

Qu'est-ce que DatoCMS Visual Editing ?

DatoCMS Visual Editing est une fonctionnalité révolutionnaire conçue pour éliminer la déconnexion entre la création de contenu et la présentation du contenu inhérente aux flux de travail traditionnels des CMS headless. Au lieu de forcer les éditeurs de contenu à naviguer dans des formulaires backend complexes et à deviner quel champ correspond à quel élément sur la page, l'Édition Visuelle leur permet d'interagir directement avec l'aperçu en direct du site web. Cette fonctionnalité apporte l'expérience intuitive du « ce que vous voyez est ce que vous obtenez » (WYSIWYG) directement dans l'environnement headless, garantissant que les modifications de contenu sont rapides, précises et contextuelles. Elle modifie fondamentalement la façon dont l'éditeur perçoit son travail, passant de la gestion des modèles de données à la gestion des pages et des articles.

Cette capacité puissante est prise en charge par deux flux de travail distincts, mais complémentaires : le Clic pour modifier (Content Link) et l'édition côte à côte (Mode Visuel). Il est crucial de noter que cette fonctionnalité est disponible sur tous les plans DatoCMS, y compris le niveau Gratuit, et est prise en charge par des SDK dédiés pour les frameworks frontend modernes comme Next.js, Astro, Svelte et Vue, ce qui facilite son adoption pour les projets existants et nouveaux.

Fonctionnalités Clés

• Clic pour Modifier (Content Link) : Les éditeurs visitent le site en direct en mode brouillon, survolent le contenu modifiable et cliquent pour ouvrir instantanément le champ correspondant dans DatoCMS dans un nouvel onglet. Cela fonctionne entièrement sur le frontend, quel que soit l'hébergement (Vercel, Netlify, Cloudflare).
• Mode Visuel Côte à Côte : Une version améliorée du plugin Web Previews qui affiche l'aperçu du site web d'un côté et le panneau d'édition directement à côté. Cliquer sur le contenu ouvre instantanément le panneau d'édition pertinent sans changement de contexte.
• Backend Stéganographique : Le système utilise des caractères Unicode invisibles ajoutés aux réponses de l'API GraphQL pour encoder les métadonnées d'origine (ID de l'enregistrement, chemin du champ, locale) de chaque élément de contenu, permettant au frontend de mapper automatiquement les clics à la source de données correcte sans câblage manuel par le développeur.
• Synchronisation Contextuelle Bidirectionnelle : En mode Côte à Côte, le défilement dans le panneau d'aperçu maintient le panneau d'édition synchronisé, et vice-versa, conservant un contexte parfait lors d'éditions complexes.
• Compatibilité Universelle : Fonctionne immédiatement avec des structures de contenu complexes, y compris les liens vers des enregistrements, les blocs modulaires, le Texte Structuré et les champs localisés.
• Prise en Charge des SDK de Framework : Des SDK dédiés pour les principaux frameworks (React/Next.js, Astro, Svelte/SvelteKit, Vue/Nuxt) simplifient l'implémentation, construits sur la bibliothèque agnostique au framework @datocms/content-link.

Comment Utiliser DatoCMS Visual Editing

La mise en route avec l'Édition Visuelle est conçue pour être minimale, nécessitant seulement trois étapes principales pour que les développeurs activent l'expérience pour leurs équipes de contenu :

1. Activer l'Encodage Stega : Lors de la récupération du contenu brouillon via GraphQL, ajoutez deux en-têtes spécifiques à vos requêtes : X-Visual-Editing: v1 et X-Base-Editing-Url: https://<VOTRE-NOM-DE-PROJET>.admin.datocms.com.
2. Intégrer le Composant ContentLink : Ajoutez le composant <ContentLink /> spécifique au framework à votre fichier de mise en page principal. Ce composant analyse automatiquement le DOM rendu à la recherche des métadonnées stéganographiques intégrées et rend les superpositions d'édition nécessaires.
3. Déverrouiller l'Édition Côte à Côte (Optionnel mais Recommandé) : Installez et configurez le plugin Web Previews dans les paramètres de votre projet DatoCMS pour activer l'interface d'édition côte à côte très efficace directement dans la barre latérale du CMS.

Une fois configuré, les éditeurs naviguent simplement vers le site en mode brouillon (ou ouvrent l'interface du CMS) et commencent à cliquer sur le contenu qu'ils souhaitent modifier, voyant instantanément leurs modifications reflétées ou prêtes à être éditées.

Cas d'Utilisation

1. Équipes Marketing à Haute Vitesse : Les équipes lançant des campagnes ou des pages de destination fréquentes peuvent itérer rapidement sur le texte et les images directement sur l'aperçu de la page, réduisant considérablement le temps passé à coordonner entre les équipes de conception, de développement et de contenu.
2. Pages Produits E-commerce Complexes : Les éditeurs gérant des pages avec du contenu modulaire profondément imbriqué (par exemple, descriptions de produits, blocs de fonctionnalités, spécifications) peuvent cliquer directement sur la section spécifique qu'ils doivent mettre à jour sans rechercher manuellement dans des dizaines d'enregistrements de contenu.
3. Gestion de Contenu Multilingue : Pour les sites prenant en charge plusieurs locales, l'Édition Visuelle garantit que les éditeurs modifient la version localisée correcte du contenu, car les métadonnées incluent des informations de locale, empêchant l'écrasement accidentel de chaînes traduites.
4. Développement d'Agences et Transfert au Client : Les agences peuvent déployer des projets avec l'Édition Visuelle activée, offrant aux clients une expérience d'édition immédiatement intuitive, minimisant le temps de formation et réduisant les demandes de support liées à la localisation du contenu.
5. Appariement Itératif de Conception et de Contenu : Les développeurs et les concepteurs peuvent travailler aux côtés des éditeurs de contenu en temps réel. À mesure que de nouveaux composants sont construits, les éditeurs peuvent immédiatement les peupler avec du contenu prêt pour la production en utilisant l'interface visuelle.

FAQ

Q : L'Édition Visuelle n'est-elle disponible que sur les plans payants ? A : Non. DatoCMS a rendu l'Édition Visuelle disponible sur tous les plans, y compris le plan Gratuit, garantissant que tous les utilisateurs peuvent bénéficier de cette expérience d'édition améliorée sans avoir besoin de passer à un niveau supérieur.

Q : Que se passe-t-il si j'utilise un framework non explicitement listé (par exemple, Remix) ? A : Tous les SDK officiels sont construits sur la bibliothèque agnostique au framework, @datocms/content-link. Vous pouvez intégrer cette bibliothèque centrale directement dans n'importe quelle configuration frontend pour obtenir la même fonctionnalité.

Q : Dois-je mapper manuellement chaque élément de contenu à son champ ? A : Absolument pas. L'innovation principale est la technique de stéganographie, qui ajoute automatiquement les métadonnées d'origine à vos réponses GraphQL. Le composant <ContentLink /> analyse ces métadonnées et connecte automatiquement les superpositions d'édition, éliminant la configuration manuelle fastidieuse.

Q : Puis-je utiliser l'Édition Visuelle avec ma configuration Web Previews existante ? A : Oui. Le Mode Visuel Côte à Côte est une mise à niveau du plugin Web Previews existant. Si vous utilisez déjà Web Previews, l'activation de la nouvelle fonctionnalité nécessite des modifications de configuration minimales.

Q : Quel type de structures de contenu cela prend-il en charge ? A : Il prend en charge l'éventail complet de la modélisation de contenu de DatoCMS, y compris les champs standard, les liens vers d'autres enregistrements, les blocs de Texte Structuré complexes et les structures de contenu modulaire profondément imbriquées.