logo

Dodatni tipovi blokova (EBT) - Novo iskustvo rada sa Layout Builder-om❗

Dodatni tipovi blokova (EBT) – stilizovani, prilagodljivi tipovi blokova: slajdšouvi, kartice sa tabovima, kartice, akordeoni i mnogi drugi. Ugrađena podešavanja za pozadinu, DOM Box, javascript dodatke. Iskusite budućnost kreiranja rasporeda već danas.

Demo EBT moduli Preuzmite EBT module

❗Dodatni tipovi pasusa (EPT) – Novo iskustvo rada sa pasusima

Dodatni tipovi pasusa (EPT) – analogni skup modula zasnovan na pasusima.

Demo EPT moduli Preuzmite EPT module

Scroll

Kreiranje novih EPT modula

23/05/2025, by Ivan

Najteži način za kreiranje novog EPT modula je korišćenje Drush komande (za Drush 12+). Da biste koristili ovu komandu, potrebno je da omogućite EPT Core Starterkit modul:

EPT Starterkit

Nakon toga, generator EPT modula biće dostupan:

drush generate ept:module

Počnite naziv mašine sa prefiksom ept_*, to je obavezno za rad svih EPT modula.

EPT generator modula

Takođe možete koristiti EPT Starterkit u EPT Core fascikli modula. Samo preimenujte sve ePt_starterkit u fajlovima u naziv mašine vašeg novog EPT modula.

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

Ili kopirajte EPT Text modul i zamenite naziv mašine tamo.

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

Jer je to najjednostavniji EPT modul i sadrži sva osnovna EPT podešavanja. 

Kreiranje EPT modula korak po korak

(Neke snimke ekrana mogu biti iz EBT countdown modula)

Kopirajte postojeći EPT Text modul ili EPT Kickstarter modul kao šablon, ili koristite komandu drush generate ept:module.

EPT Text modul sadrži sledeće fascikle:
/ept_text/config/install — sadrži konfiguracije za EPT Text tip paragrafa i instance polja. Drugi EPT moduli mogu sadržavati konfiguracije za tipove paragrafa i skladištenje polja.
/ept_text/templates — sadrži paragraph--ept-text--default.html.twig šablon za paragraf.
/ept_text/tests — sadrži testove za EPT module, trenutno samo jedan test instalacije.

i druge standardne Drupal datoteke modula: composer.json, ept_text.info.yml, readme.md. Više detalja o kreiranju prilagođenih Drupal modula možete pronaći u zvaničnoj dokumentaciji:

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

Kreiraću novi EPT Countdown modul koji će koristiti sledeći JavaScript dodatak — FlipDown:

https://github.com/PButcher/flipdown

FlipCount.js

Napravite fork repozitorijuma na GitHub-u i pošaljite ga na Packagist.

Sve biblioteke trećih strana moraju biti forkovane i hostovane na Packagist-u, na primer:

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

sa:

https://github.com/levmyshkin/flexslider

Onda Composer može da ih učitava kao regularne biblioteke sa Packagist-a. Ove biblioteke trećih strana moraju imati polje "type": "drupal-library" u composer.json, i tada će biti instalirane u /libraries folder po defaultu:
https://github.com/levmyshkin/flexslider/blob/master/composer.json

EBT biblioteka

Napravimo fork FlipDown repozitorijuma na GitHub-u.

Generalno se ne preporučuje forkovati repozitorijume umesto korišćenja originalnih izvora. Međutim, verujem da ovo olakšava korišćenje EPT modula bez manuelnog uređivanja composer.json. Zamislite koliko je teško početniku da instalira Composer, ručno menja composer.json i ispravno navede URL spoljnog repozitorijuma. Imati sopstvenu biblioteku na Packagist-u pojednostavljuje instalaciju. Zato je bolje hostovati sve biblioteke trećih strana na Packagist-u.

fork git repozitorijuma

Na stranici forka na GitHub-u možete preimenovati repozitorijum. Naziv treba da bude jednostavan, bez velikih slova i specijalnih znakova. Dozvoljeni su crtica (-) i donja crta (_).

Preimenuj repozitorijum

Sada imamo novi repozitorijum:

https://github.com/levmyshkin/flipdown

Dodajmo composer.json fajl sa tipom "drupal-library":

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

composer.json fajl je dostupan na:

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

Ako proverite trenutne tagove u repozitorijumu, neće ih biti:

git tag

Git tagovi

Obično pratim verziju originalne biblioteke. Ako je poslednja verzija bila 1.4.6, povećam sekundarnu verziju na 1.4.7. Pošto FlipDown nije imao tagove, kreirao sam verziju 1.0.0:

git tag 1.0.0
git push origin 1.0.0

Tag je potreban jer sadrži composer.json sa tipom "library".

Zašto ne kopirati JS biblioteku direktno u modul?

Možete kopirati biblioteke samo sa GPL licencom. JavaScript biblioteke obično koriste MIT licencu. Tehnički je moguće, ali Drupal.org pravila to zabranjuju:
https://www.drupal.org/about/licensing

Sada objavimo FlipDown biblioteku na Packagist-u:

https://packagist.org/packages/submit

Podnesi novu biblioteku na packagist.org

Ako ste zaboravili da dodate composer.json sa "type": "drupal-library" pre objavljivanja — nije problem. Samo dodajte fajl i kreirajte novi tag, Packagist će automatski preuzeti ažuriranja.

Ovako izgleda stranica biblioteke na Packagist-u:

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

Packagist biblioteka

Proverite da li stranica biblioteke prikazuje tip kao drupal-library.

Sada se vratimo našim Drupal fajlovima i kopirajmo fasciklu ept_text; novom modulu ću dati naziv ept_countdown:

EPT Countdown

Sledeće korake treba izvršiti:

  • Obrišite konfiguracije u /config/install — nove ćemo izvesti kasnije.
  • Zamenite sve pojave ept_text sa ept_countdown.
  • Preimenujte fajlove, zamenjujući "text" sa "countdown".
  • Ažurirajte opise modula u ept_countdown.info.yml i README.md.

Svaki korak ću zasebno komitovati u Gitu, tako da možete pratiti izmene korak po korak:

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

Sada imamo šablon za naš modul i možemo slati izmene na Drupal.org.

Napravite projekat modula na Drupal.org.

Idemo na sajt drupal.org na stranicu za kreiranje projekta:

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

Drupal.org dodaj sadržaj

Potrebno je dodati projekat tipa Modul:

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

Naslov: Extra Paragraph Types (EPT): Countdown
Tip projekta: Potpuni projekat
Kratki naziv: ept_countdown
Status održavanja: Aktivno održavan
Status razvoja: U aktivnom razvoju
Kategorije modula: Sadržaj, Prikaz sadržaja
Eko sistem: Extra Paragraph Types (EPT): Core

Kreiraj novi drupal projekat

U polje Opis obično ubacujem kompletnu listu dostupnih EPT modula (pogledajte primer u Markdown-u gore).

Sada imamo stranicu projekta modula na Drupal.org:
https://www.drupal.org/project/ept_countdown

Na tabu Verziona kontrola (Version Control) možete pronaći uputstva kako da dodate udaljeni repozitorijum u vaš lokalni Git projekat:

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

Verziona kontrola Drupal projekta

Nakon prvog commit-a, trebalo bi da napravite novu granu u skladu sa glavnom verzijom ostalih EPT modula — trenutno je to 1.4.x.

Sada možemo početi sa dodavanjem nove funkcionalnosti našem modulu. Proces je sličan razvoju prilagođenog modula: kreiraćemo tip paragrafa, dodati polja i uključiti CSS/JS resurse.

Početak razvoja funkcionalnosti EPT Countdown

Korak 1. Kreirajte EPT Countdown tip paragrafa. Jednostavno instalirajte modul ako ste ga generisali pomoću Drush-a.
 

Jednostavno instalirajte modul ako ste ga generisali pomoću Drush-a.

Prvo, potrebno je da kreirate novi tip paragrafa EPT Countdown:

/admin/structure/paragraphs_type/add

Dodaj EPT Countdown tip paragrafa

Uverite se da naziv mašine počinje sa ept_. Obično naziv paragrafa započinjem sa EPT — na taj način će se naziv mašine automatski ispravno formirati. Da li naziv mašine treba da se poklapa sa imenom modula? Da, preporučuje se radi konzistentnosti i da se izbegnu konflikti sa drugim EPT modulima. Ovo je takođe važno za preklapanje šablona u modulima umesto u temama — pogledajte funkciju ept_core_theme_registry_alter() u modulu ept_core.

Sada dodajte polje EPT Settings: field_ept_settings — ovo polje je obavezno za sve EPT module:

Dodaj polje EPT Settings

EPT Settings je zajedničko polje iz EPT Core modula; pruža podešavanja DOM Box-a, pozadine, razmaka i širine.

Pošto treba da odbrojavamo do datuma, dodajte polje za datum/vreme:

Dodaj polje Datum

Dodao sam ept_ prefiks u naziv mašine, ali to nije obavezno. Možete nazvati, na primer, field_countdown_date. Takođe imamo podrazumevana polja body i title — to je dovoljno za countdown paragraf.

Za EPT module obično koristimo horizontalne tabove u uređivačkom formi:

Horizontalni tabovi

Ovo nije obavezno, ali je zgodno da se sadržaj i podešavanja odvoje, naročito kada ima mnogo podešavanja.

Roditeljska grupa treba biti podešena na Tabove sa Horizontalnim pravcem i parametrom Width Breakpoint postavljenim na 120 (ili bilo koju drugu malu vrednost):

Podešavanja tabova

Sada kada imamo tip paragrafa, omogućite EPT Countdown modul da bi se primenili šabloni:

/admin/modules

Omogući EPT Countdown

Omogućite EPT Countdown paragraf za željeni tip sadržaja koji ima polje za paragrafe:

Kreiraj paragraf EPT Countdown

Evo kako izgleda na stranici:

EPT Countdown

Korak 2. Povezivanje biblioteka trećih strana u EPT modulima

Sada možemo povezati biblioteku treće strane. Već imamo biblioteku levmyshkin/flipdown navedenu u composer.json, ali pošto je ovo prilagođeni modul, potrebno je da biblioteku instaliramo ručno preko Composer-a:

composer require levmyshkin/flipdown

Biblioteka će biti automatski instalirana u /libraries folder:

Instaliraj flipdown

Sada kreirajte fajl ept_countdown.libraries.yml i registrujte FlipDown CSS/JS biblioteke, kao i prilagođeni JS fajl ept_flipdown/js/ept_countdown.js, gde će se kasnije inicijalizovati FlipDown plugin:

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

Za fajlove u /libraries folderu koristimo apsolutne putanje koje počinju kosom crtom.

js/ept_countdown.js:

(function ($, Drupal) {

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

    }
  };

})(jQuery, Drupal);

Takođe treba da prikačimo ept_countdown biblioteku u šablone paragrafa. Ne zaboravite da imamo dva šablona:

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

Drupal šabloni

Očistite keš i proverite da li su JavaScript fajlovi učitani na stranici:

Dodaj javascript fajl

Datum ćemo proslediti iz PHP-a u JavaScript preko drupalSettings. Zato smo u ept_countdown.libraries.yml fajl dodali sledeće zavisnosti:

  dependencies:
    - core/once
    - core/drupalSettings

Korak 3. Povezivanje prilagođenog widgeta polja za EPT podešavanja i prosleđivanje promenljivih u JavaScript

U EPT modulima, podrazumevana podešavanja se ne prosleđuju u JavaScript. Da bismo to omogućili, potrebno je da preklopimo klasu widgeta polja EptSettingsDefaultWidget:

Fajl: 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;

/**
 * Implementacija plugina za widget 'ept_settings_countdown'.
 *
 * @FieldWidget(
 *   id = "ept_settings_countdown",
 *   label = @Translation("EPT Countdown podešavanja"),
 *   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('Tema boje'),
      '#type' => 'radios',
      '#options' => [
        'dark' => $this->t('Tamna'),
        'light' => $this->t('Svetla'),
      ],
      '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
      '#description' => $this->t('Izaberite temu boje za odbrojavanje'),
      '#weight' => '3',
    ];

    $element['ept_settings']['styles'] = [
      '#title' => $this->t('Stilovi'),
      '#type' => 'radios',
      '#options' => [
        'default' => $this->t('Podrazumevano'),
        'new_year' => $this->t('Nova godina'),
      ],
      '#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
      '#description' => $this->t('Izaberite poseban stil za odbrojavanje'),
      '#weight' => '4',
    ];

    $element['ept_settings']['heading_days'] = [
      '#title' => $this->t('Naslov za dane'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Dani'),
      '#description' => $this->t('Naslov za brojilac dana'),
      '#weight' => '5',
    ];

    $element['ept_settings']['heading_hours'] = [
      '#title' => $this->t('Naslov za sate'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Sati'),
      '#description' => $this->t('Naslov za brojilac sati'),
      '#weight' => '6',
    ];

    $element['ept_settings']['heading_minutes'] = [
      '#title' => $this->t('Naslov za minute'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuti'),
      '#description' => $this->t('Naslov za brojilac minuta'),
      '#weight' => '7',
    ];

    $element['ept_settings']['heading_seconds'] = [
      '#title' => $this->t('Naslov za sekunde'),
      '#type' => 'textfield',
      '#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunde'),
      '#description' => $this->t('Naslov za brojilac sekundi'),
      '#weight' => '8',
    ];

    return $element;
  }

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

Sada možemo izabrati naš widget za polje EPT Settings:

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

EPT Settings

Sačuvajte paragraf i proverite JavaScript promenljive preko drupalSettings. Sada se svi parametri iz EPT Settings prosleđuju skripti:

Drupal EPT

Na kraju ključa paragraph-id-* nalazi se jedinstveni ID paragrafa, koji pomaže da se identifikuje odgovarajući paragraf.

FlipDown plugin ima parametar teme (svetla/tamna). Mi ga prosleđujemo koristeći polje color_theme u widgetu EptSettingsCountDownWidget:

$element['ept_settings']['color_theme'] = [
  '#title' => $this->t('Tema boje'),
  '#type' => 'radios',
  '#options' => [
    'dark' => $this->t('Tamna'),
    'light' => $this->t('Svetla'),
  ],
  '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
  '#description' => $this->t('Izaberite temu boje za odbrojavanje'),
  '#weight' => '3',
];

EPT Countdown podešavanja

Sada se vrednost teme može preuzeti u JavaScript preko drupalSettings i koristiti za primenu odgovarajućeg stila:

Tamna tema

Korak 4. Inicijalizacija FlipDown plugina za EPT Countdown paragraf

Već smo prosledili podešavanja paragrafa u JavaScript preko drupalSettings. Sada treba da prosledimo i vrednost datuma iz polja Datum. Da bismo to uradili, kreirajte prazan <div> u šablonu sa atributom data-date koji čuva timestamp vrednost. Koristite paragraph.id() da dodelite jedinstveni ID paragrafa:

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

EPT HTML

Ako niste sigurni gde se čuva vrednost datuma, koristite Twig Debugger modul i ubacite {{ dump(content.field_ept_countdown_date) }} u šablon.

Filter date('U') konvertuje datum u Unix timestamp format.

Sada uključite prilagođeni JavaScript i inicijalizujte FlipDown plugin:

Fajl: /ept_countdown/js/ept_countdown.js

(function ($, Drupal) {

  /**
   * Ponašanje EPT Countdown.
   */
  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);

Ne zaboravite da očistite keš da bi se izmene primenile. Nakon toga, FlipDown plugin bi trebalo da se pravilno prikazuje na stranici:

FlipDown

Korak 5. Stilizovanje novog EPT Countdown paragrafa. Za modul generisan putem Drush-a, Gulp.js fajl je već uključen.

Kao što vidimo, čak ni podrazumevani FlipDown stilovi nisu savršeno prikazani — na primer, na desktopu se brojevi pojavljuju u dva reda. Ali ovo možemo lako popraviti prilagođenim stilovima. Jednostavno kopirajte fajlove gulpfile.js i package.json iz EPT Counter modula ili iz EPT Core Kickstarter modula.

gulpfile.js:

// Učitavanje plugina
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": "Pokrenite npm install, zatim gulp watch",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Greška: nije definisan test\" && 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"
  }
}

Fajl package-lock.json biće automatski generisan nakon pokretanja:

npm install

Zatim možete pokrenuti Gulp zadatak sa:

gulp watch

Sada dodajte SCSS fajl:

/ept_countdown/scss/flipdown.scss

.flipdown {
  width: 580px;
}

Fajl flipdown.css biće automatski kompajliran iz flipdown.scss. Uključite ga u ept_countdown.libraries.yml:

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

Očistite keš i proverite rezultat:

EBT odbrojavanje

Prikaz je sada značajno poboljšan!

Da li mogu koristiti običan CSS umesto SCSS kompajlacije?

Da, možete. Ali većina programera više voli pisanje u SCSS jer je pogodnije i skalabilnije.

Korak 6. Proširenje forme podešavanja dodatnim parametrima FlipDown plugina

FlipDown plugin podržava parametre theme i headings, koje možemo koristiti za prilagođavanje prikaza. Već smo kreirali prilagođeni widget polja EptSettingsCountDownWidget, a sada ćemo mu dodati odgovarajuća polja.

Fajl: /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('Tema boje'),
    '#type' => 'radios',
    '#options' => ['dark' => $this->t('Tamna'), 'light' => $this->t('Svetla')],
    '#default_value' => $items[$delta]->ept_settings['color_theme'] ?? 'dark',
    '#description' => $this->t('Izaberite temu boje za odbrojavanje'),
    '#weight' => '3',
  ];

  $element['ept_settings']['styles'] = [
    '#title' => $this->t('Stilovi'),
    '#type' => 'radios',
    '#options' => ['default' => $this->t('Podrazumevano'), 'new_year' => $this->t('Nova godina')],
    '#default_value' => $items[$delta]->ept_settings['styles'] ?? 'default',
    '#description' => $this->t('Izaberite poseban stil za odbrojavanje'),
    '#weight' => '4',
  ];

  $element['ept_settings']['heading_days'] = [
    '#title' => $this->t('Naslov za dane'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_days'] ?? $this->t('Dani'),
    '#description' => $this->t('Naslov za brojilac dana'),
    '#weight' => '5',
  ];

  $element['ept_settings']['heading_hours'] = [
    '#title' => $this->t('Naslov za sate'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_hours'] ?? $this->t('Sati'),
    '#description' => $this->t('Naslov za brojilac sati'),
    '#weight' => '6',
  ];

  $element['ept_settings']['heading_minutes'] = [
    '#title' => $this->t('Naslov za minute'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_minutes'] ?? $this->t('Minuti'),
    '#description' => $this->t('Naslov za brojilac minuta'),
    '#weight' => '7',
  ];

  $element['ept_settings']['heading_seconds'] = [
    '#title' => $this->t('Naslov za sekunde'),
    '#type' => 'textfield',
    '#default_value' => $items[$delta]->ept_settings['heading_seconds'] ?? $this->t('Sekunde'),
    '#description' => $this->t('Naslov za brojilac sekundi'),
    '#weight' => '8',
  ];

  return $element;
}

Sada možemo koristiti naslove i temu u šablonu. ID elementa prati obrazac paragraph-id-{{ paragraph.id() }}, što nam omogućava da preuzmemo podatke iz drupalSettings:

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

Pored toga, koristimo vrednost styles iz podešavanja za dinamičko dodeljivanje stilova u šablonu:

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

Prikačite new_year stilove uslovno ako je izabran odgovarajući stil:

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

Rezultat:

New Year EBT blok

Možete dodati bilo koji broj prilagođenih stilova za nove ili postojeće EPT module. Takođe možete predložiti svoje stilove kreiranjem issue-a na Drupal.org:

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

Korak 7. Izvoz konfiguracija za EPT paragrafe i polja

Završili smo dodavanje funkcionalnosti u EPT Countdown. Sada je vreme da izvezemo konfiguracije i pripremimo modul za objavljivanje na Drupal.org.

Sve konfiguracije vezane za EPT Countdown paragraf treba da budu kopirane u fasciklu /ept_countdown/config/install.

Ako je modul generisan korišćenjem Drush-a, trebalo bi ponovo da izvezete konfiguracije da biste bili sigurni da su sva podešavanja polja i tipova paragrafa ažurirana.

Nakon toga, možete omogućiti modul na stranici Proširi/admin/modules. Sve konfiguracije paragrafa i polja za EPT Countdown biće automatski instalirane iz /config/install:

EBT konfiguracije modula

Nije potrebno uključivati konfiguracione fajlove language.*, jer modul Jezici može biti onemogućen na nekim sajtovima.

Obično kopiram sve potrebne YAML fajlove i proveravam da li su smešteni u config/install:

Kopija konfiguracija

Pre nego što izvršite commit, obavezno uklonite uuid i hash iz YAML fajlova:

Ukloni uuid

Ako vaš modul zavisi od drugih Drupal modula (na primer, datetime), obavezno ih navedite kao zavisnosti u .info.yml fajlu:

Drupal zavisnosti

/ept_countdown/ept_countdown.info.yml:

dependencies:
  - drupal:datetime

Vaš modul je sada spreman za postavljanje i objavljivanje na Drupal.org.

Korak 8. Postavljanje na Drupal.org i testiranje

Već smo kreirali novi projekat na Drupal.org:

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

Glavna grana koja je izabrana je 1.4.x, kako bi se ostalo u skladu sa ostalim modulima u EPT ekosistemu:

Drupal EBT modul

Sva izdavanja sada počinju verzijom 1.4.0:

git tag 1.4.0
git push origin 1.4.0

Takođe možete kreirati predizdanje (pre-release) verzije kao što su -alpha ili -beta pre objavljivanja stabilne verzije 1.4.0.

Potrebno je da sačekate 10 dana nakon kreiranja projekta pre nego što modul može biti uključen u program Security Advisory Coverage:

EBT Countdown

Sada možete testirati novi modul na različitim tipovima sadržaja, proveriti ponašanje FlipDown plugina, podešavanja teme i naslove. Po potrebi, prijaviti greške i objaviti zakrpe.

Korak 9. Dodavanje README.md fajla

Ako ste generisali EPT modul pomoću Drush-a, README.md fajl bi već trebalo da bude automatski kreiran.

U svakom slučaju, ne zaboravite da uključite README.md fajl u svoj modul. Ovo je važan fajl koji sadrži opis modula, zahteve, korake instalacije i smernice za korišćenje. Primer možete pogledati u drugom EPT modulu:

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

Hvala što koristite EPT module! Uvek možete postaviti pitanja ili podeliti ideje: