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

Theme.json : largeur du site et useRootPaddingAwareAlignments

Lecture : 5 minutes • 0

L’un des premiers réglages que l’on va faire dans le theme.json concernera la largeur du site. Mais on remarquera que nos sections ne prendront pas toute la largeur, à moins d’activer un bien mystérieux paramètre qui s’appelle usePaddingsAwareAlignment.

On va commencer à remplir notre theme.json en commençant par la section de mise en page nommée layout. Et il y a deux étapes qui nous attendent :

  • On va tout d’abord configurer les différentes largeurs de notre site ;
  • Puis activer une option pour que nos sections occupent toute la largeur de l’écran ;

Cette fois, on va se concentrer sur la rubrique settings > layout, ainsi que sur une propriété au nom bien singulier : useRootPaddingAwareAlignments.

JSON
theme.json

Il est essentiel de bien comprendre ces configurations, sinon vous aurez des soucis par la suite pour construire votre site. Mais vous allez voir, ce n’est pas très compliqué une fois qu’on a compris la logique de Gutenberg !

Configurer la largeur du site

Quelle est la largeur d’un site ? Avant l’époque du responsive web design, la réponse était simple, c’était 960px, car c’était une valeur qui se divisait facilement pour faire des colonnes.

Aujourd’hui, avec le responsive web design, un site n’a pas de largeur prédéfinie : il est fluide. Cela dit, on va tout de même indiquer une largeur maximale.

Les sections s’étireront à l’infini, mais le contenu à l’intérieur aura une limite afin de garantir une bonne lisibilité.

Prenons par exemple le site de Gravity Forms. Quand je regarde avec l’inspecteur du navigateur, j’observe que la largeur maximale du site est de 1140px.

Les pages de présentation du site de Gravity Forms ont une largeur de 1140px.
Les pages de présentation ont une largeur de 1140px

Mais lorsque je consulte les articles du blog, le contenu est plus étroit, afin de respecter les règles typographiques en terme de lisibilité. Ici j’observe une largeur de 880px seulement.

Les pages de contenu comme les articles du blog ont une largeur plus étroite, de 880px.
Les articles du blog ont une largeur de 880px

C’est le même constat lorsque je consulte des pages classiques comme les mentions légales ou les conditions générales de vente.

Et ça tombe bien, car WordPress vous permet non pas de définir une largeur, mais 2 largeurs de contenu :

JSON
theme.json

Configurez :

  • contentSize : pour vos contenus (pages simples, articles du blog) ;
  • widesize : pour toutes vos mises en pages avancées et landing pages.

Il est généralement conseillé de choisir votre contentsize afin qu’une ligne de texte contienne entre 45 et 80 caractères. Cela va bien sûr dépendre également de la taille de la police que vous aurez définie pour les textes.

Dans l’éditeur, vous aurez accès aux largeurs dans le menu « Alignement », que ce soit sur les paragraphes, les images, les groupes…

La barre d'outil d'alignement des blocs dans Gutenberg. 3 options sont proposées : largeur standard, grande et pleine largeur.
Les options d’alignement des blocs

Et comme vous pouvez le voir, on a 3 largeurs possibles : les 2 que l’on a configurées précédemment, et la pleine largeur.

Dans Gutenberg, chaque bloc est indépendant des autres, vous pourrez alors assigner des largeurs différentes pour chacun d’entre-eux :

Aperçu de l'éditeur Gutenberg dans lequel on voit 2 paragraphes, puis une image plus large.
L’image est plus large que le contenu

C’est d’ailleurs ce que je fais dans mes cours sur ce site : j’affiche certaines images en plus large et parfois même les snippets de code quand j’ai besoin de plus d’espace afin d’éviter les retours à la ligne.

Conseil

Utilisez la largeur normale pour vos contenus, et la largeur étendue pour vos mises en pages avancées.

La pleine largeur pour les sections

On vient de voir comment utiliser les deux premières largeurs, et maintenant on va se concentrer sur l’option de pleine largeur.

Comme on l’a vu sur le cours à propos de la mise en forme avancée avec Gutenberg, dans un design moderne on va avoir besoin de créer des sections qui occuperont toute la largeur disponible.

Sauf qu’on va avoir un petit souci.

Lorsque vous insérez un bloc « Groupe », vous pouvez le mettre en pleine largeur afin que sa couleur de fond occupe tout l’écran.

Pour cela vous pouvez utiliser la barre d’outil au-dessus du bloc pour définir la largeur :

La barre d'outil d'alignement des blocs dans Gutenberg. 3 options sont proposées : largeur standard, grande et pleine largeur.
Les options d’alignement des blocs

Lorsque vous sélectionnez la valeur « Pleine largeur » voici ce qu’il se passe :

Par défaut dans Gutenberg, un groupe en pleine largeur ne prend pas toute la largeur : des bandes blanches persistent sur les côtés.
La section n’occupe pas toute la largeur : il reste des bandes blanches

Il reste des bandes blanches sur les côtés ! Ce n’est pas ce que l’on veut, mais en réalité c’est normal.

WordPress pose des marges de sécurité sur les côtés pour le responsive web design, afin que les textes ne collent pas aux bords de l’écran.

On peut l’observer dans le CSS généré par la page, via l’inspecteur du navigateur :

CSS

On va d’ailleurs personnaliser cet espace de sécurité un peu plus tard. Mais du coup ça n’arrange pas nos affaires lorsqu’il s’agit de sections pleines largeurs.

Heureusement pour nous, WordPress a prévu le coup grâce à la propriété qui s’appelle useRootPaddingAwareAlignments.

Cette propriété indique à WordPress que les groupes pleine largeur n’ont pas besoin de marges de sécurité. Pour l’activer, passez-la simplement à true :

JSON
theme.json

Et maintenant, ça devrait fonctionner, en choisissant « pleine largeur », le bloc va occuper tout l’espace à l’écran.

La section prend cette fois bien toute la largeur de l'éditeur, sans bandes blanches sur les côtés.
Le groupe prend désormais toute la largeur

En coulisses, WordPress va adapter le CSS en ajoutant la classe .has-global-padding aux groupes. C’est elle qui va déclarer les marges internes tandis que le body n’en aura plus.

CSS

Je vous recommande donc de mettre cette propriété sur true pour tous vos sites afin de réussir vos designs. Soyez aware !

Conseil

Pour faire des sections pleines largeurs colorées, comme on le fait systématiquement dans les designs modernes, vous devez impérativement activer useRootPaddingAwareAlignments.

De plus, le contenu à l’intérieur du bloc restera limité à la largeur standard que l’on a définie.

De là, rien ne vous empêche d’utiliser à l’intérieur la largeur étendue pour vos mises en pages. Voici un exemple avec des colonnes :

3 colonnes sur une largeur standard, comparées à 3 colonnes sur une largeur étendue, offrant plus de place à leur contenu.
La largeur étendue est plus adaptée pour les colonnes

Comme on peut le voir, lorsque vous utilisez des colonnes, c’est mieux de les mettre en largeur étendue.

Les options spécifiques de largeur pour les groupes

Lorsque vous insérez un bloc groupe dans l’éditeur, vous allez avoir des options de mise en page spécifiques qui apparaissent :

Panneau des réglages de mise en page pour le bloc groupe dans Gutenberg.
Les options de mise en page du groupe

La première option est intéressante, elle est activée par défaut et permet d’indiquer que l’on souhaite que le contenu à l’intérieur soit bien contraint en largeur.

En la désactivant, on peut voir que le contenu va occuper toute la largeur du bloc :

L'option « Les blocs intérieurs utilisent la largeur du contenu » activée pour un groupe, et désactivée pour l'autre, montrant la différence de largeur de la section.
Le contenu en pleine largeur à l’intérieur du groupe

Cette option peut être pratique pour les design où vous souhaitez mettre du contenu sur toute la largeur d’une section.

La seconde option vous permet de surcharger les largeurs standard et étendues uniquement pour les éléments enfants de ce bloc.

Ces deux options vous permettront de gérer des cas particuliers. Mais bien sûr, si vous ne voulez pas rajouter de complexité inutilement dans l’éditeur, on va avoir des propriétés pour désactiver ces menus depuis le theme.json :

JSON
theme.json

Voici leur rôle :

  • allowCustomContentAndWideSize : désactive la possibilité de définir des largeurs standard et étendues personnalisées pour ce groupe ;
  • allowEditing : désactive toutes les options de mise en page.

Donc si vous voulez uniquement conserver l’interrupteur pour mettre le contenu en pleine largeur, désactivez uniquement les largeurs personnalisées.

Les réglages de mise en page avec la personnalisation des largeurs (à gauche) et sans à droite.
Les réglages de mise en page avec et sans les largeurs personnalisées

Et si vous n’avez besoin d’aucune de ces options, mettez allowEditing à false, et le tour est joué.

Conseil

Désactivez ces options dans le cas où votre design respecte toujours les largeurs standard ou étendues.


Pour résumer, on a accès à 3 largeurs différentes dans Gutenberg :

  • La largeur standard pour vos contenus ;
  • La largeur étendue pour vos mises en page ;
  • La pleine largeur, pour vos sections.

C’est ce qui va constituer la base de vos futures mises en page et vous permettra normalement de réaliser n’importe quel type de design moderne.

Dans le prochain cours, on va se concentrer sur un autre aspect du theme.json : la configuration de la palette de couleurs, des dégradés, duotone…

0

Questions, réponses et commentaires

Laisser un commentaire