logo

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

Extra Paragraph Types (EPT) - analoge op paragrafen gebaseerde set modules.

Demo EPT-modules Download EPT-modules

Scroll

9.7. Plugins in Drupal. Hoe een blok programatisch toe te voegen.

17/10/2025, by Ivan
In deze tutorial bekijken we hoe we blokken programatisch kunnen tonen via een aangepaste module in Drupal 8. Codevoorbeelden kunnen bekeken worden op github: https://github.com/levmyshkin/drupalbook8 Laten we beginnen met het toevoegen van een bestand met een PHP-klasse, dit is hoe blokken in Drupal via een aangepaste module worden aangemaakt. Het proces van het maken van dit bestand is hetzelfde als de klasse voor de pagina, zoals we hier deden: 9.3. Maak een aangepaste Drupal module. Toon de pagina programatisch. Alleen moeten we een bestand met een plugin aanmaken: modules/custom/drupalbook/src/Plugin/Block/FirstBlock.php Laten we de code voor dit blok kopiëren en daarna elk stukje code analyseren modules/custom/drupalbook/src/Plugin/Block/FirstBlock.php:
<?php

namespace Drupal\drupalbook\Plugin\Block;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;

/**
 * Levert een blok met een simpele tekst.
 *
 * @block(
 *   id = "drupalbook_first_block_block",
 *   admin_label = @block("Mijn eerste blok"),
 * )
 */
class FirstBlock extends BlockBase {
  /**
   * {@block}
   */
  public function build() {
    $config = $this->getConfiguration();

    if (!empty($config['drupalbook_first_block_settings'])) {
      $text = $this->t('Hallo @Name in blok!', ['@Name' => $config['drupalbook_first_block_settings']]);
    }
    else {
      $text = $this->t('Hallo Wereld in blok!');
    }

    return [
      '#markup' => $text,
    ];
  }

  /**
   * {@block}
   */
  protected function blockAccess(AccountInterface $account) {
    return AccessResult::allowedIfHasPermission($account, 'access content');
  }

  /**
   * {@block}
   */
  public function blockForm($form, FormStateInterface $form_state) {
    $config = $this->getConfiguration();

    $form['drupalbook_first_block_settings'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Naam'),
      '#description' => $this->t('Naar wie wil je hallo zeggen?'),
      '#default_value' => !empty($config['drupalbook_first_block_settings']) ? $config['drupalbook_first_block_settings'] : '',
    ];

    return $form;
  }

  /**
   * {@block}
   */
  public function blockSubmit($form, FormStateInterface $form_state) {
    $this->configuration['drupalbook_first_block_settings'] = $form_state->getValue('drupalbook_first_block_settings');
  }
}
We zullen ons blok weergeven in de zijbalk links of een andere kolom, waar het voor jou handig is. Begin met het typen van de naam van je blok en Drupal zal automatisch voorstellen om je blok te selecteren. Als je blok daar niet is, controleer dan of de gewenste code in het juiste bestand staat en het bestand in de juiste map zit. Vergeet na het aanpassen niet de cache te wissen. Nu ons blok wordt weergegeven, laten we kijken hoe de code voor het toevoegen van een blok werkt: Aan het begin van het bestand hebben we een namespace om te bepalen waar ons blok pluginbestand moet zijn, zodat Drupal het automatisch kan verbinden. We importeren ook klassen uit andere bestanden via de 'use' operator.
\drupalbook\Plugin\Block;

use Drupal\Core\Access\AccessResult;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Session\AccountInterface;
Verder in de commentaar is de annotatie. We hoeven het blok nergens in YML-bestanden te definiëren; het wordt automatisch geladen door Drupal via de annotatie. /** * Levert een blok met een simpele tekst. * * @block( * id = "drupalbook_first_block_block", * admin_label = @block("Mijn eerste blok"), * ) */ Hier geven we aan bij @block dat het een blok plugin zal zijn. 'id' en 'admin_label' worden automatisch door Drupal opgepikt, dus de id moet uniek zijn. @block helpt vervolgens de bloklabel te vertalen via de Drupal admininterface. We erven van de BlockBase-klasse, je kunt Ctrl ingedrukt houden en op BlockBase klikken in PhpStorm om te zien welke methoden we kunnen overschrijven in ons blok. We gebruiken niet alle methoden, maar je kunt andere methoden overschrijven indien nodig. Laten we verder kijken naar de class-methoden:
/**
 * {@block}
 */
protected function blockAccess(AccountInterface $account) {
  return AccessResult::allowedIfHasPermission($account, 'access content');
}
We hebben al toegang tot de pagina behandeld in dit artikel. In blokken kunnen we dezelfde toegangsrechten gebruiken. Hier gebruiken we dezelfde AccessResult-klasse.
/**
 * {@block}
 */
public function blockForm($form, FormStateInterface $form_state) {
  $config = $this->getConfiguration();

  $form['drupalbook_first_block_settings'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Naam'),
    '#description' => $this->t('Naar wie wil je hallo zeggen?'),
    '#default_value' => !empty($config['drupalbook_first_block_settings']) ? $config['drupalbook_first_block_settings'] : '',
  ];

  return $form;
}
We kunnen een apart formulier voor blokconfiguratie gebruiken voor elk blok dat we programatisch aanmaken. Als je naar de blokinstellingen gaat: Hier zie je ons Naamveld, dat we hebben toegevoegd in de blockForm()-methode: We gebruiken de Drupal Form API om velden voor het formulier te maken: https://www.drupal.org/docs/8/api/form-api https://api.drupal.org/api/drupal/elements/8.5.x In de toekomst zullen we de Form API gedetailleerder behandelen en een multi-step pop-up formulier maken. Voor nu kun je zien welke andere soorten velden je kunt gebruiken via de Form API. Elk veld wordt toegevoegd via een array. Probeer meer velden toe te voegen aan het blokformulier.
/**
 * {@block}
 */
public function blockSubmit($form, FormStateInterface $form_state) {
  $this->configuration['drupalbook_first_block_settings'] = $form_state->getValue('drupalbook_first_block_settings');
}
Hier slaan we de waarde van de velden uit het formulier op in de Drupal-configuratie. We zullen de configuratie verder behandelen in de volgende lessen. Voor nu moet je begrijpen dat Drupal een gemeenschappelijke opslag heeft voor alle configuraties en alle modules deze opslag gebruiken. Deze configuraties kunnen van de ene site naar de andere worden overgezet. Als je bijvoorbeeld de blokinstellingen op een lokale versie van de site hebt gewijzigd, kunnen deze configuraties geüpload worden naar de live site en worden de blokinstellingen op de live site toegepast.
/**
 * {@block}
 */
public function build() {
  $config = $this->getConfiguration();

  if (!empty($config['drupalbook_first_block_settings'])) {
    $text = $this->t('Hallo @Name in blok!', ['@Name' => $config['drupalbook_first_block_settings']]);
  }
  else {
    $text = $this->t('Hallo Wereld in blok!');
  }

  return [
    '#markup' => $text,
  ];
}
En nu de belangrijkste build() methode, die de inhoud van het blok weergeeft. In deze methode controleren we de configuratie van het blok en als we een Naam hebben, geven we de tekst met de naam weer. Let op de $this->t() methode, hiermee kun je tekst vertalen via het Drupal-adminpaneel naar andere talen. We gebruiken ook de placeholder @Name, we hebben die nodig om alleen de gewenste tekst te vertalen, en niet de waarden van de velden die we in configuratieformulieren invoeren. Dit voorkomt dat meerdere regels voor vertaling beschikbaar zijn, bijvoorbeeld als je geen placeholder gebruikt, dan zijn alle opties voor de tekst die door $this->t() gaan, beschikbaar in het adminpaneel voor vertaling: Hallo Josh ... Hallo Mike ... Hallo Ivan ... enzovoorts. Ik denk dat het duidelijk voor je is geworden hoe je aangepaste blokken in Drupal 8 kunt weergeven en configureren. Later behandelen we complexere voorbeelden met blokken, pagina's, formulieren. Codevoorbeelden kunnen bekeken worden op github: https://github.com/levmyshkin/drupalbook8