Layout Builder: content preview

slots are not aware that the preview is disabled.

Maybe there is a technical explanation but, in theory only, I am struggling to understand why a slot (so, here, a layout region) need to know if the preview is enabled or not. A layout region can host any renderable, preview or not.

Hi everyone!

I have been testing the content preview issue in Layout Builder a bit.
Test environment:
Drupal 11.0.9, PHP 8.3, UIP2 2.0.x-dev, and theme ui_suite_bootstrap 5.1alpha (not enabled, only installed for components).

What I noticed.
I created a table as a section and also put the table as the content inside another wrapper in a section (e.g. one column). In both, I added wysiwig input as content and in both cases had different behaviors.

1. If we use an extra layout wrapper (e.g. one-column, card, etc.) for the table in section, everything works fine in the Layout Builder.
Disabling the preview mode of the Layout Builder hides the content as expected. Please, look at the screenshots (table-inside-layout--preview-on and table-inside-layout--preview-off) and notice the data attribute "data-layout-update-url" and CSS class "layout-builder__layout". Looks like the Layout Builder adds its JS code to manage DOM and other behaviors. E.g. puts the table inside the "block__content" to show/hide it via preview toggling.

2. If we use a table as a layout, we have the issues described here. Layout Builder sets the data attribute "data-layout-update-url" and CSS class "layout-builder__layout" to the table HTML tag, but it puts the table below other elements of the section. In this case, DOM looks a bit broken. Another interesting thing is to put non-table related tags as a layout beside the (Table row) layout, the preview mode for these layouts works as expected. Please look at the screenshots (table-as-layout--preview-on and table-as-layout--preview-off)

I assume the <table> HTML tag and related tags are causes for this weird behavior in Layout Builder preview mode. As far as I know, manipulation with table tags via CSS and JS is always a tricky task).

At this moment, I am not sure of my next steps to solve the issue. Let's discuss.

Grimreaper, can you have a look?

Hi,

Thanks for the investigations!

Ok, then I think it is due to something that I witnessed too, broken HTML due to the (Layout Builder) block div wrapper (of the table slots) that can't be put inside table tag.

So not something we can act on I guess.

Discussed with @pdureau, this problem is specific to the table HTML tags and there is nothing to do about it.