Les compositions sont probablement l’un des concepts les plus importants du FSE. Ce sont des regroupements de blocs, parfois des sections complètes, que l’on va pouvoir ajouter d’un clic dans nos pages, et réutiliser dans le prochain site. Le gain en productivité vient en partie de ce concept.
Sommaire du cours
Dans cette formation, on a commencé par configurer le theme.json, puis on a vu comment déclarer des variations de styles de blocs. Maintenant, nous allons passer à la 3è étape de la conception de sites en Full Site Editing avec WordPress.
On va créer nos compositions sur-mesure. C’est ici que le design de notre site va commencer à prendre vie. Mais nous n’allons pas créer de modèles complets de pages pour autant, seulement des sections ou des éléments complexes.
Pour reprendre l’analogie de l’Atomic Design, nous en somme à l’étape des organismes :
Alors c’est parti, place aux compositions !
Le rôle des compositions dans WordPress
Dans WordPress, le but n’est pas de concevoir le design lorsque vous créez vos pages de contenus. L’objectif est de planifier et préparer tout cela en amont.
Créer des compositions en amont va vous donc vous permettre de gagner énormément de temps par la suite lors de la création des contenus.
Si votre designer a bien travaillé dans Figma, il devrait être en mesure de vous proposer des design de sections, et de composants.
Notre rôle va donc être de créer une bibliothèque de compositions réutilisables dans tout le site.
On pourra ensuite les afficher dans Apparence > Éditeur > Compositions et même les organiser par catégories :
Et on va même aller plus loin puisqu’on pourra les exporter et les réutiliser également dans de futurs sites. Vous commencez à entrevoir le gain de temps ?
Lorsqu’on créera les véritables contenus, on pourra faire appel à nos compositions en 3 clics :
Dans une page (ou un article), il suffira de cliquer sur le bouton + pour ajouter un bloc, se rendre dans l’onglet composition, et cliquer sur la composition que l’on veut insérer.
On peut difficilement faire plus simple ! De là, il suffit de cliquer sur les textes que l’on souhaite modifier, et le tour est joué.
Créer une composition
On va maintenant créer notre première composition avec l’éditeur de sites de WordPress.
Pour cela, on va aller dans Apparence > Éditeur > Compositions puis on va cliquer sur le bouton Ajouter une composition et choisir la première option.
Une fenêtre modale vous demander le nom de la composition, une ou plusieurs catégories dans lesquelles la ranger, et si cette composition doit-être synchronisée ou non.
Vous pouvez indiquer n’importe quelle catégorie existante ou en ajouter une. Dans les prochains cours, on va plutôt voir comment déclarer ces catégories via le code.
Pour cette première composition, désactivez la synchronisation. D’ailleurs parlons de ce concept. Il est plutôt important et va avoir des implications sur le rôle des compositions.
Aparté: Les compositions synchronisées
Par défaut, une composition est un modèle de base sur lequel on se repose pour créer du contenu, il faut donc pouvoir le modifier et le personnaliser à chaque fois qu’on va l’insérer sur le site.
Une composition synchronisée aura le même contenu sur tout le site : si vous modifiez le contenu de celle-ci sur une page, il sera également modifié partout où vous l’aurez utilisée.
Optez pour une composition synchronisée lorsque vous faites un élément récurrent sur votre site, par exemple un appel à l’action marketing, un abonnement à votre newsletter
Pour tout le reste, optez pour des compositions classiques, sans synchronisation.
L’interface de création des compositions
Une fois la composition créée, vous arrivez sur cette interface du Full Site Editing :
On remarque un fond gris (même si votre site ne l’est pas) et des barres verticales sur les côtés. elles vont vous permettre d’adapter la largeur de l’éditeur en les faisant glisser latéralement, afin de tester le comportement de votre compositions sur plusieurs tailles d’écran.
Avant de continuer, ouvrez la « Vue en liste » à gauche via le dernier bouton du menu supérieur. Elle nous sera très utile pour comprendre la structure en blocs et surtout sélectionner facilement un bloc à modifier.
À partir de maintenant, on est prêts à insérer des blocs et réaliser notre composition.
Réaliser notre première composition
Voici la composition que je vais réaliser à l’aide de Gutenberg, seulement avec des blocs natifs :
Cela implique bien sûr que j’ai préparé en amont mon theme.json, notamment les couleurs, les espacements et que j’ai déclaré quelques variations de styles de blocs pour le bouton.
Et voici maintenant la recette :
- Je commence par créer un groupe, et j’applique une couleur de fond et des arrondis ;
- Je fais un clic droit > Renommer sur le groupe depuis la vue en liste, et je change son nom en « Hero » ;
- J’applique également des marges internes sur les côtés et en hauteur ;
- À L’intérieur, j’insère un bloc colonnes constitué de 2 colonnes ;
- J’ajuste l’espacement entre les blocs qui constituera le gap entre les 2 colonnes ;
- J’indique une taille de 55% à la première colonne, et 45% à la seconde.
Dans la première colonne :
- J’insère un premier paragraphe que je passe en rose ;
- J’ajoute ensuite un titre de niveau 2, auquel j’ajoute une image en ligne et une couleur de mise en évidence ;
- J’ajoute un simple paragraphe pour la suite, suivi d’un bloc boutons ;
- J’y insère 2 boutons en utilisant le style principal et une variation ;
- J’ajoute un séparateur, je modifie sa couleur et sa marge supérieure ;
- J’insère ensuite une rangée pour aligner un paragraphe et les icônes de réseaux sociaux ;
- Je choisis la variation arrondie pour les réseaux et j’applique le blanc en fond et le violet en texte ;
Pour réussir à faire comme moi sur le titre, il faut utiliser le menu déroulant de la barre d’outils. Vous y trouverez de nouvelles options comme l’image en ligne et la mise en évidence.
Dans la seconde colonne maintenant :
- J’insère une première image et j’ajoute des arrondis via la variation « Arrondi » ;
- J’insère ensuite une galerie avec 2 images supplémentaires et j’applique ma variation « Arrondi » là aussi.
Et voilà le résultat :
On se retrouve avec une belle composition d’une vingtaine de blocs assemblés dans des groupes et des colonnes. On va ensuite voir comment l’enregistrer afin de l’utiliser plus tard.
Enregistrer la composition dans le thème
Lorsque vous enregistrez votre composition, elle sera sauvegardée dans la base de données de WordPress, sous forme d’une publication, sous le type de publication privé wp_block.
Mais ça ne va pas nous arranger, car ce que l’on veut nous, c’est enregistrer le HTML généré dans les fichiers de notre thème, afin de versionner le code avec Git.
Exporter le HTML de notre composition depuis Gutenberg
Pour exporter notre composition, c’est très simple. Cliquez sur le menu 3 points tout en haut de l’éditeur et sélectionnez « Éditeur de code ».
Votre composition laisse désormais sa place au code source HTML généré par Gutenberg :
Copiez l’intégralité du code. On va ensuite le coller dans un fichier de notre thème.
Créer la composition dans le thème en PHP
Dans notre thème, on va créer un fichier presentation.php dans le dossier /patterns.
Au début du fichier, on va déclarer des informations sur la composition, à l’aide des commentaires PHP :
Parmi les informations à fournir on a :
Title: le titre de la composition, qui apparaitra dans l’interface de l’éditeur ;Slug: le slug, ou nom unique de la composition ;Description: une description optionnelle ;Category: le slug de la ou des catégories dans laquelle apparaitra la composition. On va définir des catégories de composition via le code dans les prochains cours ;Keywords: Des mots clés pour trouver la composition plus facilement dans le champ de recherche des blocs ;Viewport Width: la largeur indicative pour afficher l’aperçu. Choisissez une valeur petite pour une composition étroite ;Block Types: restreindre éventuellement cette composition à l’intérieur de certains blocs uniquement ;Post Type: restreindre éventuellement cette composition à certains types de publication uniquement ;Inserter: afficher ou non cette composition dans le menu de l’éditeur.
Parfois, on créé des compositions pour les insérer dans des modèles de page, et on ne veut pas qu’elles soient accessibles pour autant à nos utilisateurs. C’est pour ça qu’on a la dernière option Inserter. Vous verrez que ça pourra être pratique par la suite.
Cette première partie est nécessaire pour que la composition soit bien prise en compte dans l’éditeur.
On va maintenant coller à la suite le HTML qu’on a précédemment copié.
Si vous êtes intéressé par en savoir plus sur comment Gutenberg génère et enregistre le HTML des blocs, j’ai dédié un cours à ce sujet dans la formation Développeur de blocs.
Désormais, notre composition devrait être disponible dans l’éditeur, et on va pouvoir la versionner avec Git comme le reste de notre thème !
Cela dit, on verra plus tard qu’on pourra utiliser à la place les éléments de modèles, ou en anglais les templates parts qui sont là depuis les débuts de WordPress et qui ont le même rôle.
Dédoublonner notre composition
Si vous retournez en arrière en cliquant sur le logo WordPress en haut à gauche, vous reviendrez dans la rubrique « Compositions ». Rechargez la page pour prendre en compte la composition du fichier de votre thème et vous verrez ceci :
Votre composition apparait en double ! C’est normal car il y a celle du thème, et celle enregistrée en base. On va donc supprimer la seconde.
Mais comment les distinguer ? C’est facile ! La composition du thème ne peut pas être modifiée, du coup vous verrez un cadenas à droite de son nom, sous l’aperçu.
Supprimez donc la seconde grâce au menu 3 points > Supprimer. Désormais, seule la composition de votre thème apparaitra :
C’est tout bon, à partir de maintenant on va pouvoir utiliser cette composition à volonté dans les contenus de notre site WordPress.
Utiliser la composition dans l’éditeur
Vous allez pouvoir utiliser cette composition de partout : dans une page, dans un article, dans n’importe quel type de publication personnalisé, mais aussi dans les modèles de page que l’on va aborder lors du prochain chapitre.
On va essayer dans une simple page. cliquez sur le bouton + comme si vous alliez ajouter un bloc, puis sélectionnez l’onglet « Compositions ».
Cliquez ensuite sur « Toutes » pour faire apparaitre une seconde colonne et cliquez sur votre composition pour l’insérer.
Vous pourriez également chercher la composition via le champ « Rechercher ». Essayez par exemple de chercher l’un des mots-clés que vous aviez renseigné dans le fichier .php.
Le code HTML de la composition est simplement dupliqué dans la page et vous pouvez désormais modifier son contenu à volonté.
Modifier une composition
Comme on l’a vu précédemment, il y a un cadenas à côté du nom d’une composition, qui indique qu’elle n’est pas modifiable.
Du coup comment faire lorsqu’on voudra modifier une composition plus tard ?
WordPress ne veut pas écrire dans les fichiers du thème même si, historiquement, il en était capable. Mais comme c’était une mauvaise pratique, cette fonctionnalité a disparu. C’est pour cela qu’on ne peut pas directement la modifier.
Mais qu’à cela ne tienne, on va simplement prendre un petit détour en 2 étapes pour arriver à nos fins :
- On va d’abord dupliquer la composition afin de la rendre modifiable,
- et on réexportera ensuite le HTML vers notre thème.
Dupliquer la composition pour la modifier
Dans Apparence > Éditeur > Compositions, dupliquez votre composition existante en cliquant sur le menu 3 points, puis Dupliquer.
Cliquez sur la composition dupliquée pour la modifier. Faites le nécessaire et une fois que c’est terminé, on va pouvoir l’exporter à nouveau.
Réexporter la composition vers PHP
Comme pour la création, on va retourner dans l’éditeur de code via le menu 3 points > Éditeur de code et copier le HTML généré par WordPress.
Ouvrez le fichier de votre composition dans votre thème, qui devrait se trouver dans le dossier /patterns.
Collez le code généré en remplacement de l’ancien code, mais veillez à conserver les commentaires PHP, qui eux ne changent pas.
Il ne vous reste plus qu’à supprimer la composition dupliquée depuis l’interface de WordPress.
Et voilà, les compositions n’ont plus aucun secret pour vous. Vous allez pouvoir en créer autant que vous le souhaitez et les catégoriser, afin de vous simplifier la création de vos contenus.
Le fait de penser par compositions plutôt que par modèles de pages va vous permettre une meilleure maintenabilité de vos sites sur le long terme.
En respectant l’approche Atomic Design, la conception de vos sites va désormais prendre une toute autre ampleur !
Dans le prochain cours, je vais vous montrer comment rendre dynamiques les URL des images et des liens, mais également comment traduire vos compositions.
0
Questions, réponses et commentaires