Éditer son site là où on le voit

L'écart entre un formulaire de CMS et la page qu'il produit, c'est là que naissent les erreurs. Sur WordPress, on remplit un champ « Sous-titre », on enregistre, et on découvre seulement après coup qu'il était trop long, mal placé, ou peu naturel à côté du titre. TinaCMS supprime cet écart en faisant de la page elle-même la surface d'édition.

Comment ça marche

Quand le site tourne avec le serveur de développement TinaCMS et que l'on ouvre /admin, TinaCMS affiche un panneau latéral à côté des vraies pages. On clique sur n'importe quel contenu connecté, le formulaire du champ correspondant s'ouvre, et les modifications apparaissent sur la page au fur et à mesure de la saisie. Pas de prévisualisation séparée à rafraîchir, pas de correspondance mentale à faire entre un nom de champ et son emplacement réel.

Le lien entre un élément de la page et son contenu tient en un seul attribut :

<h1 data-tina-field={tinaField(post, 'title')}>{post.title}</h1>

C'est ce data-tina-field qui rend le titre cliquable dans l'éditeur. Vous le retrouverez dans tous les composants de cette démo : titres, corps de texte, images de couverture, dates.

Pourquoi c'est important pour une équipe

• Les rédacteurs restent repérés. Ils modifient ce qu'ils voient, donc les problèmes de mise en page ou de longueur apparaissent immédiatement — impossible avec un formulaire WordPress classique.
• Les développeurs gardent le contrôle. Les champs disponibles, et leur validation, viennent du schéma défini dans le code, pas de ce qu'un rédacteur tape librement dans une zone de texte libre.
• La relecture devient honnête. Comme les modifications sont de vrais changements de contenu, ce que l'on valide est exactement ce qui sera publié.

L'édition visuelle n'est que la moitié de l'histoire. Les champs qu'un rédacteur voit sont générés à partir du modèle de contenu, sujet du prochain article.