Utiliser des variables CSS pour créer des thèmes dynamiques dans Puck

Puck est l'éditeur visuel open source pour React, qui donne du pouvoir à la prochaine génération de créateurs de pages et de produits sans code. Donnez-nous une étoile sur GitHub ! ⭐️

---

Lors de l'intégration de Puck dans votre produit de création de pages, une exigence courante est de permettre à vos utilisateurs de gérer de manière centralisée le thème de la page sans avoir à apporter des ajustements à chaque composant.

Par exemple : les utilisateurs ont besoin d'un moyen de gérer les styles de police de manière globale, même pour les composants déjà ajoutés à la page. Voici à quoi cela pourrait ressembler en action :

Puisque Puck n'est qu'un composant React, il existe de nombreuses façons de résoudre ce problème (ainsi que de gérer d'autres états plus complexes). Pour cet article, je me concentrerai sur l’une des approches les plus simples mais les plus puissantes : les propriétés CSS. Allons-y !

Pour ce tutoriel, je suppose que vous avez une compréhension de base de Puck et de ses fonctionnalités. Si vous êtes nouveau sur Puck, ne vous inquiétez pas, vous pouvez toujours nous suivre ! Je vous recommande cependant de consulter le guide de démarrage pour vous familiariser avec les fondamentaux.

Configuration du projet à l'aide de Vite

Je vais commencer par mettre en place un projet à l'aide du script d'échafaudage de Vite. Vous pouvez suivre ou ignorer cette section si vous avez déjà un projet avec Puck.

Si vous utilisez Next.js ou Remix, vous pouvez également utiliser l'une des recettes officielles de Puck pour configurer votre projet.

Création d'un projet

Pour commencer, ouvrez votre terminal et exécutez les commandes suivantes pour créer un nouveau projet Vite :

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Installation de la rondelle

Ensuite, installez le package Puck :

npm i @measured/puck --save

Suppression de styles en conflit

Lorsque vous démarrez un nouveau projet avec Vite, il sera livré avec des styles par défaut qui entreront en conflit avec ceux de Puck. Pour résoudre ce problème, supprimez src/index.css et src/App.css, puis supprimez leurs importations de src/main.jsx et src/App.jsx :

// main.jsx
import "./index.css"; // Remove this line

// App.jsx
import "./App.css"; // Remove this line

Rendu de l'éditeur Puck

Une fois la structure de base du projet prête, accédez à votre fichier src/App.jsx et remplacez son contenu par le code ci-dessous. Cela configurera Puck avec une configuration de base pour faire glisser et déposer les composants de titre et de paragraphe :

Notez que, par souci de simplicité, j'utilise le style en ligne dans cet exemple

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1 id="title">{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main>



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Génial ! Maintenant que vous disposez d'une base sur laquelle bâtir, ajoutons des thèmes pour vos utilisateurs.

Ajout d'un thème

Comme je l'ai déjà mentionné, les propriétés personnalisées CSS sont un excellent choix pour ajouter un thème interactif à votre éditeur. Pourquoi est-ce une excellente approche ? Parce qu'il est léger, ne nécessite pas de dépendances externes et est (pour la plupart) géré de manière native par le navigateur.

Installation

Pour ajouter un thème dynamique avec des propriétés CSS, vous devrez définir vos variables de thème en tant que propriétés chez un parent du composant qui en a besoin. Il peut s'agir du composant racine de Puck ou de tout autre composant parent dans la hiérarchie de votre éditeur, cela n'a vraiment pas d'importance tant que vous les définissez et que vous les lisez ensuite là où vous en avez besoin en utilisant la fonction var CSS.

Pour ce didacticiel, je me concentrerai sur l'utilisation du composant racine de Puck afin que les utilisateurs puissent définir la taille et la couleur de la police des titres et des paragraphes en un seul endroit au niveau supérieur de l'éditeur :

Étape 1 : Définir les variables

Commencez par définir un objet pour centraliser tous les noms de variables CSS. Cela améliorera la cohérence et vous évitera le terrier des problèmes de débogage causés par des noms de propriété mal saisis dans CSS.

Conseil de pro : si vous utilisez TypeScript, vous pouvez utiliser une énumération au lieu d'un objet pour obtenir une sécurité de type supplémentaire

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Étape 2 : ajouter les variables au composant parent

Ensuite, mettez à jour la configuration racine pour inclure les accessoires et les champs pour les variables du thème. Cela permettra aux utilisateurs de mettre à jour les propriétés personnalisées directement à partir des champs racine de l'éditeur.

Pour ce faire, vous devrez définir les champs des nouveaux accessoires racine et leurs valeurs par défaut :

npm i @measured/puck --save

Après cela, dans la fonction de rendu de la racine, lisez les propriétés personnalisées des accessoires et transmettez-les à l'élément racine en tant que variables CSS.

// L'objet de configuration Puck
const configuration = {
  composants : {
    //... composants existants
  },
  racine: {
    //... la configuration des champs racine

    render : ({ enfants, fontColor, headFontSize, paragrapheFontSize}) => {
      retour (
        <principal>



<p>Si vous allez maintenant dans l'éditeur, vous devriez voir les nouveaux champs au niveau racine pour chacun des accessoires. Il n'y a pas encore de retour visuel, mais si vous inspectez les styles de la racine de l'éditeur, vous verrez les variables définies à chaque modification que vous apportez aux champs.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p><h3>
  
  
  Étape 3 : accéder aux variables partagées dans les composants enfants
</h3>

<p>Enfin, accédez aux variables de thème dans les composants dont vous avez besoin en utilisant la fonction var CSS dans vos styles.</p>

<p>Dans notre exemple, vous les ajouterez dans la rubriqueConfig et le paragrapheConfig :<br>
</p>

<pre class="brush:php;toolbar:false">const headConfig = {
  //... La configuration des champs de rubrique

  rendu : ({ titre }) => {
    retour (
      <div>
        <h1>



</h1>
<p>Si vous revenez dans l'éditeur, faites glisser et déposez certains titres et paragraphes, puis modifiez les champs au niveau racine, vous remarquerez que tous les titres et paragraphes sont mis à jour pour refléter ces modifications :</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p> ? Et c'est tout ! Vos utilisateurs sont désormais en mesure de définir un thème appliqué de manière transparente à différents composants de leurs pages.</p>

<h3>
  
  
  Avantages et inconvénients de l'utilisation des propriétés CSS
</h3>

<p>✅ Avantages :</p>

<ul>
<li>Configuration simple et intuitive</li>
<li>Fonctionnalité intégrée de mise en cascade et de remplacement dans la hiérarchie des pages, permettant une gestion facile des styles partagés et la possibilité de personnaliser les composants individuels</li>
<li>Zéro dépendance externe et empreinte légère : les propriétés personnalisées CSS sont nativement prises en charge par les navigateurs</li>
<li>Moins de complexité standard et de maintenance que les autres options</li>
</ul>

<p>❌ Inconvénients :</p>

<ul>
<li>Convient uniquement pour un style simple : ne peut pas gérer des données ou une logique complexes</li>
<li>Le débogage peut être difficile lors de l'imbrication de plusieurs niveaux de remplacements de propriétés CSS</li>
</ul>

<h2>
  
  
  Aller plus loin
</h2>

<p>En fonction de votre cas d'utilisation spécifique, il existe de nombreuses façons d'aller encore plus loin dans la thématique de votre éditeur :</p>
<ul>
<li>
<strong>Utiliser des thèmes prédéfinis</strong> : dans certaines applications, vous devrez peut-être fournir des options de thème par défaut, telles que Sombre, Clair ou Minimal. Pour cela, vous pouvez utiliser un champ de sélection avec plusieurs objets de thème. 
Ces objets peuvent regrouper toutes les propriétés CSS dans une unité, permettant aux utilisateurs de basculer facilement entre différents thèmes pour leurs pages sans avoir à remplir des champs uniques.</li>
<li>
<strong>Intégrer des bibliothèques de styles</strong> – Pour les éditeurs plus grands, il peut être préférable d'utiliser une bibliothèque de styles pour exploiter les styles prédéfinis, rationaliser vos définitions et réduire le passe-partout. Des bibliothèques comme Tailwind ou Emotion peuvent facilement s'intégrer à Puck, vous offrant flexibilité et efficacité tout en conservant une apparence soignée. En fait, Puck propose même un plugin Emotion qui simplifie le processus d'intégration pour vous !</li>
<li>
<strong>Ajouter des remplacements de thème au niveau des composants</strong> – Parfois, les utilisateurs peuvent avoir besoin de personnaliser des composants individuels dans leurs pages afin qu'ils se démarquent du reste du thème. Puisque nous utilisons des propriétés CSS, cela peut facilement être réalisé en remplaçant les variables de thème au niveau parent au niveau du composant. Par exemple, vous pouvez ajouter un champ de couleur de police facultatif à l'intérieur de votre composant Heading qui, s'il est fourni, redéfinirait la propriété CSS spécifiquement pour cet élément h1.</li>
</ul>

<h2>
  
  
  Restez connecté et continuez à construire ?
</h2>

<p>J'espère que ce didacticiel vous a permis d'exploiter les variables CSS pour créer des thèmes dynamiques dans les constructeurs de pages basés sur Puck. La communauté des développeurs open source est au cœur de l'évolution de Puck, et j'ai hâte de voir les applications innovantes que vous créez !</p>

<p>Nous nous engageons à pousser encore plus loin les capacités de Puck, avec un flux constant de nouvelles fonctionnalités, notamment un moteur de glisser-déposer révolutionnaire pour les grilles et mises en page complexes qui sera lancé prochainement, et une suite de nouveaux plugins à l'horizon.</p>

<p>Alors, si Puck vous a inspiré ou si vous souhaitez rester au courant des dernières fonctionnalités, voici comment vous pouvez vous impliquer :</p>

<ul>
<li>
<strong>⭐ Mettez-nous en vedette sur GitHub</strong> pour soutenir le projet et inspirer les autres à explorer son potentiel.</li>
<li>
<strong> ? Rejoignez notre communauté Discord</strong> pour partager vos projets, poser des questions et collaborer.</li>
<li>
<strong> ? Suivez-nous sur X et Bluesky</strong> pour les dernières mises à jour, aperçus et annonces de fonctionnalités.</li>
<li>
<strong> ? Plongez plus profondément dans la documentation officielle</strong> pour découvrir des techniques et des informations avancées qui peuvent faire passer vos flux de travail sans code au niveau supérieur.</li>
</ul>


          </div>