Collapsiblock
Permite que los bloques individuales sean colapsables al hacer clic en sus títulos, con animaciones suaves y persistencia de estado opcional mediante cookies.
collapsiblock
Instalar
composer require 'drupal/collapsiblock:^4.4'
Overview
Collapsiblock es un módulo de mejora de interfaz de usuario que permite que cualquier bloque de Drupal sea colapsable. Cuando está habilitado, los usuarios pueden hacer clic en el título de un bloque para expandir o colapsar su contenido con una animación de deslizamiento suave.
El módulo está diseñado para constructores de sitios que son nuevos en Drupal con necesidades relativamente simples. Proporciona tanto configuraciones globales predeterminadas como opciones de configuración por bloque, permitiendo un control detallado sobre qué bloques son colapsables y cómo se comportan.
Las capacidades principales incluyen persistencia de estado basada en cookies (para que los bloques recuerden su estado colapsado/expandido entre cargas de página), manejo inteligente de bloques de menú con enlaces activos, soporte para temas en modo oscuro e integración completa con Layout Builder. El módulo también incluye características de accesibilidad como atributos ARIA para lectores de pantalla y soporte para idiomas RTL (derecha a izquierda).
Features
- Hacer que cualquier bloque sea colapsable al hacer clic en su título, con animación de deslizamiento suave
- Cinco opciones de comportamiento de colapso: Ninguno, Colapsable expandido por defecto, Colapsable colapsado por defecto, Siempre colapsado y Siempre expandido
- Persistencia de estado basada en cookies para recordar las preferencias del usuario entre cargas de página y sesiones
- Detección inteligente de enlaces activos que mantiene los bloques de menú expandidos cuando contienen enlaces activos
- Configuración por bloque para anular los valores predeterminados globales en bloques individuales
- Integración completa con Layout Builder para gestionar bloques colapsables en contextos de Layout Builder
- Soporte para modo oscuro con detección de clase CSS configurable para cambio de color del tema
- Soporte para idiomas RTL (derecha a izquierda) con dirección de flecha apropiada
- Velocidad de animación configurable con nueve opciones preestablecidas desde 50ms hasta 1300ms
- Opción compatible con GDPR para deshabilitar las cookies por completo
- Soporte de clase force-open que permite que el contenido del bloque evite el colapso cuando sea necesario
- Soporte de accesibilidad con atributos aria-expanded para lectores de pantalla
Use Cases
Navegación lateral colapsable
Hacer que los bloques de menú en la barra lateral sean colapsables para que los usuarios puedan ocultar la navegación que no necesitan, creando más espacio para el contenido principal. La detección de enlaces activos asegura que la sección actual permanezca visible.
Página de preguntas frecuentes con respuestas colapsables
Crear bloques para cada categoría de FAQ y configurarlos para que estén colapsados por defecto. Los usuarios pueden expandir solo las secciones que les interesan, haciendo que las páginas largas de FAQ sean más manejables.
Panel de control con widgets personalizables
En una página de panel de control con múltiples bloques de información, los usuarios pueden colapsar widgets que no necesitan ver frecuentemente mientras mantienen expandidos los importantes. La persistencia de cookies recuerda sus preferencias.
Organización de contenido adaptada a móviles
En dispositivos móviles donde el espacio de pantalla es limitado, los bloques colapsables ayudan a organizar el contenido. Los usuarios pueden colapsar secciones para enfocarse en lo importante y expandirlas cuando sea necesario.
Filtros de productos en comercio electrónico
Hacer que los bloques de filtros en las barras laterales de listados de productos sean colapsables. Los usuarios pueden ocultar categorías de filtros que no necesitan, enfocándose en los filtros relevantes mientras mantienen la interfaz limpia.
Implementación compatible con GDPR
Para sitios que necesitan minimizar el uso de cookies, configurar la duración de la cookie a -1 para deshabilitar la persistencia de estado por completo. Los bloques seguirán siendo colapsables pero no almacenarán ningún dato del usuario.
Tips
- Use 'Colapsable, colapsado por defecto' (opción 3) para bloques de barra lateral en páginas con mucho contenido para reducir el desorden visual mientras mantiene el contenido accesible.
- Las opciones 'Siempre colapsado' y 'Siempre expandido' (4 y 5) ignoran las cookies, haciéndolas ideales para bloques que siempre deben comenzar en un estado específico independientemente de las preferencias del usuario.
- Una velocidad de animación de 200ms (el valor predeterminado) proporciona un buen equilibrio entre retroalimentación visual y capacidad de respuesta. Aumente para un efecto más notable o disminuya para una interacción más rápida.
- Cuando se usa con bloques de menú, la detección de enlaces activos funciona con enlaces que tienen la clase 'is-active', que Drupal agrega automáticamente a los enlaces de menú que apuntan a la página actual.
- Para contenido actualizado por AJAX que debe forzar que un bloque permanezca abierto, agregue la clase 'collapsiblock-force-open' dinámicamente al contenido actualizado.
- El módulo funciona tanto con el sistema de Disposición de bloques como con Layout Builder, por lo que puede usarlo independientemente de cómo gestione la ubicación de bloques de su sitio.
Technical Details
Admin Pages 1
/admin/config/user-interface/collapsiblock
Configurar los ajustes globales que se aplican a todos los bloques colapsables del sitio. Estos ajustes sirven como valores predeterminados que pueden anularse en bloques individuales.
Permisos 2
Hooks 6
hook_block_view_alter
Altera los render arrays de bloques para agregar elementos envolventes de Collapsiblock para el renderizado estándar de bloques (sin Layout Builder).
hook_form_block_form_alter
Agrega el fieldset de ajustes de Collapsiblock al formulario de configuración del bloque, permitiendo ajustes de comportamiento de colapso por bloque.
hook_form_alter
Agrega ajustes de Collapsiblock a los formularios 'Agregar bloque' y 'Actualizar bloque' de Layout Builder.
hook_page_attachments_alter
Adjunta la biblioteca de Collapsiblock y pasa los ajustes globales a JavaScript en cada página.
hook_preprocess_block
Procesa las plantillas de bloques para inyectar elementos envolventes de Collapsiblock en las variables title_prefix y title_suffix.
hook_help
Proporciona texto de ayuda para el módulo en la página de Ayuda.
Troubleshooting 5
Asegúrese de que la plantilla de bloque de su tema use las variables {{ title_prefix }} y {{ title_suffix }} para envolver el título del bloque. El JavaScript busca estos elementos envolventes. Verifique que el bloque tenga un título visible (label_display está habilitado) y que el comportamiento de colapso no esté configurado en 'Ninguno'.
Verifique el ajuste de duración de la cookie. Si está configurado en -1, las cookies están deshabilitadas. Si está en blanco, las cookies expiran cuando se cierra el navegador. Establezca un número positivo para cookies persistentes. También asegúrese de que el comportamiento de colapso esté configurado en la opción 2 o 3 (no 4 o 5, que ignoran las cookies).
Este es un comportamiento intencional para ayudar a los usuarios a ver su ubicación actual. Para permitir el colapso incluso con enlaces activos, marque la opción 'Permitir que los bloques de menú se colapsen al cargar la página si tienen enlaces activos' en los ajustes globales.
Habilite la opción 'Habilitar cambiador de color de flecha de colapso' y especifique la clase CSS que su tema usa para indicar el modo oscuro en el campo 'Clase activadora del modo de color'. Esta clase debe estar presente en el elemento html o body cuando el modo oscuro está activo.
Agregue la clase CSS 'collapsiblock-force-open' al contenido o contenedor del bloque. El JavaScript detectará esta clase y evitará que el bloque se colapse. Útil para bloques que contienen formularios que necesitan permanecer visibles.