Formation « Créer des blocs avec Gutenberg »

Blocs larges et full width sur Gutenberg

Lecture : 2 minutes • 0

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.

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
<?php 
function mytheme_setup_theme_supported_features() {

	// Format large
	add_theme_support( 'align-wide' );

}
add_action( 'after_setup_theme', 'mytheme_setup_theme_supported_features' );

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
.alignwide {
  	margin-left: -50px;
  	margin-right: -50px;
}

.alignfull {
	margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

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

Utiliser la pleine largeur dans vos propres 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.

JS
index.js
// Pensez à charger le composant
const {
	registerBlockType,
	BlockControls,
	BlockAlignmentToolbar,
} = wp.blocks

// ... 

// Dans le render de la méthode edit

<BlockControls>
    <AlignmentToolbar ... />
      
  	<BlockAlignmentToolbar
		value={ props.attributes.alignment }
		onChange={ alignment => props.setAttributes( { alignment: alignment } ) }
	/>
</BlockControls>

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

0

Questions, réponses et commentaires

    Laisser un commentaire