Nieuwe EPT-modules aanmaken

De EPT Text-module bevat de volgende mappen:
/ept_text/config/install — bevat configuraties voor het EPT Text-paragraaftype en veldinstanties. Andere EPT-modules kunnen configuraties bevatten voor paragraaftypen en veldopslag.
/ept_text/templates — bevat de paragraph--ept-text--default.html.twig-template voor de paragraph.
/ept_text/tests — bevat tests voor EPT-modules, momenteel slechts één installatie-test.

En andere standaard Drupal-modulebestanden: composer.json, ept_text.info.yml, readme.md. Meer details over het maken van aangepaste Drupal-modules zijn te vinden in de officiële documentatie:

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

Ik zal een nieuwe EPT Countdown-module maken die de volgende JavaScript-plugin gebruikt — FlipDown:

https://github.com/PButcher/flipdown

Alle externe libraries moeten geforkt en gehost worden op Packagist, bijvoorbeeld:

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

van:

https://github.com/levmyshkin/flexslider

Daarna kan Composer ze als reguliere libraries van Packagist laden. Deze externe libraries moeten het veld "type": "drupal-library" in composer.json bevatten, waarna ze standaard in de map /libraries worden geïnstalleerd:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

Laten we de FlipDown-repository op GitHub forken.

In het algemeen wordt het niet aangeraden om repositories te forken in plaats van de originele bronnen te gebruiken. Ik denk echter dat dit het gebruik van EPT-modules eenvoudiger maakt zonder composer.json handmatig te bewerken. Stel je voor hoe lastig het voor een beginner is om Composer te installeren, composer.json handmatig aan te passen en een externe repository-URL correct op te geven. Een eigen library op Packagist vereenvoudigt de installatie. Daarom is het beter om alle externe libraries op Packagist te hosten.

Op de GitHub-pagina van de fork kun je de repository hernoemen. De naam moet eenvoudig zijn, zonder hoofdletters of speciale tekens. Koppelteken (-) en underscore (_) zijn toegestaan.

Nu hebben we een nieuwe repository:

https://github.com/levmyshkin/flipdown

Voeg een composer.json-bestand toe met type "drupal-library":

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

Het composer.json-bestand is beschikbaar op:

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

Als je de huidige tags in de repository bekijkt, zullen die ontbreken:

git tag

Ik volg doorgaans de versie van de originele library. Als de laatste versie 1.4.6 was, verhoog ik de minor-versie naar 1.4.7. Omdat FlipDown geen tags had, heb ik versie 1.0.0 aangemaakt:

git tag 1.0.0
git push origin 1.0.0

Een tag is vereist omdat deze de composer.json met type "library" bevat.

Waarom niet gewoon de JS-library in de module kopiëren?

Je mag alleen libraries met een GPL-licentie kopiëren. JavaScript-libraries gebruiken meestal de MIT-licentie. Technisch is het mogelijk, maar de regels van Drupal.org verbieden dit:
https://www.drupal.org/about/licensing

Laten we nu de FlipDown-library op Packagist publiceren:

https://packagist.org/packages/submit

Als je vergat composer.json met "type": "drupal-library" toe te voegen vóór publicatie — geen probleem. Voeg het bestand toe en maak een nieuwe tag; Packagist haalt de updates automatisch op.

Hier is de bibliotheekpagina op Packagist:

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

Zorg ervoor dat op de bibliotheekpagina het type drupal-library wordt vermeld.

Laten we nu teruggaan naar onze Drupal-bestanden en de map ept_text kopiëren; ik noem de nieuwe module ept_countdown:

De volgende stappen moeten worden uitgevoerd:

• Verwijder configuraties in /config/install — we exporteren later nieuwe.
• Vervang alle voorkomens van ept_text door ept_countdown.
• Hernoem bestanden en vervang “text” door “countdown”.
• Werk de modulebeschrijvingen bij in ept_countdown.info.yml en README.md.

Ik zal elke stap afzonderlijk committen in Git, zodat je de wijzigingen stap voor stap kunt volgen:

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

Nu hebben we een sjabloon voor onze module en kunnen we wijzigingen op Drupal.org indienen.

Laten we naar de drupal.org-site gaan naar de projectaanmaakpagina:

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

We moeten een project van het type Module toevoegen:

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

Titel: Extra Paragraph Types (EPT): Countdown
Projecttype: Volledig project
Korte naam: ept_countdown
Onderhoudsstatus: Actief onderhouden
Ontwikkelingsstatus: In actieve ontwikkeling
Modulecategorieën: Content, Contentweergave
Ecosysteem: Extra Paragraph Types (EPT): Core

In het veld Beschrijving voeg ik meestal de volledige lijst met beschikbare EPT-modules in (zie het Markdown-voorbeeld hierboven).

Nu hebben we een moduleprojectpagina op Drupal.org:
https://www.drupal.org/project/ept_countdown

Op het tabblad Version Control vind je instructies over hoe je een externe repository toevoegt aan je lokale Git-project:

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

Na de initiële commit moet je een nieuwe branch maken die consistent is met de hoofdversie van andere EPT-modules — momenteel is dit 1.4.x.

Nu kunnen we beginnen met het toevoegen van nieuwe functionaliteit aan onze module. Het proces is vergelijkbaar met het ontwikkelen van een aangepaste module: we maken een paragraaftype aan, voegen velden toe en nemen CSS/JS-resources op.

Installeer eenvoudig de module als je deze met Drush hebt gegenereerd.

Allereerst moet je een nieuw paragraaftype EPT Countdown aanmaken:

/admin/structure/paragraphs_type/add

Zorg ervoor dat de machinenaam begint met ept_. Ik begin de paragraafnaam doorgaans met EPT — zo wordt de machinenaam automatisch correct gevormd. Moet de machinenaam overeenkomen met de modulenaam? Ja, dit wordt aanbevolen voor consistentie en om conflicten met andere EPT-modules te voorkomen. Dit is ook belangrijk om templates in modules te kunnen overschrijven in plaats van in thema’s — zie de functie ept_core_theme_registry_alter() in de ept_core-module.

Voeg nu het veld EPT Settings: field_ept_settings toe — dit veld is vereist voor alle EPT-modules:

EPT Settings is een gedeeld veld uit de EPT Core-module; het biedt DOM Box-, achtergrond-, afstands- en breedte-instellingen.

Aangezien we moeten aftellen tot een datum, voeg een datum/tijd-veld toe:

Ik heb het voorvoegsel ept_ aan de machinenaam toegevoegd, maar dit is niet vereist. Je kunt het bijvoorbeeld field_countdown_date noemen. We hebben ook de standaardvelden body en title — dit is voldoende voor de countdown-paragraph.

Voor EPT-modules gebruiken we meestal horizontale tabs in het bewerkingsformulier:

Dit is niet vereist, maar het is handig om content en instellingen te scheiden, vooral wanneer er veel instellingen zijn.

De bovenliggende groep moet worden ingesteld op Tabs met de richting Horizontaal en de parameter Width Breakpoint ingesteld op 120 (of een andere kleine waarde):

Nu we het paragraaftype hebben, schakel de module EPT Countdown in om de templates toe te passen:

/admin/modules

Schakel de EPT Countdown-paragraph in voor het gewenste inhoudstype met een paragraphs-veld:

Dit is wat we op de pagina krijgen:

Nu kunnen we een externe bibliotheek koppelen. We hebben de levmyshkin/flipdown bibliotheek al vermeld in composer.json, maar omdat dit een custom module is, moeten we de bibliotheek handmatig installeren via Composer:

composer require levmyshkin/flipdown

De bibliotheek wordt automatisch geïnstalleerd in de /libraries map:

Maak nu het bestand ept_countdown.libraries.yml aan en registreer de CSS/JS-bibliotheken van FlipDown, evenals een custom JS-bestand ept_flipdown/js/ept_countdown.js, waarin later de FlipDown-plugin wordt geïnitialiseerd:

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

Voor bestanden in de /libraries map gebruiken we absolute paden die beginnen met een slash.

js/ept_countdown.js:

(function ($, Drupal) {

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

    }
  };

})(jQuery, Drupal);

We moeten de ept_countdown bibliotheek ook koppelen in de paragraph-templates. Vergeet niet dat we twee templates hebben:

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

Leeg de cache en controleer of de JavaScript-bestanden op de pagina worden geladen:

We zullen de datum van PHP naar JavaScript doorgeven via drupalSettings. Daarom hebben we het ept_countdown.libraries.yml bestand uitgebreid door de volgende dependencies toe te voegen:

  dependencies:
    - core/once
    - core/drupalSettings

In EPT-modules worden standaardinstellingen niet doorgegeven aan JavaScript. Om dit mogelijk te maken, moeten we de field widget-klasse EptSettingsDefaultWidget overschrijven:

Bestand: 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 implementation of the 'ept_settings_countdown' widget.
 *
 * @FieldWidget(
 *   id = "ept_settings_countdown",
 *   label = @Translation("EPT Countdown settings"),
 *   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('Color theme'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Dark'),
        'light' => $this->t('Light'),
      ],
      '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Select color theme for countdown'),
      '#weight' => '3',
    ];

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

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

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

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

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

    return $element;
  }

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

Nu kunnen we onze widget selecteren voor het veld EPT Settings:

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

Sla de paragraph op en controleer de JavaScript-variabelen via drupalSettings. Nu worden alle parameters uit EPT Settings aan het script doorgegeven:

Aan het einde van de paragraph-id-* key staat de unieke paragraph-ID, die helpt om de overeenkomstige paragraph te identificeren.

De FlipDown-plugin heeft een thema-parameter (light/dark). We geven deze door via het color_theme veld in de EptSettingsCountDownWidget widget:

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

Nu kan de themawaarde in JavaScript via drupalSettings worden opgehaald en gebruikt om de juiste stijl toe te passen:

We hebben de paragraph-instellingen al doorgegeven aan JavaScript via drupalSettings. Nu moeten we ook de datumswaarde van het Date-veld doorgeven. Hiervoor maken we een lege <div> in de template met een data-date attribuut dat de timestamp-waarde opslaat. Gebruik paragraph.id() om een unieke paragraph-ID toe te wijzen:

Bestand: 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>

Als je niet zeker weet waar de datumswaarde wordt opgeslagen, gebruik dan de Twig Debugger module en voeg {{ dump(content.field_ept_countdown_date) }} in de template in.

De date('U') filter zet de datum om naar Unix timestamp-formaat.

Neem nu het custom JavaScript op en initialiseer de FlipDown-plugin:

Bestand: /ept_countdown/js/ept_countdown.js

(function ($, Drupal) {

  /**
   * EPT Countdown gedrag.
   */
  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);

Vergeet niet de cache te legen om de wijzigingen toe te passen. Daarna zou de FlipDown-plugin correct op de pagina moeten worden weergegeven:

Zoals we kunnen zien, worden zelfs de standaard FlipDown-stijlen niet perfect weergegeven—bijvoorbeeld, op desktop verschijnen de cijfers op twee regels. Maar dit kunnen we eenvoudig oplossen met aangepaste stijlen. Kopieer simpelweg de bestanden gulpfile.js en package.json uit de EPT Counter-module of de EPT Core Kickstarter-module.

gulpfile.js:

// Plugins laden
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"
  }
}

Het bestand package-lock.json wordt automatisch gegenereerd na het uitvoeren van:

npm install

Daarna kun je de Gulp-taak starten met:

gulp watch

Voeg nu een SCSS-bestand toe:

/ept_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Het flipdown.css-bestand wordt automatisch gecompileerd vanuit flipdown.scss. Voeg het toe in ept_countdown.libraries.yml:

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

Leeg de cache en bekijk het resultaat:

De weergave is nu aanzienlijk verbeterd!

Kan ik gewone CSS gebruiken in plaats van SCSS-compilatie?

Ja, dat kan. Maar de meeste ontwikkelaars geven de voorkeur aan het schrijven van SCSS omdat dit handiger en beter schaalbaar is.

De FlipDown-plugin ondersteunt de parameters theme en headings, die we kunnen gebruiken voor weergave-aanpassingen. We hebben al een aangepaste field widget EptSettingsCountDownWidget gemaakt, en nu voegen we daar de overeenkomstige velden aan toe.

Bestand: /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('Color theme'),
    '#type' => 'radios',
    '#options' => ['dark' => $this->t('Dark'), 'light' => $this->t('Light')],
    '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
    '#description' => $this->t('Select color theme for countdown'),
    '#weight' => '3',
  ];

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

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

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

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

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

  return $element;
}

Nu kunnen we de headings en het theme in de template gebruiken. De element-ID volgt het patroon paragraph-id-{{ paragraph.id() }}, waarmee we data uit drupalSettings kunnen ophalen:

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();

Bovendien gebruiken we de waarde styles uit de instellingen om in de template dynamisch stijlen toe te wijzen:

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

Koppel de new_year-stijlen conditioneel als de overeenkomstige stijl is geselecteerd:

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

Resultaat:

Je kunt een onbeperkt aantal custom stijlen toevoegen voor nieuwe of bestaande EPT-modules. Je kunt ook je stijlen voorstellen door een issue aan te maken op Drupal.org:

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

We hebben de functionaliteit voor EPT Countdown afgerond. Nu is het tijd om de configuraties te exporteren en de module voor te bereiden op release op Drupal.org.

Alle configuraties die verband houden met de EPT Countdown-paragraph moeten worden gekopieerd naar de map /ept_countdown/config/install.

Als de module is gegenereerd met Drush, moet je de configuraties opnieuw exporteren om er zeker van te zijn dat alle veld- en paragraph-type instellingen up-to-date zijn.

Daarna kun je de module inschakelen op de Extend-pagina — /admin/modules. Alle paragraph- en veldconfiguraties voor EPT Countdown worden automatisch geïnstalleerd vanuit /config/install:

Het is niet nodig om language.*-configuratiebestanden op te nemen, omdat de Language-module op sommige sites uitgeschakeld kan zijn.

Ik kopieer meestal alle vereiste YAML-bestanden en zorg ervoor dat ze onder config/install worden geplaatst:

Voordat je commit, zorg ervoor dat je de uuid en hashes uit de YAML-bestanden verwijdert:

Als je module afhankelijk is van andere Drupal-modules (bijvoorbeeld datetime), vermeld deze dan als dependencies in het .info.yml-bestand:

/ept_countdown/ept_countdown.info.yml:

dependencies:
  - drupal:datetime

Je module is nu klaar om te uploaden en te publiceren op Drupal.org.

We hebben al een nieuw project aangemaakt op Drupal.org:

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

De hoofdtak die is geselecteerd is 1.4.x, om consistent te blijven met andere modules in het EPT-ecosysteem:

Alle releases zullen nu starten vanaf versie 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Je kunt ook pre-releaseversies aanmaken, zoals -alpha of -beta, voordat je de stabiele 1.4.0-release publiceert.

Je moet 10 dagen wachten na het aanmaken van het project voordat de module kan worden opgenomen in het Security Advisory Coverage-programma:

Je kunt nu de nieuwe module testen met verschillende contenttypes, het gedrag van FlipDown verifiëren, thema-instellingen en headings controleren. Indien nodig kun je bugrapporten indienen en patches uitbrengen.

Als je de EPT-module hebt gegenereerd met Drush, zou het bestand README.md al automatisch aangemaakt moeten zijn.

Vergeet in ieder geval niet om een README.md-bestand in je module op te nemen. Dit is een belangrijk bestand dat de modulebeschrijving, vereisten, installatie-instructies en gebruiksrichtlijnen bevat. Je kunt een voorbeeld bekijken in een andere EPT-module:

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

Bedankt voor het gebruiken van EPT-modules! Je kunt altijd vragen stellen of ideeën delen:

• Maak een issue aan op Drupal.org
• Neem contact op met de ontwikkelaar van de EPT-module
• Stuur een bericht op LinkedIn