Het uitbreiden van het EPT-instellingenformulier
Maak een nieuwe klasse voor het EPT-instellingenformulier
Ik heb van veel programmeurs zorgen gehoord over het aantal instellingen voor EPT-modules: DOM Box, achtergrond, randen, classes, enz. Deze programmeurs gaven aan dat content editors in de war zullen raken of op een andere manier aangemoedigd zullen worden om drastisch verschillende paragrafen, marges, achtergronden te maken. Sommige projecten hebben flexibiliteit en meer instellingen voor content editors nodig, maar sommige projecten hebben vrij strikte storybooks met componenten. Voor dit geval moeten we onze EPT-instellingenveldwidget aanpassen.
Ook als je een nieuwe EPT-module maakt en een JavaScript-plugin met opties koppelt, moet je je eigen EPT-instellingenwidget gebruiken met instellingsvelden voor deze opties.
De EPT Core-module heeft de klasse EptSettingsDefaultWidget voor de EPT-instellingenveldwidget. Deze bevat DOM Box, achtergrond en alle andere instellingen. Laten we een nieuwe klasse EptSettingsSimpleWidget aanmaken (ik zet deze in de EPT Core-module). Deze zal slechts drie instellingen bevatten: Width en Spacing (voor marge onder de paragraaf).
Maak een nieuw bestand aan:
/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 implementation of the 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT simple paragraph settings"),
* 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;
}
}
We zullen onze basisinstellingenklasse EptSettingsDefaultWidget uitbreiden. In het annotatiecommentaar @FieldWidget geven we onze widget de naam id = "ept_settings_simple" en label = @Translation("EPT Simple settings")
/**
* Plugin implementation of the 'ept_settings_simple' widget.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("EPT simple paragraph settings"),
* field_types = {
* "ept_settings"
* }
* )
*/
We hebben ook twee methoden formElement(), massageFormValues(). Je kunt massageFormValues() laten zoals het is. Drupal zal automatisch alle instellingen serialiseren in één veld field_ept_settings. Het maakt dus niet uit hoeveel instellingen je hebt: ze worden opgeslagen als een geserialiseerde array en je hoeft alleen de instellingsvelden te specificeren met de Form API:
https://www.drupal.org/docs/drupal-apis/form-api
In formElement() definiëren we de instellingsvelden. Laten we de 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['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;
}
Als je de nieuwe veldwidget toepast op een van je EPT-paragraaftypen:
Zie je een kleiner instellingenformulier:
Nu verwijderen we ook de achtergrondinstellingen. Als je achtergrondinstellingen nodig hebt en niet alle andere instellingen, kun je de klasse EptSettingsDefaultWidget uitbreiden en je eigen veldwidget maken. Hier is een voorbeeld van hoe je de EPT-instellingen zo klein mogelijk maakt.
...
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']);
...
Ons formulier heeft nu al slechts twee instellingen:
Het enige wat nog resteert is het Spacing-veld toevoegen om marge aan de onderzijde toe te voegen. We gebruiken extra classes en CSS om spacings te organiseren:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Misschien heb je een grotere lijst met spacings nodig; voel je vrij om de klasse EptSettingsSimpleWidget uit te breiden en hieruit je eigen veldwidgetklasse te maken, zoals we deden met de klasse EptSettingsDefaultWidget.
$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('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]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Nu zie ik drie manieren om stijlen aan ons blok toe te voegen:
1. Overschrijf het bloktemplate en stel daar de spacing in als blokclass.
2. Genereer stijlen on the fly en voeg ze in als aangepaste CSS-stijlen voor elke paragraaf.
3. Voeg de class toe met JavaScript door voor elke EPT-paragraaf aangepaste JavaScript te genereren.
4. Overschrijf de lijst met classes in de functie template_preprocess_block().
Al deze benaderingen werken, maar ik denk dat het makkelijker is om de functie template_process_paragraph() te gebruiken. In elk geval hebben we al de functie ept_core_preprocess_block() in het bestand ebt_core.module. Laten we die gebruiken:
...
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'];
}
...
Nu geven we de sleutels van het Spacing-veld door als class-namen en gebruiken we CSS om de waarde voor marges te definiëren op basis van deze classes:
/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;
}
Je kunt waarden overschrijven in je aangepaste CSS-bestand, bijvoorbeeld met een class uit de content of de <body>-tag:
body .spacing-sm {
margin-bottom: 15px;
}
En je kunt de lijst met spacings overschrijven in je aangepaste klasse voor de EBT-instellingenveldwidget.
Dat is alles: nu kun je kiezen tussen DOM Box en een eenvoudige select box om marges voor je EBT-blokken in te stellen.
Voel je vrij om te vragen naar EBT-modules op Drupal.org of via het contactformulier: