Layout Components
Una extensión integral para Drupal Layout Builder que proporciona componentes preconstruidos, UI/UX mejorada, capacidades de vista previa en vivo y amplias opciones de personalización para secciones y columnas.
layoutcomponents
Install
composer require 'drupal/layoutcomponents:^3.0'
composer require 'drupal/layoutcomponents:^4.0'
Overview
Layout Components es un módulo sofisticado construido sobre Layout Builder de Drupal, proporcionando un paquete completo de componentes integrados con ese sistema. El módulo mejora la experiencia del usuario creando una interfaz mejorada que es mucho más personalizable con características esenciales como la vista previa en vivo de los cambios mientras se edita el contenido.
El módulo proporciona a los editores una serie de componentes ya creados y disponibles para usar de inmediato, incluyendo texto, imágenes, videos, acordeones, pestañas, líneas de tiempo, cuentas regresivas y más. Para los desarrolladores, Layout Components ofrece una API donde se pueden agregar campos personalizados mientras se benefician de todas las características de personalización que proporciona el módulo.
Layout Components proporciona 6 tipos de diseños de cuadrícula basados en Bootstrap (1-6 columnas) con la capacidad de personalizar fondos, colores, bordes, espaciado y mucho más. Los editores pueden agregar colores de fondo o imágenes con opciones de parallax, configurar paddings, agregar múltiples clases CSS y atributos HTML, crear títulos de sección con estilos, cambiar plantillas y configurar secciones a ancho completo.
Features
- Seis plantillas de diseño basadas en Bootstrap que soportan configuraciones de 1-6 columnas con distribuciones flexibles de ancho de columna
- Vista previa en vivo de los cambios mientras se edita contenido en Layout Builder
- Personalización integral de secciones incluyendo títulos, descripciones, colores/imágenes de fondo, efectos parallax y opciones de ancho completo
- Personalización de columnas con estilos de título individuales, colores de fondo, bordes, radio de borde y controles de padding
- Más de 20 tipos de Block de componentes preconstruidos incluyendo texto, imágenes, videos, acordeones, pestañas, líneas de tiempo, cuentas regresivas, tarjetas, botones y más
- Funcionalidad de portapapeles para copiar y pegar secciones, columnas y bloques
- Sistema de permisos detallado con permisos dinámicos por tipo de Entity para secciones, columnas y bloques
- API de componentes para que los desarrolladores creen campos personalizados con estilos y funcionalidad de LC
- Comandos Drush para exportar e importar bloques
- Integración con Slick carousel para secciones de carrusel
- Soporte para diseño de pestañas dentro de las secciones
- Selector de color con paleta de colores configurable para editores
- Diseño responsivo con soporte para breakpoints Bootstrap XS, SM, MD, LG, XL
- Integración con Media library para imágenes y videos de fondo
- Tipos de elementos contenedor personalizados (div, span, section, article, header, footer, aside, figure)
Use Cases
Creación de una página de destino de marketing
Utiliza Layout Components para crear una página de destino atractiva con una sección hero de ancho completo con video de fondo, seguida de una sección de características en tres columnas con tarjetas, una sección de línea de tiempo que muestra la historia de la empresa y una sección de contacto con enlaces a redes sociales. Cada sección puede tener su propio color de fondo, espaciado y estilos mientras mantiene un diseño responsive consistente basado en Bootstrap.
Creación de información de producto con pestañas
Utiliza el componente Simple Tabs para crear una página de producto donde las especificaciones, reseñas y productos relacionados están organizados en pestañas separadas. Cada área de contenido de pestaña soporta la experiencia completa de Layout Builder, permitiendo diseños complejos dentro de cada pestaña.
Creación de un directorio de equipo con acordeones
Crea una página de equipo usando componentes de acordeón donde cada departamento es una sección contraíble. Al expandirse, cada sección revela tarjetas de miembros del equipo con imágenes, títulos y biografías dispuestas en un diseño de múltiples columnas.
Galería de fotos con carrusel
Utiliza la integración con Slick para convertir una sección que contiene múltiples bloques de imágenes en una galería de carrusel fluida. Configura la reproducción automática, flechas de navegación y puntos para el control del usuario.
Página de cuenta regresiva para eventos
Crea una página de evento con un componente de temporizador de cuenta regresiva que muestra días, horas, minutos y segundos hasta el evento. Combínalo con componentes de imagen para pósteres del evento y componentes de texto para los detalles del evento.
Flujo de trabajo del editor de contenido
Permite a los editores de contenido crear páginas sin asistencia de desarrolladores usando la función de vista previa en vivo. Los editores pueden agregar secciones, ajustar anchos de columna, establecer colores de fondo y posicionar bloques mientras ven los resultados en tiempo real.
Tips
- Habilita solo los submódulos de componentes que necesites - cada componente habilitado crea un tipo de bloque que aparece en el diálogo de selección de bloques
- Configura los estilos predeterminados de sección y columna para que coincidan con el sistema de diseño de tu sitio, reduciendo el trabajo de estilizado repetitivo para los editores
- Usa la función de portapapeles para duplicar rápidamente secciones, columnas o bloques complejos entre páginas
- Aprovecha las opciones de ancho de columna responsive para crear diferentes diseños en diferentes puntos de quiebre (XS, SM, MD, LG, XL)
- Usa los campos Extra Class y Extra Attributes para agregar clases CSS personalizadas o atributos de datos para interacciones JavaScript
- Para mejorar el rendimiento, habilita lc_slick solo si necesitas funcionalidad de carrusel, ya que agrega la dependencia de la biblioteca Slick
- La configuración de ruta de carpeta en la configuración general es esencial si planeas usar los comandos Drush de exportación/importación para flujos de trabajo de despliegue
Technical Details
Admin Pages 5
/admin/config/layoutcomponents/settings
Configura los ajustes generales de Layout Components, incluyendo la ruta de la carpeta de exportación para bloques y el ancho del menú de configuración lateral.
/admin/config/layoutcomponents/settings/interface
Configura el tema visual para la interfaz de Layout Components.
/admin/config/layoutcomponents/settings/colors
Configura la paleta de colores disponible para los editores al personalizar secciones y columnas.
/admin/config/layoutcomponents/settings/section
Configura los ajustes predeterminados de estilo y comportamiento para las secciones de Layout Components. Estos valores predeterminados se aplicarán al crear nuevas secciones.
/admin/config/layoutcomponents/settings/column
Configura los ajustes predeterminados de estilo y comportamiento para las columnas de Layout Components. Estos valores predeterminados se aplicarán al crear nuevas columnas.
Permissions 18
Hooks 3
hook_theme
Define implementaciones de tema para plantillas de Layout Components.
hook_preprocess_block
Preprocesa variables de bloque para bloques de Layout Components.
hook_theme_suggestions_alter
Añade sugerencias de tema para plantillas de Layout Components.
Drush Commands 3
drush lc:export
Exporta todos los bloques de Layout Components a archivos JSON en la carpeta configurada. Exporta bloques que son utilizados por pantallas de Layout Builder junto con sus revisiones de referencia de entidad (pestañas, elementos de acordeón, etc.).
drush lc:import
Importa bloques de Layout Components desde archivos JSON en la carpeta configurada. Elimina primero los bloques existentes, luego importa desde los archivos JSON preservando las referencias de entidad y las traducciones.
drush lc:delete
Elimina todos los bloques de Layout Components que son utilizados por pantallas de Layout Builder. También elimina los elementos de revisión de referencia de entidad asociados.
Troubleshooting 6
Asegúrate de que tu tema activo esté basado en Bootstrap 4 o Bootstrap 5. Layout Components utiliza el sistema de grillas de Bootstrap y requiere estos frameworks CSS para renderizar correctamente.
Asegúrate de que composer-patches esté instalado y habilitado. Agrega '"enable-patching": true' a la sección 'extras' de tu composer.json y ejecuta 'composer update' para aplicar los parches requeridos.
El módulo incluye parches para drupal/core y drupal/inline_entity_form. Verifica que estos parches estén aplicados revisando tu composer.lock o ejecutando 'composer update --dry-run'.
Asegúrate de que el submódulo lc_commands esté habilitado junto con los módulos hal y serialization. Verifica que la ruta de la carpeta de exportación esté configurada correctamente en /admin/config/layoutcomponents/settings y que la carpeta exista y sea escribible.
Agrega tus colores hexadecimales (separados por comas) en /admin/config/layoutcomponents/settings/colors. Formato: #ffffff,#000000,#f89456
Layout Components utiliza permisos dinámicos por tipo de entidad. Otorga los permisos apropiados (crear secciones, configurar bloques, etc.) para cada tipo de contenido en admin/people/permissions.
Security Notes 4
- Layout Components respeta el sistema de permisos de Drupal con permisos dinámicos detallados por tipo de entidad
- El campo Extra Attributes permite atributos HTML arbitrarios - asegúrate de que solo usuarios de confianza tengan acceso para configurar secciones
- El componente Iframe puede incrustar contenido externo - revisa los permisos cuidadosamente para prevenir vectores de XSS
- Los comandos de exportación/importación escriben archivos en el sistema de archivos - asegúrate de que la carpeta configurada tenga los permisos apropiados y no sea accesible desde la web