Extra Block Types (EBT): Core

Core foundation module for the Extra Block Types (EBT) family, providing shared field types, services, and design options for all EBT block modules.

ebt_core

1,346 sites

drupal.org

layout builder blocks design options page builder responsive background parallax content editing

Drupal 9 Drupal 10 Drupal 11

Install

Drupal 11, 10, 9 v1.4.37

composer require 'drupal/ebt_core:^1.4'

Overview

EBT Core is the foundational module for the Extra Block Types (EBT) ecosystem. It provides essential shared functionality that all other EBT block type modules depend on, including a custom field type for storing block settings, CSS/JavaScript generation services, and a visual design options interface.

The module offers a comprehensive design options system that allows content editors to customize block appearance directly in the Layout Builder interface. This includes controls for margin, border, padding, background images/videos with parallax effects, edge-to-edge layouts, and responsive container widths. All settings are stored using a custom field type and rendered dynamically as inline CSS.

EBT Core also provides helper functions for registering templates across EBT modules, enabling consistent theming behavior and template suggestions for block types.

Features

Custom field type (ebt_settings) for storing block configuration in a serialized format
Visual design options interface with nested box model UI for margin, border, and padding controls
CSS generation service that converts design settings into inline styles for blocks
JavaScript generation service for parallax effects and YouTube video backgrounds
Support for background images with multiple display modes: cover, contain, repeat, and parallax
YouTube video background support through the jquery.mb.YTPlayer library
Edge-to-edge layout option for full-width block backgrounds
Configurable container widths from xxSmall to xxLarge with customizable pixel values
Responsive breakpoints configuration for mobile, tablet, and desktop
Primary and secondary color configuration for consistent theming across EBT blocks
Automatic template registration for all installed EBT modules
Block type template suggestions for easier theme customization
Color picker integration for border and background color selection
Special handling for Olivero theme edge-to-edge layouts

Use Cases

Creating Full-Width Hero Sections

Use the Edge-to-Edge option combined with a background image set to Cover mode to create impactful full-width hero sections that span the entire browser viewport, regardless of the theme's default content width constraints.

Building Parallax Scrolling Pages

Select a background image and set the Background Image Style to Parallax to create engaging scrolling effects where the background moves at a different speed than the foreground content.

Embedding YouTube Video Backgrounds

Add a Remote Video media item (YouTube URL) as the background to create eye-catching video backgrounds that autoplay, loop, and display muted behind your block content.

Consistent Brand Styling Across Blocks

Configure primary and secondary colors in the EBT Core settings page to ensure all EBT blocks use consistent brand colors for buttons and accents throughout the site.

Responsive Container Management

Use the Container Max Width setting in combination with edge-to-edge backgrounds to create sections with full-width backgrounds but centered content constrained to specific widths.

Custom Block Spacing and Borders

Use the visual box model interface to set precise margin, padding, and border values for blocks, allowing fine-tuned control over spacing and visual separation between content sections.

Tips

Install the jQuery ColorPicker, Parallax.js, and jquery.mb.YTPlayer libraries in your /libraries folder to enable all design options features.
Use the xxSmall to xxLarge container width presets consistently across your site for a cohesive responsive design.
When using Edge-to-Edge with the Olivero theme, the module automatically adjusts margins to center content correctly.
The design options widget uses a visual CSS box model interface - the orange box is margin, yellow is border, and green is padding.
Individual EBT block modules (like EBT Accordion, EBT Carousel, etc.) require EBT Core as a dependency and inherit its design options functionality.
Configure global breakpoints and widths once in EBT Core settings rather than setting them per-block for consistency.
Background videos from YouTube are automatically muted and looped for use as ambient backgrounds.

Dependencies

Block Content Required

Media Core Required

Field Group Required Media Library Form API Element Required

Related Projects

Field Group

Integrates with Field Group to provide horizontal tabs UI in the block edit form, organizing EBT settings into collapsible sections.

Media Library Form API Element

Uses the media_library form element type for selecting background images and videos from the Media library.

Paragraphs

Provides compatibility with Paragraphs module including template registration for paragraph types and langcode fix for paragraph entities.

Layout Builder

Designed to work seamlessly with Layout Builder, providing inline CSS and JavaScript for blocks placed via the Layout Builder interface.

Olivero Theme

Includes special CSS handling for edge-to-edge layouts in the Olivero theme to account for its left-aligned content area.

Technical Details

Extra Block Types (EBT) settings /admin/config/content/ebt-core

Configure global settings for all EBT blocks including primary/secondary colors, responsive breakpoints, and container width presets. These values serve as defaults that can be referenced by individual EBT block instances.

hook_entity_presave

Fixes an issue where langcode becomes empty when using block type entity forms with paragraphs. This workaround addresses a known Paragraphs module issue.

hook_theme_registry_alter

Dynamically registers theme templates for all enabled EBT modules. Creates template suggestions for paragraphs, inline blocks, block content, and fields based on EBT module naming conventions.

hook_theme_suggestions_block_alter

Adds block type template suggestions for block content entities. Enables theme templates based on block bundle and view mode.

hook_theme

Registers the ebt_settings_default theme hook for rendering EBT settings field output.

hook_preprocess_block

Preprocesses EBT blocks to inject inline CSS styles and attach JavaScript libraries for parallax and YouTube video backgrounds. Adds CSS classes for edge-to-edge and container width settings.

hook_block_content_view

Passes EBT block options to JavaScript via drupalSettings for client-side functionality. Attaches block-specific configuration using revision IDs and UUIDs for unique identification.

Error during installation: 'The EBT Carousel needs to be created "Image" media type.'

Create an Image media type before installing EBT Core. Navigate to Structure > Media types > Add media type and create a media type with the 'Image' source.

Layout Builder is automatically applied to new EBT block types when Field Layout module is enabled

Disable Layout Builder for displaying block type fields by navigating to the block type display settings (e.g., /admin/structure/block/block-content/manage/ebt_cta/display/default) and disabling the Layout Builder option.

Color picker not appearing for border or background color fields

Ensure the jQuery ColorPicker library is installed in /libraries/jquery-colorpicker. Download from the repository linked in ebt_core.libraries.yml.

Parallax effect not working

Verify the parallax.js library is installed in /libraries/parallaxjs. The library must be placed at /libraries/parallaxjs/parallax.min.js.

YouTube video background not displaying

Install the jquery.mb.YTPlayer library in /libraries/jquery-mb-ytplayer. Ensure the block has a .bg-inner element for the player to attach to.