Full Site Editing : l'édition complète du site sur WordPress

Full Site Editing sur WordPess

Qu’est-ce que le Full Site Editing ? Pourquoi les équipe de développeurs de WordPress ont-elles adopté l’éditeur Gutenberg ? Quels-sont ses avantages et les précautions à prendre avant d’installer un thème Full Site Editing ? S’il est encore un peu tôt pour proposer une véritable formation au FSE de WordPress, je vous propose ici un tour d’horizon de ce concept pour vous aider peut-être à prendre le train d’une nouvelle expérience utilisateur pour la création de votre site web.

Le projet Full Site Editing (ou FSE) est une étape supplémentaire de l’évolution souhaitée par l’équipe de développeurs de WordPress, visant à fournir une expérience d’édition unifiée basée sur les blocs pour l’ensemble d’un site.

Sur un marché où les autres plateformes dites « créateurs de sites internet » développent des offres toujours plus concurrentielles, le Full Site Editing – ou édition complète du site – propose une expérience utilisateur avancée, permettant aux utilisateurs WordPress de s’affranchir de nombreuses tâches autrefois réservées aux professionnels du web.

Le FSE de WordPress s’appuie sur l’éditeur Gutenberg intégré au CMS depuis sa version 5.0. L’éditeur Gutenberg propose en effet une édition des contenus de WordPress (pages et artriles) basée sur un système de modules de blocs éditoriaux. C’est ce fonctionnement qui est progressivement étendu à l’ensemble des fonctionnalités et de l’édition des sites internet WordPress.

Avec WordPress 6, c ’est aujourd’hui une grande partie de l’interface d’édition du CMS qui bénéficie du concept de blocs Gutenberg, tant pour la construction des articles, que la création de pages statiques ou dynamique, ou encore la création de modèles de création de contenus de site internet.

Full Site Editing : édition complète du site internet

Évolution du Full Site Editing sur WordPress

Le Full Site Editing s’appuie donc sur le projet Gutenberg pour proposer une édition complète du site basée sur les blocs et leur intégration dans des modèles flexibles. Le projet Gutenberg ayant d’abord consisté à fournir à l’éditeur de WordPress des blocks éditoriaux basé sur les composants de la bibliothèque REACT, les développeurs ont ensuite repensé le système d’administration même du CMS afin de le doter de composant structurels comme des en-têtes, le logo du site, le slogan, les pieds de page, les zones de widgets, barre latérale, menus de navigation, etc.

C’est désormais le système de templates (modèles) de pages et d’articles de WordPress, qui bénéficie du concept de blocs, afin de fournir une expérience d’édition totalement unifiée et simplifiée à l’échelle du site (front-office et back office).

Les systèmes de templates WordPress permettant initialement de construire des modèles dynamiques, le FSE bénéficie désormais de blocs dits de « requêtes » tels que les titres de contenus, les résumés d’articles, les images à la une, les métadonnées, les éléments de pagination, les commentaires de posts, etc. permettant de construire le rendu des résultats d’appels en bases de données.

Enfin, le Full Site Editing de WordPress embarque maintenant un système de définition de styles et paramètres globaux) permettant aux développeurs et créateurs de site internet de définir à l’aide d’un simple fichier JSON (theme.json) l’intégralité des fonctionnalités éditoriales et des styles par défaut présentés par leurs thèmes WordPress.

On pourra notamment définir dans ce fichier des polices de caractères ainsi que de des tailles prédéfinies, des panels de couleurs, des largeurs de pages, etc.

Le Full Site Editing de WordPress remplie donc le triple objectif d’ouvrir la création de site internet au grand public, de simplifier le travail des créateurs de site web afin de leur permettre de recentrer leurs efforts sur le contenu et la conception de site, et d’unifier les interfaces front et back office afin de simplifier l’apprentissage de la plateforme et la gestion du site dans le temps.

Anatomie du FSE de WordPress

Le Full Site Editing proposé par WordPress est basé sur quatre types d’éléments permettant de globaliser l’expérience d’édition au niveau du site :

  • Les blocs éditoriaux et paternes de compositions de Gutenberg
    Le passage de WordPress à l’éditeur Gutenberg a permis de proposer à l’utilisateur un ensemble de composants appelés blocs, bénéficiant d’une interface intuitive directement dans la fenêtre d’édition.  Ces unités éditoriales permettent de composer n’importe quel contenu à l’aide d’éléments textuels (titres, paragraphes, citations, etc.) et médias (photos, vidéos, galeries, etc.), mais aussi désormais de les structurer dans le document à l’aide de groupes, de colonnes et autres sections.
    La logique de rendu HTML est intégrées au système sous-jacent de sorte que l’utilisateur WordPress bénéficie d’une expérience d’édition simplifiée, intuitive et immédiate.
  • Les modèles (templates) de pages d’articles et les parties de modèles
    L’édition de modèles et parties de modèles est la seconde étape de l’évolution de WordPress vers le Full Site Editing. Ces modèles viennent remplacer le système classique de templates PHP des thèmes de WordPress. Leur intérêt est de proposer une expérience utilisateur très visuelle, proche de celle de l’édition de contenu mais étendue à toute la structure du document (en-tête, pied de page, menus, barre latérale, etc.) et aux paramètres du site (couleurs, polices, alignement, etc.).
  • Les blocs de modèles de WordPress
    Si les paternes de blocs Gutenberg permettant de réutiliser des compositions à travers le site sont désormais bien connus, les blocs de modèles (ou blocs de thèmes) proposent à l’utilisateur un moyen d’ajouter et d’éditer directement des éléments tels que le logo, le slogan, les menus de navigation au modèles utilisés sur le site WordPress.
    Ce système propose aussi tout un ensemble de blocs dits dynamiques permettant de récupérer des articles et autres contenus spécialisés depuis la base de données, n’importe où sur le site.
  • Les styles globaux et le fichier theme.json comme outils simplifié de paramétrage des thème
    Les styles par défaut d’un site ou d’un thème WordPress étaient préalablement définis via le customizer, principal outil mis à disposition de l’utilisateur WordPress pour lui permettre de personnaliser son thème. Les styles globaux du site affectant les titres, images, couleurs, widgets, et autres fonds de pages, ils sont désormais prédéfinis à l’aide d’un fichier unique qui rendra le travail plus simple pour les développeurs ou les agences web. Ces styles seront ensuite accessibles via un onglet de styles globaux permettant à l’utilisateur de personnaliser son site en quelques clics.  
    Le fichier theme.json permet enfin de définir un ensemble de caractéristiques utiles au développeur ou à l’agence en charge de la création du site, pour proposer des caractéristiques de blocs en accord avec le thème WordPress utilisé.

Tous ces éléments étant directement hérités des blocs de Gutenberg il peut être important rappeler ici ce que sont ces composants pour mieux comprendre le fonctionnement, et comment ils sont désormais étendus à tous les niveaux de la structure du site WordPress.

Blocs de gestion de contenu

Depuis son intégration sur la version 5 de WordPress, Gutenberg s’est progressivement doté d’une bibliothèque dite « native » de blocs de création de document HTML. L’intégration des composant au sein de l’éditeur de WordPress a été une étape fondamentale de son évolution vers le FSE.

Blocs Gutenberg

Ces blocs éditoriaux permettent d’intégrer à la volée n’importe quel titre, paragraphe, bouton, citation, tableau, etc., et on étés progressivement complétés par des plugins externes proposant des onglets, accordéons, compteurs et autres éléments de compositions, généralement utilisés sur les sites internet modernes.

Parmi les blocs d’édition, on retrouve aussi les composants de mise en forme du document, tels que les sections, les groupes et les colonnes.

Les blocs Gutenberg sont constamment enrichis de bibliothèques externes, gratuites ou payantes, permettant d’étendre de façon consistante les possibilités d’édition des contenus WordPress.

Paternes et blocs réutilisables

Le concept de bloc a aussi permis à l’utilisateur de WordPress d’utiliser des paternes (ou compositions) permettant de regrouper un ensemble d’éléments définissant tout ou partie d’une mise en page.

Les compositions ainsi enregistrées sur le site peuvent ensuite être réutilisées au sein de pages, d’articles, ou de n’importe quels modèles de contenus de WordPress.

L’éditeur Gutenberg propose enfin des blocs dits « réutilisables », sorte d’éléments globaux qui retrouveront les mêmes caractéristiques quel que soit l’emplacement du site depuis lequel ils auront été modifiés.  

Les blocs dynamiques, un pas de plus vers le FSE

La volonté de proposer aux utilisateurs une expérience d’édition complète de leur site internet a abouti au développement de blocs de structure, permettant à l’utilisateur béotien de se départir du code habituellement nécessaire pour construire un site. Il peut ainsi désormais composer lui-même la structure globale de ses pages, placer son logo et son slogan, construire ses en-têtes et placer son menu de navigation, créer ses mises en page d’articles, définir les éléments de son pied de page, etc.

Les blocs dynamiques permettent enfin de récupérer et de présenter les titres, résumés, catégories, images et autres contenus des articles ou éléments affichés au sein de la boucle de requête de WordPress.

Bloc de requête, élément clé du Full Site Editing

C’est ce type de blocs d’édition qui permet à WordPress d’intégrer depuis la version 6, un nouveau système de modèles de contenu entièrement éditable par l’utilisateur et anciennement défini au sein de fichiers PHP (les templates).

Modèles et éléments de modèles du Full Site Editing de WordPress

Les modèles de contenus existent sur WordPress depuis longtemps, bien avant l’introduction du Full Site Editing sur la plateforme. La différence majeure introduite par le concept du FSE est la possibilité pour l’utilisateur de prendre la main sur l’architecture du site, là où il revenait jusque-là au développeur ou à l’agence en charge du projet de définir les modèles PHP utilisables sur le site.

Des modèles de contenus éditables

Modèles d'édition du Full Site Editing sur WordPress

L’interface FSE de WordPress propose donc désormais une zone d’administration spécifique pour la gestion des modèles du site. Ici le thème Twenty-Two propose des modèles en FSE pour la page d’accueil, de publication (article ou contenu personnalisé), de page, d’index de blog, de résultat de recherche et d’erreur 404.

Il est intéressant de noter que plusieurs templates peuvent être disponibles pour le même type de contenu, comme par exemple, le modèle de « blog alternatif » du thème cité.

Chaque modèle FSE proposé par le thème est bien sûr totalement modifiable et l’utilisateur WordPress pourra créer autant de modèles que nécessaire ou choisir une solution alternative pour un contenu spécifique.

Les modèles FSE de WordPress utilisent les blocs mais aussi les « éléments de modèle » qui fonctionnent un peu comme des paternes de composition Gutenberg. Ces éléments pourront ainsi être réutilisés et édités dans l’esprit du FSE comme autant de sous modèles à travers les contenus du site WordPress.

Les éléments de modèles du FSE de WordPress

Éléments de modèles de WordPress

Le thème Twenty Twenty-Two propose actuellement quatre éléments de modèles mais les thèmes WordPress pourront là-aussi proposer autant de sous-modèle que nécessaire.

En-tête et pied-de page

L’en-tête (ou header) est partie haute du document HTML (la page web), on y retrouve généralement le logo du site, son slogan, les menus de navigation et parfois une bannière de présentation. L’éditeur FSE de WordPress reprend ici le principe du builder qui prend à son compte la construction de l’ensemble des parties visibles du document.

Le principe identique pour le pied de page (ou footer) qui pourra être construit directement par l’utilisateur, voire, proposer une alternative pour une landing page ou autre contenu spécialisé sur le site internet. À terme, ceci pourrait remettre en cause l’existence même des widgets sur les plateformes WordPress.

Métas de publication et Commentaires

Les élements de métadonnées et de commentaires sont des sous modèles FSE très utiles pour la gestion des contenus dynamiques des sites WordPress. Ils permettent à l’utilisateur WordPress de construire sa page en définissant lui-même les zones de contenus dynamiques et/ou statiques sur chacune de ses publications.

Les « métas de publication » regroupent un ensemble de données liées à un article publié comme le nom et l’avatar de l’auteur, la date de mise en ligne, ses catégories ou toute autre métadonnées complémentaires.

Les commentaires d’un article de blog permettent quant à eux d’enrichir les contenus tout en proposant un haut niveau d’interactivité sur le site.

Du concept de bloc à l’édition complète du site

Comme nous venons de le voir, la direction prise par WordPress depuis quatre ans vise à fournir une expérience d’édition unifiée à travers une interface de gestion du site et de création de pages, totalement basée sur les blocs. Je vous propose donc maintenant de voir comment fonctionne concrètement cette nouvelle interface.

Utilisation de la nouvelle Interface FSE de WordPress

Nous n’allons pas revenir ici sur l’éditeur Gutenberg qui a déjà fait l’objet d’un article complet sur le site, mais nous allons tenter d’apporter quelques précisions sur l’utilisation pratique de l’interface Full Site Editing pour la gestion de site WordPress.

N.B. La page officielle d’information sur les tests du FSE de WordPress précise les prérequis minimums pour bénéficier de ces fonctionnalités :

Au premier abord, l’édition des modèles FSE peut sembler peu intuitive puisque l’accès à l’éditeur (en mode beta) ouvre celui-ci sur la page utilisée pour l’accueil du site (soit : une page de blog ou une page statique). Mais il faut se rappeler que l’éditeur Full Site Editing est avant tout un moyen de construire des modèles que vous pourrez ensuite assigner aux pages et autres contenus WordPress.

Afin d’accéder à la liste complète des modèles du site, il vous faudra cliquer sur l’icône WordPress en haut à gauche de la fenêtre pour accéder au menu de ce nouveau système, d’administration.

Mais ce premier écran d’édition permet d’apprendre à utiliser l’éditeur unifié, non seulement pour construire un modèle de page mais aussi pour paramétrer les styles globaux et les éléments de navigation du site.

Barre supérieure

Barre supérieure de l'éditer de modèle FSE de WordPress

La barre supérieure de l’écran d’édition de modèle FSE ressemble donc comme deux gouttes d’eau à celle de Gutenberg, et pour cause, puisque qu’il permet d’éditer n’importe quel bloc éditorial de la même manière. Nous ne reviendrons donc pas sur les outils de modification de bloc (partie gauche de cette barre), amplement décrits dans notre article précédent.

La barre supérieure propose néanmoins deux autres zones intéressantes :

  • Une liste centrale de raccourcis permettant et de naviguer au sein des éléments du modèle courant et de choisir le modèle à éditeur – le choix du template se fait en revenant sur la page des modèles
  • Un groupe de boutons permettant d’accéder :
    • Aux réglages du modèle ou du bloc sélectionné
    • Aux styles globaux de WordPress
    • Au bloc de navigation utilisé sur le modèle édité (uniquement en mode béta et à condition d’avoir activé la dernière version du plugin Gutenberg (actuellement 14.7.3)

La navigation au sein de l’éditeur et le choix du template étant assez trivial, je vous propose donc de passer directement au concept d’édition des styles globaux du FSE de WordPress.

Réglages styles globaux (coin supérieur droit)

Variations de thème

Onglet d'édition des styles de thème FSE sur WordPress

Les premières options de sélection des styles de WordPress permettent à l’utilisateur de choisir les réglages globaux définissant :

  • La palette des couleurs utilisés pour les éléments de texte, les fonds et arrière-plans, les liens, les titres et les boutons
  • Les réglages de typographie pour ces mêmes éléments (titre, texte, liens et boutons) soient les polices et styles de caractères, les tailles, hauteur de ligne (là encore l’utilisateur pourra choisir son unité parmi (px, em ou rem)
  • Le dimensionnement du site avec notamment :
    • La largeur du conteneur centrale (le contenu centré de la page web)
    • Une largeur étendue
    • Les marges internes de la page
    • L’espacement entre les blocs (aussi appelées gouttières en design web)

Chaque palette de couleur propose généralement 5 couleurs de thème dites « solides » ainsi qu’un jeu de couleurs par défaut.

  1. Base : le fond (la tonalité du thème)
  2. Contraste (en fonction de la couleur de base)
  3. La couleur principale (aussi appelée couleur d’accent sur certains thèmes)
  4. La couleur secondaire (généralement déclinée de la couleur principale)
  5. La couleur ternaire

C’est ici que le concept de Full Site Editing prend tout son sens puisque, comme lors de l’édition des pages et articles, chaque modification est visible en temps réel en temps réel dans l’éditeur.

N.B. La palette de couleurs d’arrière-plan propose aussi un onglet permettant de paramétrer un dégradé en fond de page)

Votre devis en 48 H chrono !

Demandez à être rappelé !

Nous préciserons ensemble votre projet
de vive voix 

N.B. Comme au sein de l’éditeur de bloc, l’utilisateur peut redéfinir ses couleurs utilisant l’unité de son choix (RGB, HSL ou HEX)

Gestion des styles globaux des blocs Gutenberg

L’onglet des styles de l’interface FSE de WordPress permet enfin de définir des réglages de base pour chacun des blocs utilisables par le thème.

Les réglages accessibles correspondent également à la typographie, la couleur et la « mise en page » – c’est à dire les réglages de marges internes et externes

Ce principe de définition de styles de niveau supérieur en amont des réglages de chaque bloc au sein du document, rappelle sans conteste le procédé largement utilisé par les thèmes premium et autres page builders bien connus du marché que sont Elementor, Divi ou Avada, thèmes qui utilisaient jusqu’ici le customizer de WordPress pour proposer ce type de fonctionnalités.

Choix d’un modèle pour le contenu en cours

À titre de rappel, l’utilisateur pourra sélectionner chaque modèle créé ou édité, directement depuis l’éditeur Gutenberg. Cette fonctionnalité n’est ni nouvelle ni propre au Full Site Editing puisqu’elle correspond en tout point au fonctionnement de l’éditeur classique de WordPress.

Choix du modèle d'affichage depuis l'interface de l'éditeur Gutenberg de WordPress

Modification des blocs du modèle

L’interface du FSE de WordPress est entièrement basée sur les blocs, il est donc possible d’en modifier le contenu et l’affichage en changeant leurs directement paramètres.

Les modèles sont souvent présentés sous forme de groupes de blocs, à l’image des paternes de composition de Gutenberg.

L’exemple du bloc de boucle de requête ou de Query Loop

Le modèle de boucle de requête parlera aux développeurs WordPress puisqu’il permet d’appeler les éléments depuis la base de données et d’en modifier le rendu dans les différentes zones du modèle.

L’utilisateur final pourra ainsi utiliser des blocs tels que le bloc de titre, le résumé, l’image à la une, pagination, pour composer le rendu d’une page ou d’un article WordPress.

Chaque bloc interne dispose de ses propres outils de positionnement (outil flèche, drag & drop, etc.) et des réglages déjà disponibles via l’éditeur Gutenberg. Mais comme nous venons de le voir, l’apparence, le style d’affichage de chacun de ces blocs pourra être directement modifié via l’éditeur global des styles individuels de blocs ou l’éditeur du bloc en cours de sélection (depuis l’onglet accessible via le bouton en forme d’engrenage).

Les modèles proposent un système totalement ouvert à l’utilisateur et peuvent être ajoutés ou supprimés à tout moment du modèle.

L’éditeur FSE de WordPress permettra bien évidemment de modifier autant de modèles que nécessaire afin de s’adapter au design de chaque site internet, mais aussi de modifier et d’éditer chaque partie de modèle, appelée zone de modèle ou template-part.

L’utilisateur pourra créer ses propres modèles personnalisés de pages ou d’articles en passant par l’écran d’édition des modèles, pour ensuite l’appliquer au contenu de son choix à l’aide du sélecteur de template dans l’onglet « page » de l’écran d’édition.

Gérer les modèles de contenus WordPress 

L’accès à l’écran affichant la liste des modèles et des template parts se fait via le logo WordPress blanc sur fond noir en haut à gauche de l’éditeur du modèle courant. Les développeurs et autres créateurs de site WordPress noterons la traduction un peu littérale du template « single » par « Seul » 😉.

Créer un modèle WordPress ?

Création de modèle de thème FSE sur WordPress

Le point intéressant ici est le bouton bleu permettant d’ajouter des parties de modèles ou des modèles complets au thème utilisé.

Le système Full Site Editing s’exprime ici en offrant à, l’utilisateur de créer ses modèles à l’aide d’une fonctionnalité ultra simple, l’exemptant d’écrire la moindre ligne de code.

Ce processus somme toute assez simple consiste à proposer à l’utilisateur de nommer son modèle et de le catégoriser à l’aide d’une catégorie existante ou en créant un répertoire personnalisé.

Une fois le Modèle ou le template part créé, on l’éditera ensuite comme n’importe quel contenu sur le site.

Un point sur les éléments de modèles 

Création d'élément de modèle de thème FSE sur WordPress

Les parties de modèles (aussi appelées sous-modèles, éléments de modèles ou template-parts) sont des groupes de blocs réutilisables sur n’importe quel modèle du site internet WordPress.  Toujours dans une optique de Full Site Editing ces éléments de modèles proposent des grands blocs de mises en page, ressemblant en ce sens aux blocs de composition et éditables comme n’importe quels blocs de Gutenberg.

Les éléments de modèle préexistant généralement sur les thèmes de blocs sont :

  • Les en-têtes
  • Les pieds de page
  • Les éléments dynamiques tels que
  • Les groupes de métadonnées de publications
  • Les sections d’affichage et de formulaire de commentaires
  • Les blocs dynamiques de contenus appelés depuis la base de données tels que :
  • Le bloc de titre de publication (article ou post personnalisé)
  • Le bloc d’image mise en avant (ou image à la une)
  • Le bloc d’extrait de publication
  • Les blocs de métadonnées telles que :
    • L’auteur et son avatar
    • Une biographie,
    • La date de l’article
    • Les catégories de l’article
    • Etc.

L’utilisateur WordPress pourra donc créer autant de sous-modèles (ou éléments de modèle) que nécessaire pour permettre à son site de répondre à ses objectifs.

Notez enfin qu’au sein de l’éditeur de modèles, tout groupe de blocs sélectionné par l’utilisateur pourra être transformé en partie de modèle via son menu contextuel pour être réutilisé partout sur le site WordPress.

Ce modèle Full Site Editing démocratise donc finalement certains processus de développement généralement appliqués pour les applications web ou mobiles en donnant à l’utilisateur la possibilité de modifier la structure de chaque élément, la liste des blocs contenus ou les styles appliqués à chaque bloc utilisé par les « template parts ».

Mais le principe du Full Site Editing implique bien évidemment aussi des changements pour les développeurs et les agences web. Le principe de FSE reposant autant sur le concept de bloc que sur l’expérience utilisateur, une nouvelle interface de paramétrage du thème est maintenant proposée aux créateurs de thèmes WordPress pour leur permettre de les identifier comme thème de blocs (par opposition aux thèmes « classiques ») et de définir des styles et modèles par défaut pour l’utilisateur final.

Theme.json : le fichier de configuration des thèmes compatibles Full Site Editing

Fichier theme.json de thème compatible Full Site Editing sur WordPress

Depuis sa version 5.8, WordPress propose aux développeurs et designers travaillant sur la nouvelle plateforme WordPress un nouveau système de configuration des thèmes de blocs. C’est en effet désormais un unique fichier theme.json qui permet la déclaration des paramètres et de styles globaux du thème FSE.

Les réglages de l’éditeur de bloc permettent notamment de définir quelles options de personnalisations seront accessibles à l’utilisateur, les couleurs, polices, styles par défaut et dimensions du thème courant.

Ce fichier de configuration est construit en sections permettant l’activation ou la prédéfinition des paramètres et des modèles de blocs.

Structure du fichier theme.json

La structure json du fichier propose en premier lieu les styles de niveau supérieurs (qui viendront définir les CSS pour le body du site WordPress. On trouvera généralement plus bas dans le fichier les styles applicables à chaque bloc.

Le paramétrage complet du thème compatible FSE dépasse quelque peu les contours de cet article mais nous allons néanmoins passer en revue ses éléments les plus importants.

La section des paramètres

Les sous-sections de l’entrée « settings » du fichier theme.json sont utilisées pour définir  des paramètres fondamentaux de l’éditeur de blocs tels que :

  • Les palettes de couleurs, les dégradés, les duotones.
  • Des valeurs personnalisées des marges du site et les unités accessibles
  • Des familles et tailles de polices personnalisées ainsi que les hauteurs de lignes
  • Des valeurs bordures
  • Les unités de marges accessibles (« px », « en », « rem », « vh », « vw »)
  • Les valeurs par défaut des polices de caractères, leurs styles ainsi que des raccourcis des tailles proposées via l’éditeur
  • Les dimensions du site, par défaut et en mode étendu (contentSize et wideSize

La section des styles

Une section « styles » définit quant à elle des valeurs homogènes pour le rendu du thème avec notamment :

  • Les valeurs de typographie, d’espacement, de couleur et de bordure de chaque bloc dynamique utilisé sur le thème.
  • Les couleurs par défaut d’arrière-plan et de texte
  • Les valeurs de typographie et de couleur des éléments de titres et de liens présentés sur le thème WordPress
  • Les valeurs par défaut de la typographie à l’échelle du site (famille, hauteur de ligne et taille de police)
  • Les valeurs par défaut des marges internes et des gouttières des bloc de groupe
Un mot sur la configuration de la typographie

S’il est possible de définir des valeurs par défaut assignés aux blocs dynamiques et aux différents blocs éditoriaux de l’éditeur, une section « Typography » permet de d’activer des options de typographie telles que le style, la taille et la graisse de police par défaut , l’utilisation de lettrine, l’espacement ou encore un tableau de tailles personnalisées (customFontSize).

N.B. On notera que ces réglages se traduisent directement dans le rendu (le balisage) HTML des pages de WordPress.

Par exemple, la définition d’une taille de police dite « Big » dans le fichier theme.json

Sera effectuée comme suit :

« fontSizes » : [

            {

                        « slug » : « big »,

                        « size » : 32,

                        « name » : « Big »

            }

]

Cette définition génèrera d’une part la définition de variable CSS dans le fichier global des styles :

body {

            --wp—preset—font-size—big: 32;

}

D’autre part, une règle CSS prendra en charge l’application éventuelle du style Big à un bloc de l’éditeur Gutenberg :

.has-big-font-size { font-size : 32; }

Sections des modèles personnalisés et éléments de modèle

Les modèles et parties de modèles que nous avons vu précédemment sont référencés au sein des sections « customTemplates » et « templateParts » du fichier JSON du thème compatible Full Site Editing.

À titre d’exemple, on définira chaque modèle présent dans le thème à l’aide d’un nom (un slug), un titre et un tableau des types de posts auxquels le template pourra s’appliquer :

« customTemplates » : [

            {

                        « name » : « blank »,

                        « title » : « Blank Page”,

                        “postTypes” : [

                                   “page”, “post”

                        ]

            }

]

Section des parties ou zones de modèles

La section templateParts du fichier theme.json permet de définir les éléments de modèles que nous avons évoqué précédemment. Chaque template part, comme les en-têtes ou les pieds de page, est défini de façon rudimentaire à l’aide de trois propriétés : un nom (un slug), un titre et une zone d’intégration par défaut :

« template-parts » : [

            {

« name » : « header-jst-special »,

« title » : « En-tête JST Spéciale »,

« area » : « header »

            }

}

N.B. L’auteur du thème WordPress devra ensuite intégrer une version HTML des modèles et sous-modèles définis, au sein du répertoire « parts » et « templates » du thème en question.

L’utilisation du fichier theme.json au sein des thèmes compatibles FSE sort du cadre de notre article. Je vous proposerai donc très bientôt sur le site un tutoriel bien plus complet avec des exemples concrets de paramétrage pour un thème WordPress sur mesure.

Thèmes WordPress gratuits basés sur les blocs

Thèmes WordPress gratuits basés sur les blocs

Il existe aujourd’hui un certain nombre de thèmes gratuits compatibles Full Site Editing. Certains de ces thèmes WordPress qui permettent de réaliser des sites déjà très intéressants.

Voici une liste de thème que vous pourriez tester sur une installation locale afin de vous familiariser avec le Full Site Editing de WordPress :

  • Blockbase est un petit thème gratuit proposé par Automatic (l’entité en charge de de WordPress, Tumblr, WooCommerce, ect.) – une première alternative à Twenty twenty-two ou twenty-three.
  • Frost est un thème Full Site Editing minimaliste et très design – une bonne option pour développer sa créativité sur le FSE
  • Kadence est un thème proposant une large bibliothèque de blocs. Une version gratuite est accessible en « starter » sur le site kadencewp

Quid des builders et des thèmes prémium ?

Builder Elementor basé sur les blocs

Si l’édition des sites WordPress via les blocs Gutenberg et les fonctionnalités de Full Site Editing est déjà accessible sur la plateforme, on dénote malgré tout une certaine « lenteur » à l’adoption généralisée du système par les différents page builders et autres de thèmes premium.

Ceci n’a finalement rien de très surprenant puisque, rappelons-le, vous aurez beau installer un thème compatibles Full Site Editing, l’éditeur de thème vous sera proposé en mode béta et nombre de fonctionnalités ne vous seront proposées qu’après avoir installé et activé la dernière version de plugin Gutenberg.

Certains thèmes premium et constructeurs de pages comme Elementor proposent déjà un portage sur Gutenberg, ou, à l’instar de Divi, annoncent déjà la sortie d’une version pleinement compatible FSE courant 2023.

Mais n’oublions pas que l’évolution des plateformes ne se résume pas à leur avancée technologique mais doit aussi tenir compte de leur niveau d’utilisation au sein de leur communauté respective. Divi, Elementor, et Avada ou Visual Composer restent à ce jour plus flexibles et puissants que Gutenberg, ils ont encore de bons jours devant eux et ils sauront sans nul doute conserver leur écosystème tout en tirant le meilleur parti de Gutenberg et du Full Site Editing de WordPress.

le Full Site Editing, le temps il est encore temps de parfaire votre formation

L’évolution de WordPress vers le Full Site Editing est sans nul doute un voyage sans retour, et si les offres de thèmes compatibles sont encore trop peu nombreuses, les éditeurs de thèmes et de builders choisissent progressivement la conversion vers le système basé sur les blocs pour continuer de proposer aux utilisateurs et aux créateurs de sites une solution pérenne sur cette plateforme.

Nous avons donc encore le temps de parfaire notre formation sur la plateforme afin de développer dans un très proche avenir des sites riches, simples et performants, résolument tournés vers notre client, soit l’utilisateur final.

Quelques Ressources FSE Gutenberg et React

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *