>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3497990. --> Reported by: [wim leers](https://www.drupal.org/user/99777) >>> <h3 id="overview">Overview</h3> <h4>For the <code>sdc</code> <code>ComponentSource</code> plugin</h4> <p>When a component is placed it is assumed that it contains at least some HTML, which is wrapped in comments and has a data attribute attached so the XB UI can manipulate it.</p> <p>However, it is not mandatory for components to output any HTML at all, e.g. if the component contains defensive code such as</p> <div class="codeblock"> <pre><span style="color: #000000"><span style="color: #0000BB">&lt;?php<br></span><span style="color: #007700">{% if </span><span style="color: #0000BB">image </span><span style="color: #007700">and </span><span style="color: #0000BB">image</span><span style="color: #007700">.</span><span style="color: #0000BB">src </span><span style="color: #007700">%}<br>&nbsp; &lt;</span><span style="color: #0000BB">img src</span><span style="color: #007700">=</span><span style="color: #DD0000">"{{ image.src }}" </span><span style="color: #0000BB">alt</span><span style="color: #007700">=</span><span style="color: #DD0000">"{{ image.alt }}" </span><span style="color: #007700">/&gt;<br>{% endif %}<br></span><span style="color: #0000BB">?&gt;</span></span></pre></div> <p>It is also possible for a component to output text, but not HTML.</p> <h4>For the <code>block</code> <code>ComponentSource</code> plugin</h4> <p><span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3497747" title="Status: Closed (fixed)">#3497747: Global regions containing only "dynamically missing blocks" (due to emptiness or access) cause malformed pages</a></span> fixed the incorrect rendering of pages rendered not by the <code>BlockPageVariant</code> but by XB's <code>XbPageVariant</code>, when it is rendering blocks.</p> <p>But, as demonstrated at <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/experience_builder/issues/3497747" title="Status: Closed (fixed)">#3497747: Global regions containing only "dynamically missing blocks" (due to emptiness or access) cause malformed pages</a></span>, a critical bug remains:<br> <img src="https://www.drupal.org/files/issues/2025-01-07/Screenshot%202025-01-07%20at%204.13.20%20PM.png" alt=""></p> <p>This is caused by blocks possibly resulting in an empty render array to render:</p> <pre>&nbsp;&nbsp;&nbsp; $content = $block-&gt;build();<br>&nbsp;&nbsp;&nbsp; if (Element::isEmpty($content)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $content['#access'] = $access;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return $content;<br>&nbsp;&nbsp;&nbsp; }</pre><p>&#128070; Inside XB's <em>preview</em> while editing, the preview is <em>very</em> different from the end result, due to the need to visualize upon hovering component instances in the <q>Layers</q> panel where on the page those component instances are placed.</p> <p>&#128557; Unfortunately, <a href="https://www.figma.com/design/Ps3m4APGHIILsBrm0Uj31N/Experience-Builder?node-id=1754-20330&amp;t=cvtysnl1c3sfqlZV-0">the designs</a> do not provide answers for the highly dynamic <code>Block</code>-sourced <code>Component</code>s: it assumes all component instances in the <q>Layers</q> panel are always visible. That's not true for <em>many</em> Block plugins:</p> <ul> <li>messages block</li> <li>local tasks block</li> <li>local actions block</li> <li>&hellip;</li> </ul> <h3 id="proposed-resolution">Proposed resolution</h3> <p>TBD.</p> <h4>For <code>sdc</code> components</h4> <p>When we are previewing a component that does not contain any HTML tags, detect this special situation and wrap them in a container, so they can still be previewed and manipulated correctly by the UI.</p> <h4>For <code>block</code> components</h4> <p>&#9888;&#65039; This <em>likely</em> requires the use of <code>\Drupal\Core\Plugin\PreviewAwarePluginInterface</code> &mdash; because some blocks only render at all in specific contexts &mdash; for example: the messages block is only visible at all when there's actual messages.</p> <p>See <code>\Drupal\layout_builder\EventSubscriber\BlockComponentRenderArray::onBuildRender()</code> (see also how that uses <code>\Drupal\Core\Render\PreviewFallbackInterface</code>), introduced in <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-7"><a href="https://www.drupal.org/project/drupal/issues/3027653" title="Status: Closed (fixed)">#3027653: Allow block and layout plugins to determine if they are being previewed</a></span> and CR at <a href="https://www.drupal.org/node/3272267">https://www.drupal.org/node/3272267</a>. Note that this will also require core changes, because not all crucial block plugins implement that interface, which is why <span class="drupalorg-gitlab-issue-link project-issue-status-info project-issue-status-13"><a href="https://www.drupal.org/project/drupal/issues/3137995" title="Status: Needs work">#3137995: Can't manage Status Messages block in Layout Builder</a></span> still exists.</p> <p>P.S.: This tangentially relates to <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3491701" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3491701</a></span>, because without that, the preview will not be accurate. Hopefully we can do that at a later time, though.</p> <h3 id="ui-changes">User interface changes</h3> <p>TBD</p> > Related issue: [Issue #3497747](https://www.drupal.org/node/3497747) > Related issue: [Issue #3027653](https://www.drupal.org/node/3027653) > Related issue: [Issue #3137995](https://www.drupal.org/node/3137995) > Related issue: [Issue #3497648](https://www.drupal.org/node/3497648) > Related issue: [Issue #3498248](https://www.drupal.org/node/3498248)