Block : components

Ce block permet de créer une composition de sous-blocks fonctionnels, les components, répétables, modifiables à volonté. Ces components peuvent être similaires ou tous différents. Ils peuvent être agencés de plusieurs manières.

Leurs fonctionnalités sont variées : simple contenu, menu, accordéon, slider, graphe de données, etc. Ils ne sont pas détaillés ici, mais dans la section qui leur est dédiée.

Ce block a initialement été développé pour pallier à une fonctionnalité trop limité de Gutenberg, celle des innerblock. Gutenberg permet en effet d’insérer un block dans un autre, mais ce block inséré est unique.

Contenu

  • Title (string – facultatif) : le titre général du block
  • Components (groupe répétable) : la liste des components composant ce block.

Chaque component peut être défini par :

  • Component title (string) : son titre, non affiché mais utile pour la gestion de ce block
  • Title (string) : le titre affiché du commponent
  • Width (choix) : la largeur du component en version desktop
  • Width (sm) (choix) : la largeur du component en version mobiles
  • Type : le type de component désiré. La liste et les détails de chacun d’eux se trouvent ici.

Réglages

  • Components class(es) (string) : les classes css facultatives à attribuer à chacun des components
  • Display mode (choix) : afficher les components sous forme de grille Bootstrap classique (en lignes où tous les items ont la même hauteur) ou en colonnes masonry (en colonnes de la même largeur, mais dans ce cas les components ont des hauteurs varibles)
  • Bootstrap mode options (groupe) : définit les options en cas d’affichage de type grille Bootstrap
    1 – No gutters ? (choix) : si oui, l’espacement entre horizontal entre les component est supprimé
    2 – Row class(es) (string) : affecteur une ou plusieurs classes css à la grille courante
  • Columns mode options (groupe) : définit les options en cas d’affichage de type grille columns masonry
    1 – Numbers of columns (lg, md et sm) (choix) : définit le nombre de colonnes respectivement en résolution desktop, tablettes et mobiles
    2 – Container class (string) : affecter une ou plusieurs classes css au conteneur de ces colonnes
    3 – Columns gap (nombre) : définit l’espacement entre chaque colonnes