Formation « Créer un site WordPress avec le Full Site Editing »

Visite guidée du Full Site Editing dans WordPress

Lecture : 16 minutes • 2

Avant de nous lancer dans la création d’un thème FSE, je vous invite à une visite de la nouvelle interface de WordPress et de ses éditeurs de contenu et de thème, afin de bien comprendre l’ergonomie générale et le rôle de chacun.

On va découvrir ensemble l’interface du Full Site Editing. Cela vous permettra de mieux comprendre l’organisation et les différentes sections de celui-ci.

Ainsi, vous aurez un aperçu des avantages uniques de cet éditeur, et une meilleure compréhension des étapes de la création d’un site FSE.

Plus tard dans la formation, une bonne partie de ce que l’on aura configuré ici sera exporté en HTML ou JSON dans notre thème afin de pouvoir le versionner.

Préparatifs

Pour cette démonstration, j’ai installé un site WordPress local et j’ai ajouté le thème Ollie qui tire pleinement parti des possibilités du FSE.

C’est d’ailleurs un très bon candidat si vous souhaitez faire un site totalement en no-code.

Si vous souhaitez vous aussi installer un site pour essayer en parallèle de la lecture de ce cours, consultez le cours sur l’installation d’un site local de la formation développer un thème classique.

Installation d'un site WordPress via Local WP.
J’utilise Local WP De WP Engine pour installer rapidement un site local

Il suffit ensuite d’installer et activer le thème gratuit Ollie à partir de l’écran Apparence > Thèmes.

Conseil

Le thème Twenty Twenty-Four (2024) et les suivants sont aussi de très bonnes bases pour démarrer vos essais en FSE.

L’éditeur de blocs WordPress

Si votre thème est compatible avec l’éditeur de blocs, vous devriez alors voir apparaitre le menu Éditeur dans le menu Apparence de WordPress.

Le menu Apparence de WordPress.
Le menu Apparence > Éditeur de WordPress

C’est ici que l’on va retrouver toutes les options de l’éditeur.

L'interface de l'éditeur de site de WordPress. Le fameux Full Site Editing.
L’interface de l’éditeur de site (FSE) de WordPress

La première chose que vous remarquerez, c’est que l’interface de WordPress est légèrement différente du reste du panneau d’administration.

Ce que vous voyez est un aperçu du futur WordPress. À terme, toutes les pages de l’administration devraient ressembler à ça.

À droite, un aperçu du site en temps réel et à gauche, le menu principal avec toutes les sections du FSE :

  • Navigation, d’où vous pourrez gérer vos menus ;
  • Styles, d’où vous pourrez configurer votre design system, les valeurs globales…
  • Pages, d’où vous pourrez éditer vos pages. C’est l’équivalent de l’actuel menu Pages ;
  • Modèles, d’où vous pourrez designer chaque modèle de page du site : accueil, blog, articles, pages…
  • Compositions, d’où vous pourrez créer des compositions de blocs réutilisables.

Ce sont ces rubriques que nous allons découvrir en détail dans ce cours.

Aparté: Terminologies du FSE

Gutenberg, éditeur de blocs, éditeur visuel, Full Site Editing… Tous ces termes désignent en réalité l’éditeur de WordPress, mais dans des contextes différents.

Quand je parlerai de l’éditeur pour créer des contenus (pages, articles…), je parlerai soit de Gutenberg, soit de l’éditeur de blocs, soit de l’éditeur visuel.

Et lorsque je parlerai de l’éditeur de thème, qui permet de modéliser l’en-tête, les modèles de pages et les styles globaux (dans apparence > éditeur), je parlerai soit de FSE, Full Site Editing, ou encore d’éditeur de thème.

Ne vous inquiétez pas, tout prendra son sens au fil de la formation.

Gérer la navigation en FSE

Cette section est l’équivalent de l’ancien menu WordPress Apparence > Menus, qui a énormément évolué, et dans le bon sens qui plus est.

Dans Gutenberg, un menu de navigation est désormais un simple bloc que vous pourrez placer de partout sur le site : dans vos contenus, dans votre en-tête de site, dans vos modèles de pages…

D’ici, vous allez pouvoir retrouver et éditer rapidement tous ces menus de navigation du site, peu importe là où vous les avez mis sur le site. Pratique !

L'écran navigation permet de gérer rapidement les menus du site et voir l'aperçu du résultat en temps réel.
L’interface de gestion des menus de navigation du Full Site Editing

Comme on le voit, Ollie propose déjà un menu principal, positionné dans l’en-tête du site, en haut à droite. Pour l’éditer, cliquez sur le menu 3 points à droite du titre Navigation dans le panneau latéral.

Vous arriverez dans l’éditeur de menus :

L'interface permettant de gérer les menus de navigation dans WordPress, avec à droite la liste des éléments et un menu pour ajouter de nouveaux éléments.
L’interface de gestion des menus de navigation dans le FSE

Ces derniers ont grandement évolué dans WordPress. Vous allez désormais pouvoir ajouter bien plus que des simples liens vers des pages, comme :

  • des sous-menus qui apparaissent au survol,
  • de véritables boutons personnalisables,
  • un moteur de recherche,
  • ou même encore des icônes de réseaux sociaux.

L’interface est à ce jour un peu capricieuse mais avec de l’habitude on s’en sort bien. Voici mon menu modifié :

L'interface de menu de WordPress, cette fois le menu contient un bouton et des icônes de réseaux sociaux.
Le menu modifié, avec bouton et icônes sociales

Ajouter des boutons, un moteur de recherche et des icônes de réseaux sociaux à votre menu

verrouillé Partie premium

Cette partie du cours est réservée aux détenteurs de l’offre premium.
Envie de nous rejoindre ?

Choisir une formule

Définir les styles du site

On arrive maintenant sur l’une des parties les plus importantes du site, la rubrique Styles. C’est ici que l’on va pouvoir définir les valeurs globales de nos styles : couleurs, typos, tailles… et les affecter par défaut aux éléments du site.

En d’autres termes, appliquer notre charte graphique au design system du site.

Le panneau de choix des variations de styles

Mais avant ça, lorsque vous cliquez sur Styles, vous arrivez sur l’écran de sélection des variations de styles du thème, si votre thème en propose :

L'aperçu du site dans le FSE avec une variation de style bleue prédéfinie par le thème.
L’interface des styles de WordPress montrant les variations disponibles

Ollie propose par défaut 4 déclinaisons de styles préconçus, que vous allez pouvoir utiliser en l’état ou modifier selon vos besoins. D’un simple clic sur le style « Studio », tout mon site applique la nouvelle charte d’une couleur rose et avec des polices différentes :

Le même aperçu que précédemment mais cette fois avec la variation de style rose.
Cette fois, la variation rouge est appliquée


Si vous le souhaitez, vous pouvez également n’appliquer qu’une palette de couleurs. Ollie en propose pas loin d’une dizaine.

Dans le cas où vous souhaiteriez vendre votre thème, il peut être très judicieux de proposer plusieurs variations par défaut. Mais en tant qu’agence qui fait des sites pour des clients, ce n’est pas forcément très utile.

L’utilité que j’y vois est de pouvoir faire une variation saisonnière d’un thème, pour des événements comme Noël par exemple.

Modifier les styles de notre thème

À partir d’une variation, cliquez sur le petit sylo en haut à droite du titre Styles, dans le panneau latéral.

C’est maintenant que ça devient intéressant, et c’est désormais dans le panneau latéral de droite qu’on va concentrer notre attention.

L'éditeur de style du FSE montre l'aperçu du site en temps réel ainsi qu'un volet à droite permettant de modifier les couleurs, la typographie et d'autres paramètres.
L’éditeur de styles : l’une des rubriques phares du FSE

D’ici, vous allez pouvoir agir sur plusieurs réglages :

  • La typographie : en d’autres termes, les polices d’écritures, leurs graisses et leurs tailles ;
  • Les couleurs : les couleurs de charte graphique, les dégradés et les duotones ;
  • Les ombres : pour appliquer des effets d’ombres sur vos éléments et donner de la prodondeur à votre site ;
  • La mise en page : la largeur du contenu des pages, les marges du site et l’espacement des blocs par défaut ;
  • Les styles des blocs : où vous pourrez définir l’apparence par défaut de chaque bloc de l’éditeur.

Mais il reste des choses que vous ne pouvez pas encore faire ici, comme :

  • Définir les différents espacements disponibles sur le site ;
  • Activer ou désactiver certains réglages et fonctionnalités de l’éditeur ;
  • Retirer les couleurs par défaut du thème.

Conseil

C’est pour ces raisons que pour le reste de la formation en tant que développeurs, on préférera paramétrer notre site à l’aide du fichier theme.json.

La typographie

Le menu Typographie, dans le panneau latéral de droite, vous permettra d’importer des polices (au format woff2 s’il vous plait) ou même directement récupérer des Google Fonts ! Et ça, c’est vraiment pratique.

L'éditeur de styles du FSE montre un écran de sélection des polices Google Font afin de les intégrer directement dans le site.
L’écran de sélection des polices Google Font

Vous pourrez ensuite sélectionner des variantes de graisse, par exemple normal (400) et gras (700).

Attention

Les polices peuvent vite alourdir le chargement de vos pages et impacter négativement les performances de votre site.

Il est généralement conseillé de sélectionner 2 polices d’écritures, et surtout de limiter les variantes de graisse.

Ensuite, vous pourrez appliquer ces typographies aux éléments primitifs du site, comme les textes, les liens, les titres, les légendes et les boutons.

Par exemple, ici j’applique Nunito en « extra-gras » à tous les boutons :

L'interface affichée permet de choisir la police d'écriture à appliquer aux boutons du site. Ici, la Google Font Nunito est sélectionnée, en gras.
À droite, les boutons sont configurés pour afficher la police Nunuito, en gras

Cela implique que j’ai appliqué ce réglage globalement sur le site. Tous les blocs qui possèdent des boutons hériteront automatiquement de ce réglage. On parle alors bien de styles globaux.

Si vous changez de réglage ou de police plus tard, ces modifications seront automatiquement appliquées sur tout le site.

Aparté: c’est magique ?

En fait, WordPress va simplement appliquer tous ces styles via CSS, en utilisant les variables CSS, adoptées par tous les navigateurs depuis 2017. Les valeurs ne sont alors pas appliquées en dur sur les éléments, mais régies par des variables. Tout le FSE fonctionnera d’ailleurs avec cette technique.

Les couleurs

Toujours dans le panneau latéral de droite, la rubrique couleurs va nous permettre de personnaliser la palette de couleurs principale et modifier les couleurs par défaut des titres, textes, boutons, et de l’arrière plan.

Vous trouverez en premier lieu la palette, ainsi que toutes les couleurs qu’elle contient. Cliquez dessus afin de pouvoir la modifier.

Le panneau latéral des couleurs du Full Site Editing, montrant un aperçu de la palette de couleur
La palette de couleurs de votre thème

En cliquant sur chaque pastille de couleur, vous allez pouvoir la modifier : vous remarquerez alors que l’apparence du site change en temps réel !

La palette de couleurs du FSE, représentée par des pastilles de couleurs qu'il est possible de modifier.
Ici, j’ai légèrement modifié la couleur principale vers un rouge plus intense

Vous pourrez également ajouter autant de nouvelles couleurs que vous le souhaitez à cette charte par défaut grâce à la rubrique couleurs personnalisées qui se trouve juste en dessous :

Ajout d'une couleur personnalisée bleue dans l'interface de sélection de couleurs de l'éditeur de site.
Ajout de deux couleurs personnalisées à la charte

Dans l’onglet Dégradé, vous pourrez même définir des dégradés de couleurs, et des duotones. Ces derniers sont des filtres colorés en deux tons pour les images :

L'éditeur de site de WordPress montre également les dégradés de coueurs disponibles et les duotones bicolores.
L’écran de modification des dégradés et duotones

Si vous enregistrez votre palette et que vous allez écrire un nouvel article, vous allez pouvoir sélectionner les nouvelles couleurs.

Dans cet exemple, j’ai ajouté un bouton dans un nouvel article et lorsque je choisis mon arrière plan, les couleurs de ma palette apparaissent, ainsi que mes 2 nouvelles couleurs personnalisées :

L'éditeur de contenu de WordPress, montrant le choix de couleur d'un bouton : nos couleurs personnalisées y sont présentes.
Les nouvelles couleurs sont disponibles dans l’éditeur

Là encore, si vous venez à modifier une couleur de votre palette, tous les éléments de votre site qui l’utilisent changeront en direct d’apparence, grâce aux variables CSS.

Vous pourrez d’ailleurs les observer côté public (en front-end) à l’aide de l’inspecteur du navigateur :

Le navigateur montre la page web ainsi que l'inspecteur. Le focus est mis sur les variables CSS générées par WordPress On y voit nos couleurs principales.
Les variables CSS déclarées par WordPress à partir des styles

Sans rien sélectionner côté HTML, il suffit de scroller vers le bas dans Styles, jusqu’à arriver sur le sélecteur body.

Enfin, en retournant dans l’éditeur de styes et sous la palette, vous pourrez appliquer les couleurs de la charte aux éléments primitifs de votre site de manière globale, à savoir :

  • Le texte en général ;
  • Les titres ;
  • Les liens et leur effet de survol ;
  • Les légendes sous les images, tableaux…
  • Les boutons : texte, fond, survol.
Les couleurs de la palette appliqués aux éléments de notre site : texte, arrière-plan, lien, boutons...
Les couleurs des éléments primitifs de mon thème

Ainsi, vous venez d’appliquer globalement votre charte à tous les éléments du site. Il sera bien entendu possible de surcharger ces valeurs par bloc ou depuis l’éditeur plus tard.

Les ombres

WordPress vous propose également de créer et gérer des ombres portées pour vos blocs. On pourra notamment les appliquer aux groupes et aux images.

Le Full Site Editing permet de gérer les ombres portées.
L’interface de gestion des ombres du FSE

En cliquant sur le petit bouton + à droite de « Personnalisée », vous pourrez même créer la vôtre :

L'inteface pour créer sa propre ombre portée dans WordPress.

Vous pourrez même cumuler plusieurs effets d’ombres dans votre réglage d’ombre afin de créer un rendu complexe et réaliste.

La mise en page

La rubrique mise en page quant à elle va vous permettre de définir plusieurs tailles :

  • La largeur du contenu des pages ;
  • Les marges internes (padding) par défaut des blocs ;
  • Et l’espacement des blocs entre-eux.
Les réglages de mise en page contenant des champs pour modifier la largeur du contenu, des marges internes et l'espacement des blocs.
Les réglages de mise en page de l’éditeur

La taille du contenu sera volontairement étroite et adaptée aux pages de contenus classiques sans mise en page poussée, comme les mentions légales, ou la politique de confidentialité par exemple, ou bien encore les articles du blog.

La taille large pourra être utilisée pour mettre en avant un élément du contenu, comme par exemple une image :

Dans un article, l'image est affichée en grande largeur, et déborde du contenu texte la précédant.
L’image est affichée en grande largeur

C’est d’ailleurs ce que je fais ici dans mes cours avec les images ! Sympa non ?

Mais bien entendu, ce n’est pas le seul usage de la taille large. Elle nous sera utile sur les pages avec des mises en pages poussées par section.

Si vous souhaitez faire des mises en page par colonnes par exemple, la largeur standard sera trop étroite :

L'éditeur affiche une section et du contenu à l'intérieur, mais celui-ci est trop étroit.
En largeur classique, le contenu est trop écrasé

Mais si on applique la taille large sur notre section, c’est déjà beaucoup mieux :

Cette fois, avec le réglage large appliqué, le contenu dans la section est plus aéré.
En largeur large, c’est déjà beaucoup mieux

D’ailleurs, vous avez sûrement remarqué que ma section est en pleine largeur, afin de permettre au fond coloré d’aller toucher les bords.

C’est en réalité aux contenus à l’intérieur, ici les colonnes, que j’applique le réglage de largeur large. On reviendra sur ce concept important plus tard dans la formation.

Alors si je résume, on applique en général :

  • La largeur standard pour les pages classiques et les articles du blog ;
  • La largeur large pour les contenus des pages principales du site ;
  • La pleine largeur est utile pour les sections du site à fond colorés.

Maintenant, passons aux réglages des marges internes. C’est un réglage tout autant important. Il va nous permettre de créer une marge de sécurité sur les côtés du contenu, afin que les textes ne soient pas collés aux bords de l’écran sur mobile :

La capture montre un aperçu du site au format mobile, et on observe les marges latérales qui évitent aux textes d'être collés aux bords de l'écran.
Une configuration avec des marges latérales larges sur mobile

Par contre, on laissera toujours les marges internes verticales à 0, sinon le header et le footer du site ne seraient plus collés en haut et en bas de l’écran.

Et enfin, il nous reste l’espacement des blocs par défaut : c’est la marge qu’il y aura entre tous les blocs de notre site. Bien entendu, en fonction des situations, on voudra des marges différentes et on pourra le régler par bloc.

