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 toute la largeur, à moins d’activer un bien mystérieux paramètre qui s’appelle usePaddingsAwareAlignment.
Sommaire du cours
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.
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 largeur maximale du site est 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.
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 :
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éfini 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…
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 :
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.
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 :
Lorsque vous sélectionnez la valeur « Pleine largeur » voici ce qu’il se passe :
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 :
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 :
Et maintenant, ça devrait fonctionner, en choisissant « pleine largeur », le bloc va occuper tout l’espace à l’écran.
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.
Je vous recommande donc de mettre cette propriété sur true pour tous vos sites afin de réussir vos designs. Soyez aware !
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 :
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 :
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 :
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 :
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.
Et si vous n’avez besoin d’aucune de ces options, mettez allowEditing à false, et le tour est joué.
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