Avec Gutenberg il est possible de faire déborder des contenus en dehors de la zone d’édition, pour les afficher plus large ou même en pleine largeur. Mais pour cela il faut préalablement faire une petite configuration dans le functions.php de votre thème.
Sommaire du cours
Activer les blocs larges et plein écran
Si vous avez essayé l’article de démo fourni avec Gutenberg, vous avez pu voir des images et galeries plus larges que le contenu initial et même certains blocs prenant toute la largeur. Mais lorsque vous avez essayé de reproduire le phénomène, impossible !
C’est parce qu’il faut ajouter un paramètre dans votre theme.json
pour l’activer :
Mais vous pourriez en faire de même via functions.php
:
C’est le même hook utilisé pour les palettes de couleurs personnalisées.
Dans l’éditeur, vous devriez maintenant voir 2 nouvelles options d’alignement : large et pleine largeur « full width » :
Cette option n’est pas activée par défaut car tous les thèmes ne prennent pas en compte ces styles. D’ailleurs si vous avez utilisé la méthode add_theme_support()
, il faudra rajouter un peu de CSS pour que ça fonctionne, par exemple :
Ce CSS est donné à titre indicatif et devra être adapté en fonction des spécificité de votre mise en page. Pour plus d’informations sur le positionnement pleine largeur à base d’unités CSS viewport, je vous conseille de jeter un oeil à l’excellent tutoriel de CSS Tricks.
Il faudra aussi penser à adapter la taille de l’image (en prendre une plus grande).
Afficher les boutons de pleine largeur dans vos blocs
Cette fonction est également disponible lorsque vous créez vos propres blocs. Pour cela il suffit d’activer l’alignement dans supports dans votre block.json
:
Et voilà le travail ! Cette option vous permettra de réaliser des mises en page modernes à la medium.com par exemple.
Thierry
Le 1 juillet 2019
Salut Maxime,
est-ce possible de faire déborder le block paragraphe ?
Maxime BJ
Le 1 juillet 2019
Héas nativement il ne propose pas cette option. Si tu cibles directement les paragraphes en CSS ça risque en plus de causer des problèmes. Le débordement a justement été fait pour faire déborder des éléments par rapport aux paragraphes, si eux aussi débordent, la manipulation perd de l’intérêt.
Thierry
Le 3 juillet 2019
Merci pour ta réponse.
Sarah
Le 5 décembre 2019
Bonjour Maxime,
J’ai un peu la même question que Thierry, sauf que ce n’est pas le paragraphe que je souhaite faire déborder mais la section qui le contient et à laquelle j’aimerais lui affecter une couleur qui prendrait la largeur de mon site.
Le paragraphe doit rester aligné aux être éléments dans un conteneur.
Maxime BJ
Le 7 décembre 2019
Alors depuis WP 5.3 tu as le bloc groupe qui permet de faire comme une section : tu peux appliquer une couleur de fond qui va aux bords, mais le contenu reste bien dans le conteneur.
Tsu
Le 29 décembre 2020
Bonjour,
J’ai suivi les indications comme le tutoriel mais quand j’actualisais ma page la section ou il devrait faire un full-width il ne réalise pas le changer, par contre sur l’éditeur il me s’affiche correctement, autre chose, il me met une erreur sur return is not function
Maxime BJ
Le 29 décembre 2020
Le return ne se met pas à la racine du fichier mais dans la méthode edit du bloc correspondant. Je suis en train de mettre à jour la formation ainsi que les exemples. Je mettrais à jour ce cours d’ici quelques jours.
AlexandreBESNIER
Le 19 janvier 2021
Bonjour,
Je cherche à faire fonctionner ce code pour mon blog mais j’ai un soucis : les mesures en « vw » ne tiennent à priori pas compte de la largeur de l’ascenseur de droite dans pas mal de navigateurs (dont Chrome ou Firefox) ce qui fait que l’image (ou autre element) mis en plein écran dépasse toujours légèrement. S’affiche alors la très laide barre de défilement verticale en bas de page.
Vous n’avez pas rencontré ce problème de barre verticale?
Il faudrait sans doute définir une variable qui calcule la largeur de l’ascenseur (différente dans chaque navigateur) et retire cette largeur du calcul de la marge de droite, mais je n’ai pas encore trouvé la bonne manière de le faire. Si vous avez des idées je suis preneur 😉
Maxime BJ
Le 19 janvier 2021
En effet, j’avais oublié de prendre en compte la scrollbar, comme il n’y en a pas sur Mac (du moins, elle apparait en surimpression). Il faut simplement ajouter
max-width:100%;
pour que ça fonctionne. Ca ne devrait plus déborder comme ça.