logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
04/10/2025, by Ivan

Menu

Ora diciamo che vogliamo aggiungere la possibilità per il site builder di inserire una parte di configurazione per ogni istanza del nostro blocco personalizzato. Tenete sempre presente che tutte le configurazioni del sito in Drupal 8 possono essere esportate da un sito di sviluppo e importate su un sito di produzione (conosciuto come Gestione della configurazione). Voi, come sviluppatori di moduli, potete anche fornire configurazioni predefinite per popolare automaticamente il form quando il site builder crea un nuovo blocco.

Nella classe esistente HelloBlock della pagina precedente, aggiungete queste istruzioni "use", subito dopo quelle già presenti:

use Drupal\Core\Block\BlockPluginInterface;
use Drupal\Core\Form\FormStateInterface;

Aggiornate la dichiarazione della classe per includere la nuova implementazione dell’interfaccia BlockPluginInterface:

class HelloBlock extends BlockBase implements BlockPluginInterface {

Poi aggiungete il seguente metodo alla classe. Un file completo simile si trova qui, ma notate che il nome del form e i nomi della configurazione potrebbero non coincidere con questo tutorial.

Questo codice aggiungerà solo il form, la gestione dell’invio e il salvataggio dei risultati verranno trattati nelle pagine successive.

  /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['hello_block_name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Chi'),
      '#description' => $this->t('A chi vuoi dire ciao?'),
      '#default_value' => isset($config['hello_block_name']) ? $config['hello_block_name'] : '',
    ];

    return $form;
  }

In questo esempio il form viene prima definito richiamando la sua classe padre con l’istruzione $form = parent::blockForm($form, $form_state);. Poi aggiungiamo un nuovo campo al form. Questo processo si chiama polimorfismo ed è uno dei principali vantaggi dell’uso dei metodi della programmazione orientata agli oggetti (OOP).

Successivamente dobbiamo dire a Drupal di salvare i valori del nostro form nella configurazione di questo blocco. Ecco un esempio:

  /**
   * {@inheritdoc}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    parent::blockSubmit($form, $form_state);
    $values = $form_state->getValues();
    $this->configuration['hello_block_name'] = $values['hello_block_name'];
  }

Per visualizzare il form, andate all’istanza aggiunta in precedenza in Amministrazione → Struttura → Layout dei blocchi e cliccate su Configura per il blocco (Hello World).

Per aggiungere più submit allo stesso form:

  /**
   * {@inheritdoc}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $form = parent::blockForm($form, $form_state);

    $config = $this->getConfiguration();

    $form['hello_block_name'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Chi'),
      '#description' => $this->t('A chi vuoi dire ciao?'),
      '#default_value' => isset($config['hello_block_name']) ? $config['hello_block_name'] : '',
    ];

    $form['actions']['custom_submit'] = [
      '#type' => 'submit',
      '#name' => 'custom_submit',
      '#value' => $this->t('Invio personalizzato'),
      '#submit' => [[$this, 'custom_submit_form']],
    ];    

    return $form;
  }

Nuova azione di invio personalizzata:

  /**
   * Azioni di submit personalizzate.
   */
  public function custom_submit_form($form, FormStateInterface $form_state) {
    $values = $form_state->getValues();
    // Eseguire le azioni richieste.
  }