Extension du formulaire des paramètres EPT
Créer une nouvelle classe de formulaire des paramètres EPT
J'ai entendu de nombreux programmeurs exprimer des inquiétudes concernant le nombre de paramètres pour les modules EPT : boîte DOM, arrière-plan, bordures, classes, etc. Ces programmeurs sous-entendaient que les éditeurs de contenu seraient confus ou, d'une autre manière, incités à créer des paragraphes, 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 certains projets ont des cahiers des charges très stricts avec des composants. Dans ce cas, nous devons modifier notre widget de champ des paramètres EPT.
De plus, si vous créez un nouveau module EPT et y attachez un plugin JavaScript avec des options, vous aurez besoin d’utiliser votre propre widget de paramètres EPT avec des champs de paramétrage pour ces options.
Le module EPT Core possède la classe EptSettingsDefaultWidget pour le widget du champ de paramètres EPT. Elle contient la boîte DOM, l’arrière-plan et tous les autres paramètres. Commençons par créer une nouvelle classe EptSettingsSimpleWidget (je la placerai dans le module EPT Core). Elle contiendra seulement trois paramètres : Largeur, Espacement (pour la marge sous le paragraphe).
Créez un nouveau fichier :
/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;
/**
* Implémentation du plugin du widget 'ept_settings_simple'.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("Paramètres simples de paragraphe EPT"),
* 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;
}
}
Nous allons étendre notre classe de base des paramètres EptSettingsDefaultWidget. Dans le commentaire d'annotation @FieldWidget, nous nommerons notre widget id = "ept_settings_simple" et label = @Translation("Paramètres simples EPT")
/**
* Implémentation du plugin du widget 'ept_settings_simple'.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("Paramètres simples de paragraphe EPT"),
* field_types = {
* "ept_settings"
* }
* )
*/
Nous avons aussi deux méthodes : formElement() et massageFormValues(). Vous pouvez laisser massageFormValues() telle quelle. Drupal va automatiquement sérialiser tous les paramètres dans un seul champ field_ept_settings. Ainsi, peu importe le nombre de paramètres que vous avez, ils seront stockés sous forme de tableau sérialisé et vous n’avez qu’à définir les champs de paramètres avec le Form API :
https://www.drupal.org/docs/drupal-apis/form-api
Dans formElement(), nous définirons les champs de paramétrage. Cachons la boîte DOM 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['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;
}
Si vous appliquez ce nouveau widget de champ à l’un de vos types de paragraphes EPT :
Vous verrez un formulaire de paramètres plus réduit :
Maintenant, nous allons aussi supprimer 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 EptSettingsDefaultWidget et créer votre propre widget de champ. Voici un exemple pour rendre les paramètres EPT aussi simples que possible.
...
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']);
...
Notre formulaire ne contient désormais que deux paramètres :
Il reste à ajouter le champ Espacement pour ajouter une marge en bas. Nous utiliserons des classes supplémentaires et du CSS pour gérer les espacements :
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Peut-être aurez-vous besoin d’une liste plus longue d’espacements, n’hésitez pas à étendre la classe EptSettingsSimpleWidget et créer votre propre widget de champ à partir de celle-ci, comme nous l’avons fait avec la classe EptSettingsDefaultWidget.
$element['ept_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Style de l\'image de fond'),
'#options' => [
'spacing-none' => $this->t('Aucun'),
'spacing-sm' => $this->t('Petit'),
'spacing-md' => $this->t('Moyen'),
'spacing-lg' => $this->t('Grand'),
'spacing-xl' => $this->t('Très grand'),
'spacing-xxl' => $this->t('Double très grand'),
],
'#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Je vois maintenant trois façons 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 paragraphe.
3. Ajouter une classe avec JavaScript en générant un JavaScript personnalisé pour chaque paragraphe EPT.
4. Surcharger la liste des classes dans la fonction template_preprocess_block().
Toutes ces approches fonctionnent, mais je pense qu’il sera plus facile d’utiliser la fonction template_process_paragraph(). Au moins, nous avons déjà la fonction ept_core_preprocess_block() dans le fichier ebt_core.module. Utilisons-la :
...
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'];
}
...
Nous transmettons maintenant les clés du champ Espacement comme noms de classes et nous utiliserons du CSS pour définir la valeur des marges en fonction de ces 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;
}
Vous pouvez surcharger ces valeurs dans votre fichier CSS personnalisé, par exemple en utilisant une classe depuis la balise content ou body :
body .spacing-sm {
margin-bottom: 15px;
}
Et vous pouvez modifier la liste des espacements dans votre classe personnalisée pour le widget de champ des paramètres EBT.
Voilà, maintenant vous pouvez choisir entre une boîte DOM 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 :