Layout Builder +
A drop-in replacement for Drupal's Layout Builder UI that provides an enhanced drag-and-drop page building experience with support for nested layouts and tool-based editing.
lb_plus
Install
composer require 'drupal/lb_plus:^3.5'
composer require 'drupal/lb_plus:^3.3'
Overview
Layout Builder + (LB+) completely replaces the standard Layout Builder user interface with a modern, intuitive drag-and-drop editing experience. The module introduces a toolbar-based approach where users can select from various tools (Place Block, Move, Layout, Configure, Duplicate, and Trash) to interact with page elements.
Key capabilities include support for nested layouts through "Layout Blocks" - custom block types that themselves use Layout Builder, enabling complex page structures with containers inside containers. The module provides a sidebar interface for placing promoted blocks and sections, real-time drag-and-drop reordering of both blocks and sections, and keyboard shortcuts for rapid tool switching.
LB+ is designed to work seamlessly with the frontend theme, displaying the editing UI directly on the page rather than in a separate admin interface. It integrates with the Navigation Plus ecosystem for consistent toolbar behavior and supports contextual menu links for quick block operations.
Features
- Drag-and-drop block placement with visual dropzones for intuitive page building
- Nested layout support via Layout Blocks - blocks that contain their own Layout Builder sections
- Tool-based editing system with 6 tools: Place Block (B), Move (M), Layout (L), Configure (O), Duplicate (D), and Trash (T)
- Keyboard shortcuts for rapid tool switching during editing sessions
- Promoted blocks system allowing administrators to highlight frequently-used blocks for easy access
- Block configuration management with custom icon paths for visual block identification
- Section-level operations including layout changing, configuration, and removal
- Real-time UI updates using AJAX without page reloads
- Default section configuration per entity view display for consistent new section creation
- Block preview toggle and layout outline visualization during editing
- Support for moving field blocks between parent entities and nested layout blocks
- Integration with Field Sample Value module for auto-populated placeholder content
- Contextual menu links on blocks for quick access to configure, duplicate, and remove operations
Use Cases
Building Marketing Landing Pages
Content editors can rapidly build landing pages using the drag-and-drop interface. Select the Place Block tool (B key), drag promoted blocks like Hero, Features, or Testimonials from the sidebar, drop them into position. Use the Layout tool (L key) to change section layouts (1-column for full-width heroes, 3-column for feature grids). Configure each block with the Configure tool (O key) to customize content.
Creating Reusable Page Components with Nested Layouts
For complex page elements like tabbed content or accordion sections, create a Layout Block block type. Enable Layout Builder on its display. When editing pages, place a Layout Block and click to enter its nested editing mode. Build the internal layout independently. The nested content is saved with the parent entity but can be reused by duplicating the block.
Rapid Content Iteration
Use keyboard shortcuts for efficient editing: B to add blocks, M to reposition them, D to duplicate similar sections, O to configure, T to remove unwanted elements. Toggle block preview and layout outlines via the Layout tool settings to see content vs structure views.
Multi-Person Content Team Workflow
Administrators configure default sections and promote commonly-used blocks per content type. Content editors see only the promoted blocks by default, reducing complexity. The 'Other' tab provides access to all available blocks when needed. Custom icons help editors quickly identify block types.
Template-Based Page Creation
With the Section Library submodule, save well-designed sections as templates. When building new pages, open the Section Library tool (S key), drag saved templates onto the page, then customize the content. Save entire page layouts as templates for consistent multi-page structures.
Tips
- Use keyboard shortcuts for faster editing: B (Place Block), M (Move), L (Layout), O (Configure), D (Duplicate), T (Trash), S (Section Library if enabled)
- Toggle 'Layout outlines' in the Layout tool settings to visualize section and region boundaries
- The 'Block preview' toggle lets you see placeholder content vs actual rendered blocks
- Promote your most-used blocks and configure custom icons for quick visual identification
- Use the Field Sample Value module for better control over auto-generated placeholder content
- Configure default sections before allowing content editors to use Layout Builder
- For complex page structures, use Layout Blocks to create reusable nested components
Technical Details
Admin Pages 3
/admin/config/content/layout-builder-plus
Configure global Layout Builder + settings that affect the editing experience across all Layout Builder-enabled content.
/admin/structure/types/manage/{entity}/default-layout-section
Configure the default layout plugin and settings that will be used when new sections are created. This configuration is stored per entity view display (e.g., per content type display).
/admin/structure/types/manage/{entity}/promoted-blocks
Select which blocks should be prominently displayed in the Place Block sidebar for easy access. Promoted blocks appear first while other blocks remain searchable. Custom icon paths can be configured for each promoted block.
Permissions 2
Hooks 4
hook_element_plugin_alter
Alters element plugin definitions to replace the standard layout_builder element with LayoutBuilderPlus.
hook_contextual_links_alter
Removes Layout Builder's default contextual links and replaces them with LB+ versions that support nested layouts. Filters contextual links in nested layouts based on supports_nested_layouts option.
hook_module_implements_alter
Removes layout_builder's entity_presave hook implementation to replace it with LB+ version that properly handles inline block usage in nested layouts.
hook_theme_suggestions_page_alter
Adds a page template suggestion for the nested layout block editing route to hide all page elements except the Layout Builder UI.
Troubleshooting 5
Ensure blocks are promoted at the 'Promoted Blocks' tab for the relevant entity view display. Check that the blocks are available in the Layout Builder context (some blocks have context requirements).
Create a 'Layout Block' block type at /admin/structure/block-content. Remove the body field, enable Layout Builder on its display settings, and configure a default section. The block type must have the layout_builder__layout field.
Field blocks can be moved between parent and nested layouts. The context mapping is automatically adjusted. Other block types may have context requirements that prevent cross-layout movement.
Enable 'Show Block Contextual links' at /admin/config/content/layout-builder-plus. Note that this is disabled by default for a cleaner interface.
Visit the 'Default Layout' tab for the entity view display and select a layout plugin. This is required before sections can be created.
Security Notes 4
- The module respects Drupal's permission system - users need appropriate permissions to edit layouts
- Block placement validates block plugin IDs to prevent injection of invalid blocks
- Database transactions are used for multi-step operations to ensure data integrity
- The nested storage path system encodes section deltas and UUIDs to prevent path manipulation