Extension du formulaire des paramètres EBT
Créer une nouvelle classe de formulaire des paramètres EBT
J'ai entendu de nombreux programmeurs s'inquiéter du nombre de paramètres pour les modules EBT : DOM Box, arrière-plan, bordures, classes, etc. Ces programmeurs supposaient que les éditeurs de contenu seraient confus ou seraient, d'une autre manière, incités à créer des blocs, marges, arrière-plans très différents. Certains projets nécessitent de la flexibilité et plus de paramètres pour les éditeurs de contenu, mais d'autres projets ont des guides stricts avec des composants. Pour ce cas, nous devons modifier notre widget de champ des paramètres EBT.
De plus, si vous créez un nouveau module EBT et y attachez un plugin JavaScript avec des options, vous devrez utiliser votre propre widget de paramètres EBT avec des champs de paramétrage pour ces options.
Le module EBT Core possède la classe EbtSettingsDefaultWidget pour le widget de champ des paramètres EBT. Elle contient DOM Box, arrière-plan et tous les autres paramètres. Commençons par créer une nouvelle classe EbtSettingsSimpleWidget (je la placerai dans le module EBT Core). Elle contiendra seulement trois paramètres : Largeur, Espacement (pour la marge sous le bloc).
Créez un nouveau fichier :
/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 implementation of the 'ebt_settings_simple' widget.
*
* @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;
}
}
Nous allons étendre notre classe de paramètres de base EbtSettingsDefaultWidget. Dans le commentaire d'annotation @FieldWidget, nous nommerons notre widget id = "ebt_settings_simple" et label = @Translation("EBT Simple settings")
/**
* Plugin implementation of the 'ebt_settings_simple' widget.
*
* @FieldWidget(
* id = "ebt_settings_simple",
* label = @Translation("EBT Simple settings"),
* field_types = {
* "ebt_settings"
* }
* )
*/
Nous avons aussi deux méthodes : formElement() et massageFormValues(). Vous pouvez laisser massageFormValues() tel quel. Drupal va automatiquement sérialiser tous les paramètres dans un seul champ field_ebt_settings. Donc, peu importe le nombre de paramètres que vous avez, ils seront stockés comme un tableau sérialisé et vous avez seulement besoin de définir les champs de paramètres avec le Form API :
https://www.drupal.org/docs/drupal-apis/form-api
Dans formElement(), nous allons définir les champs de paramètres. Masquons DOM Box et les paramètres de bordure :
/**
* {@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;
}
Si vous appliquez ce nouveau widget de champ à l’un de vos types de blocs EBT :
Vous verrez un formulaire de paramètres réduit :
Maintenant, nous allons aussi retirer les paramètres d’arrière-plan. Si vous avez besoin des paramètres d’arrière-plan mais pas de tous les autres, vous pouvez étendre la classe EbtSettingsDefaultWidget et créer votre propre widget de champ. Voici un exemple pour rendre les paramètres EBT aussi petits que possible.
...
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']);
...
Notre formulaire ne comporte alors plus que deux paramètres :
Il ne reste plus qu’à ajouter un champ Espacement pour ajouter une marge en bas. Nous utiliserons des classes supplémentaires et du CSS pour organiser les espacements :
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Peut-être aurez-vous besoin d’une liste plus large d’espacements, n’hésitez pas à étendre la classe EbtSettingsSimpleWidget et à créer votre propre widget de champ à partir de celle-ci, comme nous l’avons fait avec 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',
];
Je vois maintenant trois manières d’ajouter des styles à notre bloc :
1. Surcharger le template du bloc et définir l’espacement comme classe du bloc.
2. Générer les styles à la volée et les inclure comme styles CSS personnalisés pour chaque bloc.
3. Ajouter la classe avec JavaScript en générant un JavaScript personnalisé pour chaque bloc EBT.
4. Surcharger la liste des classes dans la fonction template_preprocess_block().
Toutes ces approches fonctionneront, mais je pense qu’il sera plus simple d’utiliser la fonction template_process_block(). Au moins, nous avons déjà la fonction ebt_core_preprocess_block() dans le fichier ebt_core.module. Utilisons-la :
...
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'];
}
...
Maintenant, nous transmettons les clés du champ Espacement comme noms de classes et nous utiliserons le CSS pour définir la valeur des marges en fonction de ces classes :
/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;
}
Vous pouvez surcharger ces valeurs dans votre fichier CSS personnalisé, par exemple en utilisant n’importe quelle classe du contenu ou de la balise body :
body .spacing-sm {
margin-bottom: 15px;
}
Et vous pouvez surcharger la liste des espacements dans votre classe personnalisée pour le widget de champ des paramètres EBT.
Voilà, maintenant vous pouvez choisir entre DOM Box et une simple liste déroulante pour régler les marges de vos blocs EBT.
N’hésitez pas à poser des questions sur les modules EBT sur Drupal.org ou via le formulaire de contact :