Dans ce tuto Drupal nous allons créer un bloc non configurable, c'est à dire, un bloc qui ne pourra être modifié grâce à l’interface graphique de Drupal.
Les étapes
- Créer un fichier src/Plugin/Block/nombloc.php à la racine du module qui déclare le bloc à l’aide des annotations
- Créer dans ce fichier une classe qui étend la classe BlocBase et qui contient une méthode build() pour appeler un thème
- Déclarer le thème et indiquer le gabarit à utiliser dans la fonction « nomtheme_theme » du fichier « nomtheme.module »
- Créer le gabarit
Exemple: un bloc non configurable avec un bouton de partage Facebook
Dans cet exemple nous allons créer un bloc qui permet d’ajouter un bouton de partage Facebook de la page où le site est situé. Le bloc s’appellera « blockboutonpartage ». Nous allons considérer que vous avez déjà un squelette d'un module appelé premiermo. Vous pouvez utiliser la commande drush gen module pour créer ce squelette.
Le fichier src/Plugin/Block/nombloc.php
On commence par créer le fichier src/Plugin/Block/ blockboutonpartage.php à la racine de notre module. Vous trouverez ci-dessous le code complet puis des explications pour chaque partie du code.
<?php
namespace Drupal\premiermo\Plugin\Block;
use Drupal\Core\Block\BlockBase;
/**
* Provides a Block.to share with Facebook
*
* @Block(
* id = "blockboutonpartage",
* admin_label = @Translation("Block to share with Facebook"),
* category = @Translation("Social network"),
* )
*/
class blockboutonpartage extends BlockBase {
/**
* {@inheritdoc}
*/
public function build() {
$current_path = \Drupal::service('path.current')->getPath();
$url = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);
return [
'#theme' => 'blockboutonpartage',
'#title' => t('Share this page !'),
'#description' => t('a bloc to share with facebook'),
'#url' => $url
];
}
}
Dans ce fichier on commence par relier ce fichier au namespace Block et on déclare l’utilisation de BlockBase :
namespace Drupal\premiermo\Plugin\Block;
use Drupal\Core\Block\BlockBase;
Les annotations permettent de configurer le bloc :
@Block() permet d’indiquer que le plugin est un bloc
Les autres lignes permettent de définir les caractéristiques du plugin : identifiant, nom du bloc pour les usagers et une catégorie qui permet de rassembler les blocs. Afin que le nom du bloc et la catégorie puissent être traduits, ils sont passés dans la fonction @Translation.
/**
* Provides a Block.to share with Facebook
*
* @Block(
* id = "blockboutonpartage",
* admin_label = @Translation("Block to share with Facebook"),
* category = @Translation("Social network"),
* )
*/
Il faut maintenant étendre la classe BlockBase. Attention la classe de votre bloc doit absolument porter le même nom que votre fichier.
class blockboutonpartage extends BlockBase {
}
Vous devez ajouter la méthode build() qui permet de construire le bloc. Les commentaires {@inheritdoc} permet de reprendre la documentation de la fonction build() de la classe BlocBase.
/**
* {@inheritdoc}
*/
public function build() {
}
Le but du bloc est d’ajouter un bouton Facebook qui permet de partager la page sur laquelle on se trouve. On commence par retrouver l’alias de la page :
$current_path = \Drupal::service('path.current')->getPath();
$url = \Drupal::service('path.alias_manager')->getAliasByPath($current_path);
Enfin, la fonction retourne un tableau associatif qui contient :
Une clé #theme qui a pour valeur le nom d’un thème qui sera déclaré dans la fonction nomtheme_theme() du fichier nomtheme.module.
D’autres clés qui correspondent à des variables utilisables dans le gabarit. Dans notre cas « titre », « description », « url » sont valorisées.
return [
'#theme' => 'blockboutonpartage',
'#title' => t('Share this page !'),
'#description' => t('a bloc to share with facebook'),
'#url' => $url
];
Déclarer le thème et indiquer le gabarit à utiliser
Pour pouvoir utiliser un gabarit twig, vous devez déclarer un thème dans la fonction nomtheme_theme du fichier nomtheme_module :
//Fichier premiermo.module
<?php
use Drupal\menu_link_content\Entity\MenuLinkContent;
function premiermo_theme($existing, $type, $theme, $path) {
return [
'blockboutonpartage' => [
'variables' => [
url => null
],
'template' => 'blockboutonpartage',
]
];
}
La clé 'blockboutonpartage' du tableau renvoyé par cette fonction, doit absolument correspondre à la clé « thème » renvoyé par la fonction build() du fichier .php créé dans la section précédente. Cette clé a pour valeur un tableau associatif qui doit contenir
- une clé template qui a pour valeur le nom du gabarit twig utilisé pour mettre en forme le bloc. Le nom du gabarit ne doit pas contenir les extensions .html.twig
- une clé variables dont la valeur est un tableau associatif qui contient des variables et leur valeur qui sont utilisables dans le gabarit.
Le fichier templates/nomdugabarit.html.twig
Créer un fichier templates/nomdugabarit.html.twig. Le nom du gabarit doit absolument être celui déclaré dans le fichier nomtheme.module.
Ici nous créons un lien Facebook
<a target="_blank" title="Facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ url}}" rel="nofollow"><img src="modules/custom/premiermo/src/img/facebook.png" alt="Facebook" /></a>
Dans cette exemple on utilise la variable {{url}} qui a été définie dans le fichier PHP. Il aurait été aussi possible d’utiliser la fonction {{url('<current')}}
Pour utiliser des images, il est possible de créer un répertoire modules/custom/premiermo/src/img/ et d’y faire référence dans le gabarit twig.
Dans cet exemple, nous avons fait le choix de créer le lien dans le gabarit. Nous aurions pu le créer dans le contrôleur avec un tableau comme il est indiqué dans l'article créer un lien depuis le contrôleur.
Tester son bloc
Il ne vous reste plus qu'à installer votre module avec la commande "drush en premiermo" puis aller dans "Mise en forme des blocs" pour le placer dans la région qui vous convient.