Layout Builder modal dialog is broken with Drupal 10.1+

I've found this core issue that handles the same issue: to have an admin interface in a content (or front-end theme) page

#2195695: Admin UIs on the front-end are difficult to theme →

After q ver very quick read and some investigation I see the following approaches:

1. Using an iframe: that was the approach of the Overlay module. One of the issues of this approach is the communication between the iframe and the main page, for example when you want live preview (user changes things on the admin UI part and the front-end theme part should be updated)
2. Using { all: initial; }. This resets all properties of the matched elements to its defaults. I guess the idea is to use it in the admin UI container. I'm not sure how to restrict CSS rules from admin theme to the admin UI container and children.
3. Using Cascade layer. This recent CSS functionality allows to play with the priority of CSS rules using layers. I guess this would be used together with the { all: initial; } solution.
4. Using Shadow DOM. This is probably the best approach because AFAIK by default the Shadow DOM isolates the content of the Shadow DOM from the main CSS. Using this, the Admin UI will be placed inside a Shadow DOM with the CSS styles of the admin UI. However, because this isolation, there will be difficulties to send changes done in the admin UI to the front-end main page. For example, creating a section implies clicking in a front-end main page element that will open the admin UI in the shadow dom and then getting back the configuration or changes done in the admin UI to the front-end main page.

I'm not a front-end dev so take what I say with a giant grain of salt. However, I wanted to leave this here as a reminder of others with more knowledge on this area.

I guess probably it is a good idea to follow or even try to push forward the mentioned core issue as it is solving the same issue in a general way. This issue has far more chance of modifying core to, for example, allow CssCollectionOptimizerLazy to support assets of different themes not only the current one.

@tunic about #3 comment, I agree with you that a general approach must be done and must be provided from core. In the meanwhile, we must look for a temporary solution that let us enable CSS /JS aggregation back in sites using vlsuite modal.

Also, I have been struggling trying to process separately additional CSS libraries added by Vlsuite modal so the admin theme is used, but it looked to be a non-ending workaround.

After thinking about it along with @crzdev, I've just made a MR with the following solution: disable aggregation for layout builder administrative pages. In this way, the aggregation will work for the entire site except on page building, where is less priority as it is only used for admins, mostly in desktop.

I feel this is a workaround for a contributed module as CSS /JS aggregation should work at every page. I would like to know also your opinion about whether this is good to have in the module or if a different solution should be done.

In other side, I think having an already working solution is good for sites with css aggregation disabled, so it can be enabled again with guarantees.

Please review, thanks1

Merged, thanks!

I've created ✨ Improve Admin interface in layout editor page Postponed to solve this issue in a general way. I'm closing this because the issue (modal dialog broken) is fixed, although we need a way to mix admin and main themes to remove the workaround.

tunic → credited CRZDEV → .

Crediting also CRZDEV because we discussed the solution with him, thanks!

Automatically closed - issue fixed for 2 weeks with no activity.