block__content div is omitted from preview when "Use Experience Builder for page templates in this theme." is enabled

Created on 22 May 2025, 2 months ago

Overview

In Olivero, when the user checks the "Use Experience Builder for page templates in this theme." in the theme settings the page markup is changed:

⬜️ Use Experience Builder for page templates in this theme not enabled:

<main role="main">
    <div class="region region--content grid-full layout--pass--content-medium" id="content">
        <div class="block block-system block-system-main-block" id="block-olivero-content">
            <div class="block__content">

            </div>
        </div>
    </div>
</main>

☑️ Use Experience Builder for page templates in this theme enabled:

<main class="site-main" role="main">
    <div class="region region--content grid-full layout--pass--content-medium" id="content">

    </div>
</main>

This has many nuanced and fairly complex ramifications particularly around styling (in Olivero the CSS is written in such a way that it assumes/requires that the .block-system-main-block div sits inside the layout--pass--content-medium div for example).

Proposed resolution

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 🇧🇪🇪🇺

    I'm not sure I understand why/how yet, because
    \Drupal\experience_builder\Plugin\ExperienceBuilder\ComponentSource\BlockComponent::renderComponent() uses '#theme' => 'block'

    Related: 🐛 Placeholders/#lazy_builder is not supported for block component rendering Active + 🐛 Preview is not accurate for the site branding block Active .

    Needs debugging to determine the root cause. Thanks for the detailed bug report!

  • 🇧🇪Belgium wim leers Ghent 🇧🇪🇪🇺

    D'oh — no, actually — I misinterpreted!

    This is actually similar to 🐛 Enabling XB for managing page template breaks Olivero header Active , and there's nothing we can do about this.

    The reason is essentially the same as #3505629-2: [upstream] Olivero's header works only correctly when using the "block" page variant :

    • Drupal core's BlockPageVariant renders the contents of block plugins with an extra wrapper: that's what block.html.twig is about, and that's where <div class="block__content"> is coming from
    • XB is rendering all block plugins as-is, without adding more wrappers.

    We could avoid this by doing something like core's \Drupal\block\BlockViewBuilder::preRender(), which is the "view builder" for the Block config entity type (which is IRRELEVANT/NON-EXISTENT when using XB!) that is responsible for this, see:

          // Place the $content returned by the block plugin into a 'content' child
          // element, as a way to allow the plugin to have complete control of its
          // properties and rendering (for instance, its own #theme) without
          // conflicting with the properties used above, or alternate ones used by
          // alternate block rendering approaches in contrib (for instance, Panels).
          // However, the use of a child element is an implementation detail of this
          // particular block rendering approach. Semantically, the content returned
          // by the plugin "is the" block, and in particular, #attributes and
          // #contextual_links is information about the *entire* block. Therefore,
          // we must move these properties from $content and merge them into the
          // top-level element.
    
Production build 0.71.5 2024