Display Builder
Una herramienta avanzada de construcción de visualizaciones nativa de sistemas de diseño, que proporciona una alternativa unificada a Layout Builder, Block Layout y el constructor de visualizaciones de Views, con características modernas como colaboración en tiempo real y vistas previas dinámicas.
display_builder
Overview
Display Builder es una sofisticada herramienta de construcción de visualizaciones creada por el equipo de UI Suite, que ofrece un enfoque unificado para construir visualizaciones en Drupal. Sirve como una alternativa moderna a Layout Builder para visualizaciones de entidades, Block Layout para visualizaciones de páginas y la función de construcción de visualizaciones de Views.
El módulo es nativo de sistemas de diseño, permitiendo una integración completa con su sistema de diseño incluyendo componentes, utilidades de estilo, iconos, temas/modos y variables CSS directamente en Drupal sin capas de compatibilidad. Cuenta con vistas previas dinámicas usando HTMX, presets de patrones para configuraciones reutilizables, colaboración en tiempo real vía Server-Sent Events (SSE) e integración profunda con las APIs de Drupal.
Display Builder utiliza una arquitectura basada en islas donde la interfaz está compuesta por islas conectables (paneles, botones, elementos de menú) que pueden habilitarse, deshabilitarse y configurarse por perfil. Esto proporciona gran flexibilidad para personalizar la experiencia de construcción para diferentes roles de usuario y casos de uso.
Features
- Nativo de sistemas de diseño: Integración completa con UI Patterns, UI Styles y UI Skins para layouts basados en componentes
- Construcción unificada de visualizaciones: Reemplaza Layout Builder (vistas de entidades), Block Layout (páginas) y el constructor de visualizaciones de Views
- Interfaz conectable basada en islas: Paneles, botones y elementos de menú configurables organizados en perfiles
- Colaboración en tiempo real: Múltiples usuarios pueden editar simultáneamente con actualizaciones en vivo vía Server-Sent Events
- Vistas previas dinámicas: Vista previa en vivo de cambios usando HTMX para una experiencia de usuario fluida
- Presets de patrones: Guarde y reutilice configuraciones de componentes como presets
- Gestión de historial: Funcionalidad de deshacer/rehacer con hasta 10 pasos de historial
- Selector de viewport: Pruebe layouts responsivos con cambio de ancho basado en breakpoints
- Biblioteca de componentes: Explore y arrastre Single Directory Components (SDC) con vistas agrupadas, de variantes y de mosaico
- Biblioteca de bloques: Acceda a todos los bloques disponibles organizados por proveedor/categoría
- Configuración contextual: Configure componentes y bloques seleccionados con estilos, tokens de diseño y condiciones de visibilidad
- Atajos de teclado: Navegación y acciones rápidas vía teclado (B para constructor, Y para capas, P para vista previa)
- Vista de capas: Gestión jerárquica sin vista previa para componentes anidados complejos
- Acceso basado en roles: Permisos dinámicos por perfil de Display Builder
Use Cases
Construir visualizaciones de vistas de entidades
Use Display Builder en lugar de Layout Builder para configurar cómo se muestran los tipos de contenido, usuarios u otras entidades. Habilite display_builder_entity_view, cree un perfil, luego vaya a la página Gestionar visualización de una entidad y seleccione Display Builder. Arrastre componentes desde la biblioteca, anídelos en slots, configure propiedades y aplique estilos.
Crear layouts de página
Use Display Builder para diseñar layouts de página que reemplacen el page.html.twig estándar. Habilite display_builder_page_layout, cree entidades de Page Layout en /admin/structure/page-layout, asígnelas a rutas o condiciones, luego use el constructor para colocar componentes para encabezados, navegación, áreas de contenido y pies de página.
Diseñar visualizaciones de Views
Use Display Builder para controlar cómo Views renderizan su salida. Habilite display_builder_views, edite una View y seleccione el plugin de visualización Display Builder. Construya el layout de la vista con componentes para encabezado, filtros expuestos, filas, paginador y áreas de pie de página.
Crear presets reutilizables
Guarde configuraciones de componentes frecuentemente usadas como presets. En el constructor, haga clic derecho en un componente y seleccione 'Guardar como preset'. Los presets aparecen en la pestaña de biblioteca de Presets y pueden soltarse rápidamente en cualquier visualización.
Edición colaborativa de contenido
Múltiples usuarios pueden editar la misma visualización simultáneamente. La isla de Colaboración muestra quién está editando actualmente y los cambios se sincronizan en tiempo real vía Server-Sent Events.
Pruebas de layout responsivo
Use el Selector de Viewport para probar cómo responden los layouts a diferentes tamaños de pantalla. El selector usa los breakpoints de su tema para redimensionar el área de vista previa del constructor.
Tips
- Cree múltiples perfiles para diferentes roles de usuario: los editores podrían necesitar una interfaz más simple que los constructores de sitios
- Use el panel de Capas para componentes anidados complejos como acordeones o modales donde la vista previa dificulta el arrastrar y soltar
- Los atajos de teclado aceleran el flujo de trabajo: B para constructor, Y para capas, P para vista previa
- Los presets funcionan bien para layouts de tarjetas frecuentemente usados, secciones hero o componentes de llamada a la acción
- La Biblioteca de Componentes puede mostrar componentes en tres vistas: Agrupado (por proveedor), Variantes (por componente con variantes) y Mosaico (miniaturas visuales)
Technical Details
Admin Pages 9
/admin/structure/display-builder
Página principal de administración para gestionar perfiles de Display Builder. Lista todos los perfiles configurados con opciones para agregar, editar, habilitar/deshabilitar y eliminarlos. Los perfiles definen qué islas de interfaz están disponibles y qué roles pueden acceder a ellas.
/admin/structure/display-builder/add
Crear un nuevo perfil de Display Builder con configuración de islas personalizable.
/admin/structure/display-builder/{profile}/edit
Editar un perfil de Display Builder existente incluyendo la configuración de islas. Cada isla puede habilitarse/deshabilitarse y configurarse con opciones específicas.
/admin/structure/display-builder/preset
Gestione presets de patrones reutilizables que pueden guardarse desde el constructor e insertarse en visualizaciones. Los presets almacenan configuraciones completas de componentes incluyendo contenido de slots.
/admin/structure/display-builder/preset/add
Crear un nuevo preset de patrón para configuraciones de componentes reutilizables.
/admin/structure/display-builder/instances
Ver todas las instancias activas de Display Builder. Las instancias son entidades de estado efímeras que rastrean la sesión de edición actual incluyendo historial, usuarios y cambios no guardados.
/admin/structure/page-layout
Gestione layouts de página cuando el submódulo Display Builder for Page Layout está habilitado. Cree layouts de página personalizados que pueden asignarse a rutas o condiciones específicas.
/admin/structure/page-layout/{page_layout}/builder
La interfaz de Display Builder para editar un layout de página. Acceda a la interfaz completa del constructor con islas para diseñar la estructura de la página.
/admin/structure/views/display-builder
Listar todas las Views que usan Display Builder para su configuración de visualización.
Permissions 5
Hooks 1
hook_display_builder_provider_info
Permite a los módulos registrar proveedores de display builder. Los proveedores son integraciones que conectan Display Builder a diferentes sistemas de visualización de Drupal.
Troubleshooting 4
Asegúrese de que el submódulo display_builder_entity_view esté habilitado, que exista un perfil con al menos un rol asignado, y que el usuario tenga el permiso del perfil.
Verifique la configuración de la isla de Biblioteca de Componentes. Los proveedores pueden estar excluidos, o el estado del componente (experimental/obsoleto) puede estar filtrado. Configure en las configuraciones de islas del perfil.
Asegúrese de que la isla de Colaboración esté habilitada en el perfil y que la biblioteca HTMX SSE esté cargando. Verifique la consola del navegador para errores de conexión SSE.
El historial está limitado a 10 pasos y solo está disponible durante la sesión de edición. Habilite la isla de Historial en los botones de la barra de herramientas del perfil.
Security Notes 3
- Los permisos de perfil pueden tener implicaciones de seguridad dependiendo de la configuración: los bloques y componentes pueden ejecutar código PHP
- Revise qué bloques están disponibles en la configuración de la Biblioteca de Bloques para restringir el acceso a bloques administrativos
- Las sobrescrituras de vistas de entidades permiten personalización por entidad lo cual podría impactar el rendimiento si se usa en exceso