logo

[functions + PHP] Ajouter le support pour l’alignement grande et pleine largeur des blocs Gutenberg dans wordpress

Accueil Wordpress [functions + PHP] Ajouter le support pour l’alignement grande et pleine largeur des blocs Gutenberg dans wordpress

Si vous travaillez avec un thème de votre cru ou un thème qui n’offre pas un support complet des blocs Gutenberg, cette astuce vous permettra d’ajouter deux types d’alignements à vos blocs : grande largeur et pleine largeur. Ils sont particulièrement utiles pour effectuer des mises en formes qui nécessitent de sortir du conteneur de texte. Une fois activés, ils seront disponibles pour les blocs suivants :

  • Bannière
  • Image
  • Gallerie
  • Vidéo
  • Citation en exergue
  • Tableau
  • Colonnes
  • Blocs de contenu embarqué

Dans l’éditeur, ils se présentent comme ci-dessous :

Pleine largeur

Pleine largeur

Grande largeur

Grande largeur

Voici donc le code à ajouter dans votre fichier functions.php :

// Ajouter le support pour l'alignement grande et pleine largeur des blocs Gutenberg
function mytheme_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Maintenant que le support est assuré, vous devez faire en sorte que la mise en forme soit prise en compte visuellement, pour cela, ajoutez dans votre style.css

/* Grande largeur Gutenberg */
.entry-content .alignwide {
  margin-left  : -80px; /* à ajuster selon vos préférences */
  margin-right : -80px; /* à ajuster selon vos préférences */
}
/* Pleine largeur Gutenberg */
.entry-content .alignfull {
  margin-left  : calc( -100vw / 2 + 100% / 2 );
  margin-right : calc( -100vw / 2 + 100% / 2 );
  max-width    : 100vw;
}
.alignfull img {
  width: 100vw;
}

Selon le thème que vous utilisez et la valeur que vous avez choisie, il est possible que l’alignement grande largeur sorte du cadre lorsque vous réduisez votre fenêtre. Si c’est le cas, ajoutez une media query à la suite de votre CSS comme ci-dessous :

/* l'alignement grande largeur se comporte comme le pleine largeur en dessous de 768px */
@media screen and (max-width: 768px) {
  .content .alignwide {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
  }
}

Une idée ? Partagez-la !

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *