Plugin Gutenberg Advanced Layout

Installation

Pour l’installation du plugin, veuillez vous référer au tutoriel « Installer un plugin ».

Columns

Ce bloc permet de créer des systèmes de colonnes flexibles:

Ajuster la taille de vos colonnes facilement.
Choisir des dimensions différentes en fonction de la taille de l’écran.
Aligner les contenus verticalement et horizontalement.
Choisir les espaces entre les colonnes (verticalement et horizontalement).

Ce bloc est un sous-bloc du bloc Layout.

Column

Le bloc « Column » est le seul enfant possible du bloc « Columns ». Il peut contenir tous les blocs définis.

Pour chaque colonne, vous pouvez:

Afficher ou non la colonne (pratique si on veut utiliser les colonnes pour remplacer les marges)
Largeur de la colonne, différentes unités sont disponibles (en fonction de votre thème)
Ordre, pour inverser l’ordre de deux colonnes

Grid

Le bloc « Grid » permet de disposer des éléments sous forme d’une grille.

Ce bloc peut contenir le bloc « cell ».

Dans les réglages, on peut définir le nombre de colonnes (maximum 12) et de lignes (maximum 12) de la grille (en fonction de la taille de l’écran si on veut).

Dans la section « Dimensions », vous pouvez modifier l’espacement (gap) entre les blocs enfants.

Ce bloc est un sous-bloc du bloc Layout.

Cell

Le bloc « Cell »est le seul enfant possible du bloc « Grid ». Il peut contenir tous les blocs définis.

Pour chaque cellule, vous pouvez choisir:

La colonne de départ
La largeur de la cellule
La ligne de départ
La hauteur de la cellule
Ordre de superposition (z-index)
Une hauteur minimum

Personnalisation

Par défaut, trois tailles d’écrans sont proposés:

PHP

return [
	"lg"=>["label"=>__("Desktop"),"max"=>""],
    "md"=>["label"=>__("Tablet"),"max"=>"991"],
    "sm"=>["label"=>__("Mobile"),"max"=>"767","autoStack"=>true],
];

Vous pouvez modifier les tailles d’écrans pour gérer le responsive.

Les changements s’appliqueront sur tous les blocs du site.

La taille « lg » défini avec « Gutenberg Advanced Layout » est réservé, vous pouvez uniquement modifier son labelle.

La taille « sm » (mobile) est défini sur « autoStack » pour forcer l’empilement par défaut des colonnes et cellules.

Pour ajouter une nouvelle taille d’écran, copier le code suivant dans le fichier functions.php de votre thème enfant:

PHP

add_filter("habefast_gutenberg_advanced_layout_breakpoints",function($array){
	$array["xl"] = ["label"=>__("Laptop"),"max"=>"1400"];
	return $array;
},11);

Pour supprimer une taille d’écran:

PHP

add_filter("habefast_gutenberg_advanced_layout_breakpoints",function($array){
	if(isset($array["md"])){
		unset($array["md"]);
	}
	return $array;
},11);

Pour modifier une taille d’écran:

PHP

add_filter("habefast_gutenberg_advanced_layout_breakpoints",function($array){
	if(isset($array["md"])){
		$array["md"]["max"] = "1200";
	}
	return $array;
},11);

Pour forcer l’empilement sur une taille d’écran:

PHP

add_filter("habefast_gutenberg_advanced_layout_breakpoints",function($array){
	if(isset($array["md"])){
		$array["md"]["autoStack"] = true;
	}
	return $array;
},11);