Premiers pas avec Drupal Canvas : Le créateur de pages sans code pour tous

Ce guide vous accompagne dans la configuration et l'utilisation de Drupal Canvas, un créateur visuel de pages qui apporte la fonctionnalité glisser-déposer à Drupal 11 et aux versions tardives de Drupal 10. Vous apprendrez comment installer Canvas, créer vos premières pages, construire des composants personnalisés et éviter les pièges courants qui peuvent ralentir votre implémentation.

Prérequis

Avant de commencer à travailler avec Drupal Canvas, vous aurez besoin de :

• Drupal 11.x ou Drupal 10.x (version 10.3 ou supérieure) - Canvas nécessite ces versions plus récentes pour une compatibilité complète
• Composer installé sur votre système - Vous l'utiliserez pour ajouter Canvas à votre projet
• Accès administrateur à votre site Drupal - Vous aurez besoin des permissions pour installer des modules et configurer les paramètres
• Un thème personnalisé (recommandé) - Bien que ce ne soit pas strictement requis, avoir un thème personnalisé vous donne le plus de flexibilité pour créer des composants
• Une familiarité de base avec l'interface d'administration de Drupal - Vous devriez savoir comment naviguer dans le menu d'administration et gérer le contenu

Les équipes avec lesquelles nous travaillons rapportent qu'avoir au moins une personne familière avec les gabarits Twig aide considérablement lors de la création de composants personnalisés, bien que ce ne soit pas requis pour l'utilisation de base de Canvas.

Étape 1 : Installation de Drupal Canvas

Commencez par ajouter Canvas à votre projet Drupal en utilisant Composer. Ouvrez votre terminal, naviguez vers votre répertoire racine Drupal et exécutez :

composer require drupal/canvas

Une fois que Composer a terminé de télécharger le module, activez-le en utilisant Drush :

drush en canvas -y
drush cr

Alternativement, vous pouvez activer Canvas via l'interface d'administration en allant dans Extensions, en cherchant « Canvas », en cochant la case et en cliquant sur Installer.

Étape de configuration critique

Après l'installation, vous devez ajouter cette ligne à votre fichier settings.php :

$settings['extension_discovery_scan_tests'] = TRUE;

Ce paramètre permet à Drupal de découvrir les composants à répertoire unique (SDCs) dans votre thème. Sans cela, les composants personnalisés n'apparaîtront pas dans Canvas. De nombreux utilisateurs novices manquent cette étape et se demandent pourquoi leurs composants ne s'affichent pas.

Étape 2 : Configuration des permissions Canvas

Naviguez vers Configuration → Paramètres Canvas dans votre menu d'administration. Ici, vous configurerez qui peut utiliser Canvas et ce qu'ils peuvent en faire.

Paramètres de permission clés à configurer :

• Créer des pages Canvas - Généralement accordé aux éditeurs de contenu et aux créateurs de sites
• Modifier des pages Canvas - Habituellement les mêmes rôles que pour la création
• Publier des pages Canvas - Envisagez de limiter ceci aux éditeurs seniors ou aux administrateurs
• Accéder aux fonctionnalités IA de Canvas - Si vous utilisez l'assistance IA, contrôlez qui y a accès

Vous pouvez également configurer :

• Les gabarits par défaut pour les nouvelles pages
• Les types de blocs autorisés (restreindre certains blocs d'apparaître dans la barre latérale)
• Les régions globales qui apparaissent sur toutes les pages Canvas

Étape 3 : Création de votre première page Canvas

Avec Canvas installé et configuré, créons votre première page :

1. Naviguez vers Contenu → Ajouter du contenu → Page Canvas
2. Entrez un titre pour votre page
3. Cliquez sur Éditer avec Canvas pour ouvrir le créateur visuel

L'interface Canvas s'ouvre avec trois zones principales :

• Barre latérale gauche : Contient les blocs, patrons et gabarits que vous pouvez glisser sur votre page
• Canevas central : Votre zone de travail où vous construisez la page
• Barre latérale droite : Panneau de propriétés pour configurer les composants sélectionnés

Construction de votre mise en page

Commencez simplement avec une mise en page de base texte et image :

1. Glissez un bloc Texte de la barre latérale gauche sur le canevas
2. Cliquez sur le bloc de texte pour le sélectionner
3. Dans la barre latérale droite, ajoutez votre contenu en utilisant l'éditeur de texte enrichi
4. Glissez un bloc Image sous votre texte
5. Téléversez ou sélectionnez une image depuis votre bibliothèque média

Pour créer des colonnes :

1. Glissez un patron Mise en page en colonnes sur le canevas
2. Choisissez votre configuration de colonnes (2 colonnes, 3 colonnes, etc.)
3. Glissez des blocs de contenu dans chaque emplacement de colonne

Étape 4 : Travailler avec des composants personnalisés

Bien que Canvas vienne avec des blocs de base, sa vraie puissance vient de la création de composants personnalisés utilisant les composants à répertoire unique (SDCs). Construisons un simple composant d'appel à l'action.

Création de la structure du composant

Dans votre thème personnalisé, créez cette structure de répertoires :

themes/custom/VOTRE_THEME/components/cta/
  ├── cta.component.yml
  ├── cta.twig
  └── cta.css

Métadonnées du composant (cta.component.yml)

name: Appel à l'action
description: Section CTA accrocheuse avec titre et bouton
props:
  heading:
    type: string
    title: Titre
    default: 'Prêt à commencer?'
  subtext:
    type: string
    title: Texte de support
    default: ''
  button_text:
    type: string
    title: Texte du bouton
    default: 'En savoir plus'
  button_url:
    type: string
    title: Lien du bouton
    default: '/contact'
  background_color:
    type: select
    title: Couleur d'arrière-plan
    default: primary
    enum:
      - primary
      - secondary
      - white

Gabarit du composant (cta.twig)

<div class="cta cta--{{ background_color }}">
  <div class="cta__content">
    <h2 class="cta__heading">{{ heading }}</h2>
    {% if subtext %}
      <p class="cta__subtext">{{ subtext }}</p>
    {% endif %}
    <a href="{{ button_url }}" class="cta__button">
      {{ button_text }}
    </a>
  </div>
</div>

Styles du composant (cta.css)

.cta {
  padding: 60px 20px;
  text-align: center;
}

.cta--primary {
  background-color: #0073e6;
  color: white;
}

.cta--secondary {
  background-color: #f7f7f7;
  color: #333;
}

.cta--white {
  background-color: white;
  color: #333;
  border: 1px solid #e0e0e0;
}

.cta__content {
  max-width: 800px;
  margin: 0 auto;
}

.cta__heading {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.cta__subtext {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.cta__button {
  display: inline-block;
  padding: 12px 30px;
  background-color: #333;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

.cta--primary .cta__button {
  background-color: white;
  color: #0073e6;
}

Après avoir créé ces fichiers, videz votre cache (drush cr) et votre nouveau composant CTA apparaîtra dans la barre latérale Canvas.

Étape 5 : Erreurs courantes à éviter

Problèmes de découverte de composants

Le problème le plus fréquent que rencontrent les nouveaux utilisateurs de Canvas est que les composants n'apparaissent pas. Voici votre liste de vérification pour le dépannage :

1. Vérifiez votre settings.php - Assurez-vous que $settings['extension_discovery_scan_tests'] = TRUE; est présent
2. Vérifiez le nommage des fichiers - Les fichiers de composants doivent suivre le modèle : nom.component.yml, nom.twig
3. Validez la syntaxe YAML - Une seule erreur d'espacement dans votre fichier YAML empêchera le chargement du composant
4. Videz complètement les caches - Exécutez drush cr après tout changement de composant

Pièges de performance

Notre expérience montre que les pages avec plus de 20 blocs dynamiques peuvent commencer à affecter les performances. Au lieu d'ajouter de nombreux blocs de texte individuels, considérez :

• Créer des composants plus grands et combinés
• Utiliser des blocs Views pour les listes de contenu dynamique
• Implémenter des stratégies de mise en cache pour les composants complexes

Conflits de styles

Lors de la création de composants personnalisés, préfixez vos classes CSS pour éviter les conflits :

/* Mauvais - trop générique */
.button { }
.content { }

/* Bon - avec préfixe */
.cta__button { }
.hero__content { }

Adaptabilité mobile

Testez toujours vos pages Canvas sur différentes tailles d'écran. Utilisez les boutons d'aperçu d'appareil dans la barre d'outils Canvas pour vérifier :

• Bureau (par défaut)
• Tablette (largeur 768px)
• Mobile (largeur 375px)

Ajoutez des styles adaptatifs à vos composants :

.cta__heading {
  font-size: 2.5rem;
}

@media (max-width: 768px) {
  .cta__heading {
    font-size: 1.8rem;
  }
}

Étape 6 : Tests et vérification

Avant de publier toute page Canvas, parcourez cette liste de vérification :

Vérification du contenu

1. Prévisualisez votre page en utilisant le bouton Aperçu dans Canvas
2. Vérifiez tous les liens - Cliquez sur chaque bouton et lien pour vous assurer qu'ils fonctionnent
3. Révisez le contenu textuel pour les fautes de frappe et les problèmes de formatage
4. Testez les formulaires si votre page inclut des blocs de formulaire

Tests inter-navigateurs

Ouvrez votre page Canvas dans :

• Chrome
• Firefox
• Safari
• Edge

Recherchez :

• Les incohérences de mise en page
• Les erreurs JavaScript dans la console
• Les différences de rendu CSS

Vérifications d'accessibilité

1. Exécutez un analyseur d'accessibilité comme axe DevTools ou WAVE
2. Vérifiez la hiérarchie des titres - Assurez-vous d'avoir une structure appropriée H1, H2, H3
3. Vérifiez le texte alternatif sur toutes les images
4. Testez la navigation au clavier - Pouvez-vous naviguer avec Tab à travers tous les éléments interactifs?

Tests de performance

1. Exécutez Google PageSpeed Insights sur votre page publiée
2. Vérifiez les tailles d'images - Les grandes images ralentissent le chargement des pages
3. Surveillez le temps de rendu Canvas dans les outils de développement de votre navigateur

Tests utilisateurs

Demandez à quelqu'un qui ne connaît pas votre contenu de :

1. Naviguer à travers la page
2. Compléter tous les appels à l'action
3. Fournir des commentaires sur la clarté et l'utilisabilité

Travailler avec les fonctionnalités IA de Canvas

Si vous avez activé le module assistant IA de Canvas (canvas_ai), vous pouvez générer des mises en page en utilisant des invites en langage naturel. Cette fonctionnalité nécessite une configuration avec un fournisseur IA comme OpenAI.

Pour utiliser l'assistance IA :

1. Cliquez sur le bouton IA dans la barre d'outils Canvas
2. Tapez une description naturelle comme « Créer une mise en page à deux colonnes avec un titre à gauche et une galerie d'images à droite »
3. Révisez et ajustez la mise en page générée

Gardez vos invites spécifiques et ciblées. Au lieu de « faire une belle page », essayez « créer une section héros avec un arrière-plan bleu, du texte blanc et un formulaire de contact en dessous ».

Modèles de composants avancés

Une fois à l'aise avec les composants de base, considérez ces modèles avancés :

Composants imbriqués avec emplacements

Créez des composants qui acceptent d'autres composants :

# container.component.yml
name: Conteneur
slots:
  content:
    title: Zone de contenu
    description: Ajoutez n'importe quels composants ici{# container.twig #}
<div class="container">
  {{ content }}
</div>

Intégration de données dynamiques

Connectez les composants aux entités Drupal :

# article-teaser.component.yml
name: Aperçu d'article
props:
  node_id:
    type: integer
    title: ID du nœud article{# article-teaser.twig #}
{% set node = drupal_entity('node', node_id) %}
{% if node %}
  <article class="teaser">
    <h3>{{ node.title.value }}</h3>
    <p>{{ node.body.summary }}</p>
  </article>
{% endif %}

Variantes de composants

Créez plusieurs versions visuelles du même composant :

# button.component.yml
name: Bouton
props:
  variant:
    type: select
    title: Style de bouton
    enum:
      - primary
      - secondary
      - outline

Migration du contenu existant vers Canvas

Si vous déplacez un site Drupal existant vers Canvas, planifiez votre migration soigneusement :

1. Auditez les mises en page existantes - Identifiez les modèles communs
2. Créez des composants pour les éléments répétés - Construisez une fois, réutilisez partout
3. Commencez par les pages à faible trafic - Testez votre approche avant de migrer les pages critiques
4. Formez votre équipe de contenu - Planifiez des sessions pratiques avec Canvas

Nous avons constaté qu'une migration progressive fonctionne mieux, en commençant par le nouveau contenu dans Canvas tout en maintenant les pages existantes, puis en convertissant progressivement le contenu plus ancien.

Conclusion

Drupal Canvas apporte la création visuelle de pages à Drupal sans sacrifier les forces de la plateforme en matière de contenu structuré et de flux de travail. En suivant ce guide, vous avez appris à installer Canvas, créer des pages, construire des composants personnalisés et éviter les problèmes d'implémentation courants.

La clé du succès avec Canvas est de commencer simplement et de construire graduellement votre bibliothèque de composants. Concentrez-vous d'abord sur la familiarisation avec l'interface et les blocs de base, puis développez vers des composants personnalisés au fur et à mesure que vos besoins grandissent. N'oubliez pas de tester minutieusement, surtout sur les appareils mobiles, et vérifiez toujours que vos composants sont découvrables en vérifiant votre configuration des paramètres.

Les équipes avec lesquelles nous travaillons rapportent que Canvas réduit considérablement leur temps de création de pages tout en donnant aux éditeurs de contenu l'indépendance dont ils ont besoin. La combinaison de la création visuelle et de la puissante gestion de contenu de Drupal crée une plateforme flexible pour des sites de toute taille.

Configurer Drupal Canvas efficacement nécessite une planification soignée autour de l'architecture des composants, des permissions utilisateurs et des considérations de performance. Si vous évaluez Canvas pour le flux de travail de contenu de votre équipe ou si vous avez besoin d'aide pour créer une bibliothèque de composants personnalisés qui correspond à vos directives de marque, nous pouvons vous aider à concevoir une approche d'implémentation qui équilibre flexibilité et maintenabilité.