Single Directory Components: Display
Integra los campos de Drupal y los modos de visualización con Single Directory Components (SDC), permitiendo que las visualizaciones de entidades se rendericen a través de plantillas de componentes.
sdc_display
Overview
SDC Display conecta el sistema de visualización de contenido de Drupal con Single Directory Components (SDC), el moderno sistema de tematización basado en componentes introducido en Drupal 10.1. Este módulo permite a los constructores de sitios mapear campos de entidades directamente a props y slots de componentes, eliminando la necesidad de hooks de preprocesamiento personalizados o sobrescrituras de tema.
El módulo opera en tres niveles distintos: los formateadores de campo individuales pueden envolver su salida en un componente, los modos de visualización completos pueden renderizarse a través de una plantilla de componente con campos mapeados a entradas específicas, y los grupos de campos pueden renderizarse usando componentes SDC. Esto proporciona una flexibilidad sin precedentes en cómo se muestra el contenido mientras mantiene una separación limpia entre datos y presentación.
Al aprovechar la arquitectura basada en componentes, SDC Display promueve código frontend reutilizable y mantenible. Los componentes definen sus propios esquemas (props y slots), y este módulo genera automáticamente formularios de configuración basados en esos esquemas, permitiendo a los editores de contenido y constructores de sitios configurar mapeos a través de la familiar interfaz de administración de Drupal.
Features
- Renderizar formateadores de campo individuales a través de componentes SDC con mapeos configurables de props/slots
- Envolver modos de visualización completos en componentes, mapeando múltiples campos de entidad a entradas del componente
- Integración con Field Group permitiendo que grupos de campos se rendericen como componentes unificados
- Soporte para mapeo estático y dinámico - valores estáticos como respaldo cuando los valores de campo están vacíos
- Selector de componentes con filtrado basado en etiquetas para mostrar solo componentes relevantes
- Formularios auto-generados basados en esquemas JSON de componentes para configuración de props/slots
- Selección de componentes con AJAX que actualiza los mapeos disponibles dinámicamente
- Metadatos de entidad pasados automáticamente a los componentes (id, entity_type, bundle)
- Integración perfecta con los sistemas existentes de formateadores de campo y modos de visualización de Drupal
- Soporte para estructuras de props anidadas complejas a través de la librería schema-forms
Use Cases
Componente de tarjeta para avances de contenido
Crea un componente de tarjeta reutilizable con props para imagen, título, resumen y enlace. Configura el modo de visualización teaser de Artículo para usar este componente de tarjeta, mapeando el campo de imagen al prop de imagen, título al prop de título, resumen del cuerpo al slot de resumen, y URL del nodo al prop de enlace. Todos los teasers de artículos ahora se renderizan consistentemente a través de tu componente de tarjeta.
Banner hero para páginas de destino
Diseña un componente de banner hero con slots para titular, contenido del cuerpo y botones CTA. En los modos de visualización de página de destino, habilita SDC Display y mapea el título de página al titular, un campo de cuerpo WYSIWYG al slot de contenido, y campos de enlace al slot de CTA. Los valores estáticos proporcionan CTAs de respaldo cuando ninguno está configurado.
Elementos de cuadrícula de productos
Construye un componente de visualización de producto con props para precio, disponibilidad, URL de imagen, y un slot para descripción. Mapea campos de productos de comercio a estas entradas, usando valores estáticos para el texto del botón 'Añadir al carrito'. Los componentes mantienen consistencia visual en todas las visualizaciones de productos.
Información de contacto agrupada
Usa Field Group para agrupar campos de dirección, teléfono y email. Aplica el formateador de grupo de campos de SDC Display con un componente de tarjeta de contacto. Mapea dirección al slot de dirección, teléfono al prop de teléfono, email al prop de email. Los campos agrupados se renderizan como un componente cohesivo de tarjeta de contacto.
Líneas de autor
Crea un componente de línea de autor para artículos. A nivel de campo, configura el formateador de campo de referencia de Autor para renderizar a través del componente de línea de autor, mapeando la visualización del autor renderizado al slot de autor. Cada instancia de campo de autor se renderiza a través del componente.
Tips
- Etiqueta componentes específicamente para su uso previsto - los formateadores de campo típicamente necesitan componentes de entrada única mientras que los componentes de modo de visualización deben aceptar múltiples entradas
- Usa los mapeos estáticos como respaldos de valores requeridos - si un prop es requerido en el esquema del componente, siempre proporciona un valor estático
- Para transformaciones de datos complejas, considera usar el módulo NoMarkup para pasar datos de campo crudos en lugar de salida renderizada a los props del componente
- Los componentes reciben metadatos de entidad (id, entity_type, bundle) automáticamente como props, útil para comportamiento dinámico
- Múltiples campos pueden mapearse a un solo slot - se renderizan en el orden de peso de la tabla de visualización
- Prueba con valores de campo vacíos para asegurar que los respaldos estáticos funcionen correctamente
- Usa la integración con Field Group para renderizado parcial de componentes cuando no quieras envolver toda la entidad
Technical Details
Admin Pages 2
/admin/structure/types/manage/{bundle}/display
Configura cómo se muestran los campos de entidad en diferentes modos de visualización. SDC Display añade opciones a cada formateador de campo y al modo de visualización en su conjunto.
/admin/structure/types/manage/{bundle}/display (Field Formatter Settings)
Cada formateador de campo individual obtiene opciones de SDC Display en su formulario de configuración, permitiendo que campos individuales se rendericen a través de componentes.
Hooks 5
hook_field_formatter_third_party_settings_form
Añade opciones de SDC Display al formulario de configuración de cada formateador de campo, habilitando el renderizado basado en componentes a nivel de campo.
hook_field_formatter_settings_summary_alter
Modifica el resumen de configuración del formateador de campo para mostrar el estado de configuración de SDC Display.
hook_preprocess_field
Preprocesa la salida del campo para envolverla en el componente SDC configurado cuando está habilitado.
hook_form_entity_view_display_edit_form_alter
Añade configuración de SDC Display a nivel de modo de visualización al formulario de edición de visualización de entidad.
hook_entity_view_alter
Altera el render array de la entidad para envolver toda la salida del modo de visualización en el componente SDC configurado.
Troubleshooting 5
Asegúrate de que tu componente esté etiquetado con 'sdc_display:field_formatter' o 'sdc_display:view_mode' en su archivo component.yml. Limpia las cachés después de añadir etiquetas.
Esto puede ocurrir cuando los formularios de configuración de formateadores interfieren con la configuración del modo de visualización. El módulo usa entrada de usuario cruda como solución alternativa. Asegúrate de que JavaScript esté habilitado y no ocurran errores de JS.
Verifica que los campos que quieres mapear estén habilitados (no en la sección Deshabilitados) en el formulario de gestión de visualización. Solo los campos habilitados aparecen en las opciones de mapeo.
Los valores estáticos solo se muestran cuando los campos mapeados están vacíos. Verifica que el campo no tenga datos, o elimina el mapeo dinámico para mostrar siempre los valores estáticos.
SDC Display se deshabilita cuando Layout Builder está habilitado para ese modo de visualización. Deshabilita Layout Builder para usar SDC Display, o usa componentes dentro de Layout Builder en su lugar.