Provide frontend editing experience for Layout Paragraphs.

Created on 10 April 2021, over 3 years ago
Updated 16 June 2023, over 1 year ago

Problem/Motivation

I am thoroughly enjoying layout paragraphs. Thank you.

Is there a way this could be made to work on the front end, as well with the admin theme. I think it would be dynamite.

My main reason for suggesting this are;

  • Some paragraph types do not look good in an admin theme without extra theming.
  • For content editors, this would provide a great wysiswyg experience.
  • Much closer to a modern page builder experience, such as Wix, Divi and Microsoft Sway.
  • On smaller screens, the admin theme sidebar (meta panel) can hinder the editing experience.

There are low-code Drupal solutions which do provide a frontend experience;

  • Geysir β†’ , as used in the Droopler β†’ distribution. Geysir works well, but does not leverage Drupal core's Layout Discovery.
  • DXPR A feature rich 'paid for' Drupal module, but it's expensive and over complicated for content editors.

In conclusion, more low-code editing tools would be great for Drupal and I think Layout Paragraphs is well placed and has the right ideas.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡¬πŸ‡§United Kingdom mrpauldriver

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • First commit to issue fork.
  • Merge request !1313208180: Display default theme admin form β†’ (Open) created by jckresko
  • Open on Drupal.org β†’
    Core: 10.1.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update over 1 year ago
    Not currently mergeable.
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.1.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update over 1 year ago
    53 pass, 2 fail
  • πŸ‡§πŸ‡·Brazil jckresko

    I've created a Issue fork and made some changes to allow that the field displays the default theme templates and load a library.

    1 - After update with the changes, go to /admin/config/content/layout_paragraphs/default-theme and check the checkbox option.
    2 - Add your default theme library to load js and css. I created a separated styles file includind .lp-builder prepend each style so the styles will be applied on Layout Paragraphs Field only without conflicts.
    Eg: mytheme/admin-library

    I added the hook_theme_registry_alter to change paragraphs item and to add all your paragraphs--type templates too (if there is).
    This modification search for template files inside your custom theme.

    I hope it's useful and can set a path for this to be implemented.

    An alternative that the module already has is to use the Layout Paragraph Builder field formatter on the 'manage display' and add or edit the paragraphs within the default theme.

    Feel free to use, modify and even think it's bad :)

  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.1.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update about 1 year ago
    53 pass, 2 fail
  • First commit to issue fork.
  • πŸ‡ΊπŸ‡ΈUnited States jrb Raleigh-Durham Area, NC, USA

    We're also working on improving the editorial experience here and tried out the MR in #22. It sorta worked for us, but we made a few changes:

    1. In our case, we needed other templates added to the edit page, not just the Paragraph templates. For example, one of our Paragraph types displayed a list of node teasers, but those teasers were displayed using the default node template rather than the one defined in the default site theme. To solve this issue, we added a new "Additional templates to load" setting to the "Default theme" form. Any templates set there will also get added.

    2. To support the new setting field above, we needed to load the theme registry for the default theme. We added a helper function to do this. Having that default theme registry array allowed us to set values like this:

    $theme_registry[$template_name] = $default_theme_registry[$template_name];
    

    This also allowed us to simplify the logic used to add Paragraph templates in the same way. Now, rather than looking at the file system to see what templates exist, we can look directly at the theme registry.

    One caveat here is that we needed to call Drupal\Core\Theme\Registry directly because the default "theme.registry" service only returns data for the *active* theme. The core theme registry class called here is marked as @internal, but we could not figure out any other way to do this.

    3. The MR in #22 will only add the Paragraph templates to the admin theme if you flush the cache while on the node add/edit page due to this code:

    $route_name = \Drupal::routeMatch()->getRouteName();
    $route_is_admin = \Drupal::service('router.admin_context')->isAdminRoute();
    
    // Just do that if the theme is 'admin' and the page is the add or edit node form.
    if($route_is_admin && ($route_name == 'entity.node.edit_form' || $route_name == 'node.add')) {
    

    The issue is that hook_theme_registry_alter() functions are run only when the cache is flushed, not on every page load. So, for this to work, the conditional above must be removed. That will mean that the Paragraph templates are always added to the admin theme which is probably OK. That is how the MR worked in the first place when the cache was flushed from the node add/edit page, but I don't think that will cause any problems.

    I've updated the branch in Git and added a patch.

  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.2.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update 5 months ago
    56 pass, 2 fail
  • πŸ‡ΊπŸ‡ΈUnited States jrb Raleigh-Durham Area, NC, USA

    One caveat here is that we needed to call Drupal\Core\Theme\Registry directly because the default "theme.registry" service only returns data for the *active* theme. The core theme registry class called here is marked as @internal, but we could not figure out any other way to do this.

    Well... The signature for that class' constructor changed in Drupal 10.3! I've updated the code in the issue fork and added a new patch that will make this work with 10.3 and prior versions.

  • Pipeline finished with Failed
    5 months ago
    Total: 921s
    #209017
  • Status changed to Needs review 5 months ago
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.2.x + Environment: PHP 8.1 & MariaDB 10.3.22
    last update 5 months ago
    56 pass, 2 fail
  • πŸ‡ΊπŸ‡ΈUnited States sethhill
  • The last submitted patch, 25: 3208180-25.additional-templates.patch, failed testing. View results β†’
    - codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

  • πŸ‡©πŸ‡ͺGermany eigentor

    Is this patch working in the direction of Layout paragraphs using the frontend CSS for the display of the Layout editing UI?
    I last worked with this module in 2022 and it was my biggest gripe with it that the editing UI was completely unstyled because it did/could not call frontend CSS.
    This was the one area where core Layout Builder was better than Layout Paragraphs.

  • πŸ‡«πŸ‡·France G4MBINI BΓ¨gles

    Could the patch from #25 apply to 2.1.x ?

Production build 0.71.5 2024