Layout Components
A comprehensive extension for Drupal Layout Builder that provides pre-built components, improved UI/UX, live preview capabilities, and extensive customization options for sections and columns.
layoutcomponents
Install
composer require 'drupal/layoutcomponents:^3.0'
composer require 'drupal/layoutcomponents:^4.0'
Overview
Layout Components is a sophisticated module built on top of Drupal's Layout Builder, providing a complete package of components integrated with that system. The module extends the user experience by creating an improved interface that is much more customizable with essential features such as live preview of changes while editing content.
The module provides editors with a series of components already created and available to use out of the box, including text, images, videos, accordions, tabs, timelines, countdowns, and more. For developers, Layout Components offers an API where custom fields can be added while benefiting from all the customization features the module provides.
Layout Components provides 6 types of Bootstrap-based grid layouts (1-6 columns) with the ability to customize backgrounds, colors, borders, spacing, and much more. Editors can add background colors or images with parallax options, configure paddings, add multiple CSS classes and HTML attributes, create section titles with styling, change templates, and set sections to full width.
Features
- Six Bootstrap-based layout templates supporting 1-6 column configurations with flexible column width distributions
- Live preview of changes while editing content in Layout Builder
- Comprehensive section customization including titles, descriptions, background colors/images, parallax effects, and full-width options
- Column customization with individual title styling, background colors, borders, border radius, and padding controls
- 20+ pre-built component block types including text, images, videos, accordions, tabs, timelines, countdowns, cards, buttons, and more
- Clipboard functionality for copying and pasting sections, columns, and blocks
- Fine-grained permission system with dynamic permissions per entity type for sections, columns, and blocks
- Component API for developers to create custom fields with LC styling and functionality
- Drush commands for exporting and importing blocks
- Integration with Slick carousel for carousel sections
- Support for tabs layout within sections
- Color picker with configurable color palette for editors
- Responsive design with Bootstrap XS, SM, MD, LG, XL breakpoint support
- Media library integration for background images and videos
- Custom wrapper element types (div, span, section, article, header, footer, aside, figure)
Use Cases
Building a Marketing Landing Page
Use Layout Components to create an engaging landing page with a full-width hero section featuring a background video, followed by a three-column feature section with cards, a timeline section showcasing company history, and a contact section with social links. Each section can have its own background color, padding, and styling while maintaining consistent Bootstrap-based responsive design.
Creating Tabbed Product Information
Use the Simple Tabs component to create a product page where specifications, reviews, and related products are organized into separate tabs. Each tab content area supports the full Layout Builder experience, allowing complex layouts within each tab.
Building a Team Directory with Accordions
Create a team page using accordion components where each department is a collapsible section. When expanded, each section reveals team member cards with images, titles, and bios arranged in a multi-column layout.
Photo Gallery with Carousel
Use the Slick integration to convert a section containing multiple image blocks into a smooth carousel gallery. Configure autoplay, navigation arrows, and dots for user control.
Event Countdown Page
Create an event page with a countdown timer component showing days, hours, minutes, and seconds until the event. Combine with image components for event posters and text components for event details.
Content Editor Workflow
Empower content editors to build pages without developer assistance using the live preview feature. Editors can add sections, adjust column widths, set background colors, and position blocks while seeing real-time results.
Tips
- Enable only the component submodules you need - each enabled component creates a block type that appears in the block selection dialog
- Configure default section and column styles to match your site's design system, reducing repetitive styling work for editors
- Use the clipboard feature to quickly duplicate complex sections, columns, or blocks across pages
- Take advantage of the responsive column width options to create different layouts at different breakpoints (XS, SM, MD, LG, XL)
- Use the Extra Class and Extra Attributes fields to add custom CSS classes or data attributes for JavaScript interactions
- For performance, only enable lc_slick if you need carousel functionality, as it adds the Slick library dependency
- The folder path setting in General configuration is essential if you plan to use the export/import Drush commands for deployment workflows
Technical Details
Admin Pages 5
/admin/config/layoutcomponents/settings
Configure general settings for Layout Components including the export folder path for blocks and the width of the lateral configuration menu.
/admin/config/layoutcomponents/settings/interface
Configure the visual theme for the Layout Components interface.
/admin/config/layoutcomponents/settings/colors
Configure the color palette available for editors when customizing sections and columns.
/admin/config/layoutcomponents/settings/section
Configure the default styling and behavior settings for Layout Components sections. These defaults will be applied when creating new sections.
/admin/config/layoutcomponents/settings/column
Configure the default styling and behavior settings for Layout Components columns. These defaults will be applied when creating new columns.
Permissions 18
Hooks 3
hook_theme
Defines theme implementations for Layout Components templates.
hook_preprocess_block
Preprocesses block variables for Layout Components blocks.
hook_theme_suggestions_alter
Adds theme suggestions for Layout Components templates.
Drush Commands 3
drush lc:export
Export all Layout Components blocks to JSON files in the configured folder. Exports blocks that are used by Layout Builder displays along with their entity reference revisions (tabs, accordion items, etc.).
drush lc:import
Import Layout Components blocks from JSON files in the configured folder. Deletes existing blocks first, then imports from the JSON files while preserving entity references and translations.
drush lc:delete
Delete all Layout Components blocks that are used by Layout Builder displays. Also removes associated entity reference revision items.
Troubleshooting 6
Ensure your active theme is based on Bootstrap 4 or Bootstrap 5. Layout Components uses Bootstrap's grid system and requires these CSS frameworks to render properly.
Make sure composer-patches is installed and enabled. Add '"enable-patching": true' to the 'extras' section of your composer.json and run 'composer update' to apply the required patches.
The module includes patches for drupal/core and drupal/inline_entity_form. Verify these patches are applied by checking your composer.lock or running 'composer update --dry-run'.
Ensure the lc_commands submodule is enabled along with hal and serialization modules. Verify the export folder path is configured correctly at /admin/config/layoutcomponents/settings and the folder exists and is writable.
Add your hex colors (comma-separated) at /admin/config/layoutcomponents/settings/colors. Format: #ffffff,#000000,#f89456
Layout Components uses dynamic permissions per entity type. Grant the appropriate permissions (create sections, configure blocks, etc.) for each content type at admin/people/permissions.
Security Notes 4
- Layout Components respects Drupal's permission system with fine-grained dynamic permissions per entity type
- Extra Attributes field allows arbitrary HTML attributes - ensure only trusted users have access to configure sections
- Iframe component can embed external content - review permissions carefully to prevent XSS vectors
- Export/Import commands write files to the filesystem - ensure the configured folder has appropriate permissions and is not web-accessible