Estendere il form delle impostazioni di EPT
Crea una nuova classe per il form delle EPT Settings
Ho sentito da molti programmatori preoccupazioni riguardo al numero di impostazioni per i moduli EPT: DOM Box, sfondo, bordi, classi, ecc. Questi programmatori ritenevano che i content editor potessero confondersi o, in un altro modo, essere invogliati a creare paragrafi, margini e sfondi drasticamente diversi. Alcuni progetti richiedono flessibilità e più impostazioni per i content editor, ma altri progetti hanno design system piuttosto rigidi con componenti ben definiti. In questo caso dobbiamo modificare il widget del campo EPT Settings.
Inoltre, se crei un nuovo modulo EPT e alleghi un plugin JavaScript con opzioni, dovrai usare un tuo widget EPT Settings con campi di impostazione per tali opzioni.
Il modulo EPT Core ha la classe EptSettingsDefaultWidget per il widget del campo EPT Settings. Contiene DOM Box, sfondo e tutte le altre impostazioni. Iniziamo a creare una nuova classe EptSettingsSimpleWidget (la metterò nel modulo EPT Core). Conterrà solo tre impostazioni: Larghezza, Spaziatura (per il margine sotto il paragrafo).
Crea un nuovo file:
/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;
}
}
Estenderemo la nostra classe base di impostazioni EptSettingsDefaultWidget. Nel commento di annotazione @FieldWidget chiameremo il nostro widget id = "ept_settings_simple" e 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"
* }
* )
*/
Abbiamo anche due metodi formElement(), massageFormValues(). Puoi lasciare massageFormValues() così com’è. Drupal serializzerà automaticamente tutte le impostazioni in un unico campo field_ept_settings. Quindi non importa quante impostazioni hai: verranno memorizzate come array serializzato e devi solo specificare i campi di impostazione con la Form API:
https://www.drupal.org/docs/drupal-apis/form-api
In formElement() definiremo i campi di impostazione. 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['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;
}
Se applichi il nuovo widget di campo a uno dei tuoi tipi di paragrafo EPT:
Vedrai un form di impostazioni più piccolo:
Ora rimuoveremo anche le impostazioni di sfondo. Se ti servono le impostazioni di sfondo e non ti servono tutte le altre, puoi estendere la classe EptSettingsDefaultWidget e creare un tuo widget di campo. Ecco un esempio su come rendere EPT Settings il più piccolo possibile.
...
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']);
...
Il nostro form ora ha solo due impostazioni:
Resta solo da aggiungere il campo Spacing per aggiungere il margine in basso. Useremo classi aggiuntive e CSS per organizzare le spaziature:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Potresti aver bisogno di un elenco più ampio di spaziature: sentiti libero di estendere la classe EptSettingsSimpleWidget e creare da essa una tua classe di widget del campo, come abbiamo fatto con la classe 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',
];
Ora vedo tre modi per aggiungere gli stili al nostro blocco:
1. Sovrascrivere il template del blocco e impostare lì la spaziatura come classe del blocco.
2. Generare gli stili al volo e includerli come CSS personalizzati per ogni paragrafo.
3. Aggiungere la classe con JavaScript generando JavaScript personalizzato per ogni paragrafo EPT.
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_paragraph(). Almeno abbiamo già la funzione ept_core_preprocess_block() nel file ebt_core.module. Usiamola:
...
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'];
}
...
Ora passiamo le chiavi del campo Spacing come nomi di classe e useremo il CSS per definire il valore dei margini in base a queste classi:
/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;
}
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.
È tutto, ora puoi scegliere tra DOM Box e una semplice select per impostare i margini dei tuoi blocchi EBT.
Sentiti libero di fare domande sui moduli EBT su Drupal.org o tramite il form di contatto: