Several elements are not rendered inside the content region in the XB preview iframe

Created on 22 April 2025, 29 days ago

Overview

I have noticed that the preview rendered inside the iframe in XB is missing some elements that are present when viewing the live version of the same node.

Screenshot 1 shows the DOM inside the iframe of this simple node in XB.

In this first screenshot, labelled 1 and 2, you can see the .region--content div and the H1 (which is the SDC I have added to the layout.)

Now, look at Screenshot 2. This shows the DOM of the node when viewed by an anon. user.

In this second screenshot I have labelled the same .region--content and H1 tag with 1 and 2. You will see that between the two labelled elements a number of extra elements are rendered.

Finally, in both screenshots, I have drawn a green box around the styles for the H1 tag. In screenshot 1, a number of styles are applied to the H1 tag in error. The selectors for the style .layout--pass--content-medium > * etc use the > direct descendant selector and, in this case, that is the H1 tag. I believe they are intended to be applied to the <article> element that is the direct child of .region--content in screenshot 2. Having them apply to the H1 tag is causing the layout in some cases to be very broken.

Proposed resolution

The HTML structure seen in the live version of the page (screenshot 2) should be present in the XB preview markup (screenshot 1)

User interface changes

šŸ› Bug report
Status

Active

Version

0.0

Component

Page builder

Created by

šŸ‡¬šŸ‡§United Kingdom jessebaker

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

Comments & Activities

  • Issue created by @jessebaker
  • šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

    Just discovered this issue. Will have to investigate this. Self-assigning. But if somebody else wants to investigate: please go ahead! I'll comment again prior to starting to investigate.

  • šŸ‡ŖšŸ‡øSpain penyaskito Seville šŸ’ƒ, Spain šŸ‡ŖšŸ‡ø, UTC+2 šŸ‡ŖšŸ‡ŗ

    olivero/node.html.twig template is not rendered on the XB preview and olivero_preprocess_node is not being triggered.

    That's why you also don't see the "authored by" meta.

  • šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ

    D'oh, of course! Thanks for investigating, @penyaskito!

    šŸ¤” Not sure what to do here. I bet we could try to figure out a way to render the XB component tree inside the node.html.twig template (writing this on phone, can't quickly read node.html.twig to make sure). But … that kinda goes against the spirit/point of XB.

    So, assigning to @lauriii to post his 2 cents about how he expects this to work 😊

  • šŸ‡§šŸ‡ŖBelgium wim leers Ghent šŸ‡§šŸ‡ŖšŸ‡ŖšŸ‡ŗ
  • šŸ‡«šŸ‡®Finland lauriii Finland

    šŸ¤” Not sure what to do here. I bet we could try to figure out a way to render the XB component tree inside the node.html.twig template (writing this on phone, can't quickly read node.html.twig to make sure). But … that kinda goes against the spirit/point of XB.

    Nodes should be rendered using node.html.twig so long as Content Templates are not involved. When a Content Template is defined for Content Type, it would essentially take over the rendering and no longer use node.html.twig. This shouldn't be a massive problem because unless you have defined a Content Template, there aren't any slots to edit in XB.

Production build 0.71.5 2024