Neue EPT-Module erstellen

Das EPT Text-Modul enthält die folgenden Ordner:
/ept_text/config/install — enthält Konfigurationen für den EPT Text-Paragraph-Typ und Feldinstanzen. Andere EPT-Module können Konfigurationen für Paragraph-Typen und Feldspeicher enthalten.
/ept_text/templates — enthält die Vorlage paragraph--ept-text--default.html.twig für den Paragraph.
/ept_text/tests — enthält Tests für EPT-Module, derzeit nur einen Installationstest.

Und weitere Standard-Drupal-Moduldateien: composer.json, ept_text.info.yml, readme.md. Weitere Details zur Erstellung eigener Drupal-Module finden Sie in der offiziellen Dokumentation:

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

Ich werde ein neues EPT Countdown-Modul erstellen, das das folgende JavaScript-Plugin verwendet — FlipDown:

https://github.com/PButcher/flipdown

Alle Drittanbieter-Bibliotheken müssen geforkt und auf Packagist gehostet werden, zum Beispiel:

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

von:

https://github.com/levmyshkin/flexslider

Dann kann Composer sie als reguläre Bibliotheken von Packagist laden. Diese Drittanbieter-Bibliotheken müssen das Feld „type“: „drupal-library“ in der composer.json enthalten, und sie werden dann standardmäßig im Ordner /libraries installiert:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Lassen Sie uns das FlipDown-Repository auf GitHub forken.

Im Allgemeinen wird nicht empfohlen, Repositories zu forken, anstatt die Originalquellen zu verwenden. Ich glaube jedoch, dass es die Nutzung der EPT-Module erleichtert, ohne die composer.json manuell bearbeiten zu müssen. Stellen Sie sich vor, wie schwierig es für einen Anfänger ist, Composer zu installieren, die composer.json manuell zu ändern und die URL eines externen Repositories korrekt anzugeben. Eine eigene Bibliothek auf Packagist zu haben, vereinfacht die Installation. Deshalb ist es besser, alle Drittanbieter-Bibliotheken auf Packagist zu hosten.

Auf der GitHub-Seite des Forks können Sie das Repository umbenennen. Der Name sollte einfach sein, ohne Großbuchstaben oder Sonderzeichen. Bindestriche (-) und Unterstriche (_) sind erlaubt.

Nun haben wir ein neues Repository:

https://github.com/levmyshkin/flipdown

Lassen Sie uns eine composer.json-Datei mit dem Typ „drupal-library“ hinzufügen:

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

Die composer.json-Datei ist verfügbar unter:

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

Wenn Sie die aktuellen Tags im Repository überprüfen, gibt es keine:

git tag

Ich folge normalerweise der Version der Originalbibliothek. Wenn die letzte Version 1.4.6 war, erhöhe ich die Nebenversionsnummer auf 1.4.7. Da FlipDown keine Tags hatte, habe ich die Version 1.0.0 erstellt:

git tag 1.0.0
git push origin 1.0.0

Ein Tag ist erforderlich, da es die composer.json mit dem Typ „library“ enthält.

Warum nicht einfach die JS-Bibliothek in das Modul kopieren?

Sie können nur Bibliotheken mit GPL-Lizenz kopieren. JavaScript-Bibliotheken verwenden normalerweise die MIT-Lizenz. Technisch ist es möglich, aber die Regeln von Drupal.org verbieten es:
https://www.drupal.org/about/licensing

Nun veröffentlichen wir die FlipDown-Bibliothek auf Packagist:

https://packagist.org/packages/submit

Falls Sie vergessen haben, vor der Veröffentlichung eine composer.json mit „type“: „drupal-library“ hinzuzufügen — kein Problem. Fügen Sie einfach die Datei hinzu und erstellen Sie einen neuen Tag, Packagist holt die Aktualisierungen automatisch.

Hier ist die Bibliotheksseite auf Packagist:

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

Stellen Sie sicher, dass auf der Bibliotheksseite der Typ als drupal-library aufgeführt ist.

Gehen wir nun zurück zu unseren Drupal-Dateien und kopieren den Ordner ept_text; ich werde das neue Modul ept_countdown nennen:

Die folgenden Schritte müssen ausgeführt werden:

• Löschen Sie die Konfigurationen in /config/install — wir exportieren später neue.
• Ersetzen Sie alle Vorkommen von ept_text durch ept_countdown.
• Benenne Dateien um, indem Sie „text“ durch „countdown“ ersetzen.
• Aktualisieren Sie die Modulbeschreibungen in ept_countdown.info.yml und README.md.

Ich werde jeden Schritt separat in Git committen, damit Sie die Änderungen Schritt für Schritt verfolgen können:

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

Nun haben wir eine Vorlage für unser Modul und können Änderungen an Drupal.org übermitteln.

Gehen wir auf die drupal.org-Seite zur Projekterstellungsseite:

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

Wir müssen ein Projekt vom Typ Modul hinzufügen:

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

Titel: Extra Paragraph Types (EPT): Countdown
Projekttyp: Vollständiges Projekt
Kurzname: ept_countdown
Wartungsstatus: Aktiv gepflegt
Entwicklungsstatus: In aktiver Entwicklung
Modulkategorien: Inhalt, Inhaltsanzeige
Ökosystem: Extra Paragraph Types (EPT): Core

Im Feld Beschreibung füge ich normalerweise die vollständige Liste der verfügbaren EPT-Module ein (siehe das Markdown-Beispiel oben).

Jetzt haben wir eine Modul-Projektseite auf Drupal.org:
https://www.drupal.org/project/ept_countdown

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

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

Nach dem ersten Commit sollten Sie einen neuen Branch erstellen, der mit der Hauptversion der anderen EPT-Module übereinstimmt – derzeit ist dies 1.4.x.

Nun können wir beginnen, neue Funktionen zu unserem Modul hinzuzufügen. Der Prozess ähnelt der Entwicklung eines benutzerdefinierten Moduls: Wir erstellen einen Paragraph-Typ, fügen Felder hinzu und binden CSS-/JS-Ressourcen ein.

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

Zunächst müssen Sie einen neuen Paragraph-Typ EPT Countdown erstellen:

/admin/structure/paragraphs_type/add

Stellen Sie sicher, dass der Maschinenname mit ept_ beginnt. Ich beginne den Paragraph-Namen normalerweise mit EPT – so wird der Maschinenname automatisch korrekt gebildet. Sollte der Maschinenname mit dem Modulnamen übereinstimmen? Ja, das wird zur Konsistenz empfohlen und um Konflikte mit anderen EPT-Modulen zu vermeiden. Dies ist auch wichtig für das Überschreiben von Templates in Modulen statt in Themes – siehe die Funktion ept_core_theme_registry_alter() im ept_core-Modul.

Fügen Sie nun das Feld EPT Settings: field_ept_settings hinzu – dieses Feld ist für alle EPT-Module erforderlich:

EPT Settings ist ein gemeinsames Feld aus dem EPT Core-Modul; es bietet DOM-Box, Hintergrund-, Abstands- und Breiten-Einstellungen.

Da wir auf ein Datum herunterzählen müssen, fügen Sie ein Datums-/Uhrzeitfeld hinzu:

Ich habe das Präfix ept_ dem Maschinenname hinzugefügt, das ist aber nicht zwingend erforderlich. Sie können es zum Beispiel field_countdown_date nennen. Wir haben auch die Standardfelder body und title – das reicht für den Countdown-Paragraphen aus.

Für EPT-Module verwenden wir in der Regel horizontale Tabs im Bearbeitungsformular:

Das ist nicht zwingend erforderlich, aber es ist praktisch, Inhalt und Einstellungen zu trennen, besonders wenn viele Einstellungen vorhanden sind.

Die Elterngruppe sollte auf Tabs mit der Horizontal-Richtung und dem Parameter Width Breakpoint auf 120 (oder einem anderen kleinen Wert) gesetzt werden:

Nachdem wir den Paragraph-Typ erstellt haben, aktivieren Sie das Modul EPT Countdown, um die Templates anzuwenden:

/admin/modules

Aktivieren Sie den EPT Countdown Paragraph für den gewünschten Inhaltstyp mit einem Paragraph-Feld:

So sieht es auf der Seite aus:

Jetzt können wir eine Drittanbieter-Bibliothek einbinden. Die Bibliothek levmyshkin/flipdown ist bereits in der composer.json aufgeführt, aber da es sich um ein benutzerdefiniertes Modul handelt, müssen wir die Bibliothek manuell über Composer installieren:

composer require levmyshkin/flipdown

Die Bibliothek wird automatisch im Ordner /libraries installiert:

Erstellen Sie nun die Datei ept_countdown.libraries.yml und registrieren Sie die CSS/JS-Bibliotheken von FlipDown sowie eine eigene JS-Datei ept_flipdown/js/ept_countdown.js, in der das FlipDown-Plugin später initialisiert wird:

ept_countdown.libraries.yml:

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

Für Dateien im Ordner /libraries verwenden wir absolute Pfade, die mit einem Schrägstrich beginnen.

js/ept_countdown.js:

(function ($, Drupal) {

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

    }
  };

})(jQuery, Drupal);

Wir müssen die Bibliothek ept_countdown auch in den Paragraph-Templates einbinden. Vergessen Sie nicht, dass wir zwei Templates haben:

{{ attach_library('ept_countdown/ept_countdown') }}

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

Wir werden das Datum von PHP an JavaScript über drupalSettings übergeben. Deshalb haben wir die Datei ept_countdown.libraries.yml um die folgenden Abhängigkeiten erweitert:

  dependencies:
    - core/once
    - core/drupalSettings

In EPT-Modulen werden Standard-Einstellungen nicht automatisch an JavaScript übergeben. Um dies zu ermöglichen, müssen wir die Feld-Widget-Klasse EptSettingsDefaultWidget überschreiben:

Datei: ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php

<?php

namespace Drupal\ept_countdown\Plugin\Field\FieldWidget;

use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;

/**
 * Plugin-Implementierung des Widgets 'ept_settings_countdown'.
 *
 * @FieldWidget(
 *   id = "ept_settings_countdown",
 *   label = @Translation("EPT Countdown Einstellungen"),
 *   field_types = {
 *     "ept_settings"
 *   }
 * )
 */
class EptSettingsCountDownWidget extends EptSettingsDefaultWidget {

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

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

    $element['ept_settings']['color_theme'] = [
      '#title' => $this->t('Farbschema'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Dunkel'),
        'light' => $this->t('Hell'),
      ],
      '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Farbschema für den Countdown auswählen'),
      '#weight' => '3',
    ];

    $element['ept_settings']['styles'] = [
      '#title' => $this->t('Stile'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Standard'),
        'new_year' => $this->t('Neujahr'),
      ],
      '#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
      '#description' => $this->t('Besonderen Stil für den Countdown auswählen'),
      '#weight' => '4',
    ];

    $element['ept_settings']['heading_days'] = [
      '#title' => $this->t('Überschrift Tage'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Tage'),
      '#description' => $this->t('Überschrift für den Tage-Zähler'),
      '#weight' => '5',
    ];

    $element['ept_settings']['heading_hours'] = [
      '#title' => $this->t('Überschrift Stunden'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Stunden'),
      '#description' => $this->t('Überschrift für den Stunden-Zähler'),
      '#weight' => '6',
    ];

    $element['ept_settings']['heading_minutes'] = [
      '#title' => $this->t('Überschrift Minuten'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuten'),
      '#description' => $this->t('Überschrift für den Minuten-Zähler'),
      '#weight' => '7',
    ];

    $element['ept_settings']['heading_seconds'] = [
      '#title' => $this->t('Überschrift Sekunden'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunden'),
      '#description' => $this->t('Überschrift für den Sekunden-Zähler'),
      '#weight' => '8',
    ];

    return $element;
  }

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

Nun können wir unser Widget für das Feld EPT Settings auswählen:

Pfad: /admin/structure/paragraphs_type/ept_countdown/form-display

Speichern Sie den Paragraphen und prüfen Sie die JavaScript-Variablen über drupalSettings. Nun werden alle Parameter aus den EPT Settings an das Skript übergeben:

Am Ende des paragraph-id-*-Schlüssels steht die eindeutige Paragraph-ID, die hilft, den entsprechenden Paragraphen zu identifizieren.

Das FlipDown-Plugin hat einen Themen-Parameter (hell/dunkel). Wir übergeben ihn über das Feld color_theme im Widget EptSettingsCountDownWidget:

$element['ept_settings']['color_theme'] = [
  '#title' => $this->t('Farbschema'),
  '#type' => 'radios',
  '#options' => [
    'dark' => $this->t('Dunkel'),
    'light' => $this->t('Hell'),
  ],
  '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
  '#description' => $this->t('Farbschema für den Countdown auswählen'),
  '#weight' => '3',
];

Nun kann der Themenwert in JavaScript über drupalSettings abgerufen und verwendet werden, um den entsprechenden Stil anzuwenden:

Wir haben die Paragraph-Einstellungen bereits über drupalSettings an JavaScript übergeben. Nun müssen wir auch den Datumswert aus dem Datumsfeld übergeben. Erstellen Sie dazu ein leeres <div> im Template mit einem data-date-Attribut, das den Zeitstempel enthält. Verwenden Sie paragraph.id(), um eine eindeutige Paragraph-ID zu vergeben:

Datei: paragraph--ept-countdown--default.html.twig

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

Wenn Sie unsicher sind, wo der Datumswert gespeichert ist, verwenden Sie das Twig Debugger-Modul und fügen Sie {{ dump(content.field_ept_countdown_date) }} im Template ein.

Der Filter date('U') wandelt das Datum in ein Unix-Zeitstempelformat um.

Jetzt binden Sie das benutzerdefinierte JavaScript ein und initialisieren das FlipDown-Plugin:

Datei: /ept_countdown/js/ept_countdown.js

(function ($, Drupal) {

  /**
   * EPT Countdown Verhalten.
   */
  Drupal.behaviors.eptCountDown = {
    attach: function (context, settings) {
      var countdowns = once('ept-countdown-paragraph', '.ept-countdown-date', context);
      countdowns.forEach(function(countdown) {
        var eptOptions = drupalSettings['eptCountdown'][countdown.getAttribute('id')];
        var countdownTimestamp = parseInt(countdown.getAttribute('data-date'));
        var countdownId = countdown.getAttribute('id');

        new FlipDown(countdownTimestamp, countdownId, {
          theme: eptOptions['options']['color_theme'],
        }).start();
      });
    }
  };

})(jQuery, Drupal);

Vergessen Sie nicht, den Cache zu leeren, um die Änderungen anzuwenden. Danach sollte das FlipDown-Plugin korrekt auf der Seite dargestellt werden:

Wie wir sehen, werden selbst die Standard-Styles von FlipDown nicht perfekt dargestellt – zum Beispiel erscheinen auf dem Desktop Zahlen in zwei Zeilen. Aber das lässt sich mit eigenen Styles leicht beheben. Kopieren Sie einfach die Dateien gulpfile.js und package.json aus dem EPT Counter-Modul oder dem EPT Core Kickstarter-Modul.

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 = {
  scssSrc: 'scss/*.scss',
  allScss: 'scss/**/*.scss',
  cssDest: 'css/',
  allJs: 'assets/js/**/*.js',
  allImgs: 'assets/img/**/*'
};

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

exports.style = style;

function watch(){
  gulp.watch('scss/**/*.scss', style)
}

exports.watch = watch;

package.json:

{
  "name": "ept_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"
  },
  "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, nachdem Sie folgenden Befehl ausgeführt haben:

npm install

Danach können Sie die Gulp-Aufgabe mit folgendem Befehl starten:

gulp watch

Fügen Sie jetzt eine SCSS-Datei hinzu:

/ept_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Die Datei flipdown.css wird automatisch aus flipdown.scss kompiliert. Binden Sie sie in ept_countdown.libraries.yml ein:

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

Leeren Sie den Cache und überprüfen Sie das Ergebnis:

Die Darstellung ist nun deutlich verbessert!

Kann ich statt SCSS-Kompilierung auch einfaches CSS verwenden?

Ja, das können Sie. Die meisten Entwickler bevorzugen jedoch SCSS, weil es bequemer und skalierbarer ist.

Das FlipDown-Plugin unterstützt die Parameter theme und headings, die wir für die Anzeigeanpassung verwenden können. Wir haben bereits ein benutzerdefiniertes Feld-Widget EptSettingsCountDownWidget erstellt und fügen nun die entsprechenden Felder hinzu.

Datei: /ept_countdown/src/Plugin/Field/FieldWidget/EptSettingsCountDownWidget.php

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

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

  $element['ept_settings']['color_theme'] = [
    '#title' => $this->t('Farbschema'),
    '#type' => 'radios',
    '#options' => ['dark' => $this->t('Dunkel'), 'light' => $this->t('Hell')],
    '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
    '#description' => $this->t('Farbschema für den Countdown auswählen'),
    '#weight' => '3',
  ];

  $element['ept_settings']['styles'] = [
    '#title' => $this->t('Stile'),
    '#type' => 'radios',
    '#options' => ['default' => $this->t('Standard'), 'new_year' => $this->t('Neujahr')],
    '#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
    '#description' => $this->t('Besonderen Stil für den Countdown auswählen'),
    '#weight' => '4',
  ];

  $element['ept_settings']['heading_days'] = [
    '#title' => $this->t('Überschrift Tage'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Tage'),
    '#description' => $this->t('Überschrift für den Tage-Zähler'),
    '#weight' => '5',
  ];

  $element['ept_settings']['heading_hours'] = [
    '#title' => $this->t('Überschrift Stunden'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Stunden'),
    '#description' => $this->t('Überschrift für den Stunden-Zähler'),
    '#weight' => '6',
  ];

  $element['ept_settings']['heading_minutes'] = [
    '#title' => $this->t('Überschrift Minuten'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuten'),
    '#description' => $this->t('Überschrift für den Minuten-Zähler'),
    '#weight' => '7',
  ];

  $element['ept_settings']['heading_seconds'] = [
    '#title' => $this->t('Überschrift Sekunden'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunden'),
    '#description' => $this->t('Überschrift für den Sekunden-Zähler'),
    '#weight' => '8',
  ];

  return $element;
}

Nun können wir die Überschriften und das Farbschema im Template verwenden. Die Element-ID folgt dem Muster paragraph-id-{{ paragraph.id() }}, womit wir die Daten aus drupalSettings abrufen können:

new FlipDown(countdownTimestamp, countdownId, {
  theme: eptOptions['options']['color_theme'],
  headings: [
    eptOptions['options']['heading_days'],
    eptOptions['options']['heading_hours'],
    eptOptions['options']['heading_minutes'],
    eptOptions['options']['heading_seconds'],
  ],
}).start();

Außerdem verwenden wir den styles-Wert aus den Einstellungen, um im Template dynamisch Stile zuzuweisen:

{%
  set classes = [
    'paragraph',
    'ept-paragraph',
    'ept-paragraph-countdown',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    'ept-paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished',
    'paragraph-id-' ~ paragraph.id(),
    content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles,
    content.field_ept_settings['#object'].field_ept_settings.ept_settings.color_theme,
  ]
%}

Binden Sie die new_year-Styles bedingt ein, falls der entsprechende Stil ausgewählt ist:

{% if content.field_ept_settings['#object'].field_ept_settings.ept_settings.styles == 'new_year' %}
  {{ attach_library('ept_countdown/new_year') }}
{% endif %}

ept_countdown.libraries.yml:

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

/ept_countdown/scss/new-year.scss:

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

Ergebnis:

Sie können beliebig viele eigene Styles für neue oder bestehende EPT-Module hinzufügen. Sie können auch eigene Styles vorschlagen, indem Sie ein Issue auf Drupal.org erstellen:

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

Wir haben die Funktionalität für EPT Countdown fertiggestellt. Nun ist es Zeit, die Konfigurationen zu exportieren und das Modul für die Veröffentlichung auf Drupal.org vorzubereiten.

Alle Konfigurationen, die den EPT Countdown Paragraph betreffen, müssen in den Ordner /ept_countdown/config/install kopiert werden.

Wurde das Modul mit Drush generiert, sollten Sie die Konfigurationen neu exportieren, um sicherzustellen, dass alle Einstellungen für Felder und Paragraph-Typen aktualisiert sind.

Anschließend können Sie das Modul auf der Seite Erweitern – /admin/modules – aktivieren. Alle Paragraph- und Feldkonfigurationen für EPT Countdown werden dann automatisch aus /config/install installiert:

Die language.*-Konfigurationsdateien müssen nicht enthalten sein, da das Sprachmodul auf manchen Seiten deaktiviert sein kann.

Ich kopiere normalerweise alle benötigten YAML-Dateien und stelle sicher, dass sie unter config/install liegen:

Vor dem Commit sollten Sie uuid und hashes aus den YAML-Dateien entfernen:

Wenn Ihr Modul von anderen Drupal-Modulen (z. B. datetime) abhängt, listen Sie diese unbedingt als Abhängigkeiten in der .info.yml-Datei auf:

/ept_countdown/ept_countdown.info.yml:

dependencies:
  - drupal:datetime

Ihr Modul ist nun bereit zum Hochladen und zur Veröffentlichung auf Drupal.org.

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

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

Der ausgewählte Haupt-Branch ist 1.4.x, um mit anderen Modulen im EPT-Ökosystem konsistent zu bleiben:

Alle Releases beginnen nun mit der Version 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Sie können auch Vorab-Versionen wie -alpha oder -beta erstellen, bevor Sie die stabile Version 1.4.0 veröffentlichen.

Sie müssen 10 Tage nach der Projekterstellung warten, bevor das Modul im Programm Security Advisory Coverage aufgenommen werden kann:

Sie können nun das neue Modul über verschiedene Inhaltstypen hinweg testen, das Verhalten von FlipDown, die Theme-Einstellungen und Überschriften überprüfen. Bei Bedarf können Sie Fehlerberichte einreichen und Patches veröffentlichen.

Wenn Sie das EPT-Modul mit Drush generiert haben, sollte die Datei README.md bereits automatisch erstellt worden sein.

Unabhängig davon sollten Sie nicht vergessen, eine README.md-Datei in Ihr Modul aufzunehmen. Diese wichtige Datei enthält die Modulbeschreibung, Anforderungen, Installationsschritte und Nutzungshinweise. Ein Beispiel finden Sie in einem anderen EPT-Modul:

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

Danke, dass Sie die EPT-Module verwenden! Sie können jederzeit Fragen stellen oder Ideen teilen:

• Erstellen Sie ein Issue auf Drupal.org
• Kontaktieren Sie den Entwickler der EPT-Module
• Senden Sie eine Nachricht auf LinkedIn