Formation « Créer des blocs avec Gutenberg »

Blocs larges et full width sur Gutenberg

Lecture : 2 minutes • 5

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.

La formation en vidéo

Suivez la formation en vidéo !

Pour visionner cette vidéo vous devez acheter cette formation.
Déjà achetée ? Connectez-vous !

Acheter Connexion

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 functions.php pour l’activer :

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 sur un thème sur mesure il faudra rajouter un peu de CSS pour que ça fonctionne, par exemple :

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

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’utiliser le composant BlockAlignmentToolbar.  Dans cette formation on a vu son cousin : AlignmentToolbar qui était dédié à l’alignement des textes seulement.

JSX
index.js

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

5

Questions, réponses et commentaires

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

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

Laisser un commentaire