Layout Builder iFrame Modal
Renderiza los formularios de edición de bloques y secciones de Layout Builder dentro de un iframe utilizando el tema de administración, proporcionando un aislamiento CSS completo del tema del frontend.
layout_builder_iframe_modal
Instalar
composer require 'drupal/layout_builder_iframe_modal:^1.3'
Overview
Layout Builder iFrame Modal aborda un desafío significativo con el Layout Builder de Drupal: el conflicto de CSS entre los temas del frontend y los elementos de formulario de administración. Por defecto, Layout Builder renderiza todos los formularios de edición en una barra lateral off-canvas mientras muestra toda la página usando el tema del frontend. Esto causa problemas de estilos con elementos de formulario complejos como pestañas, acordeones, autocompletado de entidades, Media Library o Entity Browser.
Este módulo resuelve este problema renderizando los formularios de Layout Builder dentro de un iframe que carga el tema de administración. Los formularios están completamente aislados del CSS del tema del frontend, asegurando que todos los elementos del formulario funcionen correctamente sin requerir extensas anulaciones de CSS.
El módulo funciona interceptando las solicitudes de diálogo de Layout Builder y reemplazándolas con un iframe que carga la URL del formulario con un parámetro de destino especial. Cuando se guarda un formulario, el iframe redirige a una página especial que usa postMessage para comunicarse con la ventana principal, activando una reconstrucción del layout y cerrando el diálogo modal.
Features
- Renderiza los formularios de Layout Builder en un iframe con aislamiento CSS completo del tema del frontend
- Utiliza el tema de administración del sitio para toda la renderización de formularios, asegurando estilos consistentes
- Se integra perfectamente con la interfaz existente de Layout Builder sin requerir modificaciones del tema
- Cierra automáticamente el modal cuando los bloques se guardan exitosamente
- Preserva la posición de desplazamiento y regresa a la ubicación anterior después de cerrar el modal
- Proporciona una acción oculta 'Reconstruir layout' en el formulario de layout para reconstrucciones programáticas
- Funciona con el módulo Layout Builder Translation (layout_builder_st) para layouts traducidos
- Configurable por ruta - elige qué acciones de Layout Builder se abren en el modal iframe
- Soporta rutas personalizadas para extender la funcionalidad del modal iframe más allá de las rutas principales de Layout Builder
Use Cases
Formularios de configuración de bloques complejos
Al usar bloques con formularios complejos que incluyen pestañas, acordeones, editores WYSIWYG o fieldsets anidados, el modal iframe asegura que estos elementos se rendericen correctamente usando los estilos del tema de administración sin conflictos de CSS.
Integración con Media Library
La interfaz de Media Library requiere CSS y JavaScript específicos que pueden entrar en conflicto con los temas del frontend. Renderizarla dentro de un iframe con el tema de administración asegura que Media Library funcione correctamente.
Uso de Entity Browser
Entity Browser proporciona una interfaz rica para seleccionar entidades que depende de los estilos del tema de administración. El modal iframe previene la filtración de CSS que podría romper la interfaz de Entity Browser.
Edición de widgets de Paragraphs
Al editar paragraphs u otros widgets de campo complejos dentro de bloques de Layout Builder, el modal iframe proporciona el contexto adecuado del tema de administración para estos formularios anidados.
Edición de layouts multilingües
Al usar Layout Builder con layouts traducidos (módulo layout_builder_st), el modal iframe soporta tanto las rutas de traducir bloque como traducir bloque inline para una experiencia de edición consistente.
Extensiones personalizadas de Layout Builder
Para módulos contrib o personalizados que añaden nuevas rutas de Layout Builder, los constructores del sitio pueden añadir esas rutas personalizadas a la configuración para que también se abran en modal iframe.
Tips
- Puedes habilitar rutas selectivamente - si solo quieres el modal iframe para la edición de bloques pero no para la configuración de secciones, desmarca las rutas de sección en la página de configuración
- Las rutas personalizadas pueden añadirse una por línea en el formulario de configuración para extender el comportamiento del modal iframe a rutas de módulos contrib
- El módulo funciona tanto con Drupal 10 como con 11, manejando automáticamente las diferencias de renderización específicas de cada versión
- Al depurar problemas, revisa la consola del navegador en busca de eventos postMessage para entender el flujo de comunicación del iframe
Technical Details
Admin Pages 1
/admin/config/content/layout_builder_iframe_modal
Configura qué rutas de Layout Builder deben renderizar sus formularios dentro de un modal iframe usando el tema de administración.
Permisos 1
Hooks 5
hook_theme
Define dos hooks de tema: 'lbim_iframe' para renderizar el contenedor del iframe y 'lbim_redirect' para la plantilla de la página de redirección.
hook_preprocess_html
Preprocesa HTML cuando está en una ruta modal para eliminar regiones de página innecesarias (header, breadcrumb, pre_content, page_top) del contenido del iframe.
hook_contextual_links_alter
Altera los enlaces contextuales en bloques para cambiar su tipo de diálogo de off-canvas a iframe cuando la ruta está configurada para modal iframe.
hook_link_alter
Altera enlaces en páginas de Layout Builder para cambiar los enlaces de diálogo a usar renderización iframe cuando la ruta de destino está configurada para modal iframe.
hook_form_alter
Altera los formularios de Layout Builder para añadir un enlace oculto 'Reconstruir layout' que puede activarse programáticamente después de un envío exitoso del formulario en el iframe.
Troubleshooting 4
Verifica la página de configuración en /admin/config/content/layout_builder_iframe_modal para asegurar que las rutas deseadas estén habilitadas. Limpia todas las cachés después de hacer cambios.
Esto puede ocurrir si hay un error de JavaScript o si el envío del formulario falla. Revisa la consola del navegador en busca de errores. Asegúrate de que tu tema de administración funcione correctamente.
El módulo elimina los manejadores AJAX de los botones de envío. Si tienes código personalizado que vuelve a añadir manejadores AJAX, esto puede causar conflictos. Asegúrate de que ningún otro módulo esté interfiriendo con el envío del formulario.
Verifica que tu tema de administración esté configurado correctamente. El iframe carga la página usando el tema de administración, así que asegúrate de que tu tema de administración aplique estilos correctamente a los elementos del formulario.
Security Notes 2
- El permiso 'configure layout builder iframe modal' está marcado como 'restringir acceso' y solo debe otorgarse a administradores de confianza
- El iframe usa comunicación de mismo origen vía postMessage con un formato de mensaje específico ('LBIM_REDIRECT') por seguridad