Neue EBT-Module erstellen

Das EBT Text Modul enthält folgende Ordner:
/ebt_text/config/install – mit Konfigurationen für den EBT Text Blocktyp und Feldinstanzen. Andere EBT-Module können Konfigurationen für Paragraph-Typen und Feldspeicher enthalten.
/ebt_text/templates – hier befindet sich die Vorlage block--block-content--ebt-text.html.twig für Inhaltsblöcke, die auf der Block-Layout-Seite verwendet werden können, sowie die Vorlage block--inline-block--ebt-text.html.twig für Layout Builder Inline-Blöcke.
/ebt_text/tests – hier sind Tests für EBT-Module, momentan nur ein Test für die Modulinstallation.

Und weitere übliche Drupal-Moduldateien: composer.json, ebt_text.info.yml, readme.md. Mehr über das Erstellen eigener Drupal-Module können Sie in der offiziellen Dokumentation lesen:

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

Ich werde ein neues Modul namens EBT Countdown erstellen, das dieses JavaScript-Plugin FlipDown verwendet:

https://github.com/PButcher/flipdown

Alle Drittanbieter-Bibliotheken sollten geforkt und auf Packagist abgelegt werden, zum Beispiel:

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

von:

https://github.com/levmyshkin/flexslider

Dann kann Composer sie wie übliche Packagist-Bibliotheken herunterladen. Diese Drittanbieter-Bibliotheken müssen den Typ "type": "drupal-library" haben und werden standardmäßig im Ordner /libraries abgelegt:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Lassen Sie uns das GitHub-Repository für FlipDown forken.

Es mag ungewöhnlich erscheinen, Git-Repositories zu forken, statt die Quell-Repositories zu verwenden. Aber ich glaube, es ist einfacher, EBT-Module ohne Änderungen an der Hauptdatei composer.json zu verwenden, um externe Links zu Repositories hinzuzufügen. Stellen Sie sich vor, wie schwierig es für Anfänger ist, Composer zu installieren, die composer.json manuell zu aktualisieren und die Quell-Repository korrekt einzubinden. Mit einer eigenen Packagist-Bibliothek wird der Installationsprozess einfacher. Daher sollten wir alle Drittanbieter-Bibliotheken auf Packagist halten.

Auf der Seite zum Forken des Git-Repositories können Sie das Repository umbenennen. Es muss sauber sein, ohne Großbuchstaben und Sonderzeichen, Bindestrich (-) und Unterstrich (_) funktionieren gut.

Nun haben wir ein neues Git-Repository:

https://github.com/levmyshkin/flipdown

Dann müssen wir eine composer.json-Datei in dieses Repository hinzufügen mit dem Typ "type": "drupal-library":

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

Hier ist die composer.json-Datei:

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

Wenn Sie Ihre aktuellen Tags im neuen Git-Repository überprüfen, wird es leer sein:

git tag

Normalerweise folge ich der Version des Quell-Repositories, zum Beispiel wenn die neueste Version der Bibliothek 1.4.6 war, erhöhe ich die Nebenversion auf 1.4.7. Das FlipDown-Repository hatte keine Tags oder Releases, daher habe ich die Version 1.0.0 für das neue Repository erstellt:

git tag 1.0.0
git push origin 1.0.0

Wir brauchen einen neuen Tag, weil er unsere neue composer.json mit dem Typ "library" enthält.

Warum können wir die JavaScript-Bibliothek nicht einfach ins Modul kopieren?

Wir dürfen nur Bibliotheken unter GPL-Lizenz kopieren, aber üblicherweise verwenden JavaScript-Bibliotheken die MIT-Lizenz. Technisch ist es möglich, aber es ist durch die Regeln von Drupal.org verboten: 

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

Lassen Sie uns die FlipDown-Bibliothek bei packagist.org einreichen:

https://packagist.org/packages/submit

Wenn Sie die Bibliothek eingereicht haben und vergessen haben, composer.json mit "type": "drupal-library" hinzuzufügen, keine Sorge, fügen Sie die composer.json-Datei hinzu und erstellen Sie einen neuen Tag für Ihr Git-Repository. Dieser Tag wird automatisch bei Packagist gepusht.

Hier ist die Packagist-Seite für die FlipDown-Bibliothek:

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

Stellen Sie sicher, dass Sie den Typ drupal-library auf der Packagist-Seite sehen.

Gehen wir zurück zu unseren Drupal-Dateien und kopieren den Ordner ebt_text, ich nenne das neue Modul ebt_countdown:

Wir müssen:

- die Konfigurationen im Ordner /config/install entfernen, wir exportieren später neue Konfigurationen

- alle Erwähnungen von ebt_text durch ebt_countdown ersetzen

- Dateien umbenennen, sodass „countdown“ anstelle von „text“ verwendet wird

- Texte für Modulbeschreibung in ebt_countdown.info.yml und README.md aktualisieren

Ich werde jeden Schritt separat in Git committen, damit Sie die Updates Schritt für Schritt sehen können:

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

Jetzt haben wir eine Vorlage für unser Modul und können Änderungen auf Drupal.org pushen.

Gehen wir auf die Seite zum Hinzufügen eines Projekts auf drupal.org:

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

Wir müssen ein Modulprojekt hinzufügen:

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

Name: Extra Block Types (EBT): Countdown
Projekttyp: Vollständiges Projekt
Kurzname: ebt_countdown
Wartungsstatus: Aktiv gepflegt
Entwicklungsstatus: In aktiver Entwicklung
Modulkategorien: Inhalt, Inhaltsanzeige
Ökosystem: Extra Block Types (EBT): Core (3191928)

Im Feld Beschreibung füge ich normalerweise die vollständige Liste der verfügbaren EBT-Module ein:

Extra Block Types: Das Countdown-Modul ermöglicht das Hinzufügen eines Blocks mit animiertem Countdown.

EBT erlaubt die Auswahl von Stilen für den Countdown über die Benutzeroberfläche.

EBT-Module bieten die Möglichkeit, verschiedene Blöcke im Layout Builder mit wenigen Klicks hinzuzufügen. Sie können einzelne Blocktypen aus dieser Reihe von EBT-Modulen installieren:
<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>

Alle EBT-Blocktypen enthalten ein Standard-Widget für EBT-Blöcke, das Designoptionen bietet für:
<ul>
  <li>CSS-Box (Abstände, Auffüllungen, Rahmen)</li>
  <li>Hintergrund mit Farbe, Bild (einschließlich Parallax und Cover), Video (YouTube)</li>
  <li>Edge-to-Edge, Container-Breite</li>
</ul>

Mehr über EBT-Blöcke lesen Sie auf der Seite des EBT Core Moduls:
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>Brauchen Sie einen weiteren Extra Block Type?</h3>

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

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

Jetzt haben wir die Seite für das Drupal Modulprojekt auf Drupal.org:
https://www.drupal.org/project/ebt_countdown

Auf dem Tab „Version Control“ sehen Sie Anweisungen, wie Sie das Remote-Repository zu Ihrem lokalen Git-Repository hinzufügen:

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

Nach dem ersten Commit sollten Sie einen neuen Branch erstellen, um der Hauptversion der anderen EBT-Module zu folgen, aktuell ist es 1.4.x.

Jetzt können wir beginnen, neue Funktionen für unser Modul hinzuzufügen. Der Prozess ist ähnlich wie bei der Entwicklung eines benutzerdefinierten Moduls: Wir erstellen Blocktypen, fügen Felder hinzu, binden CSS-/JS-Ressourcen ein.

Installieren Sie einfach das Modul, wenn Sie es mit Drush generiert haben.

Zuerst müssen wir einen neuen Blocktyp EBT Countdown erstellen:

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

Es ist erforderlich, dass der Maschinenname mit ebt_ beginnt, daher benenne ich Blocktypen üblicherweise mit EBT am Anfang, sodass der Maschinenname automatisch korrekt generiert wird. Sollte der Maschinenname des Blocktyps mit dem Modulnamen übereinstimmen? Ja, das ist für Konsistenz gut und stellt sicher, dass kein anderes EBT-Modul denselben Maschinenname verwendet. Der Maschinenname des Blocktyps muss mit ebt_ beginnen, weil es benötigt wird, um Templates in Modulen statt im Theme-Ordner zu überschreiben, siehe die Funktion ebt_core_theme_registry_alter() im Modul ebt_core.

Nun können wir das EBT Settings Feld hinzufügen, das für alle EBT-Module benötigt wird. Wir sollten das vorhandene Feld EBT Settings: field_ebt_settings hinzufügen:

EBT Settings ist ein gemeinsames Feld aus dem EBT Core Modul und bietet DOM Box, Hintergrund, Abstände und Breiten-Einstellungen.

Da wir einen Countdown zu einem Datum brauchen, sollten wir ein Zeitstempel-Datum-Feld hinzufügen. Fügen wir es ebenfalls hinzu:

Ich habe für den maschinenlesbaren Namen ebt_ hinzugefügt, das ist hier aber nicht zwingend erforderlich. Es kann auch field_countdown_date heißen. Wir haben außerdem Standardfelder für Body und Titel im Block, das reicht für den Countdown-Block aus.

Für EBT-Module haben wir normalerweise horizontale Tabs im Bearbeitungsformular:

Es ist nicht zwingend erforderlich, aber es ist gut, Inhalt und Einstellungen zu trennen, da wir viele Einstellungen für Blöcke haben.

Das übergeordnete Feld-Group sollte Tabs mit der Einstellung Richtung Horizontal und Breiten-Breakpoint 120 (oder einem anderen kleinen Wert) sein:

Nun können wir den Blocktyp verwenden, aktivieren wir das Modul EBT Countdown, damit Templates für den Blocktyp angewendet werden:

/admin/modules

Außerdem müssen Sie das Modul Layout Builder aktivieren und den Layout Builder für einen beliebigen Inhaltstyp, z.B. für Basic Page, einschalten.

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

Wenn Sie eine neue Seite erstellen, können Sie Blöcke im Seitenlayout hinzufügen.

Und so sieht es auf der Seite aus:

Nun können wir unsere Drittanbieter-Bibliothek einbinden. Wir haben die Bibliothek levmyshkin/flipdown bereits in composer.json, aber da wir dieses neue Modul als benutzerdefiniertes Modul haben, müssen wir die Bibliothek manuell mit Composer installieren:

composer require levmyshkin/flipdown

Die neue Bibliothek sollte automatisch im Verzeichnis /libraries abgelegt werden:

Legen wir nun die Datei ebt_countdown.libraries.yml an und binden darin das Flipdown CSS/JS sowie die JavaScript-Datei ebt_flipdown/js/ebt_countdown.js ein, in der wir später das Flipdown-Plugin initialisieren:

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

Für Dateien im Ordner /libraries verwenden wir einen führenden Schrägstrich, damit es ein absoluter Pfad ist.

js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown Verhalten.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      // Hier später die Initialisierung des Flipdown-Plugins einfügen.
    }
  };

})(jQuery, Drupal);

Wir sollten die neue Bibliothek ebt_countdown in den Templates einbinden, nicht vergessen, dass wir zwei Templates haben:

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

Leeren Sie den Cache und prüfen Sie, ob Ihre JavaScript-Dateien auf der Seite geladen werden:

Wir werden das Datum von PHP an JavaScript über drupalSettings übergeben. Deshalb erweitern wir unsere ebt_countdown.libraries.yml Datei um die Abhängigkeiten. Außerdem verwenden wir die Funktion once():

  dependencies:
    - core/once
    - core/drupalSettings

In EBT-Modulen werden die Einstellungen standardmäßig nicht an JavaScript übergeben. Wir müssen die Field-Widget-Klasse EbtSettingsDefaultWidget überschreiben:

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;

/**
 * Plugin-Implementierung des Widgets '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;
  }

}

Nun können wir dieses Field Widget für das EBT Settings Feld auswählen:

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

Speichern Sie den Block neu und überprüfen Sie die JavaScript-Variable drupalSettings. Nun werden alle Optionen aus dem EBT Settings Feld an JavaScript übergeben:

Am Ende von block-revision-id-* befindet sich die Block-Revision-ID, somit haben wir eindeutige Schlüssel für alle Blöcke. Für Inline-Blöcke verwenden wir die Plugin-ID plugin-id-block-contentd202c374-f31b-4f7e-8a0d-12842a1422ff. So haben wir eindeutige IDs im Layout Builder.

Das FlipDown-Plugin unterstützt eine Option für hellen/dunklen Modus, daher fügen wir dieses Einstellungsfeld in unserem Field Widget EbtSettingsCountDownWidget hinzu:

    $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',
    ];

Den Wert des Farbthemas können wir dann in JavaScript auslesen:

Wir haben Variablen von den Einstellungen an JavaScript übergeben, aber wir müssen auch den Datumswert aus dem Inhalt an JavaScript übermitteln. Wir erstellen ein leeres div mit dem Attribut data-date="", in dem wir das Datum und die Uhrzeit aus dem Datumsfeld platzieren. Für Inline-Blöcke (Blöcke im Layout Builder) verwenden wir die block_revision_id, um eine eindeutige ID für den Block zu definieren:

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>

Für Inhaltsblöcke aus der Block-Layout-Seite verwenden wir 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>

Wenn Sie nicht sicher sind, wo die Feld-Daten sind, können Sie das Modul Twig Debugger installieren und {{ dump(content.field_ebt_countdown_date) }} auf der Seite ausgeben:

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

Wir verwenden den Twig-Filter date('U'), um das Datum in einen Zeitstempel umzuwandeln.

Jetzt können wir das benutzerdefinierte JavaScript einbinden und FlipDown initialisieren.

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

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

Vergessen Sie nicht, den Cache zu leeren, um die Änderungen zu sehen. Danach sollte FlipDown auf der Seite funktionieren:

Wie Sie sehen, funktionieren selbst die Standard-FlipDown-Stile nicht optimal. Selbst auf dem Desktop sind zwei Zahlenreihen sichtbar. Aber wir können das leicht mit eigenen Styles beheben. Sie können gulpfile.js und package.json zum Kompilieren von SCSS zu CSS aus dem EBT Counter Modul kopieren:

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

gulpfile.js:

// --------------------------------------------------
// Load 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 = {
    // Haupt-SCSS-Dateien, die Partials importieren
    scssSrc: 'scss/*.scss',
    // alle SCSS-Dateien im SCSS-Verzeichnis
    allScss: 'scss/**/*.scss',
    // Zielverzeichnis für CSS
    cssDest: 'css/',
    // alle JS-Dateien im JS-Verzeichnis
    allJs: 'assets/js/**/*.js',
    // alle Bilddateien
    allImgs: 'assets/img/**/*'
};


// Definieren der Tasks nach Laden der Abhängigkeiten
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']);
  });
}

// Task exportieren, um ihn von der Kommandozeile ausführen zu können
// Beispiel:
// $ gulp style
exports.style = style;

function watch(){
    // gulp.watch überwacht die Dateien auf Änderungen
    // und führt dann die angegebene Funktion aus
    gulp.watch('scss/**/*.scss', style)
}

// Nicht vergessen den Task zu exportieren!
exports.watch = watch

package.json:

{
  "name": "ebt_styles",
  "version": "1.0.0",
  "description": "Führen Sie npm install aus und dann 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"
  }
}

Die Datei package-lock.json wird automatisch generiert, wenn Sie folgendes ausführen:

npm install

Und Sie können den gulp Task starten mit:

gulp watch

Nun fügen wir SCSS-Dateien hinzu:

/ebt_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Die Datei flipdown.css wird automatisch aus flipdown.scss generiert. Wir können die CSS-Datei in .libraries.yml einbinden:

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

Leeren Sie den Cache und sehen Sie sich die Ergebnisse an:

Jetzt sieht es besser aus!

Können wir auch reines CSS verwenden, ohne SCSS zu kompilieren?

Ja, das ist möglich, aber für die meisten Entwickler ist das Schreiben von SCSS komfortabler.

Das FlipDown-Plugin bietet einige Optionen zur Anpassung der Anzeige:

https://github.com/PButcher/flipdown

• theme
• headings

Wir haben bereits ein neues Field-Widget für EBT Settings erstellt: EbtSettingsCountDownWidget. Nun erweitern wir dieses Formular um folgende neue Felder:

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

    $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',
    ];

    $element['ebt_settings']['styles'] = [
      '#title' => $this->t('Styles'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Default'),
        'new_year' => $this->t('New Year'),
      ],
      '#default_value' => $items[$delta]->ebt_settings['styles'] ?? 'default',
      '#description' => $this->t('Select special style for countdown'),
      '#weight' => '4',
    ];

    $element['ebt_settings']['heading_days'] = [
      '#title' => $this->t('Heading Days'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_days'] ?? $this->t('Days'),
      '#description' => $this->t('Header for Days counter'),
      '#weight' => '5',
    ];

    $element['ebt_settings']['heading_hours'] = [
      '#title' => $this->t('Heading Hours'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_hours'] ?? $this->t('Hours'),
      '#description' => $this->t('Header for Hours counter'),
      '#weight' => '6',
    ];

    $element['ebt_settings']['heading_minutes'] = [
      '#title' => $this->t('Heading Minutes'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_minutes'] ?? $this->t('Minutes'),
      '#description' => $this->t('Header for Minutes counter'),
      '#weight' => '7',
    ];

    $element['ebt_settings']['heading_seconds'] = [
      '#title' => $this->t('Heading Seconds'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ebt_settings['heading_seconds'] ?? $this->t('Seconds'),
      '#description' => $this->t('Header for Seconds counter'),
      '#weight' => '8',
    ];
    
    return $element;

So können wir Übersetzungen für die Überschriften nutzen:

Wir haben alle EBT Settings Werte in JavaScript. Ich habe in das Template eine ID hinzugefügt, um leichter den richtigen eindeutigen Schlüssel zu bekommen:

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

Optionsschlüssel haben das gleiche Muster wie die IDs:

/ebt_core/ebt_core.module:

  // Verwende plugin_id für 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;

So können wir die Optionen aus JavaScript drupalSettings verwenden:

/ebt_countdown/js/ebt_countdown.js:

(function ($, Drupal) {

  /**
   * EBT Countdown Verhalten.
   */
  Drupal.behaviors.ebtCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ebt-countdown-block', '.ebt-countdown-date', context);
      countdowns.forEach(function(countdown) {
        // Block-ID holen.
        var countdownWrapper = countdown.closest('.ebt-block-countdown');
        var countdownWrapperId = countdownWrapper.getAttribute('id');
        // Block-Einstellungen holen.
        var ebtOptions = drupalSettings['ebtCountdown'][countdownWrapperId];
        // Optionen für das JS-Plugin vorbereiten.
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');
        // JS-Plugin initialisieren.
        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);

Ich habe auch $element['ebt_settings']['styles'] im Field Widget hinzugefügt, sodass wir diesen Wert im Template für eine neue Klasse des gesamten Blocks verwenden können:

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

Dies bindet die new_year Bibliothek für den New Year Style ein, aber diese Bibliothek müssen wir noch erstellen.

/ebt_countdown/ebt_countdown.libraries.yml:

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

Hier sind die Styles für den new-year Block:

/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;
}

So sieht das Ergebnis mit dem neuen Stil aus:

Sie können beliebig viele Styles für neue oder bestehende EBT-Module hinzufügen. Eigene Styles können Sie ebenfalls vorschlagen, indem Sie ein Issue auf drupal.org erstellen:

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

Ich denke, wir sind mit dem Hinzufügen der Funktionen für EBT Countdown fertig, es ist Zeit, die Konfigurationen zu exportieren und die Änderungen auf Drupal.org zu veröffentlichen. Wir sollten alle Konfigurationen, die mit EBT Countdown zusammenhängen, in den Ordner /ebt_countdown/config/install kopieren.

Wenn Sie das EBT-Modul mit Drush generiert haben, müssen Sie die Konfigurationen für die neuen Felder und Ihren EBT-Blocktyp aktualisieren.

Danach aktivieren Sie das EBT-Modul auf der Erweiterungsseite /admin/modules. Der neue EBT-Blocktyp und andere Einstellungen werden aus dem Ordner /config/install anhand der Konfigurationsdateien installiert:

Wir müssen keine language.*-Konfigurationen hinzufügen, da manche Drupal-Seiten nur eine Sprache verwenden und das Language-Modul deaktiviert sein kann.

Normalerweise kopiere ich alle Dateien und überprüfe, ob die Kopien im config/install-Ordner vorhanden sind.

Jetzt müssen wir die uuid und hashes aus den Konfigurationsdateien im config/install-Ordner entfernen:

Da wir weitere Drupal-Module verwendet haben, sollten diese in der .info-Datei als Abhängigkeiten eingetragen werden.

/ebt_countdown/ebt_countdown.info:

dependencies:
  - drupal:datetime

Wir haben zuvor ein neues Projekt auf Drupal.org erstellt:

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

Ich werde den Branch 1.4.x als Hauptbranch verwenden, um Konsistenz mit anderen EBT-Modulen zu gewährleisten:

Alle Releases starten also mit der Version 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Sie können auch Alpha- oder Beta-Versionen erstellen, bevor Sie die stabile Version 1.4.0 veröffentlichen.

Nach dem Hochladen müssen Sie 10 Tage warten, bevor das Modul für Sicherheitswarnungen berücksichtigt wird.

Nun können wir unser neues Modul testen und Bugs beheben.

Vergessen Sie nicht, eine README.md Datei hinzuzufügen. Ein Beispiel finden Sie in anderen EBT-Modulen:

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

Vielen Dank, dass Sie die EBT-Module verwenden! Zögern Sie nicht, Fragen zu stellen oder Ideen vorzuschlagen:

Erstellen Sie ein Issue auf Drupal.org

Kontaktieren Sie den Entwickler der EBT-Module

Oder senden Sie mir eine Nachricht auf LinkedIn