Créer de nouveaux modules EBT

Le module EBT Text contient les dossiers suivants :
/ebt_text/config/install - avec les configurations pour le type de bloc EBT Text et les instances de champs. D’autres modules EBT peuvent contenir des configurations pour les types de paragraphes et le stockage des champs.
/ebt_text/templates - ici se trouve le template block--block-content--ebt-text.html.twig pour le bloc de contenu qui peut être utilisé dans la page de mise en page des blocs, ainsi que le template block--inline-block--ebt-text.html.twig pour les blocs inline du Layout Builder.
/ebt_text/tests - ici se trouvent les tests pour les modules EBT, actuellement un seul test pour l’installation du module.

Et les autres fichiers classiques d’un module Drupal : composer.json, ebt_text.info.yml, readme.md. Vous pouvez en apprendre plus sur la création de modules Drupal personnalisés dans la documentation officielle :

https://www.drupal.org/docs/develop/creating-modules

Je vais créer un nouveau module EBT Countdown qui utilisera ce plugin JavaScript FlipDown :

https://github.com/PButcher/flipdown

Toutes les bibliothèques tierces doivent être forkées et placées sur Packagist, par exemple :

https://packagist.org/packages/levmyshkin/flexslider

à partir de :

https://github.com/levmyshkin/flexslider

Puis Composer peut les télécharger comme des bibliothèques habituelles de Packagist. Ces bibliothèques tierces doivent avoir "type": "drupal-library", et elles seront téléchargées dans le dossier /libraries, par défaut :
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Faisons un fork du dépôt GitHub pour FlipDown.

Il peut sembler inhabituel de forker des dépôts git au lieu d’utiliser les dépôts source. Mais je crois que ce sera plus simple d’utiliser les modules EBT sans manipuler manuellement le fichier composer.json principal pour y ajouter des liens vers des dépôts externes. Imaginez comme c’est compliqué pour les débutants d’installer Composer, de modifier composer.json manuellement et de placer les sources des dépôts au bon endroit. Avec une bibliothèque propre sur Packagist, le processus d’installation devient plus simple. Donc, gardons toutes les bibliothèques tierces sur Packagist.

Sur la page de fork du dépôt git, vous pouvez renommer le dépôt. Vous devez garder un nom propre, sans majuscules ni caractères spéciaux, les tirets (-) et underscores (_) fonctionnent bien.

Nous avons maintenant un nouveau dépôt git :

https://github.com/levmyshkin/flipdown

Ensuite, nous devons ajouter un fichier composer.json dans ce dépôt avec "type": "drupal-library" :

git add composer.json
git commit -m 'Add Composer.json file'
git push origin master

Voici le fichier composer.json :

https://github.com/levmyshkin/flipdown/blob/master/composer.json

Si vous vérifiez les tags actuels dans ce nouveau dépôt git, il sera vide :

git tag

Habituellement, je suis la version du dépôt source, par exemple si la dernière version de la bibliothèque était 1.4.6, j’incrémente simplement la version mineure à 1.4.7. Le dépôt FlipDown n’avait aucun tag ou release, donc j’ai créé la version 1.0.0 pour le nouveau dépôt :

git tag 1.0.0
git push origin 1.0.0

Nous avons besoin de ce nouveau tag, car il contient notre nouveau composer.json avec "type": "library".

Pourquoi ne peut-on pas simplement copier la bibliothèque JavaScript dans le module ?

Nous pouvons copier uniquement les bibliothèques sous licence GPL, mais généralement les bibliothèques JavaScript utilisent la licence MIT. Techniquement c’est possible, mais c’est interdit par les règles de Drupal.org : 

https://www.drupal.org/about/licensing

Soumettons maintenant la bibliothèque FlipDown sur packagist.org :

https://packagist.org/packages/submit

Si vous avez soumis la bibliothèque et oublié d’ajouter composer.json avec "type": "drupal-library", ne vous inquiétez pas, il suffit d’ajouter le fichier composer.json et de créer un nouveau tag pour votre dépôt git. Ce tag sera automatiquement pris en compte par Packagist.

Voici la page de la bibliothèque FlipDown sur Packagist :

https://packagist.org/packages/levmyshkin/flipdown

Assurez-vous que le type drupal-library est bien visible sur la page Packagist.

Revenons à nos fichiers Drupal et copions le dossier ebt_text, je nommerai le nouveau module ebt_countdown :

Nous devons :

- supprimer les configurations dans /config/install, nous exporterons de nouvelles configurations plus tard

- remplacer toutes les mentions ebt_text par ebt_countdown

- renommer les fichiers pour remplacer "text" par "countdown"

- mettre à jour les textes de description du module dans les fichiers ebt_countdown.info.yml et README.md.

Je vais valider chaque étape séparément dans git, pour que vous puissiez voir les mises à jour pas à pas :

git clone https://git.drupalcode.org/project/ebt_countdown.git

Nous avons maintenant une base pour notre module et pouvons pousser les changements sur Drupal.org.

Allons sur le site drupal.org à la page d’ajout de projet :

https://www.drupal.org/node/add

Nous devons ajouter un projet de type Module :

https://www.drupal.org/node/add/project-module

Nom : Extra Block Types (EBT) : Countdown
Type de projet : Projet complet
Nom court : ebt_countdown
Statut de maintenance : Activement maintenu
Statut de développement : En cours de développement actif
Catégories du module : Contenu, Affichage de contenu
Écosystème : Extra Block Types (EBT) : Core (3191928)

Dans le champ Description, j’insère généralement la liste complète des modules EBT disponibles :

Extra Block Types : le module Countdown permet d’ajouter un bloc avec un compte à rebours animé.

EBT permet de choisir les styles du compte à rebours via l’interface utilisateur.

Les modules EBT offrent la possibilité d’ajouter différents blocs dans Layout Builder en quelques clics. Vous pouvez installer séparément ces types de blocs parmi cette collection de modules EBT :
<ul>
  <li><a href="https://www.drupal.org/project/ebt_accordion" title="EBT Accordion / FAQ">EBT Accordion / FAQ</a></li>
  <li><a href="https://www.drupal.org/project/ebt_basic_button" title="EBT Basic Button">EBT Basic Button</a></li>
  <li><a href="https://www.drupal.org/project/ebt_bootstrap_button" title="EBT Bootstrap Button">EBT Bootstrap Button</a></li>
  <li><a href="https://www.drupal.org/project/ebt_cta" title="EBT Call to Action">EBT Call to Action</a></li>
  <li><a href="https://www.drupal.org/project/ebt_carousel" title="EBT Tabs">EBT Carousel</a></li>
  <li><a href="https://www.drupal.org/project/ebt_counter" title="EBT Counter">EBT Counter</a></li>
  <li><a href="https://www.drupal.org/project/ebt_image_gallery">EBT Image Gallery</a></li>
  <li><a href="https://www.drupal.org/project/ebt_quote" title="EBT Quote">EBT Quote</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slick_slider">EBT Slick Slider</a></li>
  <li><a href="https://www.drupal.org/project/ebt_slideshow">EBT Slideshow</a></li>
  <li><a href="https://www.drupal.org/project/ebt_stats">EBT Stats</a></li>
  <li><a href="https://www.drupal.org/project/ebt_tabs" title="EBT Tabs">EBT Tabs</a></li>
  <li><a href="https://www.drupal.org/project/ebt_text">EBT Text</a></li>
  <li><a href="https://www.drupal.org/project/ebt_timeline">EBT Timeline</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform">EBT Webform</a></li>
  <li><a href="https://www.drupal.org/project/ebt_webform_popup">EBT Webform Popup</a></li>
</ul>

Tous les types de blocs EBT contiennent un widget par défaut pour les blocs EBT, qui dispose d’options de design pour :
<ul>
<li>Boîte CSS (marges, paddings, bordures)</li>
<li>Arrière-plan utilisant couleur, image (y compris parallaxe et couverture), vidéo (Youtube)</li>
<li>De bord à bord, largeur du conteneur</li>
</ul>

Pour en savoir plus sur les blocs EBT, consultez la page du module EBT Core :
https://www.drupal.org/project/ebt_core

<div class="container">
<div class="panel-layout capricorn pane-bundle-cta-multiple">
  <div class="panel-pane pane-fieldable-panels-pane pane-vid-10729 d-sponsor pane-bundle-cta pane-fpid-422">
   <div class="pane-content">
    <div class="fieldable-panels-pane pane-style-full nographic pane-style-supporter">
     <div class="pane-title pane-bundle-cta-multiple">
       <h3>Besoin d’un autre type de bloc supplémentaire ?</h3>

       <a class="button-link" target="_blank" href="http://drupalbook.org/contact" title="DrupalBook">Contactez-nous</a>

       <a href="http://drupalbook.org/contact" title="DrupalBook"  target="_blank"><img src="/files/logo.svg__1.png" alt="Logo DrupalBook" width="85" /></a>
     </div>
   </div>
   </div>
  </div>
</div>
</div>

Nous avons maintenant la page de projet du module Drupal sur Drupal.org :
https://www.drupal.org/project/ebt_countdown

Dans l’onglet Version Control, vous pouvez voir les instructions pour ajouter la télécommande distante à votre dépôt git local :

https://www.drupal.org/project/ebt_countdown/git-instructions

Après le commit initial, vous devez créer une nouvelle branche pour suivre la version majeure des autres modules EBT, actuellement c’est la 1.4.x.

Nous pouvons maintenant commencer à ajouter de nouvelles fonctionnalités à notre module. Le processus est similaire au développement d’un module personnalisé : nous créerons un type de bloc, ajouterons des champs, inclurons des ressources CSS/JS.

Il suffit d’installer le module si vous l’avez généré avec Drush.

Tout d’abord, nous devons créer un nouveau type de bloc EBT Countdown :

/admin/structure/block/block-content/types/add

Il est obligatoire que le nom machine commence par ebt_, donc je nomme généralement les types de bloc en commençant par EBT, ainsi le nom machine est automatiquement généré correctement. Est-il nécessaire que le nom machine du type de bloc corresponde à celui du module ? Oui, c’est préférable pour la cohérence et pour éviter qu’un autre module EBT ait le même nom machine. Le nom machine du type de bloc doit commencer par ebt_ car cela est nécessaire pour remplacer les templates dans les modules plutôt que dans le dossier du thème, voir la fonction ebt_core_theme_registry_alter() dans le module ebt_core.

Maintenant, nous pouvons ajouter le champ de réglages EBT, nécessaire à tous les modules EBT. Il faut ajouter le champ existant EBT Settings : field_ebt_settings :

EBT Settings est un champ commun issu du module EBT Core, il offre les options DOM Box, arrière-plan, espacement et largeur.

Comme nous avons besoin d’un compte à rebours jusqu’à une date, il faut un champ date de type timestamp. Ajoutons-le aussi :

J’ai ajouté le préfixe ebt_ pour le nom machine, mais ce n’est pas obligatoire ici. Il peut aussi s’appeler field_countdown_date. Nous avons aussi un champ body et title par défaut pour le bloc, ce qui est suffisant pour notre bloc countdown.

Habituellement, pour les modules EBT, on utilise des onglets horizontaux dans le formulaire d’édition :

Ce n’est pas obligatoire, mais c’est pratique pour séparer le contenu des réglages, car les blocs ont souvent beaucoup de réglages. 

Le groupe parent doit être de type Tabs avec une direction Horizontale et un Width Breakpoint à 120 (ou une autre petite valeur) : 

Nous avons maintenant notre type de bloc, activons le module EBT Countdown pour appliquer les templates liés :

/admin/modules

Vous devrez aussi activer le module Layout Builder et l’activer pour un type de contenu, par exemple Basic Page.

/admin/structure/types/manage/page/display

Lors de la création d’une nouvelle page, vous pourrez ajouter des blocs dans la mise en page de la page. 

Voici ce que nous avons sur la page :

Maintenant, nous pouvons inclure notre bibliothèque tierce. Nous avons la bibliothèque levmyshkin/flipdown dans composer.json, mais comme ce module est un module personnalisé, nous devons installer cette bibliothèque manuellement avec Composer :

composer require levmyshkin/flipdown

La nouvelle bibliothèque devrait être placée automatiquement dans le dossier libraries :

Créons le fichier ebt_countdown.libraries.yml et incluons-y le CSS/JS de flipdown ainsi que le fichier JavaScript ebt_flipdown/js/ebt_countdown.js où nous initialiserons plus tard le plugin flipdown :

ebt_countdown.libraries.yml

ebt_countdown:
  css:
    component:
      /libraries/flipdown/dist/flipdown.min.css: { minified: true }
  js:
    /libraries/flipdown/dist/flipdown.min.js: { minified: true }
    js/ebt_countdown.js: {}
  dependencies:
    - core/once
    - core/drupalSettings

Pour les fichiers dans le dossier /libraries, on utilise une barre oblique au début, ce qui indique un chemin absolu.

js/ebt_countdown.js :

(function ($, Drupal) {

  /**
   * Comportement EBT Countdown.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      // Code d'initialisation FlipDown ici.
    }
  };

})(jQuery, Drupal);

Nous devons inclure la nouvelle bibliothèque ebt_countdown dans les templates, n'oubliez pas que nous avons deux templates :

{{ attach_library('ebt_countdown/ebt_countdown') }}

Pensez à vider le cache et vérifiez que vos fichiers JavaScript sont bien présents sur la page :

Nous transmettrons la date depuis PHP vers JavaScript via drupalSettings. Nous avons donc ajouté les dépendances dans le fichier ebt_countdown.libraries.yml et utiliserons la fonction once() pour éviter plusieurs initialisations.

Dans les modules EBT, les réglages ne sont pas transmis par défaut au JavaScript. Nous devons surcharger la classe du widget de champ EbtSettingsDefaultWidget :

ebt_countdown/src/Plugin/Field/FieldWidget/EbtSettingsCountDownWidget.php :

<?php

namespace Drupal\ebt_countdown\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ebt_core\Plugin\Field\FieldWidget\EbtSettingsDefaultWidget;

/**
 * Implémentation du plugin widget 'ebt_settings_countdown'.
 *
 * @FieldWidget(
 *   id = "ebt_settings_countdown",
 *   label = @Translation("Paramètres EBT Countdown"),
 *   field_types = {
 *     "ebt_settings"
 *   }
 * )
 */
class EbtSettingsCountDownWidget extends EbtSettingsDefaultWidget {

  /**
   * {@inheritdoc}
   */
  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
    $element = parent::formElement($items, $delta, $element, $form, $form_state);

    $element['ebt_settings']['pass_options_to_javascript'] = [
      '#type' => 'hidden',
      '#value' => TRUE,
    ];

    return $element;
  }

  /**
   * {@inheritdoc}
   */
  public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
    foreach ($values as &$value) {
      $value += ['ebt_settings' => []];
    }
    return $values;
  }

}

Maintenant, nous pouvons sélectionner ce widget de champ pour le champ EBT Settings :

/admin/structure/block/block-content/manage/ebt_countdown/form-display

Re-sauvegardons notre bloc et vérifions la variable JavaScript drupalSettings. Maintenant, toutes les options du champ EBT Settings seront passées au JavaScript :

À la fin de block-revision-id-*, nous avons l’ID de révision du bloc, ce qui permet d’avoir des clés uniques pour tous les blocs. Pour les blocs inline, on utilise l’ID plugin plugin-id-block-contentd202c374-f31b-4f7e-8a0d-12842a1422ff. Ainsi, nous disposons d’identifiants uniques dans Layout Builder.

Le plugin FlipDown possède une option pour thème clair/sombre, donc passons ce champ de réglage dans notre widget de champ EbtSettingsCountDownWidget :

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Thème couleur'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Sombre'),
        'light' => $this->t('Clair'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Sélectionnez le thème de couleur pour le compte à rebours'),
      '#weight' => '3',
    ];

Ensuite, nous pouvons récupérer la valeur du thème couleur en JavaScript :

Nous avons transmis des variables des réglages vers le JavaScript, mais il faut aussi transmettre la valeur de la date du contenu vers JavaScript. Nous allons créer une div vide avec un attribut data-date="", où nous placerons la date et l’heure du champ Date. Pour les blocs inline (blocs dans Layout Builder), nous utiliserons block_revision_id pour définir un ID unique pour chaque bloc :

block--inline-block--ebt-countdown.html.twig :

    <div
      class="ebt-countdown-date ebt-countdown-inline-block flipdown"
      id="block-id-{{ configuration.block_revision_id }}"
      data-date="{{ content.field_ebt_countdown_date[0]['#attributes']['datetime']|date('U') }}">
    </div>

Pour les blocs de contenu depuis la page de gestion des blocs, nous utiliserons plugin_id :

block--block-content--ebt-countdown.html.twig :

    <div
      class="ebt-countdown-date ebt-countdown-block-content flipdown"
      id="block-id-{{ plugin_id|clean_class }}"
      data-date="{{ content.field_ebt_countdown_date[0]['#attributes']['datetime']|date('U') }}">
    </div>

Si vous ne savez pas où se trouve la donnée du champ, vous pouvez installer le module Twig Debugger et afficher {{ dump(content.field_ebt_countdown_date) }} sur la page :

https://www.drupal.org/project/twig_debugger

Nous utilisons aussi le filtre Twig date('U') pour transformer la date en timestamp.

Nous pouvons maintenant inclure notre JavaScript personnalisé et initialiser FlipDown.

/ebt_countdown/js/ebt_countdown.js :

(function ($, Drupal) {

  /**
   * Comportement EBT Countdown.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        new FlipDown(countdownTimestamp, countdownId, {
          theme: "dark",
        }).start();
      });
    }
  }

})(jQuery, Drupal);

N’oubliez pas de vider les caches pour voir les mises à jour. Après cela, FlipDown devrait fonctionner sur la page :

Comme vous le voyez, même les styles par défaut de FlipDown ne fonctionnent pas très bien. Il y a deux lignes de chiffres même sur desktop. Mais nous pouvons facilement corriger cela avec des styles personnalisés. Vous pouvez copier les fichiers gulpfile.js et package.json pour compiler le SCSS en CSS depuis le module EBT Counter :

https://www.drupal.org/project/ebt_counter

gulpfile.js :

// --------------------------------------------------
// Chargement des plugins
// --------------------------------------------------

var gulp = require('gulp'),
    sass = require('gulp-dart-scss'),
    postcss = require("gulp-postcss"),
    autoprefixer = require("autoprefixer"),
    cssnano = require("cssnano"),
    notify = require('gulp-notify'),
    sassUnicode = require('gulp-sass-unicode');


var config = {
    // fichiers SCSS principaux qui importent des partials
    scssSrc: 'scss/*.scss',
    // tous les fichiers SCSS dans le dossier scss
    allScss: 'scss/**/*.scss',
    // dossier destination pour le CSS
    cssDest: 'css/',
    // tous les fichiers JS dans assets/js
    allJs: 'assets/js/**/*.js',
    // tous les fichiers images
    allImgs: 'assets/img/**/*'
};


// Définition des tâches après chargement des dépendances
function style() {

  return gulp.src(config.allScss)
    .pipe(sass())
    .pipe(sassUnicode())
    .pipe(postcss([autoprefixer()]))
    .pipe(gulp.dest(config.cssDest));

  gulp.task('sass:watch', function () {
    gulp.watch('./scss/**/*.scss', ['sass']);
  });
}

// Exporter la tâche pour l'exécuter en ligne de commande
// $ gulp style
exports.style = style;

function watch(){
    // gulp.watch surveille les fichiers et lance la fonction style en cas de modification
    gulp.watch('scss/**/*.scss', style)
}

// N'oubliez pas d'exposer la tâche!
exports.watch = watch

package.json :

{
  "name": "ebt_styles",
  "version": "1.0.0",
  "description": "Run npm install and then gulp watch",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "cssnano": "^5.0.2",
    "gulp": "^4.0.2",
    "gulp-dart-scss": "^1.1.0",
    "gulp-notify": "^4.0.0",
    "gulp-postcss": "^9.0.0",
    "gulp-sass-unicode": "^1.0.5",
    "gulp-sourcemaps": "^3.0.0"
  },
  "dependencies": {
    "cucumber": "*",
    "postcss": "^8.2.13"
  }
}

Le fichier package-lock.json sera généré après avoir lancé :

npm install

Et vous pouvez lancer la tâche gulp avec :

gulp watch

Nous allons maintenant ajouter des fichiers SCSS :

/ebt_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Le fichier flipdown.css sera automatiquement généré à partir du SCSS. Nous pouvons ensuite inclure ce fichier CSS dans le fichier .libraries.yml :

ebt_countdown:
  css:
    component:
      /libraries/flipdown/dist/flipdown.min.css: { minified: true }
      css/flipdown.css: { }

Videz le cache et voyez le résultat :

Maintenant, c’est bien mieux !

Peut-on utiliser du CSS simple sans compilation SCSS ?

Oui, c’est possible, mais écrire en SCSS est plus pratique pour la plupart des développeurs.

Le plugin FlipDown propose quelques options pour modifier l’affichage :

https://github.com/PButcher/flipdown

• theme
• headings

Nous avons déjà créé un nouveau widget de champ pour les réglages EBT EbtSettingsCountDownWidget, maintenant nous allons étendre ce formulaire avec de nouveaux champs :

/ebt_countdown/src/Plugin/Field/FieldWidget/EbtSettingsCountDownWidget.php :

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Thème couleur'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Sombre'),
        'light' => $this->t('Clair'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Sélectionnez le thème de couleur pour le compte à rebours'),
      '#weight' => '3',
    ];

    $element['ebt_settings']['styles'] = [
      '#title' => $this->t('Styles'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Défaut'),
        'new_year' => $this->t('Nouvel An'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['styles'] ?? 'default',
      '#description' => $this->t('Sélectionnez un style spécial pour le compte à rebours'),
      '#weight' => '4',
    ];

    $element['ebt_settings']['heading_days'] = [
      '#title' => $this->t('Intitulé Jours'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_days'] ?? $this->t('Jours'),
      '#description' => $this->t('En-tête pour le compteur des jours'),
      '#weight' => '5',
    ];

    $element['ebt_settings']['heading_hours'] = [
      '#title' => $this->t('Intitulé Heures'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_hours'] ?? $this->t('Heures'),
      '#description' => $this->t('En-tête pour le compteur des heures'),
      '#weight' => '6',
    ];

    $element['ebt_settings']['heading_minutes'] = [
      '#title' => $this->t('Intitulé Minutes'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_minutes'] ?? $this->t('Minutes'),
      '#description' => $this->t('En-tête pour le compteur des minutes'),
      '#weight' => '7',
    ];

    $element['ebt_settings']['heading_seconds'] = [
      '#title' => $this->t('Intitulé Secondes'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_seconds'] ?? $this->t('Secondes'),
      '#description' => $this->t('En-tête pour le compteur des secondes'),
      '#weight' => '8',
    ];
    
    return $element;

Nous pouvons ainsi utiliser les intitulés pour la traduction :

Toutes les valeurs des réglages EBT sont disponibles en JavaScript, j’ai simplement ajouté un ID dans le template pour faciliter la récupération de la bonne clé unique :

.setAttribute('id', 'plugin-id-' ~ plugin_id|clean_class)
.setAttribute('id', 'block-revision-id-' ~ configuration.block_revision_id)

Les clés des options ont le même format que ces IDs :

/ebt_core/ebt_core.module :

  // Utilisation de plugin_id pour Block content.
  $build['#attached']['drupalSettings'][$bundle]['block-revision-id-' . $revision_id[0]['value']] = $block_options;
  $uuid = $entity->get('uuid')->getValue();
  $block_options = [
    'blockClass' => 'plugin-id-block-content' . $uuid[0]['value'],
    'options' => $options,
  ];
  $build['#attached']['drupalSettings'][$bundle]['plugin-id-block-content' . $uuid[0]['value']] = $block_options;

Nous pouvons donc utiliser ces options depuis drupalSettings en JavaScript :

/ebt_countdown/js/ebt_countdown.js :

(function ($, Drupal) {

  /**
   * Comportement EBT Countdown.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        // Récupérer l’ID du bloc.
        var countdownWrapper = countdown.closest('.ebt-block-countdown');
        var countdownWrapperId = countdownWrapper.getAttribute('id');
        // Récupérer les réglages EBT du bloc.
        var ebtOptions = drupalSettings['ebtCountdown'][countdownWrapperId];
        // Préparer les options pour le plugin JS.
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        // Initialiser le plugin JS.
        new FlipDown(countdownTimestamp, countdownId, {
          theme: ebtOptions['options']['color_theme'],
          headings: [
            ebtOptions['options']['heading_days'],
            ebtOptions['options']['heading_hours'],
            ebtOptions['options']['heading_minutes'],
            ebtOptions['options']['heading_seconds'],
          ],
        }).start();
      });
    }
  }

})(jQuery, Drupal);

J’ai également ajouté $element['ebt_settings']['styles'] dans le widget de champ, afin de pouvoir l’utiliser dans le template pour ajouter une nouvelle classe à tout le bloc.

{%
  set classes = [
  'block',
  'ebt-block',
  'ebt-block-countdown',
  'ebt-block-' ~ plugin_id|clean_class,
  'block-' ~ configuration.provider|clean_class,
  'block-' ~ plugin_id|clean_class,
  'plugin-id-' ~ plugin_id|clean_class,
  content.field_ebt_settings['#object'].field_ebt_settings.ebt_settings.styles,
]
%}

{% if content.field_ebt_settings['#object'].field_ebt_settings.ebt_settings.styles == 'new_year' %}
  {{ attach_library('ebt_countdown/new_year') }}
{% endif %}

Cela permettra d’inclure la bibliothèque new_year pour le style Nouvel An, mais nous devons maintenant créer cette bibliothèque.

/ebt_countdown/ebt_countdown.libraries.yml :

new_year:
  css:
    component:
      css/new-year.css: { }

Voici les styles pour le bloc new-year :

/ebt_countdown/scss/new-year.scss
/ebt_countdown/css/new-year.css

.ebt-block-countdown.new_year {
  background: url(../img/snowflakes.webp) center center repeat;
}

Voici le résultat avec ce nouveau style :

Vous pouvez ajouter autant de styles que vous le souhaitez pour les modules EBT existants ou nouveaux. Vous pouvez aussi proposer vos propres styles pour n’importe quel module EBT, il suffit de créer une issue sur drupal.org :

https://www.drupal.org/project/issues/ebt_core

Je pense que nous avons terminé d’ajouter les fonctionnalités au module EBT Countdown, il est temps d’exporter les configurations et de déployer les changements sur Drupal.org. Nous devons copier toutes les configurations liées à EBT Countdown dans le dossier /ebt_countdown/config/install.

Si vous avez généré le module EBT avec Drush, vous devez mettre à jour les configurations pour les nouveaux champs et votre type de bloc EBT.

Ensuite, activez le module EBT sur la page d’extension /admin/modules. Le nouveau type de bloc EBT et les autres réglages seront installés automatiquement depuis le dossier /config/install grâce aux fichiers de configuration :

Il n’est pas nécessaire d’ajouter les configurations language.*, car certains sites Drupal ne gèrent qu’une seule langue et le module Langue peut être désactivé.

Habituellement, je copie tous les fichiers et vérifie que j’ai bien la copie dans le dossier config/install.

Maintenant, il faut supprimer les clés uuid et hashes dans les fichiers de configuration du dossier config/install.

Comme nous avons utilisé d’autres modules Drupal, nous devons les déclarer en dépendances dans le fichier .info.

/ebt_countdown/ebt_countdown.info :

dependencies:
  - drupal:datetime

Nous avons créé un nouveau projet sur Drupal.org auparavant :

https://www.drupal.org/project/ebt_countdown

J’utiliserai la branche 1.4.x comme branche principale, pour assurer la cohérence avec les autres modules EBT :

Toutes les versions commenceront donc à partir de la version 1.4.0 :

git tag 1.4.0
git push origin 1.4.0

Vous pouvez aussi créer des versions -alpha, -beta avant de publier la version stable 1.4.0.

Il faut attendre 10 jours avant que le module puisse être couvert par les avis de sécurité.

Vous pouvez maintenant tester votre nouveau module et corriger les bugs éventuels.

N’oubliez pas d’ajouter un fichier README.md, vous pouvez voir un exemple dans les autres modules EBT :

https://www.drupal.org/project/ebt_slideshow

Merci d’utiliser les modules EBT ! N’hésitez pas à poser des questions ou suggérer des idées :

Créer une issue sur Drupal.org

Contacter le développeur des modules EBT

Ou envoyez-moi un message sur LinkedIn