Du coup, on profitera de ce réglage pour définir la marge entre les paragraphes.

Conseil

Ces réglages sont donc essentiels pour nous permettre de réussir nos mises en page des modèles de pages du site à partie de l’éditeur visuel.

Il faudra alors bien les comprendre afin de ne pas se mettre des bâtons dans les roues pour la suite. C’est pour cela que l’on va en reparler plus tard dans la formation.

Personnaliser l’apparence des blocs

Une fois les réglages de typographie, couleur et mises en page définis, vous allez pouvoir personnaliser les blocs de l’éditeur.

En d’autres termes, on va décider d’une apparence par défaut pour chacun d’entre-eux.

Dans l’interface de l’éditeur, on va retrouver la liste de tous les blocs actuellement disponibles sur le site :

L'interface liste tous les blocs de l'éditeur, afin de sélectionner celui dont on veut personnaliser l'apparence.
La liste de tous les blocs disponibles qu’on peut personnaliser

Prenons un exemple avec le bloc image. J’aimerais que toutes mes images par défaut aient un effet duotone, et que lorsque je clique sur une image, elle soit agrandie :

Les réglages du bloc image permettent d'appliquer un filtre duotone par défaut, et la lightbox, par exemple.
Les réglages par défaut du bloc image

Facile ! Désormais, toutes les images auront ce réglage par défaut : il sera automatiquement appliqué lorsque vous insérerez une image dans une publication.

Le saviez-vous ?

WordPress intègre désormais nativement une lightbox permettant d’agrandir les images au clic. Vous n’aurez donc plus besoin d’utiliser d’extension ou librairie externe.

Cela dit, ça reste encore un peu limité, on ne peut pas par exemple faire défiler les images d’une galerie.

De la même manière, on pourrait définir pour tous les blocs des réglages par défaut : titres, paragraphes, groupes, colonnes, boutons, images…

Il faudra alors bien faire la distinction entre :

  • Les réglages des éléments primitifs (typos, couleurs) sur tout le site ;
  • Les réglages spécifiques à un bloc en particulier.

Attention

Vous retrouverez donc des réglages de bouton dans les typos/couleurs, mais aussi dans le bloc bouton. La différence ? Un bouton peut très bien être présent ailleurs dans le site, hors du bloc bouton, comme par exemple dans le moteur de recherche ou un formulaire.

C’est pour cela qu’il est plus judicieux de configurer la primitive bouton plutôt que le bloc bouton (qui héritera de toute manière des réglages de primitive).

Afin d’avoir un aperçu général des réglages de vos blocs, vous pouvez cliquer sur le petit œil en haut à droite de l’interface.

Vous aurez alors accès au guide de style, ou styleguide en anglais, de votre thème.

L'interface liste tous les blocs de l'éditeur, afin de sélectionner celui dont on veut personnaliser l'apparence.
Le guide des styles de votre thème WordPress

D’ici, vous pourrez observer l’apparence de chacun de vos blocs, de manière isolée. C’est d’ailleurs pratique pour configurer vos blocs sans avoir à chercher une instance de celui-ci dans votre contenu, pour voir le rendu.

Éditer le contenu des pages

Changeons maintenant de rubrique et allons voir les pages. Dans le FSE, pour revenir en arrière, il faut cliquer sur le logo WordPress en haut à gauche de l’écran.

Alors que nous réserve la rubrique pages ?

Le Full Site Editing permet de gérer les pages du site via la nouvelle interface. Ici, on peut observer à gauche la liste des pages.
Gérer les pages du site depuis l’éditeur FSE

Eh bien en fait, rien de bien nouveau ! C’est simplement une interface pour gérer les pages du site, exactement comme dans le menu Pages hors du FSE.

Cela dit, cette interface se veut plus moderne et vous allez pouvoir créer de nouvelles pages, modifier les existantes comme avant.

Il y a toutefois une petite différence bien pratique : les pages sont ordonnées par date de modification. Les pages modifiées récemment apparaitront donc en tête de liste. C’est plus simple pour les retrouver !

Concevoir les modèles

Dans la rubrique précédente, on modifiait le contenu des pages. Dans la rubrique Modèles, on va pouvoir concevoir le design et la mise en page des différents modèles de page du site.

Et un site WordPress possède pas mal de modèles différents en fonction du contenu à afficher. Il y a :

  • Les pages classiques ;
  • La page du blog, qui liste les derniers articles (ou archives) ;
  • La page d’un article (single) ;
  • La page de recherche ;
  • La page 404…
La rubrique Modèles de l'éditeur de site affiche la liste des modèles disponibles.
L’éditeur de modèles du FSE

Si vous avez l’habitude de WordPress, vous avez sûrement compris de quoi je parle : le fameux template hierarchy. C’est lui qui permet à WordPress de savoir quel modèle de page afficher en fonction de l’URL demandée par le navigateur.

À l’ère du Full Site Editing, vous allez pouvoir éditer tous ces modèles de pages directement à partir de l’éditeur, visuellement.

Le saviez-vous ?

Finies donc les intégrations HTML de ces modèles, tout sera créé à partir de cet éditeur de manière visuelle et exporté vers votre thème.

Et pour cela, il existe des blocs spécifiques comme le bloc boucle de requête, équivalent de la WP Query mais sans code, ou encore le bloc titre/contenu de la publication qui agissent comme des zones dynamiques.

Voici par exemple la page d’archive du blog, avec la boucle de requête en action :

L'éditeur de blocs permet de personnaliser le modèle de page du blog : à gauche, la liste des blocs utilisés, et à droite, l'aperçu du modèle avec le bloc boucle de requête.
Modification du modèle de page « Archive »

Le modèle archive sera invoqué par WordPress à chaque fois qu’il aura besoin d’afficher les articles du blog, que ce soit la page d’accueil du blog avec les articles les plus récents, une catégorie en particulier, la page d’un auteur…

Conseil

L’éditeur de modèles est l’un des gros changements apportés par le FSE. Je sais qu’à ce point vous êtes probablement sceptiques sur l’efficacité de cette méthode comparée à une intégration HTML/CSS classique, mais faites-moi confiance, le but de cette formation est justement de vous convaincre du contraire.

Dans un prochain cours, nous verrons comment faire des mises en forme avancées avec Gutenberg, afin de réussir au pixel près toutes vos maquettes.

On peut donc dire que le WordPress moderne possède donc 2 éditeurs distincts :

  • L’éditeur de contenus (pages et articles), aussi connu sous le nom de Gutenberg ;
  • Et l’éditeur de modèles dans le FSE.

En réalité, c’est le même éditeur derrière, mais avec 2 objectifs et deux configurations différentes en fonction des cas.

Gérer les compositions réutilisables

Et enfin, la dernière rubrique « Compositions » est l’une des grosses nouveautés du Full Site Editing.

Quand je vous dis que l’on peut faire des sites beaucoup plus rapidement avec le FSE, c’est en grande partie grâce à elles !

Alors c’est quoi une composition ? C’est simplement un regroupement de blocs mis dans une disposition particulière, et réutilisable à l’infini sur tout votre site.

Par exemple, cette composition de ma création est un groupe contenant 2 colonnes. À gauche, un titre, un contenu, des boutons, un séparateur, les réseaux sociaux… et à droite, une image et une galerie.

Exemple d'une composition en 2 colonnes avec titre, texte, images, icônes sociales et bouton.
Un exemple composition créée à la main

Ollie propose d’ailleurs plus de 60 compositions qui représentent toutes sortes de sections pour votre site : appels à l’action, grilles de prix, témoignages, mise en avant des fonctionnalités…

Et en plus, elles sont rangées par catégories :

Les compositions dans WordPress. À gauche, la liste des catégories de compositions, à droite la liste des compositions d'une catégorie.
Les compositions de bannières fournies par le thème

D’ici, vous pourrez consulter les compositions et en créer de nouvelles. Dans la suite de la formation, on verra ensuite comment les exporter sous forme de HTML et les intégrer dans le code de notre thème, afin de bien évidemment les versionner avec le reste.

Conseil

Du coup, le but pour le designer n’est plus tellement de penser par « pages » complètes, mais plutôt désormais par « sections ».

D’ailleurs, une composition a pour but d’être également réutilisable sur vos futurs sites ! Toutes vos compositions s’adapteront aux styles (couleurs, espaces, typographie) du site sur lequel elle sont intégrées.

Écrire ses contenus à l’aide des compositions

Voyons maintenant comment cela se passe dans l’éditeur de pages/articles. Pour ajouter une composition, il suffit de cliquer sur le + bleu en haut de l’écran, comme pour ajouter un bloc !

Le bouton + bleu de l'interface de l'éditeur, permettant d'ajouter des blocs et des compositions.
Le menu principal de Gutenberg

La barre latérale de gauche devrait apparaitre, affichant la liste des blocs disponibles. Vous remarquerez en haut un onglet compositions (patterns si votre site est en anglais).

La liste des catégories de compositions apparait à gauche de l'éditeur de blocs.
Le panneau des blocs et compositions

Vous devriez voir en premier lieu un moteur de recherche, en haut, suivi de la liste des catégories de compositions disponibles. En cliquant sur l’une d’elles, un panneau secondaire apparait avec un aperçu des compositions :

Lorsqu'on sélectionne une catégorie, un nouveau panneau apparait et affiche les compositions disponibles.
La liste des compositions de la catégorie Bannière

De là, cliquez sur un aperçu pour intégrer la composition là où se trouve votre curseur dans l’éditeur.

L'éditeur de blocs de WordPress montre le contenu de la publication.
La

Et voilà le travail ! Vous allez maintenant pouvoir modifier les éléments de cette composition simplement en cliquant dessus ! Vous pourrez ainsi modifier l’apparence de ces éléments et/ou leur contenu.

Aparté : Agences, c’est là que tout se joue

Les compositions sont l’opportunité de ne pas réinventer la roue à chaque projet. Vous le savez, les sites ont tous des bases communes en ce qui concerne la mise en page et la disposition des éléments.

À chaque nouveau projet, votre bibliothèque de compositions va grandir, et vous passerez de moins en moins de temps à créer des sections ex-nihilo.

C’est pour cela que je considère que le FSE et son système de compositions est un atout majeur pour votre productivité.

Exporter les réglages de son thème

Une fois tous vos réglages accomplis, vous allez pouvoir les exporter dans votre propre thème. Pour cela, cliquez sur les 3 points tout en haut à droite de l’écran, et sélectionnez Exportation sous la rubrique Outils.

L'interface de l'éditeur de WordPress, montrant le menu d'options ouverts, avec l'élément Exportation en surbrillance.
Le menu permettant d’exporter votre thème et ses réglages

Vous vous retrouvez ensuite avec un fichier .zip contenant tous les fichiers de votre thème. Il vous suffirait alors de le placer dans le dossier wp-content/themes de votre site, et de l’activer depuis l’interface de WordPress.

Ce thème pourrait ensuite être versionné via Git et vous pourrez continuer vos modifications et vos réglages directement depuis les fichiers.

Fenêtre de VS Code montrant quelques lignes du code source généré par l'export de thème de WordPress.
Le thème généré par cet export

Dans cette formation, on va créer notre thème de base de toutes pièces, que l’on réutilisera à chaque fois. On n’aura donc à priori pas besoin de cet export.

À éviter

Par contre, si à l’avenir vous faites des modifications depuis l’éditeur, elles seront enregistrées en base de données, et non pas dans le thème, ce qui peut rendre les futures modifications compliquées pour les développeurs.

On verra justement comment adresser cette problématique dans un prochain cours, intitulé Comment WordPress enregistre les réglage en BDD et comment éviter les pièges (premium).


Bien, vous avez à présent une meilleure vision du Full Site Editing, du moins pour l’instant du côté de l’interface. Cela dit, dans le theme.json, on retrouvera la même architecture, ce qui nous simplifiera pas mal la tâche.

Dans le prochain cours, on va tenter de définir si c’est le bon moment pour vous de passer au FSE, et si tous les chamboulements que ça implique valent vraiment le coup.

2

Questions, réponses et commentaires

  1. Jean-Luc Jean-Luc Robert-Nicoud

    Le 31 octobre 2024

    Bonjour,
    Concernant l’installation d’un site en local avec localwp, moi je vais tenter d’installer un site sur instawp http://www.instawp.com
    J’ai un compte chez eux, et comme je me déplace parfois quelques semaines a l’étranger et que j’aurai besoin d’étudier, cette solution me parait mieux adaptée.
    Est-ce que cela ne posera pas de problème pour la formation ?
    Merci d’avance

    1. Maxime BJ

      Le 31 octobre 2024

      Tu peux tout à fait travailler ton site directement depuis un hébergeur oui, c’est juste plus embettant pour travailler les fichiers localement car il faut les renvoyer à chaque fois via FTP. Mais sinon pas de souci !

Laisser un commentaire