>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3491701. --> Reported by: [wim leers](https://www.drupal.org/user/99777) >>> <h3 id="overview">Overview</h3> <p>@lauriii observed this:</p> <blockquote><p> It looks like the XB preview is now showing global regions but the actual main content is slightly different between the real site and XB. Is there still an additional step needed to render the node content using the display mode? FWIW, if this is difficult to do, it would be fine to handle this in a follow-up issue.</p> <p>XB:<br> <img src="https://www.drupal.org/files/issues/2024-11-28/Screenshot%202024-11-28%20at%202.43.12%E2%80%AFPM.png" alt=""></p> <p>Actual page:<br> <img src="https://www.drupal.org/files/issues/2024-11-28/Screenshot%202024-11-28%20at%202.43.23%E2%80%AFPM.png" alt=""> </p></blockquote> <p>&mdash; <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489302" title="Status: Closed (fixed)">#3489302: Preview entire page not just content area</a></span></p> <p>Root cause analysis by @Wim Leers:</p> <blockquote><p> That's because this MR is <em>not</em> rendering the main content block <code>\Drupal\system\Plugin\Block\SystemMainBlock</code>. This MR pretends the component tree for the current <code>Node</code> or <code>Page</code> <em>is</em> the main content, and then lets that "main content" be decorated by blocks &mdash; i.e. it still uses <code>BlockPageVariant</code>.</p> <p>This <em>is</em> good enough for the <code>Page</code> entity introduced by <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3482259" title="Status: Closed (fixed)">#3482259: Landing page integration: new content entity type for unstructured content</a></span>, because <code>\Drupal\experience_builder\Entity\PageViewBuilder::alterBuild()</code> <em>only</em> renders the component tree. </p></blockquote> <p>&mdash; <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489302" title="Status: Closed (fixed)">#3489302: Preview entire page not just content area</a></span></p> <p>Updating <code>ApiPreviewController</code> like that was out of scope in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489302" title="Status: Closed (fixed)">#3489302: Preview entire page not just content area</a></span>, this issue is the place to do that.</p> <h3 id="proposed-resolution">Proposed resolution</h3> <p>Proposal by @Wim Leers</p> <blockquote><p> For <code>Node</code> (and other content entities, and actually when editing the <code>PageTemplate</code> and looking at an arbitrary route), we need to reuse the original route (for editing a content entity that'd be its <code>$content_entity-&gt;toUrl('canonical')</code> route/link template) but replace/override/intercept the route parameter with one that reflects the values in the XB UI of the XB field (the component tree) and all other fields.</p> <ul> <li>For content entities being edited through XB that means calling the controller with an <code>EntityInterface</code> object with all field values dynamically overridden compared to the saved (published) values. (For <code>Node</code>: <code>\Drupal\node\Controller\NodeViewController::view()</code> with a <code>NodeInterface</code> object.) </li><li>For arbitrary routes viewed in XB (to edit the regions for the active theme's <code>PageTemplate</code> &mdash; see <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489899" title="Status: Closed (fixed)">#3489899: Add support for global regions</a></span>), we don't need to do anything: it'd just be pass-through. </li></ul> </blockquote> <p>&mdash; <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489302" title="Status: Closed (fixed)">#3489302: Preview entire page not just content area</a></span></p> <h3 id="ui-changes">User interface changes</h3> <ul> <li>When editing a <code>Page</code> content entity in the XB UI: zero visual changes</li> <li>When editing a <code>Node</code> content entity in the XB UI: the preview in the XB UI (first screenshot in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3489302" title="Status: Closed (fixed)">#3489302: Preview entire page not just content area</a></span>) looks <em>exactly</em> like the actual page (second screenshot in that same comment). IOW: the entire <code>node.html.twig</code> template shows up, including the author, "submitted by PERSON on DATE", the comments list and comment form.</li> <li><strong>&#9888;&#65039; Ideally, but may be postponed to a follow-up, because it ties into product requirement <a href="https://docs.google.com/spreadsheets/d/1OpETAzprh6DWjpTsZG55LWgldWV_D8jNe9AM73jNaZo/edit?gid=1721130122#gid=1721130122&amp;range=B29"><code>18. Navigate between layers</code></a>]</strong> the ability to point the XB UI at <em>any</em> route, which on all routes without a content entity without an XB field means that only the <code>PageTemplate</code> is editable and has the necessary affordances in the XB UI. </li> </ul> > Related issue: [Issue #3489302](https://www.drupal.org/node/3489302)