UI Patterns Settings
Extiende UI Patterns para hacer los patterns configurables a través de ajustes sin requerir implementaciones de hook_preprocess.
ui_patterns_settings
Instalar
composer require 'drupal/ui_patterns_settings:8.x-2.4'
composer require 'drupal/ui_patterns_settings:8.x-2.2'
Overview
UI Patterns Settings es una potente extensión para el módulo UI Patterns que permite la configuración de patterns mediante ajustes declarativos. Permite a los constructores de sitios y desarrolladores definir ajustes configurables para UI Patterns directamente en sus definiciones de patterns, haciendo los patterns más flexibles y reutilizables sin código preprocess personalizado.
El módulo proporciona una arquitectura completa basada en plugins con más de 20 tipos de ajustes incorporados, incluyendo campos de texto, desplegables, casillas de verificación, integración con Media Library, widgets de color y más. Se integra perfectamente con Layout Builder, Display Suite y Field Groups, y soporta valores dinámicos a través del módulo Token.
Las capacidades clave incluyen ajustes específicos por variante, visibilidad condicional basada en variantes u otros ajustes, campos expuestos que mapean ajustes de patterns a campos de entidades, y proveedores de datos para tipos de ajustes complejos como menús y breadcrumbs.
Features
- Sistema de tipos de ajustes basado en plugins con más de 20 tipos incorporados (textfield, select, boolean, checkboxes, radios, number, url, token, attributes, media_library, colorwidget, coloris, machine_name, group, links, role_access, role_checkboxes, language_access, language_checkboxes, publish, value, enumeration)
- Integración con Token que permite el reemplazo dinámico de valores en los ajustes usando el sistema de tokens de Drupal
- Integración con Layout Builder para configurar ajustes de patterns directamente en la interfaz del constructor de diseños
- Integración con Display Suite para ajustes de patterns en la configuración de visualización de campos
- Ajustes específicos por variante que pueden sobrescribir valores predeterminados o cambiar completamente las definiciones de ajustes por variante
- Visibilidad condicional usando el sistema states para mostrar/ocultar ajustes basándose en la selección de variante u otros valores de ajustes
- Función de campos expuestos que permite mapear ajustes de patterns a campos de entidades para acceso programático
- Sistema de plugins de proveedores de datos para tipos de ajustes complejos (menu, breadcrumb) que suministran datos dinámicos
- Tipo de ajuste Media Library con soporte para estilos de imagen, estilos de imagen responsivos, modos de visualización y edición en línea
- Tipo de ajuste group para organizar ajustes en fieldsets, details y pestañas horizontales
- Ajustes de acceso basados en roles e idiomas para renderizado condicional según roles de usuario o idioma actual
- Tipo de ajuste publicar/despublicar para controlar la visibilidad del pattern
- Extensión Twig que proporciona la función pattern_configuration() para acceder a los ajustes en las plantillas
- Hooks para alterar ajustes y variantes antes del renderizado (hook_ui_pattern_settings_settings_alter, hook_ui_pattern_settings_variant_alter)
- Soporte para Field Groups para organizar ajustes de patterns
- Soporte de previsualización de patterns con valores de vista previa configurables para los ajustes
Use Cases
Componente de tarjeta configurable
Crea un pattern de tarjeta con ajustes para clases modificadoras, enlaces URL y atributos HTML. Los constructores de sitios pueden configurar variantes de tarjeta, añadir clases CSS personalizadas y establecer URLs dinámicas usando tokens como [node:url] sin escribir ningún código preprocess.
Patterns de navegación dinámicos
Usa el tipo de ajuste links con el proveedor de datos menu para crear componentes de navegación. Configura qué menú mostrar, el nivel de visibilidad inicial y la profundidad directamente en la interfaz de Layout Builder o Display Suite.
Visualización de contenido basada en roles
Usa ajustes role_access para mostrar u ocultar elementos de patterns según los roles de usuario. Por ejemplo, muestra un banner promocional solo a usuarios anónimos o muestra contenido solo para administradores.
Control de contenido multilingüe
Usa ajustes language_access para controlar la visibilidad del pattern según el idioma actual del sitio. Muestra contenido promocional específico por idioma o funciones específicas por región.
Ajustes basados en variantes
Define variantes de patterns donde cada variante aplica automáticamente valores de ajustes específicos. Por ejemplo, una variante 'product' podría establecer automáticamente clases modificadoras y atributos de sombra sin configuración manual.
Valores dinámicos basados en Token
Usa allow_token: true en los ajustes para habilitar el reemplazo de tokens. Los constructores de sitios pueden introducir tokens como [node:title] o [user:display-name] que se reemplazan con valores reales en el momento del renderizado.
Integración de medios en patterns
Usa el tipo de ajuste media_library para permitir a los constructores de sitios seleccionar imágenes o medios directamente en la configuración del pattern. Configura estilos de imagen o estilos de imagen responsivos para que se apliquen automáticamente.
Campos expuestos para acceso programático
Mapea ajustes de patterns a campos de entidad usando la función expose. Esto permite que los ajustes del pattern se llenen desde valores de campos de entidad, permitiendo a los editores de contenido controlar el comportamiento del pattern a través de interfaces de campo familiares.
Tips
- Usa la propiedad 'preview' en los ajustes para definir valores de vista previa para la visualización en la Pattern Library.
- Usa la propiedad 'group' para organizar ajustes relacionados en fieldsets o pestañas para una mejor organización de la interfaz.
- Usa la propiedad 'states' para visibilidad condicional - muestra ajustes solo cuando se seleccionan variantes específicas u otros ajustes tienen ciertos valores.
- Usa 'required: true' para hacer los ajustes obligatorios con validación de formulario.
- Usa 'forced_value' para establecer un valor que no puede ser cambiado por la interfaz - útil para sobrescrituras programáticas.
- Usa 'form_visible: false' para ocultar ajustes de la interfaz mientras sigues procesándolos.
- Combina ajustes de variante con definiciones de ajustes para sobrescribir no solo valores sino configuraciones completas de ajustes por variante.
- Usa la función Twig pattern_configuration() para acceder a los valores de configuración del pattern en tus plantillas.
- Usa proveedores de datos para tipos de ajustes complejos como links para llenar dinámicamente los ajustes con datos de menú o breadcrumb.
Technical Details
Hooks 2
hook_ui_pattern_settings_settings_alter
Altera los ajustes de UI Patterns Settings antes de que se rendericen. Permite sobrescribir los ajustes configurados del pattern para patterns específicos o implementar lógica de ajustes personalizada.
hook_ui_pattern_settings_variant_alter
Altera la variante de UI Patterns antes de que se pase al procesamiento de ajustes. Permite sobrescribir la variante configurada del pattern programáticamente.
Troubleshooting 5
Asegúrate de que tu definición de pattern incluye una sección 'settings' con tipos de ajustes correctamente configurados. Verifica que el módulo UI Patterns está habilitado y que los patterns están correctamente registrados.
Instala los módulos requeridos: media_library_form_element y media_library_edit. El tipo de ajuste media_library requiere estos módulos para funcionar.
Asegúrate de que el ajuste tiene 'allow_token: true' en su definición. También verifica que el módulo Token está instalado y que la sintaxis del token es correcta.
Instala el módulo Color Widget que proporciona el tipo de elemento de formulario colorwidget.
Verifica que tu plantilla de pattern usa las variables de ajuste (por ejemplo, {{ modifier }}, {{ attributes }}). Los ajustes se pasan como variables de plantilla que coinciden con sus nombres.