Layout Paragraphs Theme Extension

Layout Paragraphs Theme Extension

This module extends the Layout Paragraphs module to allow loading templates and libraries from the site's default theme directly into the Layout Paragraphs builder.

This is based on the community patch from issue #3208180.

Features

• Template Loading: Automatically pulls paragraph.html.twig and paragraph--[type].html.twig templates from the default theme to be used in the Layout Paragraphs editor.
• Additional Templates: Allows specifying extra templates (e.g., node teasers, custom blocks) to be loaded into the builder.
• Library Integration: Optionally attaches a CSS/JS library from the default theme to the Layout Paragraphs builder UI for better visual consistency between the editor and the front-end.
• Drupal Compatibility: Supports Drupal 11 and 12.

Installation

1. Install the module as you would any other Drupal module.
2. Ensure you have layout_paragraphs and paragraphs modules installed and configured.

Usage

1. Navigate to Configuration >Content authoring >Layout Paragraphs >Default Theme (/admin/config/content/layout_paragraphs/default-theme).
2. Display default theme in admin: Check this to enable the extension.
3. Default theme library: Enter the machine name of a library from your default theme (e.g., mytheme/layout-paragraphs-editor) to load its styles/scripts in the builder.
4. Additional templates to load: List any extra template machine names (one per line) that you want the builder to respect from the default theme.
5. Save configuration.
6. Clear caches for theme registry changes to take effect.

CSS Scoping Example

When loading theme styles into the Layout Paragraphs builder, it's often necessary to scope them so they only apply to the builder interface and don't conflict with the admin theme's own styles.

The Layout Paragraphs builder is wrapped in the .lp-builder class. You can use this to scope your theme's CSS:

// In your theme's editor-specific SCSS file:
.lp-builder:not(.is-navigating) {
  // Import your theme's base styles, variables, and mixins.
  @import "variables";
  @import "typography";
  @import "common";

  // Override some styles to better fit the builder UI.
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }

  .lpb-layout {
    padding: 0;
  }

  // Hide contextual links inside the builder to avoid clutter.
  .contextual {
    display: none;
  }

  // Ensure paragraphs are visible even if they have overflow issues.
  .paragraph--type--layout {
    overflow: visible;
  }

  // Reset font size if the admin theme overrides it.
  .js-lpb-ui {
    font-size: 1rem;
  }
}

Once you have created your editor-specific CSS/SCSS file, you should define it as a library in your theme's *.libraries.yml and then enter that library's machine name (e.g., mytheme/layout-paragraphs-editor) in this module's configuration form.

Technical Details

The module works by altering the theme registry (hook_theme_registry_alter) to point specific paragraph templates to the versions found in the site's default theme, even when viewing the site through an administration theme. It also uses a pre-render callback on the layout_paragraphs_builder element to attach the configured library.

🇺🇦

This module is maintained by Ukrainian developers.

Please consider supporting Ukraine in the fight for their freedom and the safety of Europe.