Layout Builder iFrame Modal
Renders Layout Builder block and section edit forms inside an iframe using the admin theme, providing complete CSS isolation from the frontend theme.
layout_builder_iframe_modal
Install
composer require 'drupal/layout_builder_iframe_modal:^1.3'
Overview
Layout Builder iFrame Modal addresses a significant challenge with Drupal's Layout Builder: the CSS conflict between frontend themes and admin form elements. By default, Layout Builder renders all edit forms in an off-canvas sidebar while displaying the entire page using the frontend theme. This causes styling issues with complex form elements like tabs, accordions, entity autocomplete, Media Library, or Entity Browser.
This module solves this problem by rendering Layout Builder forms inside an iframe that loads the admin theme. The forms are completely isolated from the frontend theme's CSS, ensuring all form elements work correctly without requiring extensive CSS overrides.
The module works by intercepting Layout Builder dialog requests and replacing them with an iframe that loads the form URL with a special destination parameter. When a form is saved, the iframe redirects to a special page that uses postMessage to communicate with the parent window, triggering a layout rebuild and closing the modal dialog.
Features
- Renders Layout Builder forms in an iframe with complete CSS isolation from the frontend theme
- Uses the site's admin theme for all form rendering, ensuring consistent styling
- Integrates seamlessly with the existing Layout Builder interface without requiring theme modifications
- Automatically closes the modal when blocks are saved successfully
- Preserves scroll position and scrolls back to the previous location after modal closes
- Provides a hidden 'Rebuild layout' action in the layout form for programmatic rebuilds
- Works with Layout Builder Translation (layout_builder_st) module for translated layouts
- Configurable per-route - choose which Layout Builder actions open in iframe modal
- Supports custom routes to extend iframe modal functionality beyond core Layout Builder routes
Use Cases
Complex Block Configuration Forms
When using blocks with complex forms that include tabs, accordions, WYSIWYG editors, or nested fieldsets, the iframe modal ensures these elements render correctly using admin theme styling without CSS conflicts.
Media Library Integration
The Media Library interface requires specific CSS and JavaScript that may conflict with frontend themes. Rendering it inside an iframe with the admin theme ensures the Media Library functions correctly.
Entity Browser Usage
Entity Browser provides a rich UI for selecting entities that depends on admin theme styling. The iframe modal prevents CSS bleeding that could break the Entity Browser interface.
Paragraph Widget Editing
When editing paragraphs or other complex field widgets inside Layout Builder blocks, the iframe modal provides the proper admin theme context for these nested forms.
Multilingual Layout Editing
When using Layout Builder with translated layouts (layout_builder_st module), the iframe modal supports both the translate block and translate inline block routes for consistent editing experience.
Custom Layout Builder Extensions
For contrib or custom modules that add new Layout Builder routes, site builders can add those custom routes to the configuration to have them also open in iframe modal.
Tips
- You can selectively enable routes - if you only want iframe modal for block editing but not section configuration, uncheck the section routes on the settings page
- Custom routes can be added one per line in the settings form to extend iframe modal behavior to contrib module routes
- The module works with both Drupal 10 and 11, automatically handling version-specific rendering differences
- When debugging issues, check the browser console for postMessage events to understand the iframe communication flow
Technical Details
Admin Pages 1
/admin/config/content/layout_builder_iframe_modal
Configure which Layout Builder routes should render their forms inside an iframe modal using the admin theme.
Permissions 1
Hooks 5
hook_theme
Defines two theme hooks: 'lbim_iframe' for rendering the iframe container and 'lbim_redirect' for the redirect page template.
hook_preprocess_html
Preprocesses HTML when on a modal route to remove unnecessary page regions (header, breadcrumb, pre_content, page_top) from the iframe content.
hook_contextual_links_alter
Alters contextual links on blocks to change their dialog type from off-canvas to iframe when the route is configured for iframe modal.
hook_link_alter
Alters links on Layout Builder pages to change dialog links to use iframe rendering when the target route is configured for iframe modal.
hook_form_alter
Alters Layout Builder forms to add a hidden 'Rebuild layout' link that can be triggered programmatically after a successful form submission in the iframe.
Troubleshooting 4
Check the settings page at /admin/config/content/layout_builder_iframe_modal to ensure the desired routes are enabled. Clear all caches after making changes.
This may occur if there's a JavaScript error or if the form submission fails. Check the browser console for errors. Ensure your admin theme is working correctly.
The module removes AJAX handlers from submit buttons. If you have custom code re-adding AJAX handlers, this may cause conflicts. Ensure no other modules are interfering with form submission.
Verify your admin theme is set correctly. The iframe loads the page using the admin theme, so ensure your admin theme properly styles the form elements.
Security Notes 2
- The 'configure layout builder iframe modal' permission is marked as 'restrict access' and should only be granted to trusted administrators
- The iframe uses same-origin communication via postMessage with a specific message format ('LBIM_REDIRECT') for security