Erweiterung des EBT-Einstellungsformulars
Neue EBT Settings Formular-Klasse erstellen
Ich habe von vielen Programmierern gehört, die sich wegen der Anzahl der Einstellungen für EBT-Module Sorgen machen: DOM Box, Hintergrund, Rahmen, Klassen usw. Diese Programmierer befürchteten, dass Inhaltsersteller verwirrt werden oder anderweitig ermutigt werden, drastisch unterschiedliche Blöcke, Abstände, Hintergründe zu erstellen. Einige Projekte benötigen Flexibilität und mehr Einstellungen für Inhaltsersteller, aber manche Projekte haben sehr strikte Storybooks mit Komponenten. Für diesen Fall müssen wir unser EBT Settings Feld-Widget ändern.
Außerdem, wenn Sie ein neues EBT-Modul erstellen und ein JavaScript-Plugin mit Optionen anhängen, benötigen Sie ein eigenes EBT Settings Widget mit Einstellungsfeldern für diese Optionen.
Das EBT Core Modul hat die Klasse EbtSettingsDefaultWidget für das EBT Settings Feld-Widget. Es enthält DOM Box, Hintergrund und alle anderen Einstellungen. Beginnen wir mit der Erstellung einer neuen Klasse EbtSettingsSimpleWidget (ich werde sie im EBT Core Modul platzieren). Diese wird nur drei Einstellungen enthalten: Breite, Abstand (für den unteren Rand des Blocks).
Erstellen Sie eine neue Datei:
/src/Plugin/Field/FieldWidget/EbtSettingsSimpleWidget.php
<?php
namespace Drupal\ebt_core\Plugin\Field\FieldWidget;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Form\FormStateInterface;
use Drupal\ebt_core\Plugin\Field\FieldWidget\EbtSettingsDefaultWidget;
/**
* Plugin-Implementierung des Widgets 'ebt_settings_simple'.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
class EbtSettingsSimpleWidget extends EbtSettingsDefaultWidget {
/**
* {@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 += ['ebt_settings' => []];
}
return $values;
}
}
Wir erweitern unsere Basisklasse EbtSettingsDefaultWidget. Im Annotationskommentar @FieldWidget benennen wir unser Widget mit id = "ebt_settings_simple" und label = @Translation("EBT Simple settings").
/**
* Plugin-Implementierung des Widgets 'ebt_settings_simple'.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
Wir haben außerdem zwei Methoden: formElement() und massageFormValues(). Die Methode massageFormValues() können Sie so belassen. Drupal serialisiert automatisch alle Einstellungen in einem Feld field_ebt_settings. Es spielt keine Rolle, wie viele Einstellungen Sie haben, sie werden als serialisiertes Array gespeichert. Sie müssen nur die Einstellungsfelder mit dem Form API angeben:
https://www.drupal.org/docs/drupal-apis/form-api
In formElement() definieren wir die Einstellungsfelder. Verbergen wir DOM Box und Rahmen-Einstellungen:
/**
* {@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['ebt_settings']['design_options']['box1']);
unset($element['ebt_settings']['design_options']['other_settings']['border_color']);
unset($element['ebt_settings']['design_options']['other_settings']['border_style']);
unset($element['ebt_settings']['design_options']['other_settings']['border_radius']);
return $element;
}
Wenn Sie dieses neue Feld-Widget für einen Ihrer EBT-Blocktypen anwenden:
Sehen Sie ein kleineres Einstellungsformular:
Jetzt entfernen wir auch die Hintergrund-Einstellungen. Wenn Sie Hintergrund-Einstellungen brauchen, aber nicht alle anderen, können Sie die Klasse EbtSettingsDefaultWidget erweitern und ein eigenes Feld-Widget erstellen. Hier ein Beispiel, wie man EBT Settings so klein wie möglich macht.
...
unset($element['ebt_settings']['design_options']['other_settings']['background_color']);
unset($element['ebt_settings']['design_options']['other_settings']['background_media']);
unset($element['ebt_settings']['design_options']['other_settings']['background_image_style']);
...
Das Formular hat jetzt nur noch zwei Einstellungen:
Nun fügen wir das Feld Spacing hinzu, um den unteren Rand (Margin) zu setzen. 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ötigen Sie eine größere Liste von Abständen, zögern Sie nicht, die Klasse EbtSettingsSimpleWidget zu erweitern und Ihr eigenes Feld-Widget daraus zu erstellen, so wie wir es mit der Klasse EbtSettingsDefaultWidget gemacht haben.
$element['ebt_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Background Image Style'),
'#options' => [
'spacing-none' => $this->t('None'),
'spacing-sm' => $this->t('Small'),
'spacing-md' => $this->t('Medium'),
'spacing-lg' => $this->t('Large'),
'spacing-xl' => $this->t('Extra Large'),
'spacing-xxl' => $this->t('Double Extra Large'),
],
'#default_value' => $items[$delta]->ebt_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Jetzt sehe ich drei Wege, um Stile für unseren Block hinzuzufügen:
1. Block-Template überschreiben und Spacing als Block-Klasse setzen.
2. Styles on-the-fly generieren und als Custom CSS für jeden Block einbinden.
3. Klasse mit JavaScript hinzufügen, indem benutzerdefiniertes JavaScript für jeden EBT-Block generiert wird.
4. Liste der Klassen in der Funktion template_preprocess_block() überschreiben.
Alle Ansätze funktionieren, aber ich denke, es ist am einfachsten, die Funktion template_preprocess_block() zu verwenden. Zumindest haben wir bereits die Funktion ebt_core_preprocess_block() in der Datei ebt_core.module. Nutzen wir sie:
...
if (!empty($ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'])) {
$variables['attributes']['class'][] = $ebt_settings[0]['ebt_settings']['design_options']['other_settings']['spacing'];
}
...
Nun übergeben wir den Spacing-Feldwert als Klassennamen und definieren die Werte für die Margins per CSS basierend auf diesen Klassen:
/ebt_core/scss/ebt_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;
}
Sie können die Werte in Ihrer eigenen CSS-Datei überschreiben, zum Beispiel so:
body .spacing-sm {
margin-bottom: 15px;
}
Und Sie können die Liste der Abstände in Ihrer eigenen Klasse für das EBT Settings Feld-Widget überschreiben.
Das war's, jetzt können Sie zwischen DOM Box und einfachem Auswahlfeld für die Einstellung der Abstände für Ihre EBT-Blöcke wählen.
Bei Fragen zu EBT-Modulen wenden Sie sich gerne auf Drupal.org oder über das Kontaktformular an uns: