Uitbreiden van het EBT-instellingenformulier
Maak een nieuwe EBT-instellingenformulierklasse
Ik hoorde van veel programmeurs zorgen over het aantal instellingen voor EBT-modules: DOM Box, achtergrond, randen, klassen, enz. Deze programmeurs gaven aan dat content editors in de war zullen raken of op een andere manier aangemoedigd worden om drastisch verschillende blokken, marges en achtergronden te maken. Sommige projecten hebben flexibiliteit en meer instellingen nodig voor content editors, maar sommige projecten hebben vrij strikte storybooks met componenten. Voor dit geval moeten we ons EBT-instellingenveldwidget aanpassen.
Ook als je een nieuwe EBT-module maakt en een JavaScript-plugin met opties toevoegt, moet je een eigen EBT-instellingenwidget gebruiken met instellingenvelden voor deze opties.
De EBT Core-module heeft de klasse EbtSettingsDefaultWidget voor het EBT-instellingenveldwidget. Het bevat DOM Box, achtergrond en alle andere instellingen. Laten we beginnen met het maken van een nieuwe klasse EbtSettingsSimpleWidget (ik zal deze in de EBT Core-module plaatsen). Deze zal slechts drie instellingen bevatten: Breedte, Spatiëring (voor marge onder het blok).
Maak een nieuw bestand:
/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 implementatie van de 'ebt_settings_simple' widget.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simpele instellingen"),
* 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;
}
}
We zullen onze basisinstellingenklasse EbtSettingsDefaultWidget uitbreiden. In de annotatiecommentaar @FieldWidget noemen we onze widget id = "ebt_settings_simple" en label = @Translation("EBT Simpele instellingen")
/**
* Plugin implementatie van de 'ebt_settings_simple' widget.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simpele instellingen"),
* field_types = {
* "ebt_settings"
* }
* )
*/
We hebben ook twee methodes formElement(), massageFormValues(). Je kunt massageFormValues() laten zoals het is. Drupal zal automatisch alle instellingen serialiseren in één veld field_ebt_settings. Het maakt dus niet uit hoeveel instellingen je hebt, ze worden opgeslagen als geserialiseerde array en je hoeft alleen de instellingenvelden te specificeren met Form API:
https://www.drupal.org/docs/drupal-apis/form-api
In formElement() zullen we instellingenvelden definiëren. Laten we DOM Box- en randinstellingen verbergen:
/**
* {@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;
}
Als je een nieuw veldwidget toepast voor een van je EBT-bloktypes:
Zal je een kleiner instellingenformulier zien:
Nu verwijderen we ook de achtergrondinstellingen. Als je achtergrondinstellingen nodig hebt en niet alle andere instellingen, kun je de klasse EbtSettingsDefaultWidget uitbreiden en een eigen veldwidget maken. Hier is een voorbeeld hoe je EBT-instellingen zo klein mogelijk kunt maken.
...
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']);
...
Ons formulier heeft nu slechts twee instellingen:
Het blijft alleen nog over om het veld Spatiëring toe te voegen om marge aan de onderkant toe te voegen. We zullen extra klassen en CSS gebruiken om spatiëring te organiseren:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Misschien heb je een langere lijst van spatiëring nodig, voel je vrij om de klasse EbtSettingsSimpleWidget uit te breiden en er een eigen veldwidgetklasse van te maken zoals we deden met de klasse EbtSettingsDefaultWidget.
$element['ebt_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Spatiëring'),
'#options' => [
'spacing-none' => $this->t('Geen'),
'spacing-sm' => $this->t('Klein'),
'spacing-md' => $this->t('Middel'),
'spacing-lg' => $this->t('Groot'),
'spacing-xl' => $this->t('Extra Groot'),
'spacing-xxl' => $this->t('Dubbel Extra Groot'),
],
'#default_value' => $items[$delta]->ebt_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Nu zie ik drie manieren om stijlen toe te voegen aan ons blok:
1. Overschrijf de bloktemplate en stel daar spatiëring in als blokklasse.
2. Genereer stijlen on-the-fly en voeg ze in als aangepaste CSS-stijlen voor elk blok.
3. Voeg klasse toe met JavaScript door aangepaste JavaScript voor elk EBT-blok te genereren.
4. Overschrijf de lijst van klassen in de functie template_preprocess_block().
Al deze benaderingen zullen werken, maar ik denk dat het eenvoudiger zal zijn om de functie template_process_block() te gebruiken. Ten minste hebben we al de functie ebt_core_preprocess_block() in het bestand ebt_core.module. Laten we die gebruiken:
...
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'];
}
...
Nu geven we de sleutels van het veld Spatiëring door als klassenamen en zullen we CSS gebruiken om de waarden voor marges te definiëren op basis van deze 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;
}
Je kunt waarden overschrijven in je eigen CSS-bestand, bijvoorbeeld met een klasse van de inhoud of body-tag:
body .spacing-sm {
margin-bottom: 15px;
}
En je kunt de lijst van spatiëringen overschrijven in je eigen klasse voor het EBT-instellingenveldwidget.
Dat is het, nu kun je kiezen tussen DOM Box en een gewone selectievaklijst om marges voor je EBT-blokken in te stellen.
Voel je vrij om vragen te stellen over EBT-modules op Drupal.org of via het contactformulier: