Formation « Créer des blocs avec Gutenberg »

Blocs larges et full width sur Gutenberg

Lecture : 2 minutes • 9

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.

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 !

Des blocs plus large que le contenu

C’est parce qu’il faut ajouter un paramètre dans votre theme.json pour l’activer :

JSON
theme.json

Mais vous pourriez en faire de même via functions.php :

PHP
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 » :

Une image plus large que le contenu
L’image est plus large que le contenu

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 :

CSS
editor-styles.scss

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).

Conseil

Vous n’avez pas besoin d’ajouter du CSS si vous avez utilisé la technique du theme.json !

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 :

JSON
block.json

Et voilà le travail ! Cette option vous permettra de réaliser des mises en page modernes à la medium.com par exemple.

9

Questions, réponses et commentaires

  1. Thierry

    Le 1 juillet 2019

    Salut Maxime,
    est-ce possible de faire déborder le block paragraphe ?

    1. 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.

      1. Thierry

        Le 3 juillet 2019

        Merci pour ta réponse.

  2. 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.

    1. 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.

  3. 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

    1. 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.

  4. 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 😉

    1. 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.

Laisser un commentaire