Layout Builder IPE

Layout Builder IPE provides frontend, in-place editing for Drupal core's Layout Builder. Editors can open Layout Builder directly on an entity's canonical page and preview layout changes using the active frontend theme.

This provides a workflow similar to Panels IPE in Drupal 7 and avoids requiring editors to navigate to a separate Layout tab.

Features

• Displays a Customize action on eligible full-page content entity displays.
• Loads the Layout Builder interface directly into the frontend page.
• Supports content entities with per-entity layout overrides and Page Manager pages using Layout Builder variants.
• Provides AJAX-based save, discard, revert, close-editor, lock, and conflict workflows.
• Opens confirmation and validation messages in accessible modal dialogs.
• Provides a non-destructive Close editor action that preserves the temporary layout.
• Can display a frontend Discard changes action when a temporary layout exists.
• Can hide local tasks and disable the regular Layout page where IPE is active.
• Uses cache-aware, user-specific frontend controls to prevent editing actions from being stored in cached page content.
• Includes an experimental enhanced interface for inserting blocks at specific positions within a section.
• Includes experimental improved change detection that detects stale layout changes while preserving unrelated concurrent content updates.

Editing modes

Layout Builder IPE supports the following editing modes:

• Concurrent editing: Uses Drupal core's shared Layout Builder editing session.
• Non-concurrent editing: Creates a separate temporary layout for each user.
• Content locking: Allows only one user to edit a layout at a time. Authorized users can break an existing lock.

Non-concurrent editing and content locking are mutually exclusive. Switching modes does not delete or merge existing temporary layouts. A draft becomes available again if its original mode is restored before Drupal's temporary storage expires.

Recommended modules

• Gin Layout Builder: Supported with the 1.0 RC releases, 2.x, and 3.x. Layout Builder IPE respects Gin Layout Builder's discard-button setting and can optionally override it.
• Layout Builder Modal: Opens Layout Builder configuration forms in modal dialogs.
• Page Manager: Page Manager 4.x pages using Layout Builder variants can be edited in the frontend theme.

Requirements and configuration

• Drupal core 10.3 or 11.
• The Drupal core Layout Builder module.
• Per-entity layout overrides must be enabled for content entity displays that should use IPE.

Enable Layout Builder IPE for individual view modes on their Manage display pages. Global settings are available at /admin/config/user-interface/layout-builder-ipe. Users must also be granted the applicable Layout Builder IPE permissions.

Upgrading from 1.0.0-rc1

The legacy LayoutBuilderIpeService class, the layout_builder_ipe service ID, and the layout_builder_ipe_service() helper were removed in 1.0.0-rc2.

Custom and contributed code using these APIs must inject the corresponding focused services. See the upgrade guide for the complete replacement mapping.

Known issue with Drupal 10.3

Drupal 10.3 sites using JavaScript aggregation may encounter asset-ordering problems caused by a Drupal core bug. The fix is included in Drupal 10.4, Drupal 11.1, and later releases. Drupal 10.3 sites can use the backport from Drupal core issue #3467860.