Estensione del modulo Impostazioni EBT
Crea una nuova classe EBT Settings form
Ho sentito da molti programmatori preoccupazioni riguardo al numero di impostazioni per i moduli EBT: DOM Box, sfondo, bordi, classi, ecc. Questi programmatori hanno sottinteso che i content editor potrebbero confondersi o, in un altro modo, essere incoraggiati a creare blocchi, margini, sfondi drasticamente diversi. Alcuni progetti necessitano di flessibilità e più impostazioni per i content editor, ma altri progetti hanno linee guida piuttosto rigide con componenti predefiniti. In questo caso dobbiamo modificare il nostro widget del campo EBT Settings.
Inoltre, se crei un nuovo modulo EBT e alleghi un plugin javascript con opzioni, avrai bisogno di usare un tuo widget EBT settings con campi di impostazioni per queste opzioni.
Il modulo EBT Core ha la classe EbtSettingsDefaultWidget per il widget del campo EBT Settings. Contiene DOM Box, sfondo e tutte le altre impostazioni. Iniziamo a creare una nuova classe EbtSettingsSimpleWidget (la metterò nel modulo EBT Core). Conterrà solo tre impostazioni: Larghezza, Spaziatura (per il margine sotto il blocco).
Crea un nuovo file:
/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;
/**
* Implementazione del plugin del widget '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;
}
}
Estenderemo la nostra classe base delle impostazioni EbtSettingsDefaultWidget. Nel commento di annotazione @FieldWidget chiameremo il nostro widget id = "ebt_settings_simple" e label = @Translation("EBT Simple settings")
/**
* Implementazione del plugin del widget 'ebt_settings_simple'.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
Abbiamo anche due metodi formElement(), massageFormValues(). Puoi lasciare massageFormValues() così com’è. Drupal serializzerà automaticamente tutte le impostazioni in un campo field_ebt_settings. Quindi non importa quante impostazioni hai, verranno archiviate come array serializzato e devi solo specificare i campi delle impostazioni con Form API:
https://www.drupal.org/docs/drupal-apis/form-api
In formElement(), definiremo i campi delle impostazioni. Nascondiamo DOM Box e le impostazioni dei bordi:
/**
* {@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;
}
Se applichi il nuovo widget di campo a uno dei tuoi tipi di blocco EBT:
Vedrai un modulo di impostazioni più piccolo:
Ora rimuoveremo anche le impostazioni dello sfondo. Se ti servono le impostazioni di sfondo e non tutte le altre, puoi estendere la classe EbtSettingsDefaultWidget e creare un tuo widget di campo. Ecco un esempio di come rendere le impostazioni EBT il più ridotte possibile.
...
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']);
...
Il nostro form ha già solo due impostazioni:
Rimane solo da aggiungere il campo Spaziatura per aggiungere margine in basso. Useremo classi aggiuntive e CSS per organizzare le spaziature:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Forse avrai bisogno di un elenco più ampio di spaziature, sentiti libero di estendere la classe EbtSettingsSimpleWidget e creare una tua classe widget di campo da essa come abbiamo fatto con la classe EbtSettingsDefaultWidget.
$element['ebt_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Spacing'),
'#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',
];
Ora vedo tre modi per aggiungere stili al nostro blocco:
1. Sovrascrivere il template del blocco e impostare lì la spaziatura come classe del blocco.
2. Generare stili al volo e includerli come stili CSS personalizzati per ciascun blocco.
3. Aggiungere una classe con javascript generando uno script personalizzato per ciascun blocco EBT.
4. Sovrascrivere l’elenco delle classi nella funzione template_preprocess_block().
Tutti questi approcci funzioneranno, ma penso che sarà più semplice usare la funzione template_process_block(). Almeno abbiamo già la funzione ebt_core_preprocess_block() nel file ebt_core.module. Usiamola:
...
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'];
}
...
Ora passiamo le chiavi del campo Spaziatura come nomi di classe e useremo CSS per definire i valori dei margini in base a queste classi:
/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;
}
Puoi sovrascrivere i valori nel tuo file CSS personalizzato, ad esempio usando qualsiasi classe dal contenuto o dal tag body:
body .spacing-sm {
margin-bottom: 15px;
}
E puoi sovrascrivere l’elenco delle spaziature nella tua classe personalizzata per il widget del campo EBT settings.
Questo è tutto, ora puoi scegliere tra DOM Box e una semplice select box per impostare i margini dei tuoi blocchi EBT.
Sentiti libero di fare domande sui moduli EBT su Drupal.org o tramite il modulo di contatto: