Layout Builder Anpassung. Erstellen eines benutzerdefinierten Layouts in Drupal

Nach dem Hinzufügen der Vorlage sollten wir in der Lage sein, unseren Abschnitt einfach hinzuzufügen:

Definition des Layout-Plugins

Aus der Sicht des Endbenutzers haben wir bisher nichts getan, da der Inhaltsredakteur nur den neuen Abschnittstitel mit dem großen [CUSTOM]-Präfix sehen wird. Das liegt daran, dass der von uns hinzugefügte Abschnitt identisch mit dem Standardabschnitt ist, der mit dem Layout Builder-Modul bereitgestellt wird (mit einer kleinen Ausnahme: unsere Implementierung fügt keine Klassen hinzu). Um das Verhalten zu ändern, müssen wir ein neues Layout-Plugin implementieren.

Rahmen der Basisklasse

Die Klasse sollte sich im Ordner src/Plugin/Layout befinden. Sie wird generisch genug sein, um für eine beliebige Anzahl von Regionen verwendet zu werden. Die Klasse Drupal\Core\Layout\LayoutDefault enthält viele Basismethoden und implementiert die benötigten Schnittstellen. Um das Rad nicht neu zu erfinden, können wir es in unserer Klasse erweitern.

# Dateiname: CustomLayoutClassBase.php

<?php

namespace Drupal\custom_layout_builder\Plugin\Layout;

use Drupal\Core\Layout\LayoutDefault;

/**
 * Basisklasse unserer benutzerdefinierten Layouts mit konfigurierbaren HTML-Klassen.
 *
 * @internal
 *   Plugin-Klassen sind intern.
 */
class CustomLayoutClassBase extends LayoutDefault {

}

Hinzufügen von Konfigurationsoptionen zu einer Basisklasse

Eine der Anforderungen ist die Möglichkeit, eine Klasse für das Tag auszuwählen, das die Regionen des Abschnitts umschließt. Dazu müssen wir zunächst die Methode defaultConfiguration überschreiben und eine neue Konfigurationsoption hinzufügen.

/**
 * {@inheritdoc}
 */
public function defaultConfiguration() {
  $configuration = parent::defaultConfiguration();

  return $configuration + [
    'wrapper_classes' => '',
  ];
}

Dann sollten wir die Möglichkeit hinzufügen, einen Wert für diese Konfigurationsoption anzugeben. Dies können wir durch das Überschreiben der Methoden buildConfigurationForm und submitConfigurationForm erreichen.

/**
 * {@inheritdoc}
 */
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
  $form['wrapper_classes'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Zusätzliche Wrapper-Klassen'),
    '#default_value' => $this->configuration['wrapper_classes'],
    '#description' => $this->t('Zusätzliche Wrapper-Klassen. Geben Sie so viele ein, wie Sie möchten, aber denken Sie daran, sie durch ein einzelnes Leerzeichen zu trennen.'),
  ];

  return parent::buildConfigurationForm($form, $form_state);
}

/**
 * {@inheritdoc}
 */
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
  parent::submitConfigurationForm($form, $form_state);

  $this->configuration['wrapper_classes'] = $form_state->getValue('wrapper_classes');
}

Wenn es nötig ist, die Formularvalidierung hinzuzufügen, kann dies durch das Überschreiben der Methode validateConfigurationForm erfolgen. Wir empfehlen die Implementierung der Validierung für dieses Feld, da Klassen den Standards der Drupal-Community entsprechen sollten. Die Methode Html::getClass() kann in diesem Fall nützlich sein.

Verwendung von Konfigurationen zum Erstellen von Abschnitten

Das Render-Array wird in der build-Methode erstellt, und genau das werden wir jetzt überschreiben. Wenn Sie sich an den Inhalt der Vorlage erinnern, die wir hinzugefügt haben, wissen Sie wahrscheinlich bereits, dass wir Klassen zum attributes-Objekt hinzufügen.

/**
 * {@inheritdoc}
 */
public function build(array $regions): array {
  $build = parent::build($regions);
  $wrapper_classes = explode(' ', (string) $this->configuration['wrapper_classes']);
  $build['#attributes']['class'] = [...$wrapper_classes];

  return $build;
}

Verwendung der Basis zur Erstellung eines Layout-Plugins

Unsere Klasse ist bereit, jetzt ist es Zeit, sie in einem Abschnitt zu verwenden. Dazu gehen wir zurück zur Datei *.layouts.yml, um ein neues Plugin zu deklarieren. Dies geschieht durch Angabe des vollständigen Namespace der Klasse unter dem class-Schlüssel.

# Dateiname: custom_layout_builder.layouts.yml

layout_custom_one_column:
  label: '[CUSTOM] Eine Spalte'
  category: 'Benutzerdefinierte Layouts'
  path: layouts/custom_onecol_section
  template: layout--custom-onecol-section
  class: '\Drupal\custom_layout_builder\Plugin\Layout\CustomOneColLayout'
  default_region: first
  icon_map:
    - [first]
  regions:
    first:
      label: Erste

Nach den oben genannten Änderungen werden Sie feststellen, dass das Abschnittsformular ein neues Feld hat und dass die in diesem Feld eingegebenen Klassen an der richtigen Stelle im HTML stehen.

Hinzufügen der Option zum Auswählen von Klassen für Regionen

Wir können bereits eine Klassenliste für das Umhüllungselement in unserem Abschnitt definieren. Es ist Zeit, darüber nachzudenken, wie man die Logik erstellt, die für das Hinzufügen von Klassen zu einzelnen Bereichen unseres Layouts verantwortlich ist. Wir sollten die Erweiterbarkeit unserer Basisklasse in Betracht ziehen. Deshalb empfehlen wir, die Logik zur Bestimmung und zum Zugriff auf Regionen auf der Grundlage der Methode getRegionNames() der Klasse LayoutDefinition zu etablieren.

1. Zuerst fügen wir für jede Region ein Feld zu unserem Formular hinzu:

/**
 * {@inheritdoc}
 */
public function buildConfigurationForm(array $form, FormStateInterface $form_state) {
  $form['wrapper_classes'] = [
    '#type' => 'textfield',
    '#title' => $this->t('Zusätzliche Wrapper-Klassen'),
    '#default_value' => $this->configuration['wrapper_classes'],
    '#description' => $this->t('Zusätzliche Wrapper-Klassen. Geben Sie so viele ein, wie Sie möchten, aber denken Sie daran, sie durch ein einzelnes Leerzeichen zu trennen.'),
  ];

  foreach ($this->getPluginDefinition()->getRegionNames() as $region_name) {
    $form['region_classes'][$region_name] = [
      '#type' => 'textfield',
      '#title' => $this->t('Zusätzliche Klassen für Region @region_name', [
        '@region_name' => $region_name,
      ]),
      '#default_value' => $this->configuration['region_classes'][$region_name],
      '#description' => $this->t('Zusätzliche Klassen für den Wrapper der Region @region_name. Geben Sie so viele ein, wie Sie möchten, aber denken Sie daran, sie durch ein einzelnes Leerzeichen zu trennen.', [
        '@region_name' => $region_name,
      ]),
    ];
  }

  return parent::buildConfigurationForm($form, $form_state);
}

2. Wir verwenden eine ähnliche Schleife, um den Wert zu schreiben:

/**
 * {@inheritdoc}
 */
public function submitConfigurationForm(array &$form, FormStateInterface $form_state) {
  parent::submitConfigurationForm($form, $form_state);

  $this->configuration['wrapper_classes'] = $form_state->getValue('wrapper_classes');

  foreach ($this->getPluginDefinition()->getRegionNames() as $region_name) {
    $this->configuration['region_classes'][$region_name] = $form_state->getValue(['region_classes', 
$region_name], '');
      }
}

3. Der letzte Schritt besteht darin, die Methode build zu überschreiben und unsere Klassen in das entsprechende Attributes-Klassenobjekt einzubetten.

/**
 * {@inheritdoc}
 */
public function build(array $regions): array {
  $build = parent::build($regions);
  $wrapper_classes = explode(' ', (string) $this->configuration['wrapper_classes']);
  $build['#attributes']['class'] = [...$wrapper_classes];

  foreach (array_keys($regions) as $region_name) {
    $region_classes = explode(' ', (string) $this->configuration['region_classes'][$region_name]);
    $build[$region_name]['#attributes']['class'] = [...$region_classes];
  }

  return $build;
}

Nach unseren neuesten Änderungen sollten wir ein neues Feld Zusätzliche Klassen für die erste Region sehen, in dem wir eine Liste von Klassen angeben können, die wir verwenden möchten.

Beachten Sie, dass die Region nur erscheint, wenn sie nicht leer ist. Deshalb haben wir einen Testblock hinzugefügt, der den Titel des Knotens enthält. Lassen Sie uns sehen, ob die Klassen im HTML sichtbar sind.

Erstellen verschiedener Varianten von Abschnitten

Der Code wurde so generisch geschrieben, dass das Hinzufügen eines Abschnitts mit einer unterschiedlichen Anzahl von Regionen nur die Definition der Region und Vorlage von uns erfordert. Lassen Sie uns dann einen neuen Abschnitt mit zwei Regionen hinzufügen.

Zuerst fügen wir die Definition hinzu:

# Dateiname: custom_layout_builder.layouts.yml

layout_custom_one_column:
  label: '[CUSTOM] Eine Spalte'
  category: 'Benutzerdefinierte Layouts'
  path: layouts/custom_onecol_section
  template: layout--custom-onecol-section
  class: '\Drupal\custom_layout_builder\Plugin\Layout\CustomLayoutClassBase'
  default_region: first
  icon_map:
    - [first]
  regions:
    first:
      label: Erste
layout_custom_two_columns:
  label: '[CUSTOM] Zwei Spalten'
  category: 'Benutzerdefinierte Layouts'
  path: layouts/custom_twocol_section
  template: layout--custom-twocol-section
  class: '\Drupal\custom_layout_builder\Plugin\Layout\CustomLayoutClassBase'
  default_region: first
  icon_map:
    - [first, second]
  regions:
    first:
      label: Erste
    second:
      label: Zweite

Und dann bereiten wir die Vorlage vor:

# Dateiname: layout--custom-twocol-section.html.twig

{#
/**
 * @file
 * Standard-Implementierung für einen benutzerdefinierten Layout-Onecol-Abschnitt.
 *
 * Verfügbare Variablen:
 * - content: Der Inhalt für dieses Layout.
 * - attributes: HTML-Attribute für das Layout <div>.
 * - region_attributes: HTML-Attribute für die Region <div>.
 * - settings: Ein Array von konfigurierten Einstellungen für das Layout.
 *
 * @ingroup themeable
 */
#}
{% if content %}
  <div{{ attributes }}>

    {% if content.first %}
      <div {{ region_attributes.first }}>
        {{ content.first }}
      </div>
    {% endif %}

    {% if content.second %}
      <div {{ region_attributes.second }}>
        {{ content.second }}
      </div>
    {% endif %}

  </div>
{% endif %}