WordPress Gutenberg : Alignfull & alignwide

Activer les alignements wide et full

Dans le fichier function.php de votre thème, vous avez sûrement une fonction pour activer les différents supports souhaités (logo personnalisé, taille de police dans l’éditeur, etc.) ou charger les traductions par exemple. Cette fonction utilise le hook after_setup_theme, comme ci-dessous :

function themeprefix_setup() {
    // Les différentes actions à charger
}
add_action( 'after_setup_theme', 'themeprefix_setup', 10, 2 ); 

Pour activer le support pour les alignements « grande largeur » (wide) et « pleine largeur » (full), il faut ajouter une ligne dans cette fonction :

add_theme_support( 'align-wide' );

Voilà, il ne vous reste plus qu’à enregistrer. Ceci fait, il faut maintenant définir les styles pour que ces alignements fonctionnent. Il existe deux approches différentes. Tout du moins, j’en ai vu deux ; peut-être avez-vous d’autres pistes.

Définir les styles alignwide et alignfull

Ces deux approches fonctionnent mais chacune présente un « problème ». À vous de voir la manière dont vous préférez gérer ces alignements.

En utilisant les viewports

Cette approche, proposée par Bill Erickson entre autres, paraît plus simple au premier abord. Il suffit de définir une taille maximale en largeur pour le contenu du site et d’utiliser l’unité viewport pour les alignements full et wide. Si vous utilisez un conteneur avec une largeur maximale, il faudra également ajouter des marges négatives pour positionner ces éléments correctement. Ainsi, nous aurons quelques chose comme :

.alignfull {
    margin-left: calc((100% - 100vw) / 2);
    width: 100vw;
}

.alignwide {
    margin-left: calc((100% - 80vw) / 2);
    width: 80vw;
}

Pourtant, un problème se pose. Si votre contenu dépasse la hauteur de l’écran, votre navigateur affiche une barre de défilement. L’unité viewport ne prend pas en compte cette scrollbar. Ainsi, avec une largeur définie à 100vw, une barre de défilement horizontale apparaîtra également.

Vous allez peut-être penser : il suffit de retirer la largeur de la scrollbar et c’est réglé ! Eh bien, non. La barre de défilement n’a pas la même largeur suivant le navigateur. Le problème est donc un peu plus complexe.

Pour résoudre ce problème, il faudrait donc détecter quel navigateur est utilisé et retirer la largeur de la scrollbar en conséquence uniquement lorsqu’elle est active. Vous pouvez sans doute utiliser Javascript pour cela. Cette solution n’est pas idéale, mais je ne vois pas comment éviter la barre de défilement horizontale autrement.

Par ailleurs, cette approche n’est pas valable si vous souhaitez utiliser ces styles alors que votre site utilise une barre latérale (sidebar). Il faudra combiner viewports et pourcentages pour y parvenir. Vous pouvez voir un exemple sur ce guide rédigé sur Codepen.

En utilisant les pourcentages

Avec cette approche, nous définissons un conteneur qui fait 100vw. Pour le reste, nous utiliserons les pourcentages comme unité. Nous partons du principe que tout le contenu fait 100 % de la largeur de l’écran. Puis, nous définirons les éléments qui doivent être moins larges.

Cette approche paraît plutôt simple, non ? Oui, mais si vous avez suivi, là aussi il y a un casse-tête. Les alignements gauche (alignleft) et droite (alignright) utilisent float et ont généralement une taille maximale représentant 50 % du conteneur. Cette propriété dépend donc de la taille du conteneur. Si le conteneur fait 100 % de la largeur de l’écran, ils se retrouveront d’un côté ou de l’autre de l’écran. Il n’est plus possible de les centrer comme le reste du contenu. Si nous les définissons de la même manière que le reste du contenu, leur taille maximale sera impactée. Il faudra s’en occuper à part.

Imaginons que le contenu ne doit pas dépasser 1024 pixels de largeur. Pour le moment, nous pouvons donc déclarer :

.site {
    max-width: 100vw;
}

.entry-content > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) {
    margin-left: auto;
    margin-right: auto;
    max-width: 1024px;
}

.alignfull {
    width: 100%;
}

.alignwide {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}

Pour que les alignements gauche et droite se placent correctement, il faudra les définir ainsi :

/* Nous calculons l'espace restant autour du contenu et nous
 * divisons par 2 puisque le contenu est centré. */
.alignleft {
    max-width: calc(1024px / 2);
    margin-left: calc((100% - 1024px) / 2);
}

.alignright {
    max-width: calc(1024px / 2);
    margin-right: calc((100% - 1024px) / 2);
}

Conclusion

D’après moi, l’approche la plus simple à mettre en œuvre est la seconde. Cette méthode est celle utilisée par le thème TwentyTwenty de WordPress et c’est celle que j’ai utilisée dans mon thème Minimalist. Je n’ai pas abordé le cas où le site comporte une barre latérale, mais, avec la deuxième méthode, cela fonctionne à peu de choses près de la même manière.