Extra Block Types (EBT): Core
Módulo base para la familia Extra Block Types (EBT), que proporciona tipos de campo compartidos, servicios y opciones de diseño para todos los módulos de bloques EBT.
ebt_core
Instalar
composer require 'drupal/ebt_core:^1.4'
Overview
EBT Core es el módulo fundamental para el ecosistema Extra Block Types (EBT). Proporciona funcionalidad compartida esencial de la que dependen todos los demás módulos de tipos de bloque EBT, incluyendo un tipo de campo personalizado para almacenar configuraciones de bloque, servicios de generación de CSS/JavaScript y una interfaz visual de opciones de diseño.
El módulo ofrece un sistema integral de opciones de diseño que permite a los editores de contenido personalizar la apariencia de los bloques directamente en la interfaz de Layout Builder. Esto incluye controles para margen, borde, relleno, imágenes/videos de fondo con efectos parallax, diseños de borde a borde y anchos de contenedor responsivos. Todas las configuraciones se almacenan usando un tipo de campo personalizado y se renderizan dinámicamente como CSS en línea.
EBT Core también proporciona funciones auxiliares para registrar plantillas en todos los módulos EBT, permitiendo un comportamiento de tema consistente y sugerencias de plantillas para tipos de bloque.
Features
- Tipo de campo personalizado (ebt_settings) para almacenar configuración de bloques en formato serializado
- Interfaz visual de opciones de diseño con UI de modelo de caja anidado para controles de margen, borde y relleno
- Servicio de generación de CSS que convierte configuraciones de diseño en estilos en línea para bloques
- Servicio de generación de JavaScript para efectos parallax y fondos de video de YouTube
- Soporte para imágenes de fondo con múltiples modos de visualización: cover, contain, repeat y parallax
- Soporte para fondos de video de YouTube a través de la biblioteca jquery.mb.YTPlayer
- Opción de diseño de borde a borde para fondos de bloque de ancho completo
- Anchos de contenedor configurables desde xxSmall hasta xxLarge con valores en píxeles personalizables
- Configuración de puntos de interrupción responsivos para móvil, tableta y escritorio
- Configuración de colores primario y secundario para temas consistentes en todos los bloques EBT
- Registro automático de plantillas para todos los módulos EBT instalados
- Sugerencias de plantillas por tipo de bloque para facilitar la personalización del tema
- Integración de selector de color para selección de colores de borde y fondo
- Manejo especial para diseños de borde a borde en el tema Olivero
Use Cases
Creación de secciones hero de ancho completo
Use la opción de borde a borde combinada con una imagen de fondo configurada en modo Cover para crear secciones hero impactantes de ancho completo que abarquen todo el viewport del navegador, independientemente de las restricciones de ancho de contenido predeterminadas del tema.
Construcción de páginas con desplazamiento parallax
Seleccione una imagen de fondo y configure el estilo de imagen de fondo en Parallax para crear efectos de desplazamiento atractivos donde el fondo se mueve a una velocidad diferente que el contenido del primer plano.
Incrustación de fondos de video de YouTube
Agregue un elemento de media de video remoto (URL de YouTube) como fondo para crear fondos de video llamativos que se reproducen automáticamente, en bucle y silenciados detrás del contenido de su bloque.
Estilizado de marca consistente en todos los bloques
Configure los colores primario y secundario en la página de configuración de EBT Core para asegurar que todos los bloques EBT usen colores de marca consistentes para botones y acentos en todo el sitio.
Gestión de contenedores responsivos
Use la configuración de ancho máximo de contenedor en combinación con fondos de borde a borde para crear secciones con fondos de ancho completo pero contenido centrado restringido a anchos específicos.
Espaciado y bordes personalizados de bloques
Use la interfaz visual del modelo de caja para establecer valores precisos de margen, relleno y borde para bloques, permitiendo un control detallado sobre el espaciado y la separación visual entre secciones de contenido.
Tips
- Instale las bibliotecas jQuery ColorPicker, Parallax.js y jquery.mb.YTPlayer en su carpeta /libraries para habilitar todas las funciones de opciones de diseño.
- Use los preajustes de ancho de contenedor de xxSmall a xxLarge de manera consistente en su sitio para un diseño responsivo cohesivo.
- Al usar borde a borde con el tema Olivero, el módulo ajusta automáticamente los márgenes para centrar el contenido correctamente.
- El widget de opciones de diseño usa una interfaz visual del modelo de caja CSS - la caja naranja es el margen, la amarilla es el borde y la verde es el relleno.
- Los módulos de bloques EBT individuales (como EBT Accordion, EBT Carousel, etc.) requieren EBT Core como dependencia y heredan su funcionalidad de opciones de diseño.
- Configure los puntos de interrupción y anchos globales una vez en la configuración de EBT Core en lugar de configurarlos por bloque para mantener consistencia.
- Los videos de fondo de YouTube se silencian y reproducen en bucle automáticamente para su uso como fondos ambientales.
Technical Details
Admin Pages 1
/admin/config/content/ebt-core
Configure los ajustes globales para todos los bloques EBT incluyendo colores primario/secundario, puntos de interrupción responsivos y preajustes de ancho de contenedor. Estos valores sirven como valores predeterminados que pueden ser referenciados por instancias individuales de bloques EBT.
Hooks 6
hook_entity_presave
Corrige un problema donde langcode queda vacío al usar formularios de entidad de tipo de bloque con Paragraphs. Esta solución alternativa aborda un problema conocido del módulo Paragraphs.
hook_theme_registry_alter
Registra dinámicamente plantillas de tema para todos los módulos EBT habilitados. Crea sugerencias de plantillas para paragraphs, bloques en línea, contenido de bloque y campos basándose en las convenciones de nomenclatura de módulos EBT.
hook_theme_suggestions_block_alter
Agrega sugerencias de plantillas por tipo de bloque para entidades de contenido de bloque. Permite plantillas de tema basadas en el bundle del bloque y el modo de vista.
hook_theme
Registra el hook de tema ebt_settings_default para renderizar la salida del campo de configuraciones EBT.
hook_preprocess_block
Preprocesa bloques EBT para inyectar estilos CSS en línea y adjuntar bibliotecas JavaScript para parallax y fondos de video de YouTube. Agrega clases CSS para configuraciones de borde a borde y ancho de contenedor.
hook_block_content_view
Pasa las opciones del bloque EBT a JavaScript mediante drupalSettings para funcionalidad del lado del cliente. Adjunta configuración específica del bloque usando IDs de revisión y UUIDs para identificación única.
Troubleshooting 5
Cree un tipo de media Image antes de instalar EBT Core. Navegue a Estructura > Tipos de media > Agregar tipo de media y cree un tipo de media con la fuente 'Image'.
Deshabilite Layout Builder para mostrar campos de tipo de bloque navegando a la configuración de visualización del tipo de bloque (ej., /admin/structure/block/block-content/manage/ebt_cta/display/default) y deshabilitando la opción de Layout Builder.
Asegúrese de que la biblioteca jQuery ColorPicker esté instalada en /libraries/jquery-colorpicker. Descárguela del repositorio enlazado en ebt_core.libraries.yml.
Verifique que la biblioteca parallax.js esté instalada en /libraries/parallaxjs. La biblioteca debe estar ubicada en /libraries/parallaxjs/parallax.min.js.
Instale la biblioteca jquery.mb.YTPlayer en /libraries/jquery-mb-ytplayer. Asegúrese de que el bloque tenga un elemento .bg-inner para que el reproductor se adjunte.