Erweiterung des EPT-Einstellungsformulars
Neue EPT-Einstellungsformular-Klasse erstellen
Ich habe von vielen Programmierern gehört, dass sie sich wegen der Vielzahl an Einstellungen für EPT-Module Sorgen machen: DOM Box, Hintergrund, Rahmen, Klassen usw. Diese Programmierer befürchten, dass Inhaltsredakteure verwirrt sein könnten oder auf andere Weise ermutigt werden, radikal unterschiedliche Absätze, Ränder, Hintergründe zu erstellen. Manche Projekte benötigen Flexibilität und mehr Einstellungen für Inhaltsredakteure, aber einige Projekte haben recht strikte Styleguides mit festen Komponenten. In diesem Fall müssen wir unser EPT Settings-Feld-Widget anpassen.
Auch wenn du ein neues EPT-Modul erstellst und ein JavaScript-Plugin mit Optionen anhängst, musst du ein eigenes EPT-Einstellungs-Widget mit Einstellungsfeldern für diese Optionen verwenden.
Das EPT Core-Modul enthält die Klasse EptSettingsDefaultWidget für das EPT Settings-Feld-Widget. Es beinhaltet DOM Box, Hintergrund und alle weiteren Einstellungen. Wir beginnen damit, eine neue Klasse EptSettingsSimpleWidget zu erstellen (ich werde sie im EPT Core-Modul platzieren). Sie enthält nur drei Einstellungen: Breite und Abstand (für den unteren Rand des Absatzes).
Erstelle eine neue Datei:
/src/Plugin/Field/FieldWidget/EptSettingsSimpleWidget.php
<?php
namespace Drupal\ept_core\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Utility\Color;
use Drupal\Core\StringTranslation\TranslatableMarkup;
use Drupal\ept_core\Plugin\Field\FieldWidget\EptSettingsDefaultWidget;
/**
* Plugin-Implementierung des 'ept_settings_simple'-Widgets.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT einfache Absatz-Einstellungen"),
* field_types = {
* "ept_settings"
* }
* )
*/
class EptSettingsSimpleWidget extends EptSettingsDefaultWidget {
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
return $element;
}
/**
* {@inheritdoc}
*/
public function massageFormValues(array $values, array $form, FormStateInterface $form_state) {
foreach ($values as &$value) {
$value += ['ept_settings' => []];
}
return $values;
}
}
Wir erweitern unsere Basisklasse EptSettingsDefaultWidget. Im Annotationskommentar @FieldWidget benennen wir unser Widget id = "ept_settings_simple" und label = @Translation("EPT einfache Einstellungen").
/**
* Plugin-Implementierung des 'ept_settings_simple'-Widgets.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT einfache Absatz-Einstellungen"),
* field_types = {
* "ept_settings"
* }
* )
*/
Wir haben außerdem zwei Methoden: formElement() und massageFormValues(). Du kannst massageFormValues() so lassen, wie sie ist. Drupal serialisiert automatisch alle Einstellungen in einem Feld field_ept_settings. Daher spielt es keine Rolle, wie viele Einstellungen du hast, sie werden als serialisiertes Array gespeichert und du musst nur die Einstellungsfelder mit der Form API angeben:
https://www.drupal.org/docs/drupal-apis/form-api
Im formElement() definieren wir die Einstellungsfelder. Lass uns die DOM-Box- und Rahmen-Einstellungen ausblenden:
/**
* {@inheritdoc}
*/
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
$element = parent::formElement($items, $delta, $element, $form, $form_state);
unset($element['ept_settings']['design_options']['box1']);
unset($element['ept_settings']['design_options']['other_settings']['border_color']);
unset($element['ept_settings']['design_options']['other_settings']['border_style']);
unset($element['ept_settings']['design_options']['other_settings']['border_radius']);
return $element;
}
Wenn du das neue Feld-Widget für einen deiner EPT-Absatztypen anwendest:
Siehst du ein kleineres Einstellungsformular:
Jetzt entfernen wir auch die Hintergrund-Einstellungen. Wenn du die Hintergrund-Einstellungen benötigst, aber nicht alle anderen Einstellungen, kannst du die Klasse EptSettingsDefaultWidget erweitern und ein eigenes Feld-Widget erstellen. Hier ein Beispiel, wie man EPT-Einstellungen so klein wie möglich macht:
...
unset($element['ept_settings']['design_options']['other_settings']['background_color']);
unset($element['ept_settings']['design_options']['other_settings']['background_media']);
unset($element['ept_settings']['design_options']['other_settings']['background_image_style']);
...
Unser Formular hat nun nur noch zwei Einstellungen:
Es bleibt nur noch das Feld „Spacing“ (Abstand) für den unteren Rand hinzuzufügen. Wir verwenden zusätzliche Klassen und CSS, um die Abstände zu organisieren:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Vielleicht benötigst du eine größere Liste von Abständen, du kannst die Klasse EptSettingsSimpleWidget erweitern und daraus eine eigene Feld-Widget-Klasse erstellen, so wie wir es mit EptSettingsDefaultWidget gemacht haben.
$element['ept_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Background Image Style'),
'#options' => [
'spacing-none' => $this->t('None'),
'spacing-sm' => $this->t('Klein'),
'spacing-md' => $this->t('Mittel'),
'spacing-lg' => $this->t('Groß'),
'spacing-xl' => $this->t('Extra Groß'),
'spacing-xxl' => $this->t('Doppelt Extra Groß'),
],
'#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Jetzt sehe ich drei Wege, um Styles für unseren Block hinzuzufügen:
1. Block-Template überschreiben und den Abstand dort als Block-Klasse setzen.
2. Styles „on the fly“ generieren und sie als individuelles CSS für jeden Absatz einbinden.
3. Klasse per JavaScript hinzufügen, indem für jeden EPT-Absatz individuelles JS generiert wird.
4. Die Liste der Klassen in der template_preprocess_block()-Funktion überschreiben.
Alle diese Ansätze funktionieren, aber ich denke, es ist am einfachsten, die Funktion template_process_paragraph() zu verwenden. Zumindest haben wir bereits die Funktion ept_core_preprocess_block() in der Datei ebt_core.module. Lass sie uns nutzen:
...
if (!empty($ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'])) {
$variables['attributes']['class'][] = $ept_settings[0]['ept_settings']['design_options']['other_settings']['spacing'];
}
...
Jetzt übergeben wir die Spacing-Feldschlüssel als Klassennamen und nutzen CSS, um den Wert für die Abstände anhand dieser Klassen zu definieren:
/ebt_core/scss/ept_core.scss
.spacing-sm {
margin-bottom: 10px;
}
.spacing-md {
margin-bottom: 20px;
}
.spacing-lg {
margin-bottom: 30px;
}
.spacing-xl {
margin-bottom: 40px;
}
.spacing-xxl {
margin-bottom: 50px;
}
Du kannst die Werte in deiner eigenen CSS-Datei überschreiben, zum Beispiel mit einer Klasse aus dem Content oder Body-Tag:
body .spacing-sm {
margin-bottom: 15px;
}
Und du kannst die Liste der Abstände in deiner eigenen Klasse für das EBT-Einstellungsfeld-Widget überschreiben.
Das war's, jetzt kannst du zwischen DOM Box und einer einfachen Select-Box zum Setzen von Rändern für deine EBT-Blöcke wählen.
Stelle gerne Fragen zu EBT-Modulen auf Drupal.org oder über das Kontaktformular: