Creazione di nuovi moduli EBT

Il modulo EBT Text contiene le seguenti cartelle:
/ebt_text/config/install - con le configurazioni per il tipo di blocco EBT Text e le istanze dei campi. Altri moduli EBT possono contenere configurazioni per tipi di paragrafi e archiviazioni di campi.
/ebt_text/templates - qui si trovano i template block--block-content--ebt-text.html.twig per i blocchi di contenuto che possono essere usati nella pagina Block layout e block--inline-block--ebt-text.html.twig per i blocchi inline di Layout Builder.
/ebt_text/tests - qui ci sono i test per i moduli EBT, al momento solo un test per il modulo di installazione.

E altri normali file di modulo Drupal: composer.json, ebt_text.info.yml, readme.md. Puoi leggere di più sulla creazione di moduli personalizzati per Drupal nella documentazione ufficiale:

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

Creerò un nuovo modulo EBT Countdown che utilizzerà questo plugin javascript FlipDown:

https://github.com/PButcher/flipdown

Tutte le librerie di terze parti devono essere forkate e pubblicate su Packagist, per esempio:

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

da:

https://github.com/levmyshkin/flexslider

Così Composer può scaricarle come normali librerie di Packagist. Queste librerie di terze parti devono avere "type": "drupal-library", e verranno scaricate nella cartella /libraries, per impostazione predefinita:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Facciamo un fork del repository github per FlipDown.

Potrebbe sembrare insolito fare il fork dei repository git, invece di usare i repository originali. Ma credo che sarà più semplice usare i moduli EBT senza dover manipolare il file composer.json principale per aggiungere link esterni ai repository. Immagina quanto sia difficile per i principianti installare composer, aggiornare manualmente il file composer.json e inserire la sorgente del repository nel posto giusto. Con una propria libreria su Packagist il processo di installazione diventa semplice. Quindi manteniamo tutte le librerie di terze parti su Packagist.

Nella pagina di fork del repo git puoi rinominare il repository. Devi mantenerlo pulito, senza lettere maiuscole e caratteri speciali, i trattini - e underscore _ vanno bene.

Ora abbiamo un nuovo repo git:

https://github.com/levmyshkin/flipdown

Dobbiamo quindi aggiungere il file composer.json in questo repository con "type": "drupal-library":

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

Ecco il file composer.json:

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

Se controlli i tuoi tag attuali nel nuovo repo git, sarà vuoto:

git tag

Di solito seguo la versione dal repo sorgente, ad esempio se l’ultima versione della libreria era 1.4.6, incremento solo la versione minore a 1.4.7. Il repo FlipDown non aveva alcun tag o release, quindi ho creato la versione 1.0.0 per il nuovo repo:

git tag 1.0.0
git push origin 1.0.0

Abbiamo bisogno di un nuovo tag, perché contiene il nostro nuovo composer.json con "type": "library"

Perché non possiamo semplicemente copiare la libreria javascript all’interno del modulo?

Possiamo copiare solo librerie sotto licenza GPL, ma di solito le librerie javascript usano la licenza MIT. È tecnicamente possibile, ma è vietato dalle regole di Drupal.org: 

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

Inviamo la libreria FlipDown su packagist.org:

https://packagist.org/packages/submit

Se hai inviato la libreria e hai dimenticato di aggiungere composer.json con "type": "drupal-library", non preoccuparti, aggiungi semplicemente il file composer.json e crea un nuovo tag per il tuo repository git. Questo tag verrà automaticamente pubblicato su packagist.

Ecco la pagina della libreria su packagist per FlipDown:

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

Assicurati che ci sia il tipo drupal-library nella pagina di packagist.

Torniamo ora ai nostri file drupal e copiamo la cartella ebt_text, chiamerò il nuovo modulo ebt_countdown:

Dobbiamo:

- rimuovere le configurazioni in /config/install, esporteremo nuove configurazioni più tardi

- sostituire tutti i riferimenti a ebt_text con ebt_countdown

- rinominare i file per avere "countdown" invece di "text"

- aggiornare i testi per la descrizione del modulo nei file ebt_countdown.info.yml e README.md

Effettuerò il commit di ogni passaggio separatamente in git, così potrai vedere gli aggiornamenti passo dopo passo:

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

Ora abbiamo un boilerplate per il nostro modulo e possiamo pubblicare i cambiamenti su Drupal.org.

Andiamo sul sito drupal.org nella pagina per aggiungere un progetto:

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

Dobbiamo aggiungere un progetto di tipo Modulo:

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

Nome: Extra Block Types (EBT): Countdown
Tipo di progetto: Progetto completo
Nome breve: ebt_countdown
Stato di manutenzione: Attivamente mantenuto
Stato di sviluppo: In sviluppo attivo
Categorie modulo: Contenuto, Visualizzazione contenuto
Ecosistema: Extra Block Types (EBT): Core (3191928)

Nel campo Descrizione di solito inserisco l’elenco completo dei moduli EBT disponibili:

Extra Block Types: Countdown module fornisce la possibilità di aggiungere un blocco con conto alla rovescia animato.

EBT consente di scegliere stili per il countdown tramite interfaccia.

I moduli EBT permettono di aggiungere diversi blocchi in Layout Builder con pochi clic. Puoi installare tipi di blocchi separati da questo gruppo di moduli 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><a href="https://www.drupal.org/project/ebt_carousel" title="EBT Tabs">EBT Carousel</a>
  <li><a href="https://www.drupal.org/project/ebt_counter" title="EBT Counter">EBT Counter</a>
  <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>

Tutti i tipi di blocco EBT contengono il widget predefinito per i blocchi EBT, che ha opzioni di design per:
<ul>
<li>CSS Box (margini, padding, bordi)</li>
<li>Sfondo con colore, immagine (incluso parallasse e cover), video (Youtube)</li>
<li>Da bordo a bordo, Larghezza contenitore</li>
</ul>

Per ulteriori informazioni sui blocchi EBT leggi la pagina del modulo 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>Hai bisogno di un altro Extra Block Type?</h3>

       <a class="button-link" target="_blank" href="http://drupalbook.org/contact" title="DrupalBook">Contattaci</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>

Ora abbiamo la pagina del progetto del modulo Drupal su Drupal.org:
https://www.drupal.org/project/ebt_countdown

Nella scheda Version Control puoi vedere le istruzioni su come aggiungere il remote origin per il tuo repository git locale:

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

Dopo il commit iniziale dovresti creare un nuovo branch per seguire la versione principale degli altri moduli EBT, ora è 1.4.x.

Ora possiamo iniziare ad aggiungere nuove funzionalità al nostro modulo. Il processo è simile allo sviluppo di un modulo personalizzato: creeremo un tipo di blocco, aggiungeremo campi, includeremo asset css/js.

Basta installare il modulo se lo hai generato con Drush.

Per prima cosa, dobbiamo creare un nuovo tipo di blocco EBT Countdown:

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

È necessario che il nome macchina inizi con ebt_, quindi di solito chiamo i tipi di blocco partendo da EBT, in questo modo il nome macchina viene generato automaticamente nel modo corretto. Il nome macchina del tipo di blocco deve corrispondere al nome del modulo? Sì, è bene che sia così per coerenza e per essere sicuri che un altro modulo EBT non abbia lo stesso nome macchina. Il nome macchina del tipo di blocco deve iniziare con ebt_, perché serve a sovrascrivere i template nei moduli invece che nella cartella del tema, vedi la funzione ebt_core_theme_registry_alter() nel modulo ebt_core.

Ora possiamo aggiungere il campo delle impostazioni EBT, necessario per tutti i moduli EBT. Dobbiamo aggiungere il campo esistente EBT Settings: field_ebt_settings:

EBT Settings è un campo comune del modulo EBT Core, fornisce impostazioni per DOM Box, sfondo, spaziatura e larghezza.

Dato che ci serve il conto alla rovescia fino a una data, dobbiamo avere un campo data con timestamp. Aggiungiamolo:

Ho aggiunto ebt_ al nome leggibile dalla macchina, ma non è obbligatorio qui. Può essere anche field_countdown_date. Abbiamo anche i campi predefiniti body e title per il blocco, quindi sarà sufficiente per il blocco countdown.

Di solito per i moduli EBT abbiamo tab orizzontali nel form di modifica:

Non è obbligatorio, ma è utile separare contenuti e impostazioni, perché abbiamo molte impostazioni per i blocchi. 

Il gruppo di campi padre dovrebbe essere Tabs con direzione Orizzontale, e Width Breakpoint 120 (o qualsiasi numero piccolo): 

Ora possiamo creare il tipo di blocco, abilitiamo il modulo EBT Countdown, così verranno applicati i template per il tipo di blocco:

/admin/modules

Avrai anche bisogno di abilitare il modulo Layout Builder e di abilitarlo per un tipo di contenuto, ad esempio per Basic Page.

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

Quando crei una nuova Pagina, potrai aggiungere blocchi nel layout della pagina. 

E cosa abbiamo sulla pagina:

Ora possiamo includere la nostra libreria di terze parti. Abbiamo la libreria levmyshkin/flipdown in composer.json, ma questo nuovo modulo è un modulo personalizzato, quindi dobbiamo installare questa libreria manualmente con composer:

composer require levmyshkin/flipdown

La nuova libreria dovrebbe essere posizionata automaticamente nella cartella libraries:

Aggiungiamo il file ebt_countdown.libraries.yml e includiamo lì i file css/js di flipdown e il file javascript ebt_flipdown/js/ebt_countdown.js dove in seguito inizializzeremo il 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: {}

Per i file nella cartella /libraries usiamo lo slash all’inizio, quindi è un percorso assoluto.

js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown behavior.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {

    };
  }

})(jQuery, Drupal);

E dobbiamo includere la nuova libreria ebt_countdown nei template, non dimenticare che abbiamo due template:

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

Pulisci le cache e controlla che i tuoi file javascript siano presenti sulla pagina:

Passeremo la data da PHP a javascript in drupalSettings. Quindi dobbiamo estendere il nostro file ebt_countdown.libraries.yml con le dipendenze. Inoltre useremo la funzione once():

  dependencies:
    - core/once
    - core/drupalSettings

Nei moduli EBT le impostazioni non vengono passate a javascript per impostazione predefinita. Dobbiamo sovrascrivere la classe del widget di campo 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;

/**
 * Implementazione del plugin del widget 'ebt_settings_countdown'.
 *
 * @FieldWidget(
 *   id = "ebt_settings_countdown",
 *   label = @Translation("EBT Countdown settings"),
 *   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;
  }

}

Ora possiamo selezionare questo widget di campo per il campo EBT Settings:

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

Risalviamo il nostro blocco e controlliamo la variabile javascript drupalSettings. Ora tutte le opzioni dal campo EBT Settings verranno passate a javascript:

Alla fine di block-revision-id-* abbiamo l’ID della revisione del blocco, quindi abbiamo chiavi uniche per tutti i blocchi. Per i blocchi inline usiamo l’ID del plugin plugin-id-block-contentd202c374-f31b-4f7e-8a0d-12842a1422ff. Quindi abbiamo ID univoci in Layout Builder.

Il plugin FlipDown ha un’opzione per tema chiaro/scuro, quindi passiamo questo campo di impostazione nel nostro widget di campo EbtSettingsCountDownWidget:

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Color theme'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Dark'),
        'light' => $this->t('Light'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Select color theme for countdown'),
      '#weight' => '3',
    ];

Poi possiamo recuperare il valore del colore del tema in javascript:

Abbiamo passato le variabili dalle impostazioni a javascript, ma dobbiamo passare anche il valore della Data dal contenuto a javascript. Creeremo un div vuoto con l’attributo data-date="", dove inseriremo data e ora dal campo Date. Per i blocchi inline (blocchi in Layout Builder) useremo block_revision_id per definire un ID univoco per il blocco:

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>

Per i blocchi di contenuto dalla pagina Block Layout useremo 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>

Se non sei sicuro di dove si trovino i dati del campo, puoi installare il modulo Twig Debugger e stampare content.field_ebt_countdown_date nella pagina con {{ dump(content.field_ebt_countdown_date) }}:

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

E abbiamo usato il filtro twig date('U') per trasformare la data in timestamp.

Ora possiamo includere il javascript personalizzato e inizializzare FlipDown.

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown behavior.
   */
  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);

Non dimenticare di svuotare le cache per vedere gli aggiornamenti. Dopo di ciò FlipDown dovrebbe funzionare nella pagina:

Come puoi vedere anche gli stili predefiniti di FlipDown non funzionano bene. Ci sono due righe di numeri anche su desktop. Ma possiamo facilmente risolverlo con stili personalizzati. Puoi copiare i file gulpfile.js e package.json per compilare scss in css dal modulo EBT Counter:

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

gulpfile.js:

// --------------------------------------------------
// Carica Plugin
// --------------------------------------------------

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 = {
    // file scss principali che importano i parziali
    scssSrc: 'scss/*.scss',
    // tutti i file scss nella directory scss
    allScss: 'scss/**/*.scss',
    // directory di destinazione per il css
    cssDest: 'css/',
    // tutti i file js nella directory js
    allJs: 'assets/js/**/*.js',
    // tutte le immagini
    allImgs: 'assets/img/**/*'
};


// Definisci i task dopo aver richiesto le dipendenze
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']);
  });
}

// Esporta il task
// Questo permette di eseguirlo da linea di comando con
// $ gulp style
exports.style = style;

function watch(){
    // gulp.watch controlla le modifiche ai file
    // e lancia la funzione style quando cambiano
    gulp.watch('scss/**/*.scss', style)
}

// Non dimenticare di esportare il task!
exports.watch = watch

package.json:

{
  "name": "ebt_styles",
  "version": "1.0.0",
  "description": "Esegui npm install e poi 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"
  }
}

Il file package-lock.json verrà generato dopo aver eseguito:

npm install

E puoi avviare il task gulp con:

gulp watch

Ora aggiungiamo i file scss:

/ebt_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Il file flipdown.css verrà generato automaticamente da flipdown.scss. E possiamo includere il file .css in .libraries.yml:

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

Puliamo la cache e vediamo i risultati:

Ora sembra molto meglio!

Possiamo usare semplice css senza compilare da scss?

Sì, possiamo, ma scrivere in scss è più comodo per la maggior parte degli sviluppatori.

Il plugin FlipDown ha alcune opzioni per modificare la visualizzazione:

https://github.com/PButcher/flipdown

• theme
• headings

Abbiamo già creato un nuovo widget di campo per EBT Settings EbtSettingsCountDownWidget, ora estenderemo questo form con nuovi campi:

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

    $element['ebt_settings']['color_theme'] = [
      '#title' => $this->t('Tema colore'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Scuro'),
        'light' => $this->t('Chiaro'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Seleziona il tema colore per il countdown'),
      '#weight' => '3',
    ];

    $element['ebt_settings']['styles'] = [
      '#title' => $this->t('Stili'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Predefinito'),
        'new_year' => $this->t('Capodanno'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['styles'] ?? 'default',
      '#description' => $this->t('Seleziona uno stile speciale per il countdown'),
      '#weight' => '4',
    ];

    $element['ebt_settings']['heading_days'] = [
      '#title' => $this->t('Intestazione Giorni'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_days'] ?? $this->t('Giorni'),
      '#description' => $this->t('Intestazione per il contatore dei Giorni'),
      '#weight' => '5',
    ];

    $element['ebt_settings']['heading_hours'] = [
      '#title' => $this->t('Intestazione Ore'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_hours'] ?? $this->t('Ore'),
      '#description' => $this->t('Intestazione per il contatore delle Ore'),
      '#weight' => '6',
    ];

    $element['ebt_settings']['heading_minutes'] = [
      '#title' => $this->t('Intestazione Minuti'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_minutes'] ?? $this->t('Minuti'),
      '#description' => $this->t('Intestazione per il contatore dei Minuti'),
      '#weight' => '7',
    ];

    $element['ebt_settings']['heading_seconds'] = [
      '#title' => $this->t('Intestazione Secondi'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_seconds'] ?? $this->t('Secondi'),
      '#description' => $this->t('Intestazione per il contatore dei Secondi'),
      '#weight' => '8',
    ];
    
    return $element;

Così possiamo usare le Intestazioni per le traduzioni:

Abbiamo tutti i valori delle impostazioni EBT in javascript, quindi ho solo aggiunto l’ID nel template per ottenere più facilmente la chiave univoca corretta.

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

Le chiavi delle opzioni hanno lo stesso pattern degli ID:

/ebt_core/ebt_core.module:

  // Usa plugin_id per i contenuti Blocco.
  $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;

Così possiamo usare le opzioni da drupalSettings in javascript:

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown behavior.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        // Recupera l'ID del blocco.
        var countdownWrapper = countdown.closest('.ebt-block-countdown');
        var countdownWrapperId = countdownWrapper.getAttribute('id');
        // Recupera le impostazioni EBT del blocco.
        var ebtOptions = drupalSettings['ebtCountdown'][countdownWrapperId];
        // Prepara le opzioni per il plugin javascript.
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        // Inizializza il plugin javascript.
        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);

Ho anche aggiunto $element['ebt_settings']['styles'] nel widget di campo, così lo useremo nel template per aggiungere una nuova classe all’intero blocco.

{%
  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 %}

 Questo includerà la libreria new_year per lo stile Capodanno, ma ora dobbiamo creare questa libreria.

/ebt_countdown/ebt_countdown.libraries.yml:

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

Ed ecco gli stili per il blocco 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;
}

Ecco il risultato dell’aggiunta di un nuovo stile:

Puoi aggiungere qualsiasi numero di stili per moduli EBT nuovi o esistenti. Puoi anche suggerire stili personalizzati per qualsiasi modulo EBT, basta creare un issue su drupal.org:

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

Penso che abbiamo finito con l’aggiunta di funzionalità a EBT Countdown, è il momento di esportare le configurazioni e distribuire le modifiche su Drupal.org. Dobbiamo copiare tutte le configurazioni relative a EBT Countdown nella cartella /ebt_countdown/config/install.

Se hai generato il modulo EBT con Drush, devi aggiornare le configurazioni per i nuovi campi e per il tuo tipo di blocco EBT.

Dopo di ciò abilita il modulo EBT nella pagina Estendi /admin/modules. Il nuovo tipo di blocco EBT e le altre impostazioni verranno installati dalla cartella /config/install dai file di configurazione:

Non abbiamo bisogno di aggiungere i file language.*, perché alcuni siti Drupal hanno solo una lingua e il modulo Language può essere disabilitato.

Di solito copio tutti i file e verifico di avere una copia nella cartella config/install.

Ora dobbiamo rimuovere uuid e hash dalle configurazioni nella cartella config/install

Dato che abbiamo usato altri moduli Drupal dobbiamo includerli nel file .info come dipendenze.

/ebt_countdown/ebt_countdown.info:

dependencies:
  - drupal:datetime

Abbiamo già creato un nuovo progetto su Drupal.org:

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

Userò il branch 1.4.x come branch principale, per coerenza con gli altri moduli EBT:

Quindi tutte le release partiranno dalla versione 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Puoi anche creare una versione -alpha o -beta prima di creare la versione stabile 1.4.0.

Dobbiamo aspettare 10 giorni prima che il modulo possa essere incluso nella copertura degli avvisi di sicurezza.

Così possiamo testare il nostro nuovo modulo e correggere eventuali bug.

Non dimenticare di aggiungere il file README.md, puoi vedere un esempio negli altri moduli EBT:

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

Grazie per aver utilizzato i moduli EBT! Sentiti libero di fare domande o suggerire idee:

Crea un issue su Drupal.org

Contatta lo sviluppatore dei moduli EBT

Oppure scrivimi su LinkedIn