- Issue created by @joshua.boltz
- 🇺🇸United States joshua.boltz
I did come across this which helped, and with minor adjustments, I suited it for my use case and it works.
https://git.drupalcode.org/project/varbase_layout_builder/-/blob/10.1.x/...
Background:
I am using the Layout Builder Modal module alongside LB Claro module for improved Layout Builder functionality.
But what I'm trying to do I think is a core Layout Builder / Ajax issue.
What I want is to render the modal contents (which is the block configuration form of the block that I'm adding into a LB section) using a specific theme.
Currently, when a block is added to the LB UI, it uses my default FE theme to render the blocks, so inside the LB UI they look like what they will look like when they are on the published LB page.
But, I want the modal of the block configuration to render using my active admin theme.
I've looked into patching the Layout Builder Modal to add my admin theme as an option and provide its CSS assets like it does here:
https://git.drupalcode.org/project/layout_builder_modal/-/blob/8.x-1.x/l...
https://git.drupalcode.org/project/layout_builder_modal/-/blob/8.x-1.x/l...
https://git.drupalcode.org/project/layout_builder_modal/-/blob/8.x-1.x/l...
But that felt pretty hacky. And in my attempt, it didn't work anyways, because my admin theme defined CSS classes, but because the rendered form in the modal is not running through the proper preprocessing, it doesn't have the classes on the HTML elements to make the CSS apply.
So, I pivoted and looked into switching the theme using a ThemeNegotiator. It turns out, for the stuff I'm messing with in Layout Builder, that does things via Ajax, I need to use the AjaxBasePageNegotiator.
I can confirm that if I hack core quickly to change line 86 of AjaxBasePageNegotiator to
return 'mycustomadmintheme';
Instead of
return $theme;
It DOES render the block configuration form in the modal and looks great.
BUT, after saving the block, the rendered block in the LB UI seems to be trying to render the blocks through that same admin theme, whereas those should be getting rendered via the default FE theme as it was doing before to mimic how it would render on the published LB page.
It seems like when swapping the theme in this theme negotiator, the ajax page state is holding onto something it shouldn't.
In a perfect world, in my use case, when doing the ajax operations like adding blocks / modal, it would use the admin theme per that AjaxBasePageNegotiator, but once it's past the ajax stuff, the LB UI should still use the default FE theme. I think there's a disconnect somewhere in the ajax page state where the theme is not reset to what it was before the ajax events happened.
IMO, the theme negotiating in AjaxBasePageNegotiator should only be affecting Ajax-related functionality, like the add block, modal, etc., but the theme set via AjaxBasePageNegotiator should not affect non-Ajax based things like the LB UI. I can verify this is happening by debugging the theme currently set in these routes:
layout_builder.overrides.node.view
layout_builder.add_block
layout_builder.update_block
To reproduce with Layout Builder Modal, you can comment out or remove these lines. This will force the block add to use the off-canvas.
https://git.drupalcode.org/project/layout_builder_modal/-/blob/8.x-1.x/l...
https://git.drupalcode.org/project/layout_builder_modal/-/blob/8.x-1.x/l...
Active
11.0 🔥
Last updated
I did come across this which helped, and with minor adjustments, I suited it for my use case and it works.
https://git.drupalcode.org/project/varbase_layout_builder/-/blob/10.1.x/...