Extensión del formulario de configuración de EPT
Crear una nueva clase de formulario de configuración de EPT
He escuchado de muchos programadores preocupaciones sobre la cantidad de configuraciones para los módulos EPT: DOM Box, fondo, bordes, clases, etc. Estos programadores insinuaban que los editores de contenido se confundirán o de alguna manera se verán motivados a crear párrafos, márgenes y fondos drásticamente diferentes. Algunos proyectos necesitan flexibilidad y más configuraciones para los editores de contenido, pero otros proyectos tienen guías de estilo bastante estrictas con componentes. Para este caso, necesitamos cambiar nuestro widget de campo de Configuración de EPT.
Además, si creas un nuevo módulo EPT y le adjuntas un plugin de JavaScript con opciones, necesitarás usar tu propio widget de configuración EPT con campos de configuración para estas opciones.
El módulo Core de EPT tiene la clase EptSettingsDefaultWidget para el widget de campo de Configuración de EPT. Contiene DOM Box, fondo y todas las demás configuraciones. Vamos a empezar a crear una nueva clase EptSettingsSimpleWidget (la pondré en el módulo Core de EPT). Contendrá solo tres configuraciones: Ancho, Espaciado (para el margen inferior del párrafo).
Crea un nuevo archivo:
/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;
/**
* Implementación del plugin para el widget 'ept_settings_simple'.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("Configuraciones simples de párrafo 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;
}
}
Vamos a extender nuestra clase básica de configuraciones EptSettingsDefaultWidget. En el comentario de anotación @FieldWidget nombraremos nuestro widget id = "ept_settings_simple" y label = @Translation("EPT Simple settings")
/**
* Implementación del plugin para el widget 'ept_settings_simple'.
*
* @FieldWidget(
* id = "ept_settings_simple",
* label = @Translation("Configuraciones simples de párrafo EPT"),
* field_types = {
* "ept_settings"
* }
* )
*/
También tenemos dos métodos: formElement() y massageFormValues(). Puedes dejar massageFormValues() tal como está. Drupal automáticamente serializa todas las configuraciones en un solo campo field_ept_settings. Así que no importa cuántas configuraciones tengas, se almacenarán como un array serializado y solo necesitas especificar los campos de configuración con Form API:
https://www.drupal.org/docs/drupal-apis/form-api
En formElement(), definiremos los campos de configuración. Ocultemos las configuraciones de DOM Box y bordes:
/**
* {@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 aplicas el nuevo widget de campo a uno de tus tipos de párrafo EPT:
Verás un formulario de configuración más pequeño:
Ahora también eliminaremos las configuraciones de fondo. Si necesitas configuraciones de fondo y no necesitas todas las demás, puedes extender la clase EptSettingsDefaultWidget y crear tu propio widget de campo. Aquí tienes un ejemplo de cómo hacer que la Configuración EPT sea lo más simple posible.
...
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']);
...
Nuestro formulario ya tiene solo dos configuraciones:
Solo queda añadir el campo Espaciado para agregar un margen en la parte inferior. Usaremos clases adicionales y CSS para organizar los espaciados:
spacing-none,
spacing-sm,
spacing-md,
spacing-lg,
spacing-xl,
spacing-xxl
Quizá necesites una lista más grande de espacios, siéntete libre de extender la clase EptSettingsSimpleWidget y crear tu propia clase de widget de campo a partir de ella como hicimos con EptSettingsDefaultWidget.
$element['ept_settings']['design_options']['other_settings']['spacing'] = [
'#type' => 'select',
'#title' => $this->t('Estilo de imagen de fondo'),
'#options' => [
'spacing-none' => $this->t('Ninguno'),
'spacing-sm' => $this->t('Pequeño'),
'spacing-md' => $this->t('Mediano'),
'spacing-lg' => $this->t('Grande'),
'spacing-xl' => $this->t('Extra grande'),
'spacing-xxl' => $this->t('Doble extra grande'),
],
'#default_value' => $items[$delta]->ept_settings['design_options']['other_settings']['spacing'] ?? 'spacing-none',
];
Ahora veo tres formas de agregar estilos a nuestro bloque:
1. Sobrescribir la plantilla del bloque y establecer el espaciado ahí como clase del bloque.
2. Generar estilos en tiempo real e incluirlos como estilos CSS personalizados para cada párrafo.
3. Añadir la clase con JavaScript generando un script personalizado para cada párrafo EPT.
4. Sobrescribir la lista de clases en la función template_preprocess_block().
Todos estos enfoques funcionarán, pero creo que será más sencillo usar la función template_process_paragraph(). Al menos, ya tenemos la función ept_core_preprocess_block() en el archivo ebt_core.module. Usemos eso:
...
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'];
}
...
Ahora pasamos las claves del campo Espaciado como nombres de clase y usaremos CSS para definir el valor de los márgenes según estas clases:
/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;
}
Puedes sobrescribir los valores en tu archivo CSS personalizado, por ejemplo usando cualquier clase desde el contenido o la etiqueta body:
body .spacing-sm {
margin-bottom: 15px;
}
Y puedes sobrescribir la lista de espacios en tu clase personalizada para el widget de campo de configuraciones EBT.
Eso es todo, ahora puedes elegir entre DOM Box y un simple select box para establecer los márgenes de tus bloques EBT.
No dudes en preguntar sobre módulos EBT en Drupal.org o mediante el formulario de contacto: