Layout Builder +
Un reemplazo directo para la interfaz de usuario de Layout Builder de Drupal que proporciona una experiencia mejorada de construcción de páginas con arrastrar y soltar, con soporte para layouts anidados y edición basada en herramientas.
lb_plus
Install
composer require 'drupal/lb_plus:^3.5'
composer require 'drupal/lb_plus:^3.3'
Overview
Layout Builder + (LB+) reemplaza completamente la interfaz de usuario estándar de Layout Builder con una experiencia de edición moderna e intuitiva de arrastrar y soltar. El módulo introduce un enfoque basado en barra de herramientas donde los usuarios pueden seleccionar entre varias herramientas (Colocar Bloque, Mover, Layout, Configurar, Duplicar y Papelera) para interactuar con los elementos de la página.
Las capacidades principales incluyen soporte para layouts anidados a través de "Layout Blocks" - tipos de bloques personalizados que a su vez utilizan Layout Builder, permitiendo estructuras de página complejas con contenedores dentro de contenedores. El módulo proporciona una interfaz de barra lateral para colocar bloques y secciones promocionados, reordenamiento en tiempo real mediante arrastrar y soltar tanto de bloques como de secciones, y atajos de teclado para cambiar rápidamente entre herramientas.
LB+ está diseñado para funcionar perfectamente con el tema del frontend, mostrando la interfaz de edición directamente en la página en lugar de en una interfaz de administración separada. Se integra con el ecosistema Navigation Plus para un comportamiento consistente de la barra de herramientas y soporta enlaces de menú contextuales para operaciones rápidas con bloques.
Features
- Colocación de bloques con arrastrar y soltar con zonas de destino visuales para una construcción intuitiva de páginas
- Soporte de layouts anidados mediante Layout Blocks - bloques que contienen sus propias secciones de Layout Builder
- Sistema de edición basado en herramientas con 6 herramientas: Colocar Bloque (B), Mover (M), Layout (L), Configurar (O), Duplicar (D) y Papelera (T)
- Atajos de teclado para cambio rápido de herramientas durante las sesiones de edición
- Sistema de bloques promocionados que permite a los administradores destacar los bloques más utilizados para un acceso fácil
- Gestión de configuración de bloques con rutas de iconos personalizados para identificación visual de bloques
- Operaciones a nivel de sección incluyendo cambio de layout, configuración y eliminación
- Actualizaciones de interfaz en tiempo real usando AJAX sin recargas de página
- Configuración de sección predeterminada por visualización de entidad para una creación consistente de nuevas secciones
- Alternador de vista previa de bloques y visualización de contorno de layout durante la edición
- Soporte para mover bloques de campo entre entidades padre y layout blocks anidados
- Integración con el módulo Field Sample Value para contenido de marcador de posición auto-poblado
- Enlaces de menú contextual en bloques para acceso rápido a operaciones de configurar, duplicar y eliminar
Use Cases
Construcción de Páginas de Destino de Marketing
Los editores de contenido pueden construir rápidamente páginas de destino usando la interfaz de arrastrar y soltar. Seleccionar la herramienta Colocar Bloque (tecla B), arrastrar bloques promocionados como Hero, Características o Testimonios desde la barra lateral, soltarlos en posición. Usar la herramienta Layout (tecla L) para cambiar layouts de sección (1 columna para heroes de ancho completo, 3 columnas para grillas de características). Configurar cada bloque con la herramienta Configurar (tecla O) para personalizar el contenido.
Creación de Componentes de Página Reutilizables con Layouts Anidados
Para elementos de página complejos como contenido con pestañas o secciones de acordeón, crear un tipo de bloque Layout Block. Habilitar Layout Builder en su visualización. Al editar páginas, colocar un Layout Block y hacer clic para entrar en su modo de edición anidado. Construir el layout interno de forma independiente. El contenido anidado se guarda con la entidad padre pero puede reutilizarse duplicando el bloque.
Iteración Rápida de Contenido
Usar atajos de teclado para edición eficiente: B para agregar bloques, M para reposicionarlos, D para duplicar secciones similares, O para configurar, T para eliminar elementos no deseados. Alternar vista previa de bloques y contornos de layout a través de los ajustes de la herramienta Layout para ver vistas de contenido vs estructura.
Flujo de Trabajo de Equipo de Contenido Multi-Persona
Los administradores configuran secciones predeterminadas y promocionan bloques de uso común por tipo de contenido. Los editores de contenido ven solo los bloques promocionados por defecto, reduciendo la complejidad. La pestaña 'Otros' proporciona acceso a todos los bloques disponibles cuando se necesita. Los iconos personalizados ayudan a los editores a identificar rápidamente los tipos de bloque.
Creación de Páginas Basada en Plantillas
Con el submódulo Section Library, guardar secciones bien diseñadas como plantillas. Al construir nuevas páginas, abrir la herramienta Section Library (tecla S), arrastrar plantillas guardadas a la página, luego personalizar el contenido. Guardar layouts de página completos como plantillas para estructuras consistentes de múltiples páginas.
Tips
- Usar atajos de teclado para edición más rápida: B (Colocar Bloque), M (Mover), L (Layout), O (Configurar), D (Duplicar), T (Papelera), S (Section Library si está habilitado)
- Alternar 'Contornos de layout' en los ajustes de la herramienta Layout para visualizar límites de sección y región
- El alternador 'Vista previa de bloque' permite ver contenido de marcador de posición vs bloques renderizados reales
- Promocionar los bloques más usados y configurar iconos personalizados para identificación visual rápida
- Usar el módulo Field Sample Value para mejor control sobre el contenido de marcador de posición auto-generado
- Configurar secciones predeterminadas antes de permitir que los editores de contenido usen Layout Builder
- Para estructuras de página complejas, usar Layout Blocks para crear componentes anidados reutilizables
Technical Details
Admin Pages 3
/admin/config/content/layout-builder-plus
Configurar los ajustes globales de Layout Builder + que afectan la experiencia de edición en todo el contenido habilitado con Layout Builder.
/admin/structure/types/manage/{entity}/default-layout-section
Configurar el plugin de layout predeterminado y los ajustes que se utilizarán cuando se creen nuevas secciones. Esta configuración se almacena por visualización de entidad (ej., por visualización de tipo de contenido).
/admin/structure/types/manage/{entity}/promoted-blocks
Seleccionar qué bloques deben mostrarse de forma destacada en la barra lateral de Colocar Bloque para un acceso fácil. Los bloques promocionados aparecen primero mientras que otros bloques permanecen buscables. Se pueden configurar rutas de iconos personalizados para cada bloque promocionado.
Permissions 2
Hooks 4
hook_element_plugin_alter
Altera las definiciones de plugins de elemento para reemplazar el elemento estándar layout_builder con LayoutBuilderPlus.
hook_contextual_links_alter
Elimina los enlaces contextuales predeterminados de Layout Builder y los reemplaza con versiones de LB+ que soportan layouts anidados. Filtra enlaces contextuales en layouts anidados basándose en la opción supports_nested_layouts.
hook_module_implements_alter
Elimina la implementación del hook entity_presave de layout_builder para reemplazarla con la versión de LB+ que maneja correctamente el uso de bloques inline en layouts anidados.
hook_theme_suggestions_page_alter
Agrega una sugerencia de plantilla de página para la ruta de edición de layout block anidado para ocultar todos los elementos de página excepto la interfaz de Layout Builder.
Troubleshooting 5
Asegurarse de que los bloques estén promocionados en la pestaña 'Promoted Blocks' para la visualización de entidad relevante. Verificar que los bloques estén disponibles en el contexto de Layout Builder (algunos bloques tienen requisitos de contexto).
Crear un tipo de bloque 'Layout Block' en /admin/structure/block-content. Eliminar el campo body, habilitar Layout Builder en su configuración de visualización y configurar una sección predeterminada. El tipo de bloque debe tener el campo layout_builder__layout.
Los bloques de campo pueden moverse entre layouts padre y anidados. El mapeo de contexto se ajusta automáticamente. Otros tipos de bloque pueden tener requisitos de contexto que impiden el movimiento entre layouts.
Habilitar 'Mostrar enlaces contextuales de bloque' en /admin/config/content/layout-builder-plus. Notar que esto está deshabilitado por defecto para una interfaz más limpia.
Visitar la pestaña 'Default Layout' para la visualización de entidad y seleccionar un plugin de layout. Esto es requerido antes de que se puedan crear secciones.
Security Notes 4
- El módulo respeta el sistema de permisos de Drupal - los usuarios necesitan permisos apropiados para editar layouts
- La colocación de bloques valida los IDs de plugin de bloque para prevenir inyección de bloques inválidos
- Se utilizan transacciones de base de datos para operaciones de múltiples pasos para asegurar integridad de datos
- El sistema de ruta de almacenamiento anidado codifica deltas de sección y UUIDs para prevenir manipulación de rutas