Gin Toolbar
Módulo auxiliar que lleva la barra de herramientas de administración de Gin al frontend de los sitios Drupal, permitiendo a los usuarios autenticados acceder a la barra de herramientas de administración mientras visualizan las páginas del frontend.
gin_toolbar
Install
composer require 'drupal/gin_toolbar:^3.0'
composer require 'drupal/gin_toolbar:^2.1'
composer require 'drupal/gin_toolbar:8.x-1.1'
Overview
Gin Toolbar es un módulo complementario para Gin Admin Theme que extiende la funcionalidad de la barra de herramientas de administración al frontend de tu sitio Drupal. Debido a limitaciones técnicas en el funcionamiento de los temas de Drupal, el tema Gin no puede renderizar automáticamente su barra de herramientas estilizada en las páginas del frontend. Este módulo resuelve esa brecha proporcionando los hooks, plantillas y servicios necesarios para mostrar la barra de herramientas con estilo Gin de manera consistente tanto en el backend como en el frontend.
El módulo se integra perfectamente con la configuración del tema Gin, aplicando automáticamente los colores de acento, colores de enfoque, preferencias de modo oscuro y modo de alto contraste a la barra de herramientas del frontend. Soporta múltiples variantes de barra de herramientas incluyendo la barra clásica, la barra horizontal y el estilo experimental de navegación de Drupal.
Gin Toolbar también proporciona una detección mejorada del rastro activo para un mejor resaltado del menú, mostrando a los usuarios su ubicación actual dentro de la jerarquía de administración incluso cuando visualizan o editan contenido en el frontend. Esto hace que la navegación entre la visualización y edición de contenido sea mucho más intuitiva.
Features
- Extiende la barra de herramientas de administración de Gin a las páginas del frontend, permitiendo a los usuarios autenticados acceder a las funciones de administración mientras visualizan el sitio público
- Soporta múltiples variantes de barra de herramientas: Clásica (barra lateral vertical), Horizontal (barra superior) y Nueva Navegación (estilo experimental de navegación de Drupal)
- Detección inteligente del rastro activo que resalta la posición actual en el menú de administración al visualizar o editar contenido, media, usuarios y otras entidades
- Integración automática con la configuración del tema Gin incluyendo color de acento, color de enfoque, modo oscuro y modo de alto contraste
- Barra de herramientas secundaria para el frontend que muestra enlaces contextuales como 'Editar [Título del Contenido]' o 'Volver a Administración' para navegación rápida
- Compatibilidad total con el módulo Navigation de Drupal core, aplicando estilos apropiados a la navegación del core cuando está activa
- Integración con el módulo Admin Toolbar para profundidad de menú extendida (configurable hasta 4+ niveles)
- Integración con Media Library, aplicando estilos Gin a los componentes del navegador de medios
- Integración de estilos de CKEditor asegurando una apariencia consistente dentro de los editores de texto enriquecido
- Compatibilidad con el módulo Workbench para flujos de trabajo de moderación de contenido
- Estrategia de caché personalizada para el rastro activo para optimizar el rendimiento con IDs de caché con prefijo 'gin-toolbar-'
Use Cases
Flujo de trabajo del editor de contenido
Un editor de contenido inicia sesión en el sitio y navega para ver artículos publicados en el frontend. Con Gin Toolbar habilitado, ve la familiar barra de herramientas de administración de Gin en cada página del frontend, permitiéndole acceder rápidamente al menú 'Contenido' para gestionar artículos, o hacer clic en 'Editar [Título del Artículo]' en la barra de herramientas secundaria para editar directamente la página que está viendo sin navegar de vuelta al backend de administración.
Administración multi-sitio
Un administrador que gestiona múltiples sitios Drupal usando el tema Gin se beneficia de una apariencia consistente de la barra de herramientas en el frontend y backend. Cuando cambia entre ver contenido y editar configuración, la barra de herramientas permanece consistente, reduciendo la carga cognitiva y mejorando la eficiencia.
Vista previa de tema durante el desarrollo
Un desarrollador de temas que previsualiza un nuevo tema de frontend puede acceder a todas las funciones de administración directamente desde el frontend sin cambiar de contexto. Esto permite iteración rápida al ajustar diseños, verificar comportamiento responsive y hacer cambios de contenido.
Sesiones de capacitación a clientes
Al capacitar clientes sobre gestión de contenido, la barra de herramientas consistente de Gin en las páginas del frontend ayuda a demostrar la conexión entre ver contenido y editarlo. El enlace 'Editar [Título del Contenido]' en la barra de herramientas secundaria proporciona un punto de entrada intuitivo para explicar los flujos de trabajo de edición de contenido.
Consistencia del modo oscuro
Los usuarios que prefieren el modo oscuro para reducir la fatiga visual se benefician de la herencia automática del modo oscuro de Gin Toolbar. Ya sea que estén en el backend de administración o viendo contenido del frontend, la apariencia de la barra de herramientas permanece consistente con su preferencia de modo oscuro establecida en la configuración del tema Gin.
Tips
- Gin Toolbar hereda todas las configuraciones del tema Gin - configurar la variante de barra de herramientas, colores y modo oscuro en /admin/appearance/settings/gin
- El módulo reordena automáticamente los elementos de la barra de herramientas para mejor UX, colocando la búsqueda al inicio y el menú de usuario al final
- Para sitios que usan el módulo Admin Toolbar, la profundidad del menú se respeta automáticamente (hasta 4 niveles por defecto)
- La barra de herramientas secundaria proporciona enlaces 'Editar' contextuales - los usuarios pueden editar rápidamente el contenido que están viendo en el frontend
- Al usar el modo oscuro, la barra de herramientas cambiará automáticamente de modo según la configuración del tema Gin o las preferencias del sistema
- Se puede aplicar CSS personalizado mediante el archivo public://gin-custom.css, que el módulo detecta y carga automáticamente
- El módulo soporta tanto la barra de herramientas legacy como el nuevo módulo Navigation del core introducido en versiones recientes de Drupal
Technical Details
Hooks 12
hook_preprocess_html
Añade atributos y clases HTML específicas de Gin incluyendo color de acento, color de enfoque, modo de alto contraste y clase de variante de barra de herramientas. También maneja la integración del módulo Navigation y los estilos de página de mantenimiento.
hook_page_attachments_alter
Adjunta librerías del tema Gin (base, accent, init) y expone la configuración de Gin a JavaScript (darkmode, colores, alto contraste). Adjunta la librería de estilo de barra de herramientas apropiada según la configuración de variante.
hook_library_info_alter
Modifica las librerías del core para incluir dependencias específicas de Gin para diálogos, CKEditor, AJAX y componentes de Media Library.
hook_preprocess_toolbar
Añade lazy builder de imagen de usuario, expone la configuración de variante de barra de herramientas y barra secundaria, reordena las pestañas de la barra (mueve búsqueda al inicio, usuario al final) y proporciona URLs de edición de entidades para navegación contextual.
hook_preprocess_menu
Añade el atributo gin_id a los elementos del menú de la barra de herramientas y reordena los elementos del menú, moviendo configuración y ayuda al final.
hook_toolbar_alter
Establece el peso de la pestaña de usuario a 1000 (después del 999 de devel) y registra GinToolbar::preRenderTray como el callback de pre-renderizado para la bandeja de administración.
hook_ckeditor_css_alter
Añade archivos CSS del tema Gin (variables, accent, ckeditor) a las instancias de CKEditor para estilos consistentes.
hook_css_alter
Ajusta la prioridad del grupo CSS para los estilos de diálogo de Gin para asegurar que se carguen después del CSS del tema.
hook_theme
Define hooks de tema personalizados para regiones de navegación y elementos contenedores cuando el módulo Navigation no está activo.
hook_theme_registry_alter
Altera el registro de temas para apuntar las plantillas relacionadas con la barra de herramientas al directorio de plantillas del módulo gin_toolbar.
hook_requirements
Durante la instalación, verifica que el tema Gin esté instalado. Muestra un error si Gin no está disponible y no es parte del perfil de instalación.
hook_requirements_alter
Elimina el requisito de toolbar del core para prevenir conflictos.
Troubleshooting 6
Verificar que el usuario tenga el permiso 'access toolbar' o 'access navigation'. Comprobar que el tema Gin esté correctamente establecido como tema de administración en /admin/appearance. Limpiar todas las cachés después de habilitar el módulo.
Gin Admin Theme debe estar instalado antes que Gin Toolbar. Instalar Gin primero con 'composer require drupal/gin' y habilitarlo como tema de administración, luego instalar Gin Toolbar.
Limpiar el registro de temas y todas las cachés. Asegurarse de usar versiones compatibles del tema Gin y Gin Toolbar. Verificar que ningún CSS personalizado esté sobrescribiendo los estilos de Gin.
Puede ser necesario limpiar la caché del rastro activo. Ejecutar 'drush cr' o limpiar cachés en /admin/config/development/performance. El módulo usa IDs de caché con prefijo 'gin-toolbar-' para el rastro activo.
El enlace Editar solo aparece al visualizar páginas de entidades donde el usuario tiene acceso de edición. Verificar que el usuario tenga permiso para editar el tipo de contenido y que la entidad tenga una plantilla de enlace edit-form.
Gin Toolbar está diseñado para trabajar con Navigation del core. Asegurarse de que tanto el tema Gin como Gin Toolbar estén actualizados a versiones que soporten Navigation del core. El módulo detecta automáticamente el módulo Navigation y ajusta el comportamiento en consecuencia.
Security Notes 4
- Los usuarios deben tener el permiso 'access toolbar' o 'access navigation' para ver la barra de herramientas - esto se verifica en cada carga de página
- El módulo respeta todos los controles de acceso existentes de Drupal - los elementos del menú solo aparecen si el usuario tiene permiso para acceder a ellos
- Los enlaces de edición de entidades en la barra de herramientas secundaria solo aparecen si el usuario tiene permiso de edición para esa entidad específica
- El módulo no expone nuevos permisos ni formularios de configuración que puedan ser explotados