Block Styles
Permite modificar bloques de Drupal utilizando sugerencias de plantillas y clases CSS personalizadas a través del formulario de configuración del bloque.
block_styles
Install
composer require 'drupal/block_styles:^2.0'
Overview
Block Styles proporciona una forma flexible de cambiar la apariencia de los bloques aplicando plantillas alternativas y clases CSS sin escribir código. El módulo se integra con Styles API para permitir la selección de plantillas de estilo predefinidas directamente desde el formulario de configuración del bloque.
Al editar un bloque en la interfaz de Block Layout, los administradores pueden seleccionar entre las plantillas de estilo disponibles que reemplazan la plantilla predeterminada block.html.twig. Además, se pueden agregar clases CSS personalizadas al contenedor del bloque, y para estilos interactivos (como modales o desplegables), se puede especificar texto de botón personalizado.
El módulo funciona creando una entidad de configuración que almacena los ajustes de estilo para cada bloque, luego utiliza hook_theme_suggestions_block_alter() para agregar la sugerencia de plantilla seleccionada y hook_preprocess_block() para agregar clases CSS y variables de texto de botón a la plantilla.
Features
- Seleccionar plantillas de bloque alternativas desde un menú desplegable en el formulario de configuración del bloque
- Agregar clases CSS personalizadas a los contenedores de bloque mediante un simple campo de texto
- Configurar texto de botón personalizado para plantillas de estilo interactivas (modales, desplegables, colapsables)
- Proporciona una plantilla 'Clean Wrapper' que elimina el marcado predeterminado del contenedor del bloque
- Se integra con el sistema de plugins de Styles API para definiciones de estilo extensibles
- Soporta estilos específicos de tema que solo se aplican cuando el tema proveedor está activo
- Almacena la configuración de estilos como entidades de configuración exportables
Use Cases
Mostrar un bloque como diálogo modal de Bootstrap
Habilitar block_styles_bootstrap, editar un bloque, seleccionar 'Bootstrap Modal' del menú desplegable de estilos e ingresar texto de botón personalizado. El contenido del bloque se ocultará y se mostrará en un modal cuando se haga clic en el botón. Útil para formularios de inicio de sesión, formularios de contacto o contenido complementario que no debería ocupar espacio en la página.
Crear bloques colapsables en la barra lateral
Aplicar el estilo 'Bootstrap Collapse' a los bloques de la barra lateral para hacerlos colapsables. Los usuarios hacen clic en un botón para expandir/colapsar el contenido del bloque. Ideal para barras laterales adaptadas a móviles o para reducir el desorden visual mientras se mantiene el contenido accesible.
Estilizar bloques como tarjetas de Bootstrap
Usar el estilo 'Bootstrap Card' para envolver el contenido del bloque en un componente de tarjeta de Bootstrap con secciones de encabezado y cuerpo apropiadas. El título del bloque aparece en el encabezado de la tarjeta y el contenido en el cuerpo de la tarjeta.
Eliminar el marcado predeterminado del contenedor del bloque
Aplicar el estilo 'Clean Wrapper' para eliminar el HTML predeterminado del contenedor de bloque de Drupal, útil cuando se integra con frameworks CSS o cuando el marcado predeterminado del bloque entra en conflicto con el diseño de tu tema.
Agregar clases CSS personalizadas a los bloques
Sin cambiar las plantillas, agregar clases CSS personalizadas al elemento contenedor de cualquier bloque a través del formulario de configuración del bloque. Útil para aplicar clases de utilidad, estilos personalizados o clases específicas de frameworks.
Crear menús desplegables a partir de bloques
Aplicar el estilo 'Bootstrap Dropdown' a bloques de navegación o contenido para mostrarlos como menús desplegables activados por un clic de botón. El desplegable permanece abierto al hacer clic dentro de él, permitiendo contenido interactivo.
Tips
- Usa el estilo 'Clean Wrapper' cuando necesites control total sobre el marcado del bloque sin los elementos contenedores predeterminados de Drupal
- Para que los estilos de Bootstrap funcionen correctamente, tu tema debe incluir el framework Bootstrap
- Las clases CSS personalizadas agregadas a través de Block Styles se aplican al elemento contenedor más externo del bloque
- El campo de texto del botón utiliza por defecto la etiqueta configurada del bloque si se deja vacío
- Los ajustes de estilo se almacenan como entidades de configuración y pueden exportarse/importarse con Configuration Management de Drupal
- Se pueden agregar nuevos estilos mediante módulos o temas a través del sistema de plugins de Styles API sin modificar Block Styles
Technical Details
Hooks 3
hook_theme_suggestions_block_alter
Agrega la plantilla de estilo seleccionada como sugerencia de tema para los bloques
hook_preprocess_block
Agrega clases CSS y variables de texto de botón a las plantillas de bloque
hook_form_block_form_alter
Agrega el conjunto de campos de Block Styles a los formularios de configuración de bloques
Troubleshooting 4
Asegúrate de que tu tema incluya las bibliotecas CSS y JavaScript de Bootstrap. El submódulo block_styles_bootstrap solo proporciona plantillas que usan marcado de Bootstrap - no incluye el framework Bootstrap en sí.
Asegúrate de que el módulo Styles API esté instalado y habilitado. Block Styles requiere Styles API para descubrir los plugins de estilo disponibles.
Los estilos específicos del tema solo se aplican cuando ese tema está activo. Si un estilo es proporcionado por un tema específico, no aparecerá ni funcionará cuando se use un tema diferente.
El campo de texto del botón solo aparece para estilos que tienen 'extras.label' habilitado en su definición. No todos los estilos soportan texto de botón personalizado